frontend-design Skill

概述

Anthropic 官方开发的前端设计技能，用于引导 AI 生成具有高质量设计的独特前端界面，避免 AI 生成的界面同质化问题。

关键内容

1. 设计思考框架：
2. Purpose（目的）：明确界面解决的问题和目标用户
3. Tone（调性）：从多种美学方向中选择一个极端方向彻底执行
4. Constraints（约束）：处理技术、性能、无障碍等边界条件

5. Differentiation（差异化）：寻找设计的记忆锚点

6. 五大设计维度：

7. Typography（字体排印）：避免 Inter/Roboto 等系统字体，选择独特字体组合
8. Color & Theme（色彩与主题）：使用 CSS 变量管理调色板，采用主色调+锐利对比色
9. Motion（动效）：多层次动效策略，包括页面加载、悬停、滚动触发、微交互
10. Spatial Composition（空间构成）：打破常规布局，采用全出血、不对称、叠加等创新构成

11. Backgrounds & Visual Details（背景与视觉细节）：避免纯色背景，创造氛围与深度

12. 实现要求：

13. Production-grade：完整实现交互逻辑，处理各种状态
14. Cohesive：使用统一设计系统
15. Complexity Matching：实现复杂度与美学愿景匹配

来源

• Anthropic 官方 frontend-design Skill 深度解析 — 官方技能文档

相关

• Anthropic — 开发者
• Claude Code — 应用平台
• AI Slop — 解决的问题
• React — 支持的技术栈