frontend-design
创建独具特色的前端界面
通用界面会让产品显得未完成且难以被记住。此技能指导 Claude、Codex 和 Claude Code 构建更精致、视觉方向更鲜明的前端设计。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/92bilal26-frontend-design.md and its manifest at https://skillstore.io/api/skills/92bilal26-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-design”。 为一家精品建筑工作室创建首页。
预期结果:
一个响应式首页，具备编辑风格排版、非对称图片布局、克制的动效、项目亮点和精致的联系区。
正在使用“frontend-design”。 改进一个平淡的分析仪表盘。
预期结果:
- 更强的布局和更清晰的数据层级。
- 更有意图的色彩系统和排版搭配。
- 让关键指标更易浏览的交互状态。
正在使用“frontend-design”。 构建一个移动优先的活动页面。
预期结果:
一个紧凑的活动体验，具备醒目的时间和地点呈现、富有氛围的视觉效果、清晰的行动号召以及精致的响应式行为。
安全审计
安全The three static system reconnaissance findings are false positives in frontend design guidance. No prompt injection, data exfiltration intent, command execution, network access, or filesystem access was found in the reviewed files.
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/92bilal26-frontend-design/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/92bilal26-frontend-design?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/92bilal26-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/92bilal26-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/92bilal26-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
92Bilal26. (2026). frontend-design security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/92bilal26-frontend-design/audits/6BibTeX 引用
@techreport{92bilal26-92bilal26-frontend-design-2026,
author = {92Bilal26},
title = {frontend-design security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/92bilal26-frontend-design/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "92Bilal26"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/92bilal26-frontend-design/audits/6"
identifiers:
- type: other
value: "skillstore:92bilal26-frontend-design:audit:6"
description: "Skillstore immutable audit report identifier"
比较变体
18 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
atman36-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-09-09
Skillstore 评分
评分依据 证据置信度: 高你能构建什么
构建产品仪表盘
创建一个精致的仪表盘界面，具备令人印象深刻的布局、考究的间距和有用的视觉层级。
设计营销页面
将产品概念转化为一个独具特色的页面，具备鲜明的排版、色彩、动效和氛围。
改进现有 UI
将通用组件或页面优化为更具一致性且视觉意图更明确的体验。
试试这些提示
使用此技能为现代 SaaS 产品设计并实现一个价格卡片组件。包含响应式样式和清晰的视觉层级。
使用此技能为设计分析工具创建一个落地页。选择大胆的视觉方向，并实现完整的响应式页面。
使用此技能重新设计我当前的设置页面。保留相同功能，但改进排版、间距、色彩和交互精致度。
使用此技能为创意团队构建项目管理工作区。包含密集任务数据、独特导航、动效和可访问的响应式状态。
最佳实践
- 在请求实现之前，提供产品目的、受众、技术栈和品牌约束。
- 在同一请求中说明响应式状态、可访问性期望和交互细节。
- 在接受大胆设计选择之前，根据真实产品上下文审查生成的视觉效果。
避免
- 不要在没有产品上下文或受众细节的情况下请求通用的现代页面。
- 不要将此技能用作安全性、可访问性或性能审查的替代品。
- 当产品需要克制时，不要强行把每个项目都做成极繁主义视觉风格。