AI 生成的设计现在扎堆在三种「默认脸」里：暖米色背景 + 衬线大标题 + 陶土色点缀；近黑背景 + 单颗酸绿或朱红强调；报章式细线版式 + 零圆角 + 密排新闻栏。Anthropic 官方的 Frontend Design Skill 就是冲着这三个默认答案来的——它要求你像小型工作室的设计总监一样，为每个项目做出「换谁都认不出是别人家」的视觉身份。
核心方法：先扎根主题，再两轮过稿
- 扎根主题：brief 没钉死时自己钉——明确一个具体主题、它的受众、页面唯一的任务；设计的差异化来自主题自身世界的材料、工具、语汇，不是装饰套路
- 第一轮：设计计划——先出紧凑 token 系统：4-6 个命名十六进制色的色板、2+ 个角色的字体（有性格的展示字体 + 互补正文 + 工具字体）、一个布局概念（一句话 + ASCII 线框）、一个签名元素
- 对照 brief 复查：任何读起来像「对任何项目都能套」的部分都要改，并说明改了哪里、为什么
- 第二轮：构建后自评——截图看效果，只把大胆用在一个签名元素上，其余保持安静与克制；砍掉不服务 brief 的装饰
设计纪律：克制与大气的平衡
Hero 是一篇论文的论点：用主题世界里最有代表性的东西开场（大标题/图/动画/实时 demo/交互瞬间），而不是「大数字+小标签+渐变强调」这个模板答案。排版承担页面的个性：展示与正文字体要有意搭配，不是任何项目都抓的那几个熟脸。结构是信息：编号、分隔线、标签要编码内容的真实关系，而不是装饰——「01/02/03」只有在内容真的是序列时才合适。
动效要克制：精心编排的一个瞬间，比散落一堆特效更打动人；有时少即是多。匹配复杂度与愿景：极繁方向要精致执行，极简方向要精确到间距与细节。
典型使用场景
- 产品落地页：给新产品做有辨识度的首屏与视觉系统，拒绝模板味
- 界面重塑：对现有 UI 做设计升级，从配色到字体到布局给出一致的视觉语言
- 品牌一致性：为公司建可复用的 token 系统，让后续页面保持同一套视觉身份
使用方法与下载
Claude Code 用户：将 skills/frontend-design 放入项目的 .claude/skills/ 即可；需要做界面设计时自然语言描述 brief，Agent 按「规划 → 自评 → 构建 → 再自评」流程执行。完整代码见 GitHub 官方仓库。
其他 Agent 用户：遵循标准 SKILL.md 约定。官方文档见 Anthropic Agent Skills 文档。
相关资源
视觉与内容创作类 Skill 互补：diagram-maker 负责架构与流程图，本 Skill 负责界面视觉；PPT 生成（pptx） 负责演示视觉。
---