frontend-design

上游 SKILL.md 要求把角色当成小型设计工作室的设计负责人：客户已拒绝「模板感」方案，需要针对题材做有观点的配色、字体与布局，并承担一次可解释的美学风险。设计必须先锚定具体题材、受众与页面单一任务；英雄区应是题材世界里最有辨识度的东西，而不是「大数字+小标签+渐变」的默认模板。排版要承载个性；结构装置（编号、眉题、分割线）须编码真实信息结构。上游明确点名三类 AI 默认审美（奶油底+衬线+陶土色、近黑+荧光点缀、报纸细线密栏）——除非 brief 明确要求，否则不要把自由度浪费在这些默认上。

Anthropic 公开 skills 仓库中的 frontend-design：强调从题材出发定调色、字体与布局，避免 AI 默认套路审美。

• 落地页 / 营销页视觉方向
• 避免「一眼 AI 生成」的默认审美
• Claude / Cursor 等兼容 Agent 做前端改版
• 需要从题材世界提取材料、器物与语汇来定调
• 要求展示字体与正文字体成对、有记忆点

• 已有严格设计系统 / Figma token，只需像素级还原时（应跟设计系统而非自由发挥）。
• 纯后端、数据管道、无 UI 任务。
• 用户明确要求「尽量普通、企业默认风」且拒绝任何美学风险时。

1. 安装本 Skill（命令见下）到 Cursor / Claude 等兼容环境。
2. 在改版或新页面任务开始前显式加载 / 提及 frontend-design。
3. 先产出简短设计计划：色板 4–6 色、展示/正文字体、布局概念、签名元素。
4. 对照 brief 自检是否落入 AI 默认三套路，再写代码。
5. 构建中做一次自我评审（含移动端与减少动态）。

• Cursor
• Claude Code
• Codex
• GitHub Copilot
• Windsurf
• Gemini CLI
• 其他兼容 skills CLI 的 Agent

以 skills.sh「Available for these agents」所示生态为准；具体宿主是否已接入以各客户端文档为准。

作者 anthropics ↗ · skills.sh anthropics/skills/frontend-design ↗

• 先锚定题材、受众、页面单一 job，再设计。
• 两遍流程：先 compact token 计划（色/字/布局/签名）→ 对照 brief 修订 → 再写代码。
• 文案同属设计材料：从用户侧命名，主动语，失败态要可行动。

• web-design-guidelines
• vercel-react-best-practices

• SKILL.md（GitHub） ↗
• anthropics/skills ↗
• skills.sh ↗