Claude Code 设计师指南：一位职业设计师的设置

我上个月合作的那位设计师，三天就完成了整个设计系统的重构。她不是工程师，不懂 Bash，甚至这辈子都没写过正则表达式。她只有 Claude Code、一个 CLAUDE.md 文件，以及勇于反思自己错误决策的习惯。

这就是这个工具鲜为人知的版本。每一篇 Claude Code 的文章都是资深工程师撰写，面向资深工程师。文章里充斥着代理通道、钩子脚本和晦涩的标志。设计师们读了之后，觉得这跟自己无关，就关掉了标签页。

其实，它更适合你。说实话，它比大多数工程师更适合你。因为设计师们真正头疼的不是写代码，而是维护一个跨十个代码库的 设计系统，同时团队还在不断添加新功能。而这正是 Claude Code 的强项。

Claude Code 是一个智能代理，而非自动补全工具

⟦品牌0⟧ 不是 GitHub Copilot 的克隆版。它也不是带有代码主题的聊天窗口。它是一个长期运行的智能代理，驻留在您的终端中，读取您的整个代码库，编辑文件，运行测试，提交 PR，并在遇到问题时进行反馈。

关键的转变在于：它不会等待您指定要编辑哪一行代码。您只需给它一个目标。它会自行判断要打开哪些文件，要修改哪些内容，是添加新组件还是修改现有组件，以及如何在执行这些操作的同时保持其余代码的正常运行。

这正是设计师工作方式的根本所在。您不再需要指向特定的代码行，而是开始描述最终结果。如何清晰地描述最终结果本身就是一门学问，在 为设计师提供快速工程指导 中有详细介绍。“更新所有按钮组件，使其使用新的焦点环标记，包括旧版的禁用版本，并确保 Storybook 中的故事仍然能够通过测试。”这是一句话。也意味着一天的设计运维工作在四分钟内就结束了。

设计师的工作始终是品味，而非语法。Claude Code 让品味成为产品本身。

十分钟内完成安装

你需要三样东西：Node.js、一个终端和一个 Claude 账号。

1. 打开终端（Mac：Cmd+空格键，输入“终端”）。你需要输入两条命令。这就是全部安装步骤。

2. 如果你还没有安装 Node，请先安装。访问 nodejs.org，点击 LTS 下载，然后运行它。这部分是一个普通的安装程序，只需双击即可完成。

3. 在终端中粘贴：npm install -g @anthropic-ai/claude-code

4. 导航到您的设计仓库：cd ~/path/to/your/repo

5. 运行：claude

首次运行，它会引导您完成登录。完成！

仓库可以是任何内容：设计系统包、Next.js 营销网站、Storybook、Figma token 导出、Tailwind 配置，或者任何您工作的内容。只要它是一个包含文件的文件夹，Claude Code 就可以读取它。

| 步骤 | 界面显示 | 耗时 |

|------|-------------------|----------|

| 安装 Node | 标准 Mac/Windows 安装程序 | 2 分钟 |

| 安装 Claude Code | 一条 npm 命令 | 1 分钟 |

| 登录 | 浏览器重定向 | 1 分钟 |

|首次会话 | claude 任意文件夹 | 立即 |

将 CLAUDE.md 写成设计简报，而不是自述文件

CLAUDE.md 是 Claude Code 每次打开代码库时首先读取的文件。工程师用它来记录构建命令和测试路径。这当然没问题。但这也意味着它的价值远不止于此，它还有 90% 的真正价值没有被充分利用。

将 CLAUDE.md 当作一份设计简报，交给一位全新的设计师。它应该包含品牌风格、品牌规则、产品定位、我们绝不做的事情以及我们这里整洁的工作标准。你在 CLAUDE.md 中写的每一句话，你都不需要在聊天中重复一遍。

我给每位新入职设计师的模板：

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

每个代码库只需编写一次。当你发现代理在你的代码库中犯了什么错误时，就更新它。错误会不断累积。

五个关键工作流程

大多数 Claude Code 教程列出了二十个功能。其中五个功能体现了设计师 90% 的价值。

设计系统维护。 “找到所有仍然使用旧间距值（8px、16px、24px）的地方，并用标记（--space-2、--space-4、--space-6）替换它们。更新组件。确保用户故事持续更新。” 两分钟。过去可能需要一周时间。

组件重构。 “我们的按钮已经扩展到十二个变体。审核它们。告诉我哪三个是真正使用的，哪九个已经失效。然后提出一个统一的 API，并将其集成到功能开关中。” 你审核了提案。你同意了。它发布了。

Figma-to-page. 粘贴 Figma 的屏幕截图，或者更好的是，连接 ⟦品牌0⟧ ⟦品牌1⟧。例如：“使用我们现有的组件和令牌构建此主页面，而不是新的组件和令牌。” 经过一两轮反馈后，您就能收到符合设计的 PR。

令牌传播. Brand 更新颜色。“在整个 monorepo 中替换 --color-accent 并运行 typecheck。” 这项工作不是打字，而是勇气。Claude Code 拥有无限的勇气，却毫无自负。

视觉审查. “运行开发服务器，截取每个页面的屏幕截图，并告诉我哪些页面与上次部署相比存在间距错误或溢出。” 如果您的仓库使用了 Playwright 或类似的设置，那么这项功能非常神奇。它能发现您肉眼无法察觉的问题。

| 工作流程 | Claude Code 之前 | Claude Code 之后 |

|----------|-------------------|------------------|

| 设计系统全面检查 | 2 至 5 天，1 位设计师 + 1 位工程师 | 20 分钟，1 位设计师 |

| 组件审核 + 重构 | 1 个迭代 | 1 个下午 |

| Figma 页面化 | 1 至 3 天 | 1 至 3 小时 |

| 标记传播 | 一周，易出错 | 分钟，可靠 |

| 视觉回归测试 | 通常不会发生 | 每个 PR |

请提交 Figma，而不是屏幕截图

如果您只有 PNG 图片，请粘贴 PNG 图片。Claude Code 可以处理图像。它会忽略间距的精确性和一些排版细节，但结构会保留下来。

如果您拥有 Figma，请连接 Figma MCP 服务器。只需五分钟即可完成安装，即可让 Claude Code 直接读取您的 Figma 帧。帧 ID、图层名称、间距值、标记链接，以及整个结构都将一目了然。输出质量将大幅提升。模型不再进行猜测。

无论如何，请记住一条规则：始终提供您现有的设计系统，而不是一张空白画布。“使用我们的组件构建此内容”永远比“构建此内容”更胜一筹。如果您将画布留空，Claude Code 将重新创建您已有的组件。这纯属浪费时间。

Claude Code 无法赢得您信任的地方

请诚实地审视自己。这就是该工具目前存在的问题。

真正的品牌插画。任何需要特定艺术风格、手绘角色或必须与品牌形象相符的品牌吉祥物的项目。Claude Code 调用的是生成器，它没有审美。你仍然需要向 Prismlight、Runesmith 或插画师提出要求。

主观的布局品味。它可以正确地布局页面，但它无法告诉你页面在情感上是否乏味，无法告诉你主角需要更多空间，也无法判断某个权重选择是否错误。这些仍然由你来决定。

基于第一性原理的产品决策。它可以实现你提出的任何要求，但它无法告诉你是否应该提出这些要求。这仍然是设计师的工作，也是真正能带来收入的工作。

任何代码库混乱的项目。如果你的代码库没有统一的系统，没有 CLAUDE.md 文件，没有命名规范，没有标记，Claude Code 只会让情况变得更糟。你必须先清理基础。这令人沮丧，但也合情合理。

如果您想了解更多 AI 工作流程分解，请浏览 Brainy 论文 的其余部分。如果您希望在您的设计团队中正确安装此工具，请浏览 聘请 Brainy，我们将负责设置以及第一个实际工作流程。

设计师入门清单

第一天，以下是实际清单。

• 安装 Claude Code（npm 命令，一分钟）

• 登录并验证会话是否正常工作

• 选择一个代码库。只需一个。从小处着手。

• 使用上面的模板编写 CLAUDE.md 文件。花一个小时完成。

• 从五个工作流程中选择一个。完整地执行一遍。

• 仔细检查差异。不要草率地签字。您是艺术总监。

• 告诉 Claude 哪里出了问题。更新 CLAUDE.md 文件，添加课程内容。

• 尝试另一种工作流程。明天就试试。

坚持一周，你就会感受到不同。一个月后，你就会爱不释手。

常见问题解答

我需要会编程才能使用 Claude Code 吗？

不需要。你只需要知道自己想要什么，如何描述它，以及如何阅读差异，从而判断“这是正确的”或“这是错误的”。如果你曾经给初级设计师提供过反馈，你就具备了这项技能。

在生产仓库中使用 Claude Code 安全吗？

是的，如果你使用分支。切勿在主分支上运行它。创建一个分支，让 Claude Code 在该分支上工作，像审查其他 PR 一样审查 PR，确认无误后再合并。Git 会保护你。要求 PR 通过测试也能起到保护作用。

Claude Code vs Cursor vs v0 vs Lovable，它们之间有什么区别？

Cursor 是一个功能齐全的编辑器，内置了 Claude 功能。v0 和 Lovable 可以根据提示生成 UI，但它们不会长期驻留在您的代码库中。Claude Code 是无头编辑器，可以驻留在任何代码库中，并且对于现有的代码库来说功能最强大。对于全新的原型，v0 或 Lovable 速度更快。对于真正的产品开发，Claude Code 更胜一筹。

Claude Code 的价格是多少？

Claude Max 订阅即可满足所有需求，这也是大多数设计师应该选择的入门方案。规模较大的团队可以选择 API 定价模式。无论哪种方式，与它在上述工作流程中节省的时间相比，它的价格都非常低廉。

我绝对不应该用 Claude Code 做什么？

品牌插画、主观审美判断、产品策略，以及任何需要了解用户真正想要某个功能的原因的工作。这些工作都由你来做。把重复性的执行工作交给工具。

你不再是初级设计师了

长期以来，设计师的工作就是绘制愿景图，然后交给工程师，由工程师负责实际开发。这意味着设计师要等待。等待迭代周期，等待后端开发，等待其他人来敲字。

那个时代已经结束了。

初级设计师不再是个人，而是模型。你是艺术总监。

像写设计简报一样编写 CLAUDE.md。把工作交给代理人。像审核初级设计师的原型一样，按照标准审核差异。有问题就退回去。正确就发布。

设计系统重构只需要三天，而不是三个迭代周期。营销网站这周就能发布，而不是下个季度。令牌更新只需几分钟即可生效，无需耗费数天时间。

安装即可。撰写简报。交付成果。