Claude Design做设计总监出稿-知了AI

先讲一个我在过去一年里反复见到的场景。一个做 SaaS 的团队，市场同学写了一百多个字的”品牌调性说明”交给 AI，要求做一套产品发布会的幻灯片：现代、克制、有科技感、用蓝紫色系、不要太多装饰、留白多一些、字号层级分明……一百多字，方方正正，信息完整。跑出来的第一版，不能说难看，但就是”不对”，团队自己也说不上来哪里不对。后来他把三张图甩了进去：一张是竞品发布会的深色界面截图、一张是某个设计工作室的留白海报、一张是他们自己 App 的设置页。第二版出来，几乎就没再改大结构，只动了两个按钮的内边距。

这个对比，是我决定写这篇 Claude Design 深度教程的原因。工具本身不神秘，它的形态极其朴素——左边一个对话框，右边一块画布。真正决定产出质量的，是你以什么身份坐下：是以”下单的甲方”身份写需求文档，还是以”设计总监”身份拆需求、给参照、定标准、验收。

一、Claude Design 到底是什么，现在还能怎么用

Claude Design 由 Anthropic Labs 于 2026 年 4 月 17 日以研究预览形式推出。刚上线时的定位是”设计师与 AI 协作的独立工作台”：左侧对话，右侧画布，Claude 在画布上直接生成可交互的设计稿，而不是给你一张静态的平面图。你点进去能点、能看状态、能看到悬停效果——它产出的是”能跑的设计”。

2026 年 12 月 14 日，独立站点 claude.ai/design 关闭。这个节点很关键，因为很多网上教程还停留在”打开 design 站点”的写法。关闭之后，那条路径只读，不能新建项目，你之前做的项目还能看、还能翻，但不能再起一个新稿。与此同时，Claude Design 已经整合为 Artifacts 里的一个模板，在任何 Claude 会话里都能调用。这意味着什么？意味着你不再需要专门为它开一个工作环境，你在写文档、读代码、聊需求的同一个会话里，就能顺手拉出一块画布。

形态说明：对话在左、画布在右

这个布局不是随便排的。左侧是”意图输入区”，右侧是”结果呈现区”，中间的往返构成整个工作流。左侧的每一句话都会直接改变右侧的形态，而不像传统工具那样需要你在工具栏里找对应的操作。很多人第一次用 Claude Design 会本能地把画布当主战场，对着画布狂拖——这恰恰是最低效的用法。真正的杠杆在左边：你输入的东西质量如何，决定了右边要改多少次。

画布的 UI 明显受 Figma 启发：有页面、有图层面板、有右侧属性面板。如果有人跟你说”这东西像 Figma”，那不是错觉，Anthropic 在设计这块参考了成熟工具的交互范式，目的是降低迁移门槛。图层能力让你能选中具体元素去改，属性面板让你能看到、也能调整这个元素的数值。这一套结构对做过设计的人非常友好，对没做过设计的人则是”看起来复杂”其实用得上的东西。

现在能做什么、不能做什么

能做的：从 Word、PowerPoint、表格、图片、代码库里读上下文；抓取现有网站的视觉元素作为参考；建设计系统；生成自定义调节滑杆做细粒度控制；导出成多种格式。不能做的，最需要你提前知道的一条是——没有版本历史。你迭代到第十版的时候，想退回第三版，回不去。第四节点会专门讲怎么对付这个限制。

另一条限制是关于额度的：共享额度按订阅计划走，免费档能看到界面、能上手，但基本上跑不起真正的项目。Enterprise 版本默认关闭这个功能，需要管理员手动开启，走通这条线大概需要一个工作日左右的沟通时间。

二、为什么总监式用法是先对齐再生成

大多数人对 AI 设计的期待是一句话出图：我把需求打进去，它把成品吐出来。这个期待在 Claude Design 上会撞墙，原因很简单——设计需求天然是不完整的。任何一个真实的设计任务，甲方给出的信息都是残缺的：没说受众是谁、没说篇幅多长、没说品牌语气是克制的还是一点都不克制。

Claude Design 会反问。当你给它一个中等的需求描述时，它不会立刻开始渲染，而是先问几个问题：目标受众是谁、篇幅预期多少、语气偏正式还是偏轻松、要不要放 logo。很多人这时候会烦——”我给你需求了，你怎么还问”——直接回一句”你看着办”。这一句”你看着办”，往往就是后面五轮返工的起点。

反问不是障碍，是总监的第一次提案检查

换个角度想。假设你招了一个设计总监，你跟他讲”帮我做一套发布会幻灯片”，他一句不问就开始画，你什么感觉？八成会觉得这人不靠谱。真正靠谱的总监，第一件事一定是把模糊处拆开、跟你确认，然后再动手。Claude Design 的反问，恰好就是这个动作。

所以总监式用法的核心是：先对齐，再生成。对齐不是写一份需求文档发过去，而是把它问你的每一个问题，用最短、最具体的方式答清楚。对齐一旦做扎实，后面几轮就省下来了。这跟传统设计的经验完全一致——需求阶段花两小时，执行阶段能省两天。

对齐的成本结构

算一笔账。写一段一百多字的风格描述，大概五分钟。回答它四个反问、再补三个约束，也大概五分钟。看上去时间一样。但前者带来的返工是隐形的：跑出来”感觉不对”，你说不清哪里不对，只能换个词再试，每次迭代几分钟，试到第五次你已经不知道自己在改什么了。后者带来的返工是显性的、可控的：你告诉它受众多大、篇幅多长，它就按那个来，偏差是沿着某个方向可以修正的，不是随机游走。

这就是为什么我坚持把 Claude Design 当成”对话式设计工位”而不是”出图机”：出图机只需要一次输入，设计工位需要一段对话。前者上限就是你那次输入的完整度，后者上限是整段对话的收敛能力。

三、需求拆解四段式：把它问你的问题变成模板

被反问几次之后，你会发现规律：它问的东西高度集中，基本就是四块——这是给谁看的、要多长、什么语气、有没有品牌资产要放。既然如此，与其被动等它问，不如主动按四段式喂给它。这不是写需求文档，需求文档是写给人看的、礼节性的、有大量背景叙述的；四段式是写给”要立刻开始干活的执行者”看的，越短越好、越具体越好、越少形容词越好。

第一段：对象与场景

这一段的目的是锁死”给谁看、在哪看”。一句话就够了，但要包含三个要素：谁、什么场合、多久看完。例如”给准备采购的中型企业 IT 负责人看的，产品发布会现场大屏，每页停留约 90 秒”。这三个要素一旦定下来，字号大小、信息密度、留白比例都有方向了——大屏 90 秒意味着单页信息量要少、字要大、层次要狠；如果是给投资人看的深度尽调材料，那就是另一套参数。

很多需求失败在对象不清。”给企业客户看的”这种描述等于没说，因为企业客户从三人创业公司到五万人集团，看同一份材料的需求完全相反。宁可窄，不可泛。

第二段：产出规格与硬约束

规格就是数字：多少页、什么比例、必须包含哪几块内容、不能出现什么。这一段是你对 Claude Design 施加”物理限制”的地方。给数字，不要给形容。“页面不要太满”是形容，”每页正文不超过 40 字”是限制。”字号有层次”是形容，”标题不超过 8 个字，字号是正文的三倍”是限制。

硬约束还包括那些不可协商的东西：必须放公司 logo 且放在右下角、必须有二维码页、必须出现三个产品线名称、不能出现竞品名称。这类东西提前说清楚，能省掉一轮专门的”补漏”迭代。

第三段：语气与风格指向（这里要给图，第四节点细说）

第三段是最容易被写成一百字形容词的地方，也是最应该尽量少写字、多给图的地方。你在这个段位只需要写一句方位性的描述，比如”偏冷静的技术向，不要活泼”——然后贴三张参考图，让图去承载真正的信息。这一段的文字作用是”锚定方向”，不是”完整描述”。

第四段：验收标准

这一段绝大多数人会漏。验收标准的意思是：当它出稿之后，你打算用什么标准判断”过”还是”不过”。写清楚这个，Claude Design 在生成时会自己去对齐那几条标准。例如”过稿标准：一眼能看出三层信息层级、任意两个元素之间没有抢焦、大面积留白不低于 40%”。

这三条是它能在生成阶段主动考虑的东西。你把验收标准前置，等于给了它一个自我检查的清单。这一招我用了半年多，命中率明显高于什么都不写。

四段式模板（可直接复制到对话里）

[对象与场景]
- 读者：____（越具体越好：行业 + 职级 + 决策角色）
- 使用场合：____（现场大屏 / 会后邮件附件 / 官网下载 / 社媒信息流）
- 单页停留时长：约 ____ 秒

[产出规格与硬约束]
- 页数 / 尺寸：____ 页，比例 ____（16:9 / 4:5 / 1:1）
- 必含模块：____（按顺序列，不超过 6 项）
- 必放资产：logo（位置 ____）、二维码（位置 ____）、产品名 ____
- 禁止项：____（竞品名 / 特定配色 / 特定图库风格）
- 数字型限制：单页正文 ≤ ____ 字；标题 ≤ ____ 字；留白 ≥ ____%

[语气与风格指向]
- 一句话定位：____（例：冷静的技术向，不要活泼）
- 参考图：见下方 3 张附图，请以图为准，文字仅作方向锚定

[验收标准]
1. 拿到稿后我第一眼要确认的是：____
2. 达不到就重做的底线是：____
3. 可以接受但我要微调的是：____

这个模板用熟之后，你甚至可以把它存成一段话术，每次新建 Claude Design 项目第一件事就是粘贴、填空。它替代了”写需求文档”的动作，但保留了需求文档的结构性——这就是我说的”不是写需求文档，而是回答它的反问，再给约束”的含义。反问是它主动做的对齐，四段式是你主动补的前置对齐，两件事合起来才叫需求拆解。

四、图的带宽远高于词的带宽

这是本文最核心的一条原理，我想单独用一节讲清楚，因为后面所有的实操建议都建立在它之上。

为什么三张风格参考图比一百字风格描述更有效？答案不在于 AI 更”喜欢”看图，而在于信息论意义上的带宽差异。

一句话能装多少设计信息

写下”现代、克制、有科技感”这九个字，你脑子里浮现的是一幅具体的画面，但传递出去的，只有九个词。接收方并不知道你脑子里的那幅画面。 “克制”在不同设计师那里指向完全相反的东西：有人想到的是大量留白、细衬线字母；有人想到的是黑白灰、无装饰；有人想到的是哑光材质、低饱和。这三个”克制”在视觉上几乎没有交集，但它们在文字上是同一个词。

一百个字的描述，本质上是在用一条一维的线去描述一个高维空间里的点。设计风格是一个几十维的东西：明度对比、色相分布、饱和度基线、字重跨度、字距松紧、圆角半径、阴影深度、图像处理方式（锐利/柔焦/颗粒）、装饰要素密度、网格严格度……你写得再努力，一百个字撑死覆盖五六个维度，剩下的全是接收方的自由发挥空间。而接收方一自由发挥，就出现了”说不上哪里不对”。

一张图能装多少设计信息

一张图在同一瞬间把这些维度全部呈现出来。它不是”描述”风格，它是”实例化”风格。你贴一张图，接收方不需要理解”克制”这个词在你的语境里是什么意思，它直接看到了”克制”长什么样：有多白、字有多细、圆角有多小、阴影有多浅。

更关键的是，图里还有大量的关系信息，而这些恰恰是最难用文字表达的：标题和正文之间的大小倍率是多少、色块的相对面积比是多少、留白和内容块的比例是多少、强调色在整页里出现了几次、每次在什么位置。这些关系是设计之所以像设计的真正原因。文字描述关系，需要写”标题字号约为主文字号三倍、主色仅用于不超过三处”——这已经是相当专业的描述，但仍然只有三倍这一个数字，其他关系全是空白。图把这些关系一次性给全了。

为什么是 3 张，不是 1 张也不是 10 张

一张图的问题是取样偏差。单张参考会把接收方锁死在那张图的具体细节上——它的配色、它的版式、连它的构图都被当成必须遵守的规则，于是产出变成了”这张图的孪生兄弟”，而不是”这个方向上的一张新图”。这在设计上叫”抄”，不是”参照”。

三张图的作用是三角定位。第一张定大方向（整体调性），第二张定你想要的具体手法（比如那种细线分割、那种低饱和的块面），第三张定边界——它可以是一张”反面参考”，明确告诉它”不要变成这样”。三张图共同划出一个区域，接收方在这个区域内部自由发挥，而不会跑到区域外面。两张不够（形不成约束），十张就互相矛盾了（信息过载，反而更模糊）。

这就是”图的带宽远高于词的带宽”：一百个字给你的是五六个维度上的方向词，三张图给你的是三四十个维度上的具体数值和关系。前者是坐标，后者是点云。点云更靠得住。

五、风格参考图投喂清单：3 张该选什么

既然三张图是核心杠杆，那选图就成了最重要的操作。我把这套清单用过很多次，也给不少团队做过示范，结论很稳定：三张图必须各司其职，不能都是”我喜欢的”。三张都是喜欢的图，你会发现它挑出来的反而是三张图里的共同点——也就是最安全、最平庸的那部分。

第一张：定调图（定整体气质）

选一张完成度最高、和你最终想要的效果最接近的成品。最好是和你产出格式同类的：做幻灯片就选幻灯片，做社媒图就选社媒图。这一张的核心作用是给 Claude Design 一个”终点长什么样”的锚。

选图标准：视觉冲击力不要太强（太强会劫持整个结果），但整体调性要明确可辨；画面里最好有清晰的层级结构（标题区、内容区、辅助区），让它能学到层级关系而不是只学到颜色。

第二张：手法图（定具体细节）

这一张可以完全不同类目——甚至更好。比如你在做幻灯片，第二张可以是一张杂志内页、一张海报、一个 App 的某个界面。你选它的理由是：它身上有你特别想要的某个具体手法。可能是它的色块拼贴方式，可能是它的线性图标语言，可能是它处理数字的方式（比如大号数字后面跟一行极小的单位）。

选图标准：画面里有一处让你一眼认定”这个我要用”的具体做法；这处做法可以被移植，而不是只属于特定内容。

第三张：边界图（定”不要什么”）

这一张最容易漏，但效果最明显。它是一张反面参考：风格上和你想要的方向相近，但越过了某条线。比如你要的是”冷静”，这一张就是”冷到像医疗报告”；你要的是”活泼”，这一张就是”活泼到像儿童教育 App”。

作用机制：它和第一张图之间的差距，就是”我要的范围”的边界。有了这个对比，接收方能在两组视觉特征之间找到差异点，从而理解哪些特征属于”要”、哪些属于”不要”。这比写”不要太正式也不要太幼稚”有效得多——因为那句话依然是文字，依然要由接收方去解释”正式”和”幼稚”各自是什么样。

投喂清单（可直接照着准备）

# 风格参考图投喂清单 · 3 张

## 图 A｜定调图（必选，1 张）
- 来源：与你产出格式同类的成品（做 PPT 就选 PPT，做社媒就选社媒）
- 画质：截图或原始文件，不要压缩过度、不要加水印
- 检查：能看清层级关系（标题/正文/辅助区的比例）
- 一句话标注：这一张定 ____（整体气质，如"高端但不高冷"）

## 图 B｜手法图（必选，1 张）
- 来源：可以是跨类目（杂志页 / 海报 / 界面截图）
- 检查：画面里有一处你明确想移植的具体手法
- 一句话标注：我要借鉴的是 ____（如"色块按三等分切的办法"）
- 注意：如果这处手法只在这张图里成立（换个内容就失效），换一张

## 图 C｜边界图（必选，1 张）
- 来源：和你的方向相近，但明显越线的作品
- 检查：越线部分要明显、可指认，不能是"整体感觉差一点"
- 一句话标注：这一张过了，我不要的是 ____（如"冷到像医疗报告"）

## 通用规则
- 三张图之间不能有同一张里的重复要素（避免加权）
- 上传顺序：A → B → C，并在同一段话里说明各自作用
- 不要在图片之外再写超过 30 字的风格形容词，让图说话
- 如果结果偏向了某一张，先检查那张图是不是视觉冲击过强
- 输出第一版后，如果方向对了，把这 3 张图保存下来作为该项目固定输入

六、对照实验：怎么证明”3 张图 > 100 字”

上面讲的是原理，但原理要用数字兜底才有说服力，尤其是给团队做决策的时候。我建议每个要长期用 Claude Design 的团队，都花半天做一次对照实验。这不是学术，这是校准——校准你自己团队对”什么输入有效”的直觉。

实验设计

取同一个 brief，不要换。分组两套输入：

A 组：一百字的风格描述。要求写得像正常人会写的那样，包含形容词、情绪词、几个色名，不要刻意写差。

B 组：三张参考图 + 不超过三十字的方位说明（采用第五节的清单）。

每组各出三版，共六版。三版之间要做到”同一 brief、不同版本”，也就是让 Claude Design 重来三次，而不是在一版上反复改——因为我们要测的是首版命中率，不是迭代能力。

四个评分维度

用什么打分很关键。打”好不好看”是无效的，因为好看是主观的、且会被新鲜感干扰。要打分就打分可归因的维度：

维度一：调性一致度。把六版和你的目标调性放在一起，让不参与实验的三个人（最好有一个非设计背景）各排一次序。这一项测的是”方向对不对”。

维度二：层级清晰度。遮住内容只看版式，问：能不能一眼数出这是三层还是四层？元素之间有没有抢焦？这一项测的是”能不能用”。

维度三：可复用度。拿这版做第二页（换内容但不换风格），看风格能不能延续。这一项测的是”这版到底是学到了风格，还是记住了这张图”。

维度四：首版改动量。数一下你为了达到可交付状态，用了多少次修改操作（对话轮次 + 评论条数 + 拖拽次数）。这一项测的是”省不省事”。

预期结果与怎么读

根据我的经验，B 组通常在调性一致度和可复用度上显著优于 A 组，在层级清晰度上差距不明显（因为层级主要由内容结构决定，输入方式影响有限），在首版改动量上优势最大——A 组的典型模式是”整体对但哪儿都要修”，B 组的典型模式是”整体对、只修两三个细节”。

如果你的实验结果不是这样，先别急着推翻结论，检查三个可能的干扰项：一是 A 组的描述是不是被你不自觉地写得太好了（很多人写的时候会下意识优化）；二是 B 组的三张图是不是其实高度同质（同质会退化成单张）；三是 brief 本身是不是太松（brief 太松的情况下两种输入都发散，差距被噪声掩盖）。

把这个实验的结果表贴在团队里，比讲一小时道理管用。

七、设计系统：让 Claude Design 记住你的品牌

参考图解决的是”这一版像不像”，设计系统解决的是”每一版像不像”。这两件事经常被混为一谈。参考图是一次性的方向输入，设计系统是持续存在的约束集合——它存品牌色、字体、组件、样式规则。一旦建好，Claude Design 每次出稿都会自动对齐它，你就不用每轮都强调”用我们的蓝、用我们的字”。

这一节的结论是：做第二个项目之前，就该把设计系统建起来。没建之前，你每换一个项目就要重新投一次图、重新对齐一次，成本是线性叠加的；建了之后，边际成本骤降。

四种建法的适用场景

Claude Design 支持四种建法，各有明确的适用面，用错了会浪费大量时间。

一、从 GitHub 仓库同步。适合已经有代码化设计系统（design token 存在仓库里）的技术团队。这是保真度最高的建法，因为 token 就是事实本身。前提是仓库里的 token 是活的（真的在用的），而不是历史遗留的僵尸文件——同步一份过期 token，比不建还糟。

二、从 Notion / Jira 等连接工具拉取。适合设计规范写在文档里、或者在任务系统里维护组件清单的团队。保真度中等，因为文档和实际落地之间总有偏差，但胜在更新流程顺畅——规范改了文档就改了，设计系统能跟着动。

三、上传品牌文件。适合有完整品牌手册（VI 手册、字体包、logo 规范）的品牌方或甲乙方合作场景。这是最快能建起来的一种，问题是品牌手册往往描述”品牌应该怎样”而不是”产品界面实际怎样”，所以用于市场物料效果最好，用于产品界面会缺少组件层面的信息。

四、把现有设计直接丢进对话让它生成。适合手上已经有现成设计稿（比如一套 Figma 页面、一版官网）的团队。这是最”实用主义”的一种：从既有产出反推规则。保真度高、成本低，缺点是把既往的坏习惯也一起继承了。我的建议是，用这种方式建完之后，花半小时审一遍生成的设计系统，把明显不像系统的东西（比如某个页面的一次性颜色）删掉。

四种建法对比

建法	最适合的场景	保真度	建设速度	主要风险
从 GitHub 仓库同步	有代码化 design token 的技术团队	高	慢（要先整理 token）	同步了过期或未使用的 token
从 Notion / Jira 拉取	规范文档化、流程成熟的团队	中	中	文档与实际落地脱节
上传品牌文件	品牌方、对外物料为主	中高（品牌层）	快	缺组件层信息，产品界面用不够
现有设计丢进对话生成	已有成稿、想快速起量	高（界面层）	最快	把历史坏习惯一起继承

实操上最常见的组合是：用第四种快速起个底，再用第一种逐步替换成 token 真源。前者负责”今天就能用”，后者负责”半年后不出乱子”。

建多套设计系统，按产出物边界划

设计系统可以建多个。这个能力很多人不知道，或者知道了但不用，结果一套系统被硬塞进所有场景，做社媒图的时候也被迫遵守网页的间距体系。

我的划分原则是按产出物的物理边界划，不按业务线划。幻灯片一套（16:9、大字号、低密度）、社媒一套（1:1 与 4:5、高对比、强钩子）、产品界面一套（多组件、密集状态）、对外品牌物料一套。这四套的差异不是审美差异，是尺寸和观看距离带来的物理差异——把 16:9 的字号规则往 4:5 的图上一套，必然出问题。

反过来，不要把”市场部”和”产品部”分成两套。业务线之间的差异是组织结构的产物，不是视觉的产物；同一个品牌下两个部门做出来的东西，用户看到的还是同一个品牌，应该共享同一套视觉语言。

设计系统字段模板

不管你用哪种建法，都建议用下面的字段结构来组织。这个模板不是 Claude Design 强制要求的格式，而是让你在”丢进去”之前先想清楚自己要给什么。字段越具体，生成出来的设计系统越能用。

# 设计系统字段模板

## 1. 基础
- 系统名称：____（例：品牌主视觉 / 产品界面 / 社媒）
- 适用产出物：____（例：16:9 演示文稿，不含网页）
- 生成方式：GitHub 同步 / Notion 拉取 / 品牌文件上传 / 现有设计生成
- 最后核对日期：____

## 2. 色彩
- 主色：____（HEX，允许色阶 ____）
- 辅助色：____（HEX，使用上限：整页 ____ 处）
- 中性色阶：____（从 #___ 到 #___，____ 档）
- 语义色：成功 / 警告 / 错误 / 信息 各 ____
- 禁用色：____（明确列出，避免 AI 自创）

## 3. 字体
- 主字体：____（字重可用范围 ____）
- 副字体：____（仅用于 ____）
- 字号阶梯：____（例：64 / 40 / 24 / 16 / 12）
- 行高规则：标题 ____，正文 ____
- 字距规则：大字号 ____，正文 ____

## 4. 间距与栅格
- 基础间距单位：____（如 8px）
- 栅格：____ 列，槽宽 ____，页边距 ____
- 留白下限：____%

## 5. 组件
- 按钮：主按钮 ____ / 次按钮 ____ / 文字按钮 ____
- 圆角半径：____（组件级 ____，卡片级 ____）
- 阴影：____ 档（____）
- 图标语言：线性 / 面性 / 混合；线宽 ____

## 6. 图片与插画
- 图片处理：锐利 / 柔焦 / 颗粒 / 无处理
- 插画风格：____
- 图像禁止项：____

## 7. 禁止清单（这一节最关键）
- 不要用 ____ 类渐变
- 不要出现 ____ 风格的插画
- 不要在标题里用 ____ 字体
- 不要在单页里出现超过 ____ 个强调色

模板里第七节”禁止清单”是最容易被忽视、也最值钱的一节。设计系统的正面规则告诉 AI 该做什么，禁止清单告诉它不该做什么——后者往往更有效，因为 AI 的自由发挥空间主要就是这些”没说不能”的地方。

Claude Code 里的 /design-sync

如果你的团队用 Claude Code 写前端，还有个额外的抓手：在 Claude Code 里执行 /design-sync，可以读取本地的 token 与组件，把代码侧的设计资产同步过来。这条路径对”设计稿到代码”的一致性帮助很大——它让设计系统和前端实现不是两套平行的事实，而是一条链上的两个节点。

八、画布侧的三种修改手段，各管什么粒度

Claude Design 给了三种修改方式：对话、行内评论、直接拖拽改画布。很多人只用了对话，因为对话最顺手，然后抱怨”怎么改都改不到位”。问题不在工具，在于用错了粒度——每一种手段都对应一个特定的改动层级，用错层级就像用锤子拧螺丝。

对话：结构性改动

适用于会改变页面整体逻辑的改动：增加或删除一个模块、调换两个板块的顺序、改变整页的叙事结构、换一个完全不同的版式思路、把单栏改成双栏。这类改动的关键特征是：它不是修改某个元素，而是修改元素之间的关系。

用对话的时候，说清楚”改什么关系”，而不是”改成什么样”。比如”把第三页的产品截图挪到标题上方，让视觉先于文字出现”，这描述的是一个结构关系，Claude Design 会自己决定挪多大、留多少间距。如果你把间距也一起规定了，就从结构性改动降级成了组件级微调，那更适合用第二种手段。

行内评论：组件级微调

适用于单个元素或单个组件的调整：把这个按钮的内边距加大、这个标题的字重减轻一点、这个卡片的圆角小两档、这个图标的线宽调细。行内评论的特点是可以精确指向——你点在那个元素上说话，它知道你说的是哪个。

这是三种手段里精度最高的一种，也是”改到位”的关键。很多人不用它是因为没发现它，直接在对话里说”按钮内边距大一点”，结果 Claude Design 不确定你指哪个按钮，可能改错了、也可能全改了。行内评论的典型场景就是第五节最后那句话：“把这个按钮内边距加大”——这句话用评论说，一次就到位；用对话说，可能要来回三轮。

直接拖拽改画布：视觉判断类调整

适用于那些”你看到才知道对不对”的调整：这个标题再往左挪一点点、这块留白再大一些、这个图放大到刚好卡住版心。这类调整的共同点是你自己也说不出具体数值，但手一拖就知道。

拖拽的最大好处是即时。你不需要描述、不需要等待生成，手一动结果就变。它的代价是：拖拽只在你当前看到的这一版上生效，逻辑上不会反向修正到其他页，而且拖出来的效果不一定符合设计系统的规则（你可能把间距拖成了 13px，而系统里只有 8 和 16 两档）。所以拖完最好回看一眼属性面板里的数值。

三种修改手段适用粒度表

手段	适用粒度	典型指令	不适用的情况	注意事项
对话	页面级 / 结构级	“把第三页的截图挪到标题上方”、”整个第四页换一个叙事顺序”	单个元素的数值微调	说关系不说样式；每次只改一件事
行内评论	组件级 / 元素级	“把这个按钮内边距加大”、”这个标题字重减轻一档”	会牵动整页结构的改动	一定要点中元素再说；一条评论只提一件事
直接拖拽	视觉判断级别（说不出数值的调整）	手动移动、缩放、调整留白	需要复用的一致性改动	拖完看属性面板数值，避免偏离设计系统

还有一种辅助手段值得提：自定义调节滑杆。Claude Design 可以生成滑杆，让你用拖动的形式控制间距、颜色等细粒度参数。这是介于”行内评论”和”直接拖拽”之间的东西——它给你数值控制，但保留了拖动的直观。当你要反复试某个间距的多个档位时，滑杆比反复打字快得多。

经验的排序是：先对话定结构，再评论改组件，最后拖拽找手感。反过来做（先拖拽）通常意味着结构本身没想清楚，你会在错误的结构上反复微调，最后不得不回到对话重来。

九、一次完整的工作流：从需求到可交付

把前面几节拼起来，就是一条完整的链路。我把典型路径列在下面，每一步都标注了用前面哪个部分的方法。

第一步：描述需求（四段式）

打开一个 Claude 会话，调用 Artifacts 里的 Claude Design 模板，把第三节的四段式模板粘进去、填空、发出。同时附上第五节的 3 张参考图。

第二步：回答反问

它会问你受众、篇幅、语气、要不要放 logo。这些你在四段式里多半已经写了，它重复问的时候，直接确认”按上面写的来”即可——注意，这里不要省略，明确确认能减少一次歧义。

第三步：出第一版

等它出稿。中等信息密度的稿子，每次迭代要几分钟。这个时间不要用来刷手机，用来做一件事：对照你写的验收标准，先在心里预判它会在哪几条上失分。这样拿到稿子时你判断更快、更准。

第四步：用三种手段修正

按第八节的顺序来：先看结构有没有问题（有问题就对话），再看组件有没有问题（有问题就评论），最后看手感（手感不对就拖）。不要一上来就拖。

第五步：分享或导出

自用或团队内看，直接分享链接最快。要交给下游（Figma、前端、客户），走导出。导出格式的选择见下一节。

十、导出格式怎么选，导出之后怎么接

Claude Design 支持导出 .zip、PDF、PPTX、Google Slides、独立 HTML。这五种不是随便列的，每一种对应一个下游场景。选错了格式，后面的人工返工量会指数级上升。

导出格式选择表

格式	适合交给谁	优点	缺点	典型场景
.zip	需要完整源文件的人	包含全部资源，不丢素材	对方要有对应工具能打开	交接给外包设计、归档
PDF	客户、审批人、打印	所见即所得，不会跑版	不可编辑	提案终稿、印刷、法务审阅
PPTX	需要现场讲的人	可在 PowerPoint / Keynote 里继续改	复杂版式转换后可能错位	发布会、客户汇报、内部培训
Google Slides	要多人协作编辑的团队	在线协作、版本由 Google 管	字体与特殊效果可能退化	跨团队协作的演示材料
独立 HTML	前端、开发者、需要交互演示的人	交互效果全部保留，可直接上静态站	需要技术方接手维护	落地页原型、交互演示、给前端做参照

一个常见误区：给前端导出 PDF。PDF 里没有间距信息、没有栅格、没有交互状态，前端拿到只能”看图猜数值”。要交给前端，用独立 HTML 或 .zip，让开发者能直接看到代码和样式。

接 Figma：当参照，不当源文件

Claude Design 的产出和 Figma 不是替代关系。我的建议是：把 Claude Design 的产出当”设计方向的确定稿”，把 Figma 当”可协作的施工图”。

具体做法：把导出物放进 Figma 里作为参照层，在你的 Figma 文件里重建——重建的过程本身就是一次设计审校，你会在这个过程里发现那些”看起来对但落不了地”的地方（比如某个间距在 8pt 栅格上根本不存在、某个字号在小屏上会崩）。这个过程听起来像是多干了一遍活，但它把问题提前暴露在了设计阶段，而不是开发阶段。

如果团队规模小、迭代快，也可以跳过 Figma，直接从 HTML 走前端，但前提是你的设计系统已经建得足够扎实——没有系统的约束，跳过 Figma 意味着没有人守最后一道关。

接前端：先对 token，再对结构

给前端交接时，顺序很重要：先对设计系统里的 token，再对页面结构。很多交接失败在顺序上——前端先照着图写结构，写完才发现颜色和间距全是硬编码，后面设计系统一改，页面全要返工。

正确顺序是：把设计系统的色彩、字号、间距先落进代码里的 variables；然后拿着 HTML 导出物对照结构，确认每个模块用的是系统里的哪一档；最后处理交互态（Claude Design 产出的是”能跑的设计”，交互态已经在了，直接看代码就行）。如果团队用 Claude Code，前面提到的 /design-sync 可以把这个对 token 的动作自动化掉一大半。

十一、没有版本历史，怎么安全地试错

这是 Claude Design 最需要你提前建立习惯的地方。没有版本历史意味着：任何一次修改都是不可逆的覆盖。你在第十版上想试一个大胆的方向，试完不喜欢，回不去了。

规则一：想试新方向，先冻结

在对话里明确说一句”保存现状，再试一个完全不同的方向”。这句话的作用是让它先把当前这版留下，再另起一版去探索。这是我在所有 Claude Design 操作里见得最实用的一条口头指令——它把”不可逆”变成”可回退”。

注意，这句话要在动手之前说，不是之后。说在之后没有意义，因为它已经被覆盖了。

规则二：每过一个里程碑，导出一份

你的版本历史，就是你自己导出的文件。在三个节点一定导：结构定下来的那一刻、视觉定下来的那一刻、交付前的那一刻。导成 PDF 或 .zip 都行，命名带日期和版本号，存在团队共享盘里。

这个习惯听起来笨，但它是目前唯一可靠的版本管理方式。别指望”我记得当时那样挺好看的”——你记不住细节，而且没法验证。

规则三：一次只改一类东西

如果你在同一轮里既改结构又改配色又调间距，结果不满意的时候，你无法判断是哪一处导致的。一次只改一类，每改完一类看一次结果，这样每一次改动都是可解释的。

规则四：重要探索另起项目

如果要做的是”这版和那版哪个更好”的对比，不要在同一个项目里来回切。分别新建、分别出稿、最后拿着两边比对。这样两边都是干净的，也符合前面第六节对照实验的思路。

十二、把总监的角色具体化：四个日常动作

前面讲的都是操作。最后这一节回到”设计总监”这个身份本身，因为工具会变、界面会变、模型会升级，但总监的职能不太会变。我把这些职能拆成四个日常动作，每个动作都能直接对应到 Claude Design 的一个操作上。

动作一：先问清楚，再下指令

对应的是第四节的四段式。总监不会拿着模糊需求开工，他会先把模糊处拆开。你在 Claude Design 里的四段式填空，就是在练这个动作。

动作二：给参照，不给形容词

对应的是第五节的三张图。总监跟设计师沟通的时候，很少用形容词，更多是”你看这个””照这个来””别像那个”。图的带宽远高于词的带宽，这个道理在人与人之间成立，在人与 AI 之间同样成立。

动作三：定标准，定边界

对应的是设计系统和验收标准。总监的价值一半在审美，一半在标准——他知道什么是”能过”，也知道什么是”绝对不能出现”。设计系统的禁止清单，就是后者。

动作四：按粒度改，不搞一刀切

对应的是第八节的三种修改手段。好的总监不会在结构没定的时候抠像素，也不会在细节问题上推翻重来。他会判断”这个问题该在哪一层解决”，然后只在那一层动手。

这四个动作合起来，构成了一个判断标准：当你想不清楚该怎么操作 Claude Design 的时候，问自己一句——如果我是那个设计总监，我现在会做什么？大部分时候，答案是”再问清楚一点”，而不是”再多试一版”。

十三、常见误区与避坑

误区一：把画布当主战场

第一次用的人会本能地在新画布上拖来拖去，觉得这样才有”控制感”。实际上控制感来自左边。左侧的一句话，抵得上右侧二十次拖拽。

误区二：三张图选成”三张我喜欢的”

三张同质化的图，会让 Claude Design 取交集，取出来的是最平庸的共同点。三张图必须明确分工：定调、手法、边界。

误区三：不建设计系统就上多个项目

每个项目都重新投一次图、重新对齐一次，短期看是省了建系统的半小时，长期看是每次都要多花几轮迭代，而且每个项目的视觉语言都不太一样，最后品牌形象是散的。

误区四：在对话里做本该用评论做的微调

“按钮大一点”这类话，用对话说等于没指明对象，用评论说一次就好。判断标准：这句话里有”这个”两个字吗？有，就用评论。

误区五：没有冻结就大改

在没有版本历史的前提下，任何一次”试试看”都是单向的。养成说”保存现状，再试一个方向”的习惯，成本是一句话，收益是不用一个下午。

误区六：给前端导 PDF

PDF 是给肉眼看的东西，不是给代码看的东西。要交前端，请用 HTML 或 .zip。

十四、FAQ

Q1：claude.ai/design 已经关了，我还能用 Claude Design 吗？

能。独立站点于 2026 年 12 月 14 日关闭，之后那个地址只读、不能新建项目，但已有的项目还能查看。关闭的同时，Claude Design 已经整合为 Artifacts 里的一个模板，在任意 Claude 会话里都能调用。所以现在的正确入口是”打开一个会话，在 Artifacts 里选设计模板”，而不是打开某个独立网址。

Q2：为什么不直接写一段详细的需求，还要先回答它的反问？

因为设计需求天然是不完整的，而 AI 无法替你补上它不知道的那部分。它反问的受众、篇幅、语气、logo，恰好是决定成败的四个变量。你提前写清楚的，它就不会重复问；你没写清楚，它问了你也得答。回答反问的成本是几句话，不回答的成本是后面几轮猜不准的迭代。前者是可控的，后者是随机的。

Q3：三张参考图具体怎么配比才不会互相打架？

关键是分工。第一张定整体气质，与产出格式同类、完成度最高；第二张只负责一个具体手法，可以跨类目；第三张是边界图，风格相近但越过了某条线。三张之间不要有重复要素，否则会被加权。如果结果明显偏向某一张，说明那张图的视觉冲击过强，换成更平的一张。

Q4：设计系统一定要建吗？小团队做一两次项目也要建？

做第二个项目之前建。设计系统存的不只是颜色字体，更是”边界”——尤其是禁止清单。没有它，每一版都要你手动纠偏；有了它，Claude Design 出稿时就自带对齐。如果只是做一次性物料，可以不建；只要这个品牌还要反复出东西，建了就一定划算。多套设计系统按产出物的物理边界划（幻灯片一套、社媒一套、产品界面一套），不要按部门划。