Claude Code前端审美救星：frontend-design Skill安装与使用教程

上个月我用 Claude Code 生成的 7 个项目 Demo，有 5 个默认配色是蓝紫渐变。剩下两个？一个是深色系蓝紫，一个是浅色系蓝紫。

AI 审美，统一得让人绝望。

为什么 AI 总爱蓝紫渐变？

这不是玄学，是训练数据的锅。

互联网上大量的 SaaS 产品、科技公司官网、UI 设计教程，用的都是这套配色——蓝色代表信任和科技感，紫色代表高级感，渐变让整体更"现代"。AI 从这些数据里学出来的审美，自然就是这个味儿。

我自己也傻乎乎地接受了很久。反正是 Demo，能跑就行，配色不重要。

直到有一次，我把一个出海工具的 Demo 发给潜在用户看，对方直接回了一句：「这个设计风格……有点像学生作业。」

那一刻我意识到，Demo 的颜值，直接影响用户对产品专业度的第一判断。出海产品尤其如此，你面对的用户对设计品味的要求比国内高得多。

然后我发现了 frontend-design 这个东西。

frontend-design 是什么？先说人话

Anthropic 官方维护了一个叫 Skills 的仓库（anthropic-agent-skills），里面放的是一堆可以插件化注入到 Claude Code 的「专项能力包」。

说人话就是：你给 Claude Code 装了某个 Skill，它在处理对应任务时就会调用这个 Skill 里预设的知识和规则，而不是靠它自己"随机发挥"。

frontend-design 这个 Skill，本质上是一套设计系统规范 + 配色主题库 + 组件风格指南，被打包成了 Claude Code 能理解的格式。装上之后，你让它生成前端页面，它会先从这套规范里选主题，而不是默认走那条"蓝紫渐变老路"。

效果差多少？我做了一个对比：

不是说用了就完美，但下限明显提高了。

实操：从安装到出图，完整流程

Step 1：安装 Skills Marketplace

打开你的项目目录，启动 Claude Code CLI：

claude

进入 CLI 后，先装 marketplace 插件（这是安装其他 Skill 的前提）：

/plugin marketplace add anthropics/skills

这里有个细节要注意：Windows 用户如果遇到 PowerShell 执行策略报错，先别慌，不是 Claude Code 的问题，是系统安全策略限制了脚本运行。依次执行：

# 查看当前策略（默认是 Restricted）
get-ExecutionPolicy
# 改成允许本地脚本运行
Set-ExecutionPolicy -Scope CurrentUser
# 输入 RemoteSigned 回车
# 验证
get-ExecutionPolicy

改完就好了，不影响系统安全。

Step 2：安装 frontend-design Skill

/plugin install frontend-design@anthropic-agent-skills

安装时会让你选作用域，三个选项：

• Install for you (user scope) — 全局生效，你所有项目都能用
• Install for all collaborators on this repository (project scope) — 写入项目配置，团队共享，出海协作项目推荐这个
• Install for you, in this repo only (local scope) — 只在本地这个项目生效

个人开发者选第一个省事，团队项目选第二个，这样新人 clone 代码后也能直接用。

装完用 /skills 确认一下：

/skills

看到 frontend-design 出现在列表里，就 OK 了。

Step 3：用 Plan Mode 先审需求，再动手

这是大多数教程不告诉你的一个操作习惯。

在开始生成之前，按 Tab + Shift 切换到 Plan Mode。

Plan Mode 下，Claude Code 不会直接写代码，而是先分析你的需求，列出它打算做什么改动，等你确认后才开始执行。

听起来多了一步，实际上省了很多来回。我之前不用 Plan Mode 的时候，经常出现"生成了一大堆，但方向跑偏了，删掉重来"的情况。一个稍微复杂点的页面，这种来回能浪费半小时。

用了 Plan Mode 之后，我的习惯是：看它的 Plan，重点检查组件拆分方式和文件结构，不对就在这里纠正，比生成完再改效率高 3 倍。

Step 4：Prompt 怎么写才能触发 Skill

关键词是 使用 frontend-design 的 skill，必须显式说出来，不然 Claude Code 不一定会调用。

下面是我实际用过的两条 Prompt，可以直接复用：

Prompt 1（初始生成）：使用 frontend-design 的 skill，结合 Vue3，设计一款用来展示内容聚合的网站页面。页面需要包含：卡片列表展示（含封面图、标题、摘要、互动数据），支持分页（每页 9 条，共 3 页），整体主题使用亮色系，避免蓝紫渐变配色。

Prompt 2（调整主题）：项目主题改为亮色中性风格，主色调使用暖灰或米白，强调色用深绿或深橙，去掉所有渐变背景，保持整体简洁克制。

Prompt 3（结构优化）：把当前页面的样式抽离到独立的 CSS 文件，布局拆分为独立子组件（Header、CardGrid、Pagination），每个组件单独一个文件，主文件只负责组合和数据传递。

注意 Prompt 3 很重要。AI 第一次生成的代码，几乎必然是把所有东西堆在一个文件里。 这不是 Bug，是它的默认行为——它在优化"能跑"，不在优化"好维护"。你需要主动告诉它拆分。

出海场景的额外注意事项

如果你的产品是面向海外用户的，前端设计还有几个坑要提前想到：

1. 字体选择
国内 AI 生成的前端默认字体，很多时候是中文字体或者没有明确声明。出海产品建议在 Prompt 里指定：

字体使用 Inter（正文）+ Sora 或 Manrope（标题），通过 Google Fonts 引入。

2. 文字方向和布局
如果你的产品需要支持阿拉伯语或希伯来语（RTL 布局），在初始生成时就要告诉 AI 预留 dir="rtl" 的支持，事后改很痛苦。

3. 颜色的文化含义
这个 AI 不会主动提醒你。红色在中国是喜庆，在部分西方市场是警告/危险。绿色在伊斯兰文化里是神圣色，不要随便用在负面状态上。配色选完，自己过一遍目标市场的颜色文化。

踩坑实录

坑 1：Skill 装了但没生效，卡了 40 分钟

症状：/skills 能看到 frontend-design，但生成出来的页面还是蓝紫渐变，完全没有变化。

我当时以为是 Skill 本身的问题，翻了半天文档，后来发现是因为我的 Prompt 里没有显式提到 frontend-design。

说人话就是：Skill 装了不等于自动生效，它需要你在对话里主动"点名调用"。Claude Code 不会自动判断"这个任务应该用哪个 Skill"，它只会在你提到关键词的时候才去调用对应能力。

解决方法：Prompt 开头加上「使用 frontend-design 的 skill」，问题消失。

教训：Skills 是工具，不是魔法。你不叫它，它不动。

坑 2：生成的组件全堆一个文件，后来改样式改到崩溃

第一次用 frontend-design 生成了一个我比较满意的页面，但所有代码——模板、逻辑、样式——全在一个 .vue 文件里，将近 800 行。

我当时想着"能跑就行，先演示再说"，结果客户看了想改几个颜色，我找了 20 分钟才找到对应的样式在哪。

后来我固定了一个习惯：生成完第一版之后，立刻用 Prompt 3 让它做一次结构重构，把样式和组件拆开。 这一步加起来不超过 5 分钟，但后续改起来省的时间是 10 倍。

总结

frontend-design Skill 解决的不是"AI 不会设计"的问题，解决的是"AI 设计的下限太低"的问题。

它给了 Claude Code 一套可以遵循的设计规范，让随机性变成了有约束的随机性。结果就是：你不再需要靠运气，等 AI 偶尔发挥好的那一次。

AI 生成的代码能跑，但能不能用，取决于你有没有给它足够的约束。

最后一个实际的问题： 你现在用 AI 生成前端的时候，有没有一套固定的「设计规范 Prompt」？

还是说每次都是裸写需求，然后看 AI 发挥，不满意就反复调？

如果你已经有了自己的一套方法论，欢迎评论区聊聊——我很好奇不同背景的开发者，在这件事上的解法差异有多大。

Github开源：https://github.com/anthropics/skills/tree/main/skills

转自：https://mp.weixin.qq.com/s/bhr5Nec-jgLH0faEymfQYg