告别AI腻味感：设计师必装的5个Claude Skill

核心观点速览

1. ​"快速思考"是假象——Claude 生成的 UI 看起来烂，不是模型问题，是缺乏设计指令
2. Frontend Design Skill 是头号工具——它在 Claude 动手写代码之前，强制它先像设计师一样思考
3. Skills 不只是用，还可以自己造——有个叫"Skill Creator"的元工具，让 Claude 帮你从零写 SKILL.md
4. 从 Figma 到代码的鸿沟可以被填平——Implement Design Skill 接 Figma MCP，能做到接近 1:1 的还原
5. 品牌一致性问题终于有了系统解——Brand Guidelines Skill 可以把你的品牌规范"装进"Claude

一、Frontend Design：最重要的一个 Skill

Griffin 把这个称为"头号武器"，原因只有一个：它在 Claude 写任何一行代码之前，强制触发一个设计思维流程。

具体来说，这个 Skill 让 Claude 先考虑四件事：

• Purpose（目的）：这个界面要做什么？
• Tone（基调）：应该给用户什么感觉？
• Constraints（约束）：有什么限制？
• Differentiation（差异化）：怎么不像所有其他的？

但更有趣的是 Skill 里有一整节叫 ​"Frontend Aesthetics Guidelines"，读起来像一个资深产品设计师写的备忘录：

• 字体：不要 Inter，不要 Arial，要有"distinctive character"的字体搭配
• 色彩、动效、空间构成、氛围感，都有具体指导

最关键的一条：它明确 ban 掉了"AI slop"。

"AI slop"是设计师们用来描述那种一眼辨认的 AI 风格的词：紫色渐变、圆角卡片、白底、Inter 字体到处飞。这个 Skill 明确说：这些不许出现。

效果：装了这个 Skill，同样一个 prompt，输出从"明显是 AI 生成的"变成"看起来是有人设计过的"。

安装地址：github.com/anthropics/claude-code 的 frontend-design SKILL.md

二、Implement Design：Figma → 代码，接近 1:1

这是 Figma 官方出的 Skill，做的事情字面意思就是：给一个 Figma 链接，输出生产可用的代码。

工作流程是这样的：

1. 粘贴 Figma 链接
2. Skill 解析 URL，提取 file key 和 node ID
3. 调用 Figma MCP Server，读取完整设计上下文（布局属性、auto layout、字体规格、颜色值、间距 token……）
4. 截一张设计截图作为视觉参考
5. 下载图标、图片等资源
6. 开始构建代码——不是重新造一套，而是映射到你现有的组件库（按钮、输入框、排版组件全都复用）
7. 最后跑一份 checklist：布局、字体、颜色、交互状态、响应式行为、无障碍……全对着那张 Figma 截图核对

实际意义：以前把截图扔给 Claude 让它转成代码，出来的东西往往面目全非。这个 Skill 通过读取 Figma 的元数据（而不是靠图片识别猜测），大幅收窄了"设计稿"和"实现"之间的差距。

⚠️ 注意：需要先在 Claude 里连接 Figma MCP Server，这是必要前提。

安装地址：mcpservers.org/agent-skills/figma/implement-design

三、Theme Factory：10 套即开即用的设计系统

这个 Skill 提供 10 套预制专业主题，每套都是：

• 精心搭配的色板
• 配套的字体组合（标题 + 正文）

覆盖范围很广：网页、幻灯片、文档、仪表盘、报告——凡是 Claude 能生成的 artifact，都能套这些主题。

适用场景：不想花 20 分钟纠结颜色和字体？直接选个主题，整体风格一键统一。主题不是随机颜色，每个都有特定的视觉定位——企业汇报、创意提案、编辑排版，各有对应。

安装地址：mcpservers.org/agent-skills/anthropic/theme-factory

四、Brand Guidelines：让 Claude 记住你的品牌

这个 Skill 开箱内置的是 Anthropic 自己的品牌规范（颜色、字体、视觉语言），但真正的价值不在 Anthropic 的品牌，而在它的结构。

它做的事：把一套品牌规则（hex 色值、字体栈、间距值、logo 使用规范、语调……）注入 Claude，此后 Claude 生成的每一个 artifact——落地页、演示文稿、文案——都自动遵守这套规则，不需要你每次手动提醒。

实际用法：把这个 Skill 当模板，让 Claude 把你自己的品牌 token 换进去：

• 主色 / 辅色
• 标题字体 / 正文字体
• 间距体系
• 设计规范中的 dos & don'ts

完成后，Claude 就"认识"你的品牌了。

特别适合：小团队，没有专职设计系统维护者；或者想把品牌规范同步给非设计的同事（市场、销售），让他们用 Claude 生成的东西也自动符合视觉标准。

安装地址：mcpservers.org/agent-skills/anthropic/brand-guidelines

五、Canvas Design：让 Claude 生成真正的视觉作品

这个和前面四个性质不同——它不是用来做 UI 的，而是用来做视觉艺术的，输出真实的 PNG 和 PDF 文件。

工作方式是两步：

1. 写设计哲学：Claude 先生成一份"美学宣言"——定义一个视觉运动，描述它的原则、形式、色彩和构图规则
2. 在画布上执行：拿着这份哲学，在画布上实现为一张真实图像

适用场景：活动海报、社交媒体图、演示文稿里的概念图、快速探索视觉方向。

局限：Griffin 说得很清楚，这不会取代 Photoshop 或 Illustrator，Claude 的主战场不在这里。但如果你想在几秒内探索一个视觉方向，这是 Claude 以前做不到的事。

安装地址：mcpservers.org/agent-skills/anthropic/canvas-design

六、Skill Creator：造自己的工具

这是整个视频里最有想象力的部分：一个用来创造 Skill 的 Skill。

用法：告诉 Claude 你想要一个什么 Skill——比如"生成符合我们设计系统的移动端页面"，或者"用我们的品牌语气写 UX 文案"。

接下来 Claude 会：

1. 采访你：问边界情况、输入格式、输出预期
2. 写 SKILL.md 草稿：这是 Skill 的"大脑"
3. 创建测试 prompt，自己跑，给你看结果
4. 等你反馈，修改，迭代

这个过程 Griffin 描述为"就像我们设计产品一样"——迭代式的，有反馈循环的。

Skill 的解剖结构：

• 一个文件夹
• 根目录一个 SKILL.md（名称 + 触发时机描述 + 具体指令）
• 可选：脚本、参考文档、其他 Claude 需要参考的素材

做好了可以打包成 .skill 文件，分享给队友或社区。你不只是 Skill 的用户，也是创造者。

行动清单

金句收录

"Skills are like a simple plug-in for Claude. A set of instructions and resources that completely changes how Claude approaches specific types of tasks." Skills 就像 Claude 的简单插件，一套指令和资源，彻底改变 Claude 处理特定任务的方式。——Griffin Wooldridge

"The skill explicitly tells Claude what not to do. It literally bans what it calls AI slop." 这个 Skill 明确告诉 Claude 什么不能做。它字面上 ban 掉了所谓的"AI 腻味感"。——Griffin Wooldridge

"Claude isn't just guessing. It has a design playbook preloaded and it executes with intention." Claude 不是在瞎猜。它预装了一套设计剧本，并且有意图地执行。——Griffin Wooldridge

"You're not just a user of these skills, you're also a creator." 你不只是 Skill 的使用者，你也是创造者。——Griffin Wooldridge

"It's like building your own design plug-in." 这就像在造你自己的设计插件。——Griffin Wooldridge

时间线索引