我们能从Claude Design提示词中学到什么

一篇 Claude Design 的推文，Figma 和 Adobe 股价又跌了。

一句话总结 Claude Design 是 Anthropic Labs 推出的视觉协作工具，让你通过对话与 Claude Opus 4.7 共同创建设计、原型、幻灯片等视觉作品，自动应用你的设计系统，支持从文本、代码库、文件导入，可通过对话、行内评论、直接编辑优化，最终导出为 HTML、PDF、PPTX 或直接交付给 Claude Code 开发。

打败传统的，往往不是更好的同类，而是全新的范式。

另一方面，Claude 最近频繁的举动越来越不像一个底层的大模型公司了。就像卖铲子的人突然自己开始挥舞铲子，这一次，也挥向了 Lovable 和 V0 这类基于大模型快速生成设计的工具。

Claude Design 究竟好用吗，来自推特博主 @jerrod_lew 使用 Claude Design 和 Opus 4.7 设计了个人仪表盘。

也有设计师不屑一顾，@uiux_harshit 表示“如果你重视你的产品，你就会聘请设计师”。下图是他做的对比。

人类的品味是不是真的失去效果了呢？Claude Design 是不是意味着对设计的又一次颠覆？

而现在，Claude Design 的系统提示词已经被扒出来了。我觉得值得关注的恰恰是：这份提示词里藏着什么顶级设计思维？是否对我们的设计思考带来什么启发？

拆解系统提示词

为了更好地实验这个效果，我用这套提示词，让 Claude Opus 4.7 自己把这套提示词生成了一个可以阅读的网页版本。

可以访问这个地址观看：https://claude.zeroyue.com/，比本文内容阅读体验更好。

01. 角色定位：先是设计师，HTML 只是画笔

“用户是经理，你是为他出活的设计师。”

这是整份提示词的第一性原理。

Claude 不是“会写代码的 AI 助手”，而是“恰好用 HTML 作画布的多领域设计师”。

它会根据任务切换身份：

• 做动画时，它是 motion designer
• 做原型时，它是 UX 设计师
• 做幻灯片时，它是 presentation designer

明确避免 Web 设计套路，除非你真的在做网页。

给你的启发：

和 AI 协作时，别说“帮我写个页面”，而是“作为一名 UX 设计师，为我设计一个……”。角色定位决定输出质量。

02. 六步工作流：开头多问，结尾少说

从理解需求到交付验证，每一步都有明确职责：

1. 理解需求：主动追问输出形式、保真度、要几版、约束条件、设计系统
2. 探索资源：读完设计系统的完整定义和所有相关文件
3. 规划：拆成 Todo，排好顺序再动手
4. 搭建结构：建好目录，把要用的资产复制进来
5. 完成验证：用 done 和 fork_verifier_agent 做质量把关
6. 极简总结：只说注意事项和下一步，不啰嗦

注意第 1 步和第 6 步的对称：

开头多问，把模糊需求问成可执行方案；结尾少说，把验证交给工具。

这是成熟协作者的姿态。

03. 上下文是首要依据，而从零开始是最后选择

“从零开始做高保真设计是最后的选择。”

提示词反复强调：好设计不会凭空生出来。

动手之前，必须主动找：

• 用户的代码仓、Figma、截图
• 已有的 UI Kit、设计系统
• 同领域的现有产品

找不到？主动问用户要，而不是脑补一套。

该做的事

• 列资产清单：先 list、再读组件、再读样式 token
• 把品牌色、间距、圆角、字体栈“原值搬运”
• 素材没有就画占位，占位胜过糟糕的真品

不要做的事

• 跳过资产探索，靠记忆“大概是这样”地复刻
• 批量复制超过 20 个文件的资源目录
• 用截图当唯一参考：能拿到代码就别只看图

这是在对抗 AI 最大的陷阱：凭训练数据脑补，而非基于真实项目定制。

04. 先建系统，再动笔

“Create a system up front.”

在画第一个像素之前，先把系统说出来：

排版规则、配色方案、版式节奏、组件清单、留白规范。

关键规范

颜色：优先用品牌色；不够用时，用 OKLCH 调出与现有色板和谐的新色。

字号：

• 1920x1080 幻灯片正文 >= 24px
• 打印文档 >= 12pt
• 移动端可点区 >= 44px

版式：1-2 个背景色就够，用全出血图、不同色块的章节首页制造视觉节奏。

CSS 友军：text-wrap: pretty、CSS Grid、高级 CSS 效果，都是你的朋友。

05. 提问的艺术：至少问 10 个问题

问得好，是设计师最被低估的能力。

什么时候问

• 给份 PRD 让做 deck：问受众、语气、长度
• “做 6 张关于黄油历史的 slide”：太空，必须问
• “为外卖 App 做 onboarding 原型”：问一大堆

什么时候不问

• “用这份 PRD 给工程全员做 10 分钟 deck”：信息够了，直接做
• “把这份截图变成可交互原型”：行为清晰就别问

提问清单（至少 10 条）

• 先确认起点和上下文：UI Kit、设计系统、代码库
• 问要不要做多版本，针对哪些维度做
• 问 tweaks 想探索什么：UX 新颖性？视觉？动画？文案？
• 问用户最在意：流程、文案、视觉哪一项
• 再加 4 条以上“问题特异性”的问题

心法：宁可问多，不可问少。

06. Tweaks：把可调性交还给用户

Tweaks 是工具栏上的开关，开启后会在原型里露出可调控件：颜色、字号、间距、文案、版式、特性开关。

持久化机制

Critical

顺序绝不能错：

必须先注册 message 监听，再向父窗口 postMessage('__edit_mode_available')。

否则用户的 toggle 点了像没点，这是典型的静默失败。

默认行为：

就算用户没要 tweaks，也主动加几个：“暴露给用户一些他们没想到的可能性。”

07. 技术红线：最容易“沉默崩溃”的地方

看似工程细节，却是最容易出问题的地方。

1. 必须钉版本和 integrity hash

不能写 react @18 这种半浮动版本，也不能省略 SHA384 完整性校验。

2. 不要给 styles 起重名

NEVER write const styles = { ... }。

如果导入两个组件都用了同名 styles，会直接互相冲撞。

一律用组件名前缀：terminalStyles、cardStyles。

3. Babel 多文件不共享作用域

每个 <script type="text/babel"> 都是独立作用域。

想在文件之间共享组件，显式挂到 window。

4. 其他约束

• 文件不要超过 1000 行，太长就拆
• 禁止 scrollIntoView，它会把整个 web 应用顶飞
• 公式统一用 $$...$$，单 $ 不渲染

08. 远离 AI Slop：一眼看出是 AI 做的

“AI Slop”指那种一眼能看出“这是 AI 做的”的烂俗痕迹。

提示词点名劝退

• 滥用渐变背景
• 使用 emoji，除非品牌就用
• 圆角容器加左侧色条 accent 的“那种卡片”
• 用 SVG 现画“图像”，宁可用占位
• 用烂大街的字体：Inter、Roboto、Arial、Fraunces、system fonts
• 无意义的统计数字、装饰性 icon、信息堆叠，也就是 data slop

提示词推荐姿态

• “One thousand no’s for every yes”，少即是多
• 每一个元素都要“挣得自己的位置”
• 觉得空，是版式问题，不是要塞内容
• 想加新版块、新图、新文案？先问用户，别擅自加

09. 交付与验证：保证用户落地的那一帧不会崩

“始终保证用户落地的那一帧不会崩。”

收尾流程被切分得很干脆：

1. done(path)：把文件推到用户的 tab，返回控制台错误。有错就修，再调 done
2. fork_verifier_agent()：干净后再 fork 一个验证 agent，在后台截图、跑 JS、查布局

心法：“不要自己去自检”，把这份脏活交给验证 agent。

固定尺寸的内容（Decks 等）

幻灯片不要手工撸。

直接用 deck_stage.js 起步组件，它已经把缩放、键盘/触屏导航、页码、speaker notes、localStorage 续看、打印成 PDF 全做好了。

总结顶层设计：五个核心思考

看完这 9 条，再往上抽一层，会发现整套系统藏着 5 个对设计工作的启发：

1. 先定角色，再谈工具：你想让 AI 成为谁？

别说“帮我做个设计”，而是说“作为一名 UX 设计师，帮我……”。

给 AI 一个明确的身份，它才知道该关注什么、该问什么、该如何取舍。

就像你找人帮忙，说“我需要一个设计师”和“我需要一个会 PS 的人”，来的人做事方式完全不同。

2. 给 AI 画边界，它才能做得更好

AI 什么都能做一点，但什么都做不精。

与其让它自由发挥，不如告诉它：只能用这几个颜色、只能用这套组件、必须先问清楚再动手。

就像给孩子玩具，100 个玩具他不知道玩什么，3 个玩具反而能玩出花样。

3. 好设计不是凭空想出来的

永远别让 AI“从零开始”做设计。

先给它看你现有的设计系统、品牌色、已有页面，让它基于这些做延伸。

AI 最大的问题是：它会凭记忆脑补一套“看起来像那么回事”的东西，但和你的项目完全不搭。

就像装修，你得先给设计师看你家现有的风格，而不是让他随便想一套。

4. 提前说清楚“不能犯的错”

有些错误不会报错，但会让用户体验直接崩掉。

把这些“看起来没问题、用起来就炸”的坑提前告诉 AI，用大写、加粗、重复说。

比如：两个文件不能用同一个名字、某个操作必须先做 A 再做 B。

就像开车前告诉新手：“这个路口必须提前变道，不然来不及。”

5. 开头多问，结尾少说：把时间花在刀刃上

设计开始前，至少问 10 个问题：给谁看？要达到什么效果？有哪些限制？

问清楚了，后面就能一气呵成。

设计做完后，别自己反复检查，交给工具或其他人验证。

就像写文章：开头多想想写给谁、想说什么；写完后找别人帮你挑错，别自己反复改到天荒地老。

写在最后

这套提示词不是在教 AI“怎么做设计”。

而是在用角色定位、流程约束、负面清单，把一个“什么都会一点”的通用模型，塑造成一个“在特定领域像人类专家一样工作”的专业设计师。

Figma 股价跌了，可能只反映了表层冲击。

真正的冲击是：当 Anthropic 自己的设计师都不再主要用 Figma，别的科技公司还会继续主要用吗？

范式转变已经发生。

不是让设计师“做得更快”，而是让不会设计的人也能做设计，只会执行的设计师逐渐淘汰。

正如编程圈 Claude Code 时刻，设计圈也迎来了 Claude Design 时刻。

而我们刚好站在这个历史的分水岭上，继续见证。