Frontend-design Skill (让 AI 产出有辨识度的 UI 的设计技能)
1. 定义
frontend-design 是 Anthropic 官方的 Claude Code 技能（plugin skill），作用是：在构建新 UI 或重塑旧 UI 时，引导模型做出有独特观点、不像模板默认值的视觉设计。它不生成代码模板，而是一套”设计负责人”的思维框架 + 自检清单，塞进模型的前端工作流里。
一句话：它是给 AI 的”设计师之眼”——教模型像小工作室的设计主管一样，为每个项目做经过推敲的、有主见的配色/字体/布局选择，而不是吐出千篇一律的”AI 味”页面。
2. 核心理念：你是设计负责人
技能的开场设定很关键——“把自己当成一家以’每个客户都长不一样’闻名的小工作室的设计主管”。客户已经拒绝过模板感方案，付钱买的是独特观点：
- 为每个 brief 做具体、有主见的选择（palette / typography / layout 都针对这个需求定制）。
- 敢冒一个你能 justify 的审美风险（take one real aesthetic risk you can justify）。
- 扎根于主题本身：brief 没定死产品/主体，就先自己定——一个具体主体、它的受众、页面唯一任务，并明说你的选择。主体的”世界”（材料、工具、行话、器物）才是独特选择的来源。
这呼应
skills.md：Skill 是”指导 Agent 如何更好完成某类任务的 Markdown + 规则”，frontend-design 就是把”好设计的判断力”固化成 Skill，按需加载进上下文。
3. 设计原则（要点）
| 原则 | 含义 |
|---|---|
| 扎根主体（Ground it） | 用主体真实世界的内容与物料做设计，而非通用占位；有记忆时复用用户偏好/过往设计 |
| 排版即个性（Typography） | 刻意搭配 display + body 字体（不是随手用的那套），建立清晰字阶；让字体处理本身成为记忆点 |
| 结构即信息（Structure） | 编号/眉头/分隔线/标签要编码真实含义，不是装饰——01/02/03 仅当内容真是有序流程时才用 |
| 克制用动效（Motion） | 动效服务于主题（载入序列 / 滚动揭示 / hover 微交互 / 氛围）；编排过的瞬间 > 散落特效；过多动效反而显 AI 味 |
| 复杂度匹配愿景 | 极繁要精雕细琢，极简要间距/字体/细节精准；优雅 = 把选定方向执行好 |
| 文案也是设计材料 | 文案能像设计一样显模板感，需同样刻意（见 §6） |
4. 工作流程：计划 → 批判 → 构建 → 再批判
技能强制两遍法，且大量规划放在”思考”里，只在高置信度时给用户看。
第一遍：拟定设计计划（token 系统）
- Color：4–6 个带名字的 hex 值（如
Ink #1A1A1A / Paper #F4F1EA / Ember #C8553D）。 - Type：2+ 角色字体——有性格的 display（克制使用）+ 互补 body + 必要的 utility（说明/数据）。
- Layout：用一句话描述 + ASCII wireframe 构思并比较。
- Signature：这页被人记住的那一个独特元素，恰当地体现 brief。
第二遍：先批判计划，再写码
- 拿计划对照 brief：哪部分读起来像”对任何类似页面都会产出的通用默认”，而非”为这个 brief 做的选择” → 改掉，并说明改了什么、为什么。
- 确认相对独特后才开始写代码，严格按修订后的计划推导每一个颜色/字体决策。
- CSS 特异性警告：小心
.section（类型选择器）和.cta（元素选择器）互相抵消，padding/margin 最常中招。 - 边建边自检：环境支持就截图（“一图胜千词”）；遵循质量底线不张扬——移动端响应式、键盘焦点可见、尊重
prefers-reduced-motion。
克制与自我批判：把”大胆”只花在一处（signature 元素），其余安静守纪律；凡不服务 brief 的装饰都砍掉（“出门前照镜子，摘掉一件配饰”）。
5. 怎么避开”AI 味”：三种默认风格
当前 AI 生成设计会扎堆在三种”默认长相”——合法但不该无脑用，brief 没指定时就别把自由浪费在它们上：
| 默认风格 | 特征 | 何时可用 |
|---|---|---|
| 暖奶油 + 高对比衬线 + 陶土色 | 近 #F4F1EA 背景、serif 大标题、terracotta 点缀 | brief 真要这种温润感 |
| 近黑底 + 单一荧光强调 | 近黑背景 + 一个 acid-green / vermilion 亮色 | brief 要暗色高对比 |
| 大报风 | 发丝分隔线、零圆角、密排报纸栏 | brief 要编辑/报刊气质 |
铁律：brief 自己的话永远赢——包括当它明确要求这三种之一时，严格照做。自由轴才用来避开默认。
6. 文案/写作原则（常被忽略的”模板感”来源）
- 文字出现在设计里只为让人更容易理解、更容易用，是设计材料不是装饰。
- 从屏幕另一端的人写起：按人能掌控/认出的东西命名，绝不按系统内部构造——人管的是”通知”，不是”webhook 配置”。
- 主动语态默认：按钮说清按下发生什么（“Save changes” 而非 “Submit”）；动作名贯穿全流程一致（“Publish” 按钮 → “Published” 提示）。
- 失败与空态是引导时刻，不是情绪：说明错在哪、怎么修，用界面口吻而非拟人；错误不道歉、不模糊；空屏是行动邀请。
- 语体平实、句子大小写、无废话，语气贴合品牌与受众；每个元素只干一件事。
7. 怎么用（最小说明）
- 它是 Claude Code 的官方内置/可安装 skill（社区安装量极大）；当你让 Claude “做个页面 / 重做 UI” 时，它会自动套用上述原则。
- 在 OpenClaw 这类同样用 Skills 机制的框架里，也可装一个 frontend-design 类 Skill（经 ClawHub，见
skills.md与openclaw.md），机制相通。 - 你（人）要做的不是写命令，而是给清 brief：主体是什么、受众、页面唯一任务、想要/想避的风格——其余交给 Skill 的规划与自检。
8. 常见误区
- ❌ “它是个 UI 代码生成器” → 错。它是一套设计判断框架，产出的是”有观点的设计 + 按计划的代码”，不是固定模板。
- ❌ “AI 做设计就是要这三种网红风” → 奶油+衬线、暗色荧光、大报风只是默认扎堆，brief 不指定就该避开（§5）。
- ❌ “动效越多越高级” → 散落特效反而显 AI 味；编排过的瞬间 > 堆特效，有时少即是多。
- ❌ “编号 01/02/03 显专业” → 仅当内容真是序列（流程/时间线）才用，否则只是装饰。
- ❌ “文案随便填占位” → 文案和配色一样会露模板感；要从用户视角、主动语态、一致命名。
- ❌ “主体随便，AI 会编” → 不先定主体就设计，结果必然通用；扎根主题是独特性的来源（§2）。
9. 延伸阅读 / 关联概念
skills.md— Skill 的通用机制：Markdown 指导 + 按需加载；frontend-design 是”把设计判断力固化为 Skill”的实例openclaw.md— OpenClaw 同样用 Skills（ClawHub 安装），可装入 frontend-design 类 Skillagent_harness.md— Skill 由 harness 在运行时按需注入 System Promptweb/（静态 vs 动态网页等）— 落到实现层的 Web 概念（本笔记聚焦”设计判断”，不展开 HTML/CSS 细节）