Anthropic 官方那批 Skill 里frontend-design 是我最早一批拿来实际跑项目的技能之一。听名字太普通好像就是让 Claude 会写前端但真正用下来会发现它不是给一个能生成网页的模型再加一层甜点而是把如何做设计这件事整体拆成了一套可执行的工作流。这篇博客想把它的文件机制、核心流程、实际用法和我踩过的一些坑捋一遍给正在研究 AI 前端工作流的人做一个可以直接参考的路线图。先说清楚它能解决什么问题它让 Claude 不再只是根据一句提示词随便画一个界面而是先规划设计系统再按设计系统生成页面。它把设计师日常的调研、设计决策、组件复用、视觉迭代这些动作变成了有时间顺序的任务链。它特别适合做产品原型、营销落地页、中后台界面、设计系统冷启动这些需要一致视觉的场景。对前端开发者也友好因为它生成的不仅是视觉稿而是真实可用的 HTML/CSS/JS 和 React 组件。我建议任何想在 Claude Code 里做前端原型开发的人都先把这个 Skill 的源码读一遍。你会看到的不是提示词是一套方法论。1. 为什么官方那堆 Skill 里frontend-design 特别值得研究1.1 frontend-design 解决的不是会写 HTML而是设计一致性很多人第一次用 AI 写前端体验是第一版惊艳第二版跑偏第三版开始胡来。问题不在于模型能力而在于上下文里没有一个稳定的设计锚点。你在提示词里写保持简约风模型可能理解为黑白大字报你写参考苹果风格它会去抓一堆刻板印象。frontend-design 这个 Skill 的核心逻辑是把设计一致性变成明确规则。它会在生成代码之前先要求你定义配色、字体、间距、阴影、圆角、甚至按钮状态。不是说它强制你用某一套设计而是它要求整个会话里所有页面都必须复用一个设计令牌集合。相当于给 Claude 建了一本共用字典后续每个组件都从那本字典里取词。这也是为什么它叫 frontend-design 而不是 frontend-code。设计在前代码在后。没有前置的设计决策后面的代码生成没有坐标。1.2 和普通 Prompt 里写请写一个漂亮的页面的区别举一个我实际对比过的例子。同一句话需求做一个 SaaS 产品的官网首页包含 Hero、功能、价格、FAQ 四个区块。用普通 Prompt 直接跑Claude 大概率会给你一个还不错的 HTML 文件但你会发现按钮的 hover 效果和品牌色完全不搭。卡片圆角忽大忽小间距没有韵律。字体一会在系统字体、一会用 Web Font字号层级乱。换一个 session 重新生成出来的完全是另一个风格。用 frontend-design 跑它会先问你是现代 SaaS 风还是硬核开发者风然后给出一个 design tokens 清单经过你确认后再正经进入生成环节。整个过程下来四个区块长得像一家人因为它们在共用同一套颜色变量、同一套间距变量、同一套阴影变量。所以这个 Skill 的真正价值是把设计师的审美直觉转换成工程上可确认的规则。这不是靠 prompt 写几句保持在统一风格能实现的需要一套流程约束。1.3 适合谁用不适合谁用我使用下来判断自己该不该学它可以看这几个维度适合产品经理做高保真原型能够直接丢给开发当参考。适合前端工程师做临时页面、活动页、内部工具界面省去手写样板代码的时间。适合独立开发者快速验证一个产品形态避免在视觉细节上消耗太多时间。不适合完全不看输出质量、只求一键出站的人。它本质上是一个协作流程你要参与设计决策而不是当甩手掌柜。接下来我们拆一下这个 Skill 的实际文件结构。这是很多人忽略的部分但恰恰是官方 Skill 到底凭什么比普通 Prompt 强的答案。2. Skill 文件到底长什么样以 frontend-design 安装为例2.1 官方 Skill 的安装方式安装官方 Skill 目前最简单的方式是通过 Claude Code 的插件市场也就是/plugin marketplace相关命令。基本流程是在 Claude Code 里执行插件市场添加命令把 Anthropic 官方 Skill 仓库加入市场。执行安装命令把 frontend-design 装到当前项目里。看claude-code配置目录确认 Skill 目录已经落地。如果你动手能力强也可以手动把 Skill 文件夹复制到项目目录官方文档里写了常用路径。安装完成后检查重点不是它有没有出现在列表里而是它的内部目录结构有没有完好。很多安装失败或者装了没效果的问题都是因为目录解析不到。2.2 目录结构和 SKILL.md 的关键作用一个标准 Skill 的结构大致是frontend-design/ SKILL.md assets/ 参考图/ 模板/ 相关脚本/SKILL.md是入口文件也是模型每次触发 Skill 时最先读到的文档。它定义了这个技能解决什么问题。在什么条件下应该主动应用这个技能。完整的工作步骤顺序。每一步应该产出什么。禁止事项和常见错误。换句话说SKILL.md 不仅是告诉 Claude 做什么还定义了按什么顺序做做完怎么检查。顺序这件事特别关键。frontend-design 里它不会让你一上来就写页面它可能要求你首先写设计计划、定义 tokens然后做线框结构再进入视觉设计。这套顺序等价于真实工作室里的设计流程。如果你拿掉 SKILL.md只把里面的内容当成一段 prompt 塞进系统消息里从效果上可以说等效但工程化方面会差很多你很难版本管理、复用到多项目也无法像 Skill 一样按需启用。2.3 frontend-design 技能里最核心的人机协作流程用大白话说它的工作流像是设计师带着客户走流程。需求澄清阶段不是上来就画而是先确认项目的用户、目标、风格倾向。情绪板/风格定位阶段给出几个设计方向例如极简玻璃拟态粗野主义网格暖色温暖风让用户做选择。设计令牌制定阶段定义主色、辅助色、字体、字号层级、间距、圆角、阴影等。页面上线阶段按照上一轮定义好的令牌生成页面的所有区块。审查与优化阶段每一版产物都要对照设计令牌逐项检查。这个过程的最大优势在于它把 AI 从一次性生成器变成了分阶段协作者。每次输出只解决一个环节的问题符合工作记忆容量也不会把大量 token 浪费在反复修改风格上。2.4 assets/ 资源文件为什么重要很多人打开 Skill 目录只看 SKILL.md却忽略了 assets 目录。frontend-design 这类视觉类技能assets 里的参考图、空白模板、甚至测试脚本都承担了视觉锚点的作用。模型本身不看图也能写代码但它的设计语言是不稳定的。当你给它一个真实的参考图文件时它可以把图中的布局结构、色彩关系映射到代码里。这比任何文字描述都高效。我自己使用时会故意放一两个目标风格截图到 assets 里让 Claude 先读取再开始工作效果立刻不同。另外 assets 里如果有专项模板比如落地页模板后台仪表盘模板会把这种技能从一次性工作变成批量复制你只需要换内容不用换结构。3. 用 frontend-design 跑一个落地页我的完整实操这一节我完整记录一次真实操作目标是生成一个 AI 写作工具的产品落地页包含导航栏、Hero、三个产品特色、一段客户评价、一个定价区和 FAQ。3.1 第一步明确设计输入——从一句需求到设计约束我首先不是直接给需求而是先告诉 Claude这是一个面向独立开发者的 AI 写作工具落地页目标人群是技术背景的内容创作者希望建立起高效、工具感强、不过分花哨的视觉印象。然后用技能要求的格式填写设计问卷主色调偏好偏灰蓝带一点青绿点缀。字体优先考虑系统级无衬线字体突出阅读体验。布局内容居中留白充分避免一屏塞满。动效尽量克制只保留 hover 反馈。情绪关键词专业、清爽、效率感。在普通场景下这些信息花十分钟都能想清楚。但是正经用这个 Skill 的价值是它真的会把这些输入落成变量写入:root里后续所有组件都在用这些变量。3.2 第二步生成初稿——观察它如何复用设计原则初稿出来以后我第一件事不是去看视觉细节而是看代码里的设计令牌:root { --color-primary: #2b3a67; --color-accent: #3aa39f; --color-background: #f7f9fc; --color-text: #1f2430; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06); --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; }这个 CSS 变量体系就是整个项目的锚。如果初稿里没有这套东西那大概率是 SKILL.md 流程没有正确触发需要检查是不是没有正确写明应用 frontend-design 技能。初稿质量通常已经达到能拿出去给团队评审的程度。布局逻辑清晰按钮状态、链接 hover、卡片层次都是按变量走的。但初稿距离可以直接上线还有距离需要通过下一轮迭代修正。3.3 第三步迭代与审查——把审查当成流程而不是对话我用这个 Skill 最大的心得是迭代必须带审查指令而不是说我觉得这里不好看。具体操作是我会这样描述问题卡片阴影太重需要降低层级请将 --shadow-card 改成 0 2px 6px rgba(0, 0, 0, 0.04)。Hero 标题的视觉层级不够需要放大 H1 字号同时补足次级说明文案的灰度对比。定价区块的三种套餐缺少视觉差异把中间套餐标记为最受欢迎并强化边框。每一条反馈都直接对应一个设计决策。这样做的好处是Claude 不会在修改时把其他已经确定的设计令牌推翻。如果只说改得高级一点它会自作主张换字体、换颜色前一轮的工作全部白费。3.4 第四步交付时的细节检查交付之前我会专门跑一轮 QA 检查让 Claude 按前端实操经验去重点检查这几项响应式断点是否完整覆盖从手机到宽屏。表单控件是否有 focus 状态样式。图片是否设置了 alt。按钮是否区分了可点击和禁用状态。是否有潜在的重叠布局问题。HTML 语义化标签的使用是否合理。这一轮在 frontend-design 里执行得特别顺因为它本身不是只重视觉它内置了不少工程化思维。如果你只是自己手动写 prompt这套 QA 很容易被遗漏。4. 原理拆解它是怎么做到看起来像设计师的4.1 结构化上下文Skill 等于给模型追加一本工作手册Skill 的底层原理本质上就是上下文工程。模型能力当然重要但能否稳定产出高质量设计取决于上下文里有没有一套严谨的规则。想象一下你新入职一家公司没有制度手册全靠同事口头提醒工作风格一定飘。而 SKILL.md 像是给新员工的一本详尽手册规定了接需求后第一步做什么、第二部做什么、验收标准是什么、红线是什么。frontend-design 的高明之处正是把这种手册写到了可操作层面而不是写空话。它甚至包含了在不确定的时候应该怎么选择的决策树。比如如果没有明确品牌色就选择一个保险的中性色作为基准如果页面信息层级不清晰就先用黑白稿确认结构再上色。这些决策规则就是它会看起来像有经验设计师的原因。4.2 设计原则的编码化从感觉到可执行规则设计师常说这个界面不平衡这个字体不舒服。这种话 AI 听不懂我们需要把平衡和舒服翻译成规则。frontend-design 内部做了大量这样的翻译平衡 卡片内边距和使用空格的倍数关系一致。层级 字号、字重、颜色对比度之间的搭配梯度。留白 区块间距遵循间距系统而不是随手写 margin。一致性 全局使用 CSS 变量禁止硬编码颜色数值。质感 阴影和圆角有统一的气氛避免每个卡片各搞一套。这就是为什么它生成的项目乍一看专业。因为专业并不是审美玄学而是大量规则的叠加。4.3 本地渲染与视觉反馈的闭环官方 Skill 不只是生成代码然后让你去浏览器里确认。Claude Code 具备本地命令执行能力它会用脚本检查代码完整性甚至启动本地服务供预览。这个生成—检查—运行—修正的闭环把开发流程串起来了。这也是 Skill 机制比纯 API 调用的智能之处模型可以直接读取分支代码、查找错误、分析渲染结果。就像程序员在自己电脑上干活而不只是远程给出建议。4.4 为什么说它本质上是工作流工程而不是炫技我见过有人把 Skill 当成 Prompt 模板收集器但我更愿意把它理解成工作流工程。工作流 阶段拆分 产出物标准 审查反馈循环 成功指标。frontend-design 把这四件事都做了。为什么它比普通 Prompt 稳定因为普通 Prompt 只解决生成任务而 Skill 解决的是如何管理一个不确定的生成过程。在多次迭代的长任务里过程管理比一次生成的效果重要得多。5. 踩坑清单我实际使用 frontend-design 时遇到的问题再好的 Skill 也不是银弹我在真实项目里踩过不少坑总结出来给大家当参考。5.1 坑一给 Claude 太多自由发挥空间导致设计风格飘第一次用的时候我刻意不给风格方向想看它能自己做成什么样。结果它生成了一种通用企业 SaaS 风——蓝色渐变、大圆角、柔和阴影。单看不差但没有记忆点。这个问题的本质是目标函数缺失。设计如果没有方向模型就会选择最安全、最常见的输出。这就像让一个设计供应商做一个项目你不给 brief他只能按他最熟练的风格出图。解决办法开工前必须明确风格关键词。给三组备选风格让 Claude 用文字和参考色块呈现从中选一再开始。这个步骤不能省。5.2 坑二忽略响应式约束Skill 生成桌面端页面很顺手但如果你不主动要求移动端优先生成的代码在手机上可能出现三列卡片在窄屏下被压缩成面条状。导航菜单没有折叠方案。表格横向溢出。字号在小屏上依然偏大。前几次用的时候我以为响应式是基本功不用提结果打脸。现在我的做法是在需求阶段就明确要求默认按移动优先策略Flex 布局优先窄屏断点 640px宽屏断点 1024px。这样跑完的效果会好很多。5.3 坑三把 Skill 当成万能PPT 生成器frontend-design 很适合做网页原型但如果你拿它去生成一份几十页的完整网站内容它会遇到上下文窗口和任务疲劳的问题。不是说不行而是你需要把任务拆成多个阶段先整体规划信息架构再逐个页面生成最后统一检查导航和跳转关系。不要试图在一个对话里灌入几十个页面内容那样后面的生成质量会明显下降。这和我们人写代码需要分模块一个道理。5.4 坑四不检查生成代码的无障碍问题AI 生成的 HTML 在视觉上通常没毛病但无障碍方面默认水平一般。比如按钮只有图标没有 aria-label。表单没有 label 关联。动态内容变化没有 aria-live 提示。对比度不够浅色文本在浅色背景上很难读。如果你做的是对外正式产品一定要在最终检查阶段加上一条明确指令检查 WCAG AA 级别的无障碍问题。frontend-design 有这个能力但需要触发指令它不会默认做全套无障碍审计。5.5 实用技巧如何把自己的设计规范融入 Skill最后分享一个我比较常用的扩展方法不用改官方文件也能生效。我会把项目自己使用的设计系统写成一个design-tokens.md并放在项目里对应的约定位置docs/design-tokens.md里面写清楚这个项目的颜色、字体、图标风格、间距规则。然后在使用 frontend-design 时在初始需求中直接写明设计令牌请读取docs/design-tokens.md如与技能默认规则冲突以本项目文档为准。这样做之后Skill 会以我的设计系统为基准而不是默认的一套模板。等于把 Skill 变成带着我自己规范的前端实现助手。我自己踩了一圈坑之后体感是这个 Skill 用得越主动效果越好。关键不在于它有多少花活而在于它逼着你把设计从一个模糊的感觉变成一套可执行的约定。对做 AI 前端工作流的人来说这套思路比单纯收藏一堆提示词要值钱得多。以后你有机会拿到新的 Skill也别只看名字先按这个思路做一次全流程拆解往往能发现比预期多得多的问题和机会。