frontend-design：让 Agent 有「设计判断力」的官方 Skill 调研

调研日期：2026-09-17 | 数据来源：GitHub API 实测、官方 SKILL.md 全文、LICENSE.txt 原文、WorkBuddy 本地插件市场实机核查
仓库：https://github.com/anthropics/skills ｜ skill 路径：skills/frontend-design/
作者：Anthropic 官方

一句话定位

frontend-design 不是”UI 模板库”，而是一份给 Agent 的「设计判断力」指令集——它不给组件代码，而是给审美方向的决策规则：如何选题、如何选字体、如何砍掉模板化默认值，并点名了 5 类当前 AI 生成设计的”通用脸”（AI slop），要求 Agent 主动避开。

💡 关键认知：它的核心产出是**「设计计划 + 自审流程」**，而不是可直接用的 UI 代码。它把 Agent 放在”设计工作室设计总监”的角色上，先立 token 系统、再对着 brief 自我复盘、最后才写代码。

1. 项目背景

  • 所属仓库：anthropics/skills（Anthropic 官方 Agent Skills 公开仓库）
  • ⭐ 176,814★ · 20,934 fork · 1,237 open issues（2026-09-17 GitHub API 实测）
  • 仓库描述：Public repository for Agent Skills；创建 2025-09-22，最后推送 2026-09-10（活跃）
  • 仓库根目录无 LICENSE，但该 skill 自带 LICENSE.txt（Apache License 2.0）——即「仓库整体许可未声明，单 skill 有明确许可」
  • skill 内容规模：仅 2 个文件——SKILL.md（9,390 字节）+ LICENSE.txt（10,174 字节）。零脚本、零依赖、零资源文件
  • 同仓库其他官方 skill（共 19 个）：canvas-design、theme-factory、web-artifacts-builder、webapp-testing、mcp-builder、skill-creator、docx/pptx/xlsx/pdf、brand-guidelines、algorithmic-art、doc-coauthoring、internal-comms、slack-gif-creator、claude-api、academy-guide、discernment-nudge

作者背景：Anthropic 官方维护，是「Agent Skills」这一开放格式的发起方。该 skill 在第三方注册表（claudeskills.info）长期位居安装量最高的 skill（2026 年初数据约 27.7 万安装），被多个评测归为「与 superpowers 互补而非竞争」——superpowers 管怎么建，它管长什么样。

2. 内容拆解（官方 SKILL.md 全文要点）

2.1 角色设定

开篇即给 Agent 立角色：

“把这个任务当作一家以「给每个客户独特视觉身份」著称的设计工作室的设计总监来处理。这个客户已经拒绝过感觉老套或模板化的提案，并且为独特的观点付费：对调色板、排版、布局做出刻意、有主张的选择，并且在合理时承担审美风险。”

2.2 五大设计原则

原则 官方要点
扎根于主题 brief 未说明产品/主题时必须自行确定并向客户确认；主题的行业、材料、行话才是独特视觉选择的来源——“给 8-11 岁女孩的玩具”与”给金融分析师用的仪表盘”审美必须截然不同
Hero 区 网页设计中被看到的第一件事。用主题世界里最具特征的东西开场；明确警告「大数字 + 小标签 + 辅助统计 + 渐变强调」是默认手法，除非真的是最佳选择否则别用
排版承载个性 字体要刻意选，不用”在任何项目都会顺手抓”的默认字族；建立清晰字阶（引用 The Elements of Typographic Style 的默认指导）；标题字体要作为设计的主动部分，不是内容的中性传送带
视觉结构即信息 轮廓、边框、编号、eyebrow、分隔线等结构装置应当编码有用信息而非装饰；特别点名”01/02/03 编号标记”只在内容真的是序列时才用
动效克制 非用户触发的动效要吝啬而刻意，只为吸引注意力；”每个 section 的 fade-and-slide-up 入场 + 每张卡片 hover 过渡”是通用默认值，读起来就是 AI 生成的

2.3 「AI 味」五类特征清单（本 skill 最有辨识度的部分）

官方明确列出当前 AI 生成设计的聚集特征，作为 Agent 应主动避开的”默认值”：

  1. 暖奶油底（接近 #F4F1EA）+ 高对比衬线标题 + 陶土/暖泥强调色（常接近 #D97757——作者自注这是 Anthropic 自家 Claude 交互强调色，用在用户 brief 上会读作”告密信号”）
  2. 近黑底 + 单一亮酸绿/朱红强调
  3. 大报风格布局：发丝细线、零圆角、密排报纸式分栏
  4. SaaS 卡片套件：内容切成雷同圆角卡片、不论层级都用同一个 border-radius、每张卡下同一个柔和灰阴影（rgba(0,0,0,.1)）、渐变刷作为装饰
  5. 模板化 chrome（不论主题都出现）：每个标题上方加了字距的全大写 eyebrow 标签；用中点连接元信息串（’A · B · C’）；’WORD — fragment’ 式带空格破折号标签；用带色调的近黑（#0B0B0B、#111）代替纯黑；小数据标签用等宽字体；链接和按钮文字后缀 ‘→’

官方补充了一句关键的边界说明：

“所有这些特征对某些 brief 都是正当的，但它们是默认值而非选择，且不论主题都会出现。当 brief 明确了视觉方向时，严格照做——brief 自己的话永远优先，包括它要求上述某种外观时。当 brief 留下某条轴线自由时，不要把这份自由花在这些默认值上。”

2.4 两遍工作法（核心流程）

第一遍——出设计计划：基于 brief 头脑风暴一份紧凑的 token 系统：

  • Color：核心基础调色板写成 4-6 个具名 hex 值
  • Type：字体及其角色
  • Layout：布局概念，用一句话散文描述 + ASCII 线框图来构思与对比，并包含对齐指导（左/中/两端）
  • Principles：让这个页面独特的高层指导

第二遍——对着 brief 复盘，然后才写代码：

“在构建前把这份计划对着 brief 复盘：如果其中任何部分读起来像你为任何类似页面都会产出的通用默认值（拿一个相近的 prompt 走一遍看会不会到达相近的地方），而不是为这个特定 brief 做的选择——改掉那部分，说明你改了什么以及为什么。只有确认了设计计划的相对独特性之后，才应该开始写代码。”

官方还提醒一个具体的技术坑：注意 CSS 选择器特异性——“容易生成互相抵消的 CSS 类（尤其是像 .section 这类基于类型的和 .cta 这类基于元素的），这在区块间 padding/margin 上经常发生”。

2.5 克制与自评

  • “把大胆集中在一个地方”：让一个元素成为记不住的东西，周围保持安静克制，砍掉一切不服务 brief 的装饰
  • 不声张地达到质量底线：响应式到移动端、可见的键盘焦点、尊重 reduced motion、视觉可访问、配色和谐
  • 边建边自评：环境支持就截图审视——“一图胜 1000 token”
  • 引用香奈儿的话：”出门前照镜子，摘掉一件配饰“
  • 建议留个地方快速记下试过的方案，便于未来迭代

2.6 设计中的写作规范（独立且完整的一节）

官方把文案当作设计内容而非装饰，与间距、配色同等对待：

  • 从终端用户视角写：用用户能懂的简单语言命名，不按系统实现命名——“用户管理的是通知，不是 webhook config”
  • 用主动语态：CTA 要说清用它会发生什么——“Save changes” 而非 “Submit”；一个动作在整个流程中保持同名：按钮写 “Publish”，toast 就说 “Published”
  • 失败与空状态是给方向感的时刻，不是情绪：解释哪里出错、怎么修，用界面的声音而非人的声音；错误不道歉，也绝不含糊；空屏是行动的邀请
  • 保持口语化语气：plain verbs、sentence case、无填充词；每个文字元素只干一件事

3. 怎么用 / 安装 / 配置

3.1 安装方式

# 方式一：Agent Skills 通用注册表（跨 harness）
npx -y skills add anthropics/skills --skill frontend-design

# 方式二：手动（skill 无脚本依赖，复制目录即可）
git clone --depth 1 https://github.com/anthropics/skills.git
cp -r anthropics/skills/skills/frontend-design ~/.workbuddy/skills/frontend-design

依赖与配置：无。纯 Markdown（SKILL.md 单文件承载全部逻辑），无 API key、无环境变量、无脚本执行、无网络请求。

3.2 WorkBuddy 内的可用形态（2026-09-17 本地实机核查）

WorkBuddy 的两个官方市场里已存在三个相关 skill，无需手动安装：

形态 位置 作者 说明
frontend-design（官方原版） cb_teams_marketplace → plugins/general-skills/skills/frontend-design CodeBuddy Teams 与 Anthropic 官方同源的 frontend-design；general-skills 插件 v1.0.0 还打包了 markitdown、find-skills、ui-ux-pro-max
frontend-design-pro codebuddy-plugins-official → external_plugins/frontend-design-pro BuildWithClaude Community（davepoon） v1.0.0，MIT。增强版：交互式向导 + 趋势调研 + moodboard 生成 + 配色/字体选择 + 浏览器灵感分析。包含 6 个子 skill：design-wizard、trend-researcher、moodboard-creator、color-curator、typography-selector、inspiration-analyzer
ui-ux-pro-max 同 general-skills 插件内 CodeBuddy Teams 知识库已有专门笔记：AI&开发/前端开发UI设计/ui-ux-pro-max-AI设计智能Skill.md（abbrlink 99041）

⚠️ 版本关系注意：市场里的 frontend-design 由 CodeBuddy Teams 打包分发，非 Anthropic 直发。经比对 SKILL.md，其 frontmatter 与官方原版有差异（description 措辞不同：市场版为 “Create distinctive, production-grade frontend interfaces…”，官方版为 “Guidance for distinctive, intentional visual design…”），属适配改写版而非原文照搬。若需严格对齐官方，建议用 3.1 的方式手动安装官方原版。

3.3 触发方式

描述明确说明触发场景：

“当用户要求构建 web 组件、页面、artifact、海报或应用（示例包括网站、落地页、仪表盘、React 组件、HTML/CSS 布局），或对任何 web UI 做样式/美化时“使用本 skill。

原文前 3 行还写了一行「AI 味」宣战书：“本 skill 指导创作独特、生产级的前端界面，避免通用 ‘AI slop’ 审美。”

4. 能力边界

✅ 能做什么

  • 给出设计方向的决策框架：选题、调色板、字体、布局、动效、结构装置
  • 产出设计计划（token 系统）：4-6 具名色值 + 字体角色 + 布局概念（含 ASCII 线框图）+ 设计原则
  • 主动识别并规避 5 类模板化默认值（”AI 味”清单）
  • 内建自审流程：对着 brief 复盘计划、比较相近 prompt 的结果、说明修改原因
  • 文案写作规范：命名、语态、错误/空状态、语气一致性
  • 质量底线清单：响应式、键盘焦点、reduced motion、视觉可访问
  • 指导 CSS 选择器特异性结构，避免样式互相抵消

❌ 不能做什么

  • 不提供组件库或代码模板——它是指导性（guidance）文本，不产出可直接复用的 UI 组件
  • 不提供设计资源：无图标集、无字体文件、无图片资源
  • 无自动化能力：无脚本、无校验器、无截图工具（”截图审视”需宿主环境自带该能力）
  • 不做设计系统实现：不管 Tailwind 配置、CSS 变量落地、组件 API 设计
  • 仓库根目录无 LICENSE（但该 skill 目录内自带 Apache-2.0，参见第 7 节）

⚠️ 注意事项

  • 它是强主张型（opinionated）文本：明确要求避开某些风格。官方自己也设了边界——brief 明确指定时严格照做
  • 效果高度依赖模型能力：需要有足够强的审美与指令遵循能力才能执行两遍法
  • 对已有明确设计系统/品牌规范的项目，其”追求独特”的取向可能与品牌一致性要求冲突

5. 与同类对比

项目 作者 定位 与 frontend-design 的关系
frontend-design（本文） Anthropic 官方 设计判断力与审美方向 生态基准，纯文本、零依赖
frontend-design-pro BuildWithClaude Community 交互式流程 + 趋势调研 + moodboard 增强版：6 个子 skill，流程更重（向导/moodboard/灵感分析），MIT
ui-ux-pro-max CodeBuddy Teams AI 设计智能（本地已有笔记 99041） 同 general-skills 插件内，同源市场，定位更偏 UX 全流程
canvas-design / theme-factory Anthropic 官方 画布设计 / 主题工厂 同仓库兄弟 skill，主题工厂偏”生成配色主题”，本文偏”设计决策”
brand-guidelines Anthropic 官方 品牌规范 配套：品牌规范定”必须怎样”，本文定”怎样不土”
superpowers（本目录另一篇） Jesse Vincent / Prime Radiant 开发方法论（怎么建） 互补不竞争：它管工程流程，本文管视觉产出

关键差异：生态里多数”前端设计 skill”走堆资源路线（组件库、模板、配色集），而 frontend-design 走给判断力路线——只有 9.4 KB 文本，没有任何资源文件。这是它与 frontend-design-pro（6 个子 skill、带完整流程）最根本的分野：前者是原则，后者是工序。

6. 环境

项 要求
运行环境 无。纯 Markdown 文本，无任何运行时依赖
文件规模 2 个文件 / 约 19.6 KB（SKILL.md 9,390 B + LICENSE.txt 10,174 B）
网络 仅安装/更新时需访问 GitHub；使用时完全不联网
账号 / 密钥 不需要。无 API key、无账号、无环境变量
平台兼容 通用（Agent Skills 开放格式），Claude Code / Codex / Cursor / Copilot CLI / WorkBuddy 等均可
宿主能力依赖 “截图审视”环节依赖宿主自带截图能力（如 Playwright MCP / 内置浏览器预览），本 skill 不提供
平台适配说明 无。SKILL.md 内未包含任何平台映射文件（对比 superpowers 的 references/*-tools.md）

7. 安全风险评估

许可与来源：

  • ✅ 该 skill 目录自带 LICENSE.txt，为 Apache License 2.0（已核对原文，含 “TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION” 完整条款）
  • ⚠️ 仓库根目录未声明 license（GitHub API 返回 license: null）——即仓库整体许可未声明，但单 skill 有明确许可。两个层级不一致，引用时建议注明”以 skill 目录内 LICENSE.txt 为准”
  • ✅ 作者为 Anthropic 官方，来源可信度最高的一档

执行面：

  • ✅ 零可执行代码：无 .sh / .js / .py，无 hook，无脚本
  • ✅ 无外部请求：不加载远程资源、不回调任何服务
  • ✅ 无凭据访问：不读环境变量、不碰配置文件、无 API key
  • ✅ 无遥测：官方 README 未提及任何遥测机制
  • 风险等级：极低（纯静态文本，攻击面几乎为零）

⚠️ 使用注意：

  • 唯一实质风险是内容倾向性：它会主动引导避开某些主流审美（含 Anthropic 自家的 #D97757 强调色），在需要服从既有品牌规范的项目里需以品牌 brief 为先（官方原文亦如此规定）
  • 若通过第三方渠道（如 WorkBuddy 市场版）安装，注意其为适配改写版，与官方原文有措辞差异（见 3.2）

8. 社区反馈与可靠性

指标 数值（2026-09-17 实测）
所属仓库 Stars 176,814★
Forks 20,934
Open Issues 1,237（量大，反映使用面广）
创建 / 最后推送 2025-09-22 / 2026-09-10
官方背景 ✅ Anthropic 官方（Agent Skills 格式发起方）
第三方安装量 长期位居注册表首位（2026 年初约 27.7 万安装）
外部定位评价 多篇评测归为「与 superpowers 互补而非竞争」——“superpowers 处理怎么建，frontend-design 处理长什么样“

可靠性判断：

  • ✅ 来源权威（Anthropic 官方）、许可清晰（Apache-2.0）、维护活跃、零技术风险
  • ✅ 单文件形态使其几乎不会因版本演进而失效（对比 superpowers 的 hook/脚本/harness 适配复杂度）
  • ⚠️ 效果的验证依赖主观审美判断，缺少客观基准测试；不同模型/不同 brief 下效果差异大，需自行实测

9. 待研究清单

  • 实测两遍法（先出 token 计划 → 对着 brief 复盘 → 再写码）在本机环境下的实际产出质量
  • 5 类”AI 味”特征清单与本地知识库现有文章配图风格的对照
  • 与 baoyu-diagram / baoyu-cover-image（待研究清单内）在博客配图场景的分工
  • 与本目录 前端开发UI设计/ 下 ui-ux-pro-max（abbrlink 99041）的能力重叠度评估
  • frontend-design-pro（6 子 skill、MIT）是否需要一并研究
  • 本地手动安装官方原版 vs 使用市场的改写版，效果差异实测
  • 官方仓库其余 18 个 skill 的批量梳理（canvas-design / theme-factory / web-artifacts-builder / webapp-testing 等）

refer

说明：本页为调研整理笔记。star/fork/issue/推送时间均为 2026-09-17 GitHub API 实测值。WorkBuddy 市场形态（第 3.2 节）为本地实机核查结果。该 skill 目录自带 Apache-2.0 许可，但其所属仓库根目录未声明 license，引用时请注意层级差异。效果评价依赖主观审美，建议自行实测。安装与用法以官方为准。