用 Claude Code 做设计。

Claude Code 究竟是什么

Claude Code 是 Anthropic 的 agentic 编码工具。它读取你的代码库、编辑文件、运行命令、与你的开发工具集成 —— 从自然语言任务出发去规划、编写并验证，而不只是补全几行代码。

它有多个共享同一引擎的形态：终端 CLI、面向 VS Code / Cursor / JetBrains 的 IDE 扩展、带可视化 diff 审阅的桌面应用，以及用于长时任务的网页端。你的 CLAUDE.md 文件、设置与 MCP server 在所有形态间通用。

• 指令文件: Claude Code 在每次会话开始时读取项目根目录下的 CLAUDE.md —— 这正是写入你的设计规范、token 与审阅清单的天然位置。
• Skills: Agent Skills 把可复用的指令、脚本与资源打包，由 Claude 按需加载，其中就包括 Anthropic 官方的 Frontend Design skill 来注入品味。
• Plan 与 subagent: 它能先规划再动手，并可派生 subagent 并行处理任务的不同部分，从而让大型 UI 重构保持连贯。

• 厂商：Anthropic
• 凭证：Anthropic API key（BYOK，经 Console）或 Claude 订阅（Pro / Max）
• 形态：终端 CLI、VS Code / Cursor / JetBrains 扩展、桌面应用、网页端

Claude Code 为何擅长设计

在一众 coding agent 里，Claude Code 在前端工作上以“有品味”著称。原因有几点。

• 决策具体，不含糊: Claude Code 倾向于落到确切的选择 —— 精确的 hex 色值、间距阶梯、字号 ramp 与组件层级，而不是泛泛而谈，而这正是真实界面与占位草稿的分水岭。
• 理解代码库的推理: 凭借较大的工作上下文，它能一次性跨多文件重构 UI，复用你已有的组件与 token，而不是另造一套一次性样式。
• 官方前端 skill: Anthropic 提供 Frontend Design skill，让 Claude 先写出设计方向，并刻意避开泛用系统字体与可预料的紫色渐变。

这和 Anthropic 对自家模型的说法一致：Claude 默认并没有品味 —— 放任不管，它会收敛到网页设计的统计中心（Inter、紫色渐变、柔和阴影）。给它约束，它才能产出好设计。Open Design 恰恰把这些输入打包好了，这也是两者天然契合之处（详见下文）。

从零搭建用于设计工作的 Claude Code

下面是从一台干净机器到一个能构建并验证 UI 的 Claude Code 的完整路径。

# 1. 安装 Claude Code（推荐原生安装）
curl -fsSL https://claude.ai/install.sh | bash
# 或：brew install --cask claude-code
# Windows PowerShell：irm https://claude.ai/install.ps1 | iex

# 2. 在你的项目里启动，首次运行时登录
cd your-project
claude            # 用 Claude 订阅或 API key 登录

# 3. 生成项目上下文
/init             # 为本项目创建 CLAUDE.md

# 4. 添加官方 Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. 接入 Figma MCP server（可选，用于设计交付）
claude plugin install figma@claude-plugins-official

• 把设计规则写进去: 把你的 token、基础原语与约定放进 CLAUDE.md 并让 Claude 指向它们，这样产出会贴合品牌，而不是退回到泛用样子。
• 加上浏览器验证: 接入 Playwright 或 Chrome MCP，让 Claude 在真实浏览器里渲染，并跨断点检查产出，而不仅仅确认构建通过。

CLAUDE.md 与 Skills 工作流

用 Claude Code 做设计、杠杆最高的闭环，是把真实参考连同你的设计上下文一起喂给它，再迭代到 UI 对得上 —— 由 CLAUDE.md 和 Skills 承载约束，免得你每次 prompt 都重新解释一遍。

1. 从你手头最清晰的视觉参考出发 —— 而且要包含多种状态（桌面与移动、hover、空态、加载态），不要只给一张 hero 图。
2. 在 prompt 里说具体；即便是强 agent，含糊的 prompt 也只会产出泛泛的 UI。
3. 把你的设计系统与约定放进 CLAUDE.md，并告诉 Claude token 与标准原语在哪里。
4. 添加 Frontend Design skill，让 Claude 在写代码前先确定一个真实的美学方向。
5. 接好浏览器验证，让 Claude 渲染、调整到各断点，并对照参考做比对 —— 而不只是确认能构建通过。

把一张参考图丢进会话，并用具体约束去提示：

claude "把 reference-desktop.png 和 reference-mobile.png 用
  React + Vite + Tailwind + TypeScript 实现。
  复用 CLAUDE.md 里描述的设计系统组件与 token。
  匹配间距、布局与层级；做成响应式。
  在浏览器里渲染，跨断点验证它与参考一致，
  并迭代到对得上为止。"

同时跑一个 dev server，prompt 保持小而聚焦，好的迭代就 commit、坏的就 revert（revert 时告诉 Claude 一声），让每一轮都在干净的基础上推进。较大的重构用 plan 模式，这样动文件前你能先审一遍方案。

Claude Code + Figma：设计 ↔ 代码往返

2026 年 2 月，Anthropic 与 Figma 通过 Figma MCP server 推出了一流的双向集成。它在两个方向都能用。

• 设计 → 代码: 在 Figma 里选中一个 frame，或把链接粘进 Claude Code，拉取设计上下文，让它用你已有的组件库来实现这份设计。Code Connect 会让产出与你真实的组件保持对齐。
• 代码 → 设计: 在浏览器里构建并预览一个功能，然后说一句“Send this to Figma”，把运行中的 UI 捕获为可编辑的 Figma 图层 —— 整屏或选中的某个元素皆可。

用 claude plugin install figma@claude-plugins-official 安装一次即可（Dev Mode MCP 需要 Figma 付费方案）。同一个 Figma MCP 对 Claude Code、Codex、Cursor 与 VS Code 都可用 —— 正是 Open Design 所要编排的那类可移植、多 agent 能力。

Claude Code vs Codex vs Cursor 做设计

设计工作没有唯一赢家 —— 每个 agent 各有所长，有经验的团队会把它们叠着用。一个公允的概括：

社区反复得出的结论是：品味来自人。三者在没有 skill、参考与约束时都会默认滑向泛用美学。这才是真正要解决的问题 —— 它是设计工具形状的，而非模型形状的。

常见坑，以及如何避开“AI 套路感”

即便 Claude Code 以有品味著称，对 AI 生成设计最常见的吐槽仍是它显得套路 —— Inter 字体、白底上的紫色渐变、柔和阴影、过大的圆角，一种“一看就是 AI 做的”的观感。Anthropic 自己把这归因于分布收敛：安全的选择在网页训练数据里占主导。其他被反映的问题还包括移动端布局错乱、以及指令文字漏进了 UI 文案。

• 装上 Frontend Design skill: 它会逼 Claude 确定一个真实方向，并明确避开被 AI 滥用的字体与渐变。
• 启用浏览器验证: 让 Claude 渲染并跨断点自检，避免布局在移动端悄悄崩掉。
• 提供 token 与参考: 真实的设计 token 与参考截图，是对产出质量影响最大的单一杠杆。
• 把规则写进 CLAUDE.md: 把“不用 hero 卡片、最多两种字体、品牌优先的层级”这类规则，放在 agent 每次都会读到的地方。

注意每一条缓解措施，本质都是在给 agent 一份精选的设计上下文。逐个项目手工维护这份上下文，正是 Open Design 替你省掉的苦差。

在 Open Design 里用 Claude Code 做设计

Open Design 就是上面那套工作流一直在呼唤的开源设计层。它把 Claude Code 当作一等适配器，并在外面包上一层精选的 skill 与设计系统库、一条结构化渲染流水线，以及一个本地桌面 UI —— 让那份令 Claude Code 出彩的设计上下文，从第一次运行就在位，而不必每次手工拼装。

1. 安装 Open Design，并选择 Claude Code 作为你的 agent。
2. 用你的 Anthropic API key（BYOK）或 Claude 订阅认证 —— 凭证留在你自己机器上，绝不经我们中转。
3. 挑一套设计系统与一个 skill，然后产出风格一致的 deck、原型与落地页。
4. 每一件产物与 DESIGN.md 文件都存在你自己的仓库里，而非托管云端。

同一个 Claude Code agent、同一把 key —— 外加一套真实、可移植、开源的设计工作流。它本地优先、Apache-2.0，所以你的工作与凭证都不会离开你的机器。

常见问题

1. 01 Claude Code 适合做设计吗？ +

   适合 —— 它被普遍认为是前端品味最好的 coding agent，会对 hex 色值、间距与字号阶梯做出具体且理解代码库的决策。配上 Frontend Design skill、一套设计系统与真实参考图，它能产出生产级、响应式的 UI 并在浏览器里验证。缺了这份上下文，它就容易退回泛用样子 —— 这正是 Open Design 要补的缺口。

2. 02 用 Claude Code 做设计需要 Claude 订阅吗？ +

   你可以用 Anthropic API key（BYOK，经 Console）或 Claude 订阅（Pro / Max），两者皆可。无论哪种，Open Design 都不会中转你的凭证 —— 它们由你的 agent 在你机器上直接使用。

3. 03 前端设计该用 Claude Code 还是 Codex？ +

   两者都很强。Claude Code 以具体、理解代码库的设计决策与前端推理著称；Codex 视觉打磨强，擅长委派式的沙箱构建。很多团队两者都用 —— Open Design 让你切换 agent 而无需改动设计工作流。

4. 04 怎么把 Claude Code 接到 Figma？ +

   用 claude plugin install figma@claude-plugins-official 安装官方 Figma 插件。之后你就能借助设计上下文在代码里实现 Figma frame，并用“Send this to Figma”把运行中的 UI 推回成可编辑的 Figma 图层。Dev Mode MCP 需要 Figma 付费方案。

5. 05 Skills 和 CLAUDE.md 是什么？ +

   CLAUDE.md 是你项目根目录里的一个 markdown 文件，Claude Code 在每次会话开始时都会读它 —— 这是写入设计规范的地方。Skills 把可复用的指令与资源打包，由 Claude 按需加载，其中包括 Anthropic 官方的 Frontend Design skill。Open Design 把两者都做成精选库，帮你免去逐项目搭建。

6. 06 怎么避开泛用的“AI 套路感”？ +

   装上 Frontend Design skill，提供真实的设计 token 与参考截图，把品牌规则写进 CLAUDE.md，并启用浏览器验证。Open Design 把这些做成精选库，帮你免去逐项目搭建。

7. 07 Open Design 和 Anthropic 有从属关系吗？ +

   没有。Claude Code 是 Anthropic 的产品；Open Design 是一个独立的开源项目，把它作为一等适配器来支持。Claude 与 Claude Code 是 Anthropic 的商标。

8. 08 我的文件和凭证安全吗？ +

   安全 —— Open Design 本地优先、Apache-2.0。你的文件、产物与 DESIGN.md 都留在你自己的仓库里，你的 Anthropic 凭证由你的 agent 直接使用，绝不经 Open Design 服务器中转。