在动手之前先把想法跑起来:Claude Design 作者的 10 条工作方法

Claude Design 的作者 Nate Parrott 写下 10 条工作方法,但真正值得抄的是那条被藏起来的分工线

Posted by iceyao on Saturday, August 8, 2026

本文对象:Anthropic 官方博客 2026-07-24 发布的《How the product designer who built Claude Design uses it to explore ideas before building them》,作者 Nate Parrott,Anthropic 产品设计师、Claude Design 的最初实现者。文末声明该文代表其个人观点与使用习惯。

文中所有引号内的表述均出自原文,本文自己的判断会明确标注。

设计价值向动手之前迁移

这类"工具作者讲自己怎么用工具"的文章,通常有两种读法。

一种是当功能清单读,读完知道 Claude Design 能做幻灯片、能做落地页、能接 GitHub,然后关掉页面。另一种是把它当一份现场笔记读——一个设计师在 2025 年秋天发现自己跟不上工程师的速度,然后花了几个月把这件事解决掉,中间踩过什么、换过什么判断。

第二种读法更有用,因为这篇文章真正的信息量不在那 10 条实践里,而在这 10 条实践的隐含排序:哪几步必须人做,哪几步该交给模型,以及那条分界线为什么落在那里。

下面按这个思路展开。


一、起点:一个追不上工程师的设计师

先看背景,因为动机决定了这个工具后来长成什么样。

2025 年秋,Nate Parrott 是 Claude Code for VS Code 项目上唯一的产品设计师,和两名工程师一起,把原本活在终端里的 Claude Code 重新设计成终端之外的界面。9 月底发布 beta,11 月 Opus 4.5 发布之后,团队开始"高速激进地迭代"。

问题就出在这里。他的原话是:工程师的交付速度因 AI 大幅提升,而他"仍以一贯的速度交付"。

这不是一个抱怨,是一个具体的工程问题——流水线上有一段没提速,整条线就被那一段限速。Claude Design 的全部动机就是这个。

Claude Design 的来路

值得注意的是他的第一次尝试失败了:把终端输出和截图贴给 Claude,说"这是我们要加的功能,你来设计",效果很差。

大多数人在这一步会得出的结论是"AI 还不够懂设计",然后回去继续手画。他得出的结论不一样:

发现 Claude 非常擅长 HTML;HTML 不只是网页格式,而是"丰富的交互式视觉媒介"——幻灯片、视频、PDF 能做的,网页都能做。

这句话是整篇文章的转折点。问题不在模型的设计能力,在产物形态。 让模型输出"一张设计稿",它要模拟一个它并不真正操作的媒介;让它输出 HTML,它是在自己最熟的地面上走路。

于是有了左侧对话、右侧预览的分屏界面。可用了,但缺"品味"——所以他又花时间把 Anthropic 的品牌精髓(字体、色彩、素材、原则)蒸馏成提示词,输出才开始自动落在规范内。

真正让它转正的是一次会议。在 Anthropic Labs 团队线下会的想法路演上,每个人都用它临时赶出了幻灯片,有人是在轮到自己发言之前才做完的。Labs 团队随后决定正式投人,副业变成正式项目。

这里有个容易被跳过的判断(本文观点):一个内部工具从"有人用"到"值得投人"的信号,往往不是使用量,而是它开始被用在原本不属于它的场景里。这个工具是为做产品 mockup 写的,结果大家拿它赶会议幻灯片——这说明它踩到的不是"设计"这个需求,是更底层的"我要快速把想法变成能给别人看的东西"。


二、它是什么,不是什么

原文对定位给了一句相当准确的话:

“我把它看作比产品设计高一层:你和 Claude 协作的对象,是那些主要任务为沟通与构思的视觉物。”

也就是说它的边界不是"设计工具",而是任何以沟通和构思为主要任务的视觉产物:幻灯片、落地页、可打印成一页纸 PDF、邮件、动画、社媒物料。

同样重要的是它明确说了自己不做什么。

工具边界与双向往返

三条边界值得单独抄下来:

  1. 没有图像生成模型,所以不适合做 logo(原文括号里那句挺实在:“不过这没能阻止人们尝试”)。正确做法是导入你已有的 logo 和素材
  2. 要交付生产环境软件,请用 Claude Code。分工是:Code 写代码,Design 负责设计工作的"其余部分"——早期构思、协作、在动工前为方向争取共识。
  3. 两者可双向往返:Claude Code 里起的原型能同步到 Claude Design 在画布上继续改,Design 里成熟的原型也能交接给 Code 落地。

第 2 条是这三条里最容易被违反的。(本文观点)“AI 什么都能做"的直觉会让人拿探索工具去做交付、拿交付工具去做探索,两种方向的错配都很贵:前者产出跑不起来的漂亮东西,后者在还没想清楚的时候就开始欠技术债。


三、10 条工作方法,重排成四段

原文的 10 条是并列的清单。按"这一步是谁在出力"重排一下,结构会清楚很多。

10 条工作方法的四段分工

A 段 · 先想清楚,再开口(人出力)

① 先思考,再提示。 他说提前把需求讲清楚是最高效的方式,并且给了具体做法:有时在 Claude Design 里用语音按钮口述,有时在沙发上用手机备忘录打字,有时散步时录语音再粘贴转录稿。

“在远离电脑时把你想要的东西想清楚,这样坐下来时 Claude 才能执行你确切的构想。”

这条的含义比字面更重。它说的不是"要写好提示词”,而是思考这件事被从键盘前挪走了。写提示词的那段时间就是设计本身,不是设计的准备工作。

② 告诉它该长什么样。 不给方向时,Claude 会选它自己偏爱的那几种美学(原文这里链接了《纽约客》关于"正在占领互联网的 AI 设计美学"的文章,并暗示"你大概能认出它们")。对策有三个:指定字体与配色、提供图片 moodboard、或者让它先头脑风暴几组字体加配色再来回打磨。

B 段 · 把品味变成可复用上下文(人搭台)

③ 把重复性工作变成设计系统。 上传品牌文件与素材——logo、幻灯片、截图、字体规范,让 Claude 分析并生成设计系统。之后每件产物都从你的既有选择出发,而不是从空白画布开始。

⑨ 给它真实上下文。 为现有 App 或网站做设计时接上 GitHub,Claude 会抓取你的组件和已有页面作为起点,几轮下来能较高保真地复现你现有的设计。Claude Design 里也支持联网搜索与 MCP 连接。

(本文观点) A 段和 B 段的区别是一次性与可复用:A 段每次都要重做,B 段做一次能吃很久。所以如果只有精力做一件事,应该做 B 段——把"我要什么风格"从每次都要重讲的话,变成一份摆在那里的文件。这跟工程上把约定写进 lint 规则而不是每次 code review 口头提醒,是同一个动作。

C 段 · 把探索成本压到可抛弃(模型出力)

④ 要十个方案,然后混搭。

“大多数不会好,这没关系;总有一两个是好的。”

然后再说:“我喜欢 B 方案加一点 D 方案,给我五个把它们揉在一起的变体。“他日常的"面包与黄油"式用法之一,就是一次生成 15 个流程版本去收集同事反馈。

⑦ 保真度不重要时先做线框。 要线框图快得多,而且能让 Claude 聚焦在设计的高层结构而不是视觉细节,是快速试很多想法的好办法。

⑤ 画出你说不清的东西。 脑中有布局但没有词汇描述时,在纸上画出来拍照上传。

这三条其实是一个动作的三个面:把单次尝试的成本压到可以随手扔掉的程度。只要一个方案的成本降到足够低,“要十个"就从奢侈变成默认。

D 段 · 压缩摩擦,人来收口(人出力)

⑥ 指着说。 不必写一整段话说明自己指的是哪个元素:点击它,然后说话。需要在设备上开启听写,选择 comment 并点进评论框,语音会像打字一样出现。

⑩ 与它并行工作。 不必等结果出完再提新需求,可以排队发多条消息,或者在它还在处理上一轮时继续说。

⑧ 最后一公里手动做。 收尾用直接编辑——重排、删除、改文字、缩放、改颜色,而不是靠提示。理由给得很干脆:直接编辑不消耗 token,而尺寸与对齐这类小调整本来就更适合肉眼判断。

(本文观点) 第 ⑧ 条是这 10 条里最反直觉的一条,也是最容易被"我要全流程 AI 化"的执念覆盖掉的一条。它说的其实是一个判断能力:知道什么时候该停止提示。继续跟模型来回拉扯一个 4px 的间距,是纯粹的负收益,token 和注意力都在亏。


四、成本坍塌之后,流程发生了什么

把 A/B/C/D 四段合起来看,会看到一件比"效率提升"更结构化的事。

传统设计工具做点击原型的流程是:画出每一个屏幕、画出每个屏幕的每一个状态、手动把热区和跳转连起来、导出截图发给同事。四步全部由人完成,而且任何一次方向调整基本让前面的工作作废

在 Claude Design 里,用他的原话:

“你把素材交给 Claude,说:让它跑起来。”

而且每个产物都带一条可以像分享文档一样分享的链接

原型成本的两条曲线

这个变化的后果不是"同样的活干得更快”,而是**“一次只做一个方案"这个默认前提被取消了**。当十个方案和一个方案的成本差距缩小到可以忽略,设计动作本身就从"打磨一个"变成了"生成一批、挑选、再混搭”。

他近期的四个具体作品,正好覆盖了这种变化的不同层次:

作品 做法 说明了什么
Claude Design 的开屏动画 他不是动画师,于是先让 Claude Design 给他造了一个定制视频编辑器,再用那个编辑器做动画 工具可以先造工具——一次性的定制工具变得划算了
地铁到站时间 App 带可调节的动画控制器,用来微调运动物理感 与其用文字描述"再弹一点”,不如直接生成一个能拖的滑块
Instagram 风格调色控件 让 Claude 用滑块和预设来调 App 配色,而不是用文字描述颜色 同上:把语言难以表达的参数交给界面
重新设计 Claude Design 本身 他和两位同事在工具内部重构编辑器的新设计,“我们不会照原样发布,但这是我们探索产品可能形态的方式” 探索的产物不必是要发布的东西

(本文观点) 中间那两个案例是这篇文章最值钱的部分,而它在原文里只是顺带一提。它们讲的是一种新的解题姿势:当你发现自己在用语言描述一个连续参数(快一点、再软一点、颜色偏暖一些),正确动作不是继续找形容词,而是让模型做一个控件出来,然后自己拖。这在过去不成立,因为为一次调参写一个控件不划算;现在成立了。


五、价值前移:这个判断对非设计师同样成立

文章的核心论点其实只有一句:

“随着模型越来越擅长构建生产级软件,最重要的工作会向流程更早的阶段迁移——想出好点子、让所有人对齐、在想法还早期时收集反馈。”

如果这句成立,那设计师的杠杆就从"做交付物"移到了"做判断和共识”。这一点对写代码、写文档、写方案的人是一样的:模型接管的是流程末端那段可验证、可重做的执行,留给人的是前端的判断末端的收尾

六条可迁移的原则

原文还引了 Bret Victor 那场 2013 年的演讲《Stop Drawing Dead Fish》里的一句:

“我们画出的每一样东西都应该默认是活的。”

这句话在 2013 年是一个宣言,需要作者自己写渲染引擎去证明。十三年后它变成了默认配置——不是因为设计工具进化了,而是因为生成 HTML 这件事的成本掉到地板上。他自己的总结是:

“代码,尤其是 HTML,是极好的创作媒介,而现在它终于对设计师来说算得上容易上手了。”

(本文观点) 这里有个不那么乐观的推论值得留一句:当探索成本降到接近零,探索本身就不再是稀缺资源,判断力才是。“一次生成 15 个流程版本"如果没有人能说清为什么选第 7 个,那这 15 个版本只是把选择困难乘了 15 倍。所以 A 段(想清楚)不是可选项,成本坍塌之后它的权重反而更高。


六、如果你现在想试

  • Claude Design 目前为 Beta,向 Claude Pro、Max、Team、Enterprise 方案开放,入口在 claude.com/product/design
  • 原文提到最新的 Claude Opus 5 在读取图表、示意图、截图上优于前代,与 Claude Design 搭配可以产出"可直接上台的演示稿与备忘录”。也就是说这个工具的能力上限,会随模型视觉能力一起涨。
  • 最省力的起手式(本文建议):不要从"帮我设计一个页面"开始。先做 B 段——把你手上的品牌文件、现有截图、字体规范丢进去,让它生成一份设计系统。这一步做完,后面所有产物的起点都不一样了。

他在文章结尾的邀请是:“试用它,把它带到我们还没想到的地方去。”

从 Labs 那场线下会看,大概率会发生的确实是这个——一个为产品 mockup 写的工具,最后被拿去赶了会议幻灯片。


参考

「真诚赞赏,手留余香」

爱折腾的工程师

真诚赞赏,手留余香

使用微信扫描二维码完成支付