frontend-design

frontend-design

改编自 Anthropic 为 OpenDesign 提供的官方 frontend-design skill。

当用户要求构建或改进前端界面时，请使用此技能：例如网站、落地页、仪表盘、应用界面、HTML/CSS 成品、React/Vue/Svelte 组件，或对现有 UI 进行视觉改版。

目标不只是“让它更好看”，而是交付可运行的前端代码，具备鲜明的设计理念、扎实的制作水准，以及足够丰富的产品细节，让成品看起来确实是为用户的实际场景设计的。

工作流

1. 选择视觉风格前，先理解需求。

   • 确定受众、主要任务、领域和情绪基调。
   • 留意技术限制：框架、现有样式、无障碍、性能、导出目标或响应式要求。
   • 如果代码库已有设计令牌、组件、截图或 DESIGN.md，请以其为准。

2. 确定一个具体的美学方向。

   • 选择适合产品的方向：极简粗犷、编辑风、高端奢华、活泼俏皮、工业风、复古未来主义、高密度运营风、沉稳企业风、艺术消费风，或其他明确的方向。
   • 通过字体、间距、色彩、层级、动效和组件形状，将方向具体呈现出来。
   • 避免千篇一律的 AI 默认风格：紫蓝渐变、含糊的玻璃卡片、换个名称就能套用的 SaaS 布局、过度圆润的卡片、成排的素材图标，以及对界面毫无作用的装饰性形状。

3. 设计真实界面，而非占位海报。

   • 包含真实用户所需的控件、空状态/加载状态/错误状态、表格、筛选器、导航和响应式行为。
   • 使用真实可信的内容。如果数据未知，应标注为示例、待定或不可用，而不是编造信息。
   • 让目标用户的工作流保持高效。仪表盘和工具应便于快速浏览，且信息密度足以支持反复使用；营销页面则可以更具表现力。

4. 编写达到生产级水准的前端代码。

   • 优先遵循代码库已有的框架、组件规范、图标、令牌和样式方案。
   • 对于独立成品，除非用户要求使用框架，否则应创建自包含的 HTML/CSS/JS。
   • 使用语义化标记、支持键盘操作的控件、清晰可见的焦点状态、合理的对比度和适当的响应式布局限制。
   • 对重复使用的颜色、间距、阴影和字体大小比例使用 CSS 变量。

5. 打磨视觉表现。

   • 字体：选择富有表现力且易读的字体组合。除非方向有意采用实用主义风格，否则不要把默认系统字体组合作为主要视觉特色。
   • 色彩：创建平衡且职责明确的配色方案。审慎、有目的地使用强调色。
   • 布局：有意识地运用对齐、节奏、密度和留白。避免卡片、面板或标签错位。
   • 动效：为状态变化、内容显现和交互反馈添加有目的的过渡效果。为提升性能，优先使用 transform 和 opacity。
   • 细节：仅在有助于设计概念时使用纹理、边框、阴影、分隔线、媒体和图标。

6. 最终交付前进行自查。

   • 界面在手机和桌面宽度下都能正常使用。
   • 文本适应容器，不会与相邻 UI 重叠。
   • 交互元素具备悬停、焦点、激活和禁用状态。
   • 设计避免明显的 AI 生成视觉套路。
   • 成品应具有一个令人难忘的特点，让用户关闭页面后仍能描述出来。

OpenDesign 集成

当 OpenDesign 提供有效的设计系统时，应将其视为产品的品牌规范。首先遵循注入的颜色、字体、布局和组件指导，再在设计系统未涉及的部分应用此技能的前端制作规范。

当 OpenDesign 注入 typography、color 和 anti-ai-slop 等制作参考时，请在完成前按照这些参考逐项检查。如果用户的品牌指导与通用制作规范冲突，应以用户的品牌指导为准。

来源

• 上游：https://github.com/anthropics/skills/tree/main/skills/frontend-design
• 类别：web-artifacts

许可证

此技能改编自 Anthropic 官方技能仓库。请参阅此文件夹中的 LICENSE.txt，了解上游 Apache-2.0 许可证条款。