Anthropic 官方前端设计 Skill 实测评测

frontend-design skill 是 Anthropic 官方提供的指导手册，用来让 Claude 生成的界面看起来不像 AI 做的。它随 Anthropic 的 skills 仓库一起发布，也作为官方 Claude Code 插件市场的 frontend-design 插件提供——大多数人在搜索"Claude 前端设计 skill"时，指的就是它。它只有一个 Markdown 文件，2026 年 10 月 9 日读取时共 71 行。它不包含任何脚本也没有组件库；它改变一切的方式，是改变 Claude 的规划思路。

我们在同一个真实需求上跑了它一次，并与只有需求而没有 skill 的情况做了对比。本文覆盖 skill 对 Claude 说了什么、如何安装、实际跑出了什么结果，以及它的不足之处。

What the skill tells Claude

读完 SKILL.md 后，你会发现四个核心理念。

从主题出发设计，而非从习惯出发。 Claude 被要求先弄清楚产品、受众和页面要完成的唯一任务，然后从主题本身的世界中汲取视觉选择：材料、词汇和行业惯例。

一份命名的 AI 生成设计特征清单。 这是 skill 最实用的部分。它列举了当前 AI 生成页面普遍聚集的那些外观，并要求 Claude 不要在这些地方浪费自主选择：

• 暖奶油色背景搭配高对比度衬线字体和赤陶色点缀（Anthropic 指出，其自家 Claude 的强调色放在用户的需求中会显得像一个特征）；
• 近乎全黑的页面配一个酸绿色或朱红色的点缀；
• 报纸式布局搭配极细线条和密集分栏；
• "SaaS 卡片套装"：一模一样的圆角卡片、所有地方同一个圆角半径、同样的柔灰阴影和装饰性渐变渲染；
• 模板化装饰元素：每个标题上方都是全大写的眉标、A · B · C 元数据字符串、用带空格的 em 短横线构建的标签、近黑而非纯黑、等宽字体的数据标签，以及每个按钮上的箭头。

此外，它还明确禁止三种排版习惯：标题中单独强调一个词、全大写标签，以及没有人需要的标签。编号标记（01、02、03）仅在内容确实是序列时才允许使用。

先规划、检查规划、再构建。 在写任何代码之前，Claude 要写一套精简的 token 系统：4 到 6 个命名的十六进制颜色、字体及其角色、用 ASCII 勾勒的布局草图，以及页面的设计原则。然后对照需求审查规划，修订任何看起来像是它给任何同类页面都会生成的默认产物。

克制和平实的文案。 "把你的大胆用在一个地方"，保持质量底线（响应式、可见的焦点状态、支持减少动画），并用用户的语言来写文案——说明事物的作用。

安装方式

在 Claude Code 中，从官方插件市场：

/plugin install frontend-design@claude-plugins-official

从 SkillGild 安装，它可以为 Claude Code、Codex、Cursor 或 Gemini CLI 安装同一个 skill：

skillgild install frontend-design --agent claude-code

或者手动复制文件夹：克隆 anthropics/skills 并将 skills/frontend-design 放入 ~/.claude/skills/。安装指南列出了其他 agent 对应的文件夹。Skill 会在你要求做 UI 工作时自动触发；也可以在 prompt 中直接指定它。

The test: one brief, with and without the skill

我们用相同的需求让 Claude Code 跑了两次：为 Ledgerline（一个面向自由设计师的虚构记账应用）制作一个落地页，作为只有一个 HTML 文件的完整页面，唯一的外部资源是 Google Fonts。需求列出了各个版块，并禁止虚构评价、客户数量、logo 和奖项。一次运行在项目文件夹中放入了 frontend-design skill 并要求遵循它；另一次没有任何 skill。两次都使用 Claude Code 2.1.278 和 Claude Opus 5，日期为 2026 年 10 月 9 日，并关闭了 Skill 工具以确保没有其他已安装的 skill 被加载。各只跑了一次，所以把它当作一个案例而非基准。

使用 frontend-design skill。 Hero 部分是一个可用的标签演示：选择一个客户色块，点击一笔交易，合计数字就会更新。

同一需求，不使用 skill。 一个合格的页面，建立在 skill 所列出的特征——奶油色+衬线字体的外观之上。

What the skill changed

在写代码之前，skill 的运行结果完全按照 SKILL.md 的要求生成了规划：一套五色调色板，用主题命名（"drafting-paper sage"、"navy ink"），四个客户颜色在整个页面上都表达"客户"的含义而非装饰；正文用 Familjen Grotesk，金额和日期只用 IBM Plex Mono；Hero 的 ASCII 线框图。然后它把 Hero 构建成了一个小型的可用工具：选择一个客户，点击示例月份中的交易，客户별合计和季度税款预留就会重新计算。

基准版本并不差。没有任何帮助的 Claude Opus 5 生成了一个整齐的页面，有产品卡片、无障碍 FAQ 手风琴和支持减少动画。但它完全落入了 skill 所命名的默认模式：奶油色背景搭配衬线展示字体、标题中高亮的短语、Hero 上方的全大写药丸标签和各章节标签的全大写。

我们在 1440 px 下统计了两页的这些特征：

整个 frontend-design 页面，从上到下（无声）。可在 skillgild.dev 上观看。

skill 的运行代价也更高。它花了 14 轮和 5.7 分钟，而基准版本是 2 轮和 3.3 分钟；Claude Code 报告的 API 等效成本为 $1.61 对 $0.98。大部分额外开销花在了规划和一个自我批评的审查轮次，后者做了九处小的修改。

两页都编造了需求中从未给出的产品事实。skill 版本说 Ledgerline "连接美国、加拿大、英国和欧盟的大多数银行和信用合作社"，数据可导出保留 30 天，无需卡片即可开始使用，并支持收据匹配。基准版本也做了类似的声明。frontend-design 塑造页面看起来和读起来的样子；它不知道你的产品做什么。在我们测试的四个 skill 中，只有 Impeccable 拒绝编造事实，因为它会记录需求中未说明的内容。使用这个 skill 时，把真实事实放进需求中，并告诉 Claude 不要添加功能。

它还保留了七处带空格的 em 短横线，所以特征清单是一个强烈的引导而非过滤器。如果某种外观对你很重要，在需求中说出来：skill 自己的规则是需求的措辞永远优先。

skill 版本在 375 px 下的效果。无横向滚动；演示内容堆叠在标题下方。

Briefs that get the most from it

skill 依据你的需求来工作，所以给它它所要求的素材：

Use the frontend-design skill to build the landing page for <product>.
Product facts (do not add others): <what it does, price, trial, integrations>.
Audience: <who>, and the one action the page should drive: <action>.
Keep: <brand colours, fonts, routes>. Avoid: <looks you dislike>.
Show me the token plan and ASCII layout before you write code.

先要求看规划代价很小，且给了你在构建之前的一个决策点。如果规划的调色板或字体与你的品牌不符，在那里纠正它。

When to pick something else

frontend-design 是一个方向性 skill：它决定一个新页面应该长什么样。要审计现有界面，把它和 Web Design Guidelines 或 Impeccable 的审计命令搭配使用。要做动画，加入 Emil Kowalski 的 skills。如果你想在多个选项中做选择而非只有一个意见，UI UX Pro Max 会搜索风格和调色板的数据库。前 10 个 Claude 前端和设计 skill 对它们做了全面对比，用同一个需求跑了四个。

原文发表于 skillgild.dev。