ESC
↑↓ 选择↵ 打开esc 关闭⌘K 唤起
← Home NO.121
第 121 期 · AI 产品 · 收录于 2026 年 8 月 15 日

ClaudeDesign到App六步法

PY
Peter Yang
视频 25:28 原文约 2.5 万字 预计阅读 18 分钟 来源视频 ↗ 中英对照全文
TL;DR · 三句话
  1. 一套六步的 AI-native 设计流程,全程不开 Figma:定义用户问题 → 找灵感写 design.md → 在 Claude Design 里探索原型 → 用 HTML 写一份含产品/设计/技术三个 tab 的 spec → 让 spec 驱动出全部核心界面 → 最后才让 Claude Code 把 app 建出来。→ 详细
  2. 他把传统顺序整个倒过来了:不是先写文档再出设计稿,而是先生成两张关键界面、看清产品长什么样,再回头写 spec——他的理由是"与其先憋一份文档把所有默认状态和边界情况抠一遍,不如先看几张关键视觉稿",而传统流程是 PM 写 spec → 设计师出 Figma → 一起丢给工程师。→ 详细
  3. 代码不再是瓶颈,规划才是:用 AI 做东西至少要把一半时间花在前期,因为原型阶段改的只是两个 HTML 文件,等数据库和技术栈都建起来再改"麻烦得多、贵得多";即便如此,构建阶段依然是几十轮来回,"不可能一把梭就成"。→ 详细
01

靶子与全景:Tastemaker,以及"不用 Figma"的六步法

  • 要做的东西:Tastemaker,一个把你喜欢的一切(电影、剧集、游戏)收在同一个页面的网站。要设计的是两个页面——landing page,和一个"品味主页"(放他真实的收藏、影评、片单)。做它的动机很个人:他看过成千上万部影视、玩过几百款游戏,一直用 IMDb 记录,但 IMDb "就是一个干巴巴的列表",界面差强人意。→ 详细
  • 六步是:① 定义用户问题 ② 找灵感、写一份 design.md ③ 在 Claude Design 里探索 prototype ④ 写一份 HTML 格式的 spec(把产品设计和技术要求都塞进去)⑤ 把所有核心页面设计出来 ⑥ 把 app 真正构建出来。他开宗明义就说了这套流程的前提——"我们不用 Figma"。→ 详细
02

第一步 · 定义用户问题:先解决自己的问题,再去找证据

  • 他的起手 prompt 结构可以直接抄:先自报身份和诉求(我是电影/剧集/游戏爱好者,想要一个页面把三类都展示出来),再让 AI 做三件事——定义客户问题、说清目标用户是谁、去网上找证据证明这个问题真实存在,最后加一句篇幅限制"这部分写两小段就行"。注意他这条 prompt 已经挂着自己的 spec skill 在跑。→ 详细
  • AI 调研出来的结论直接变成了产品定位:它发现电影、剧集、游戏这三类各有各的品味收藏网站、彼此不通——所以 Tastemaker 的存在理由就是"在一个页面上同时呈现你在三个领域的品味"。→ 详细
  • 他很诚实地划了自用和生意的分岔:"如果我是把这个应用当生意来做,我会花多得多的时间去调研、去吃透这个问题,去判断它到底能不能赚钱、能不能拉到用户。但现在我只是做给自己用,所以直接进下一步。"收尾时他又补了一刀:现在靠软件赚钱比以往任何时候都难,因为人人都能自己写代码做东西了。→ 详细
03

第二步 · 为什么必须先找灵感:不找的默认下场是"紫色垃圾风"

  • 不给参考,AI 只会给你两种东西:一种是"一眼假的紫色垃圾风"(generic purple slop),一种是"一眼能认出来的 Claude 味"。想做出有辨识度的东西,就必须先找灵感。→ 详细
  • 灵感来源他给了三个:Mobbin(各家 App 的 UI 截图库)、Dribbble(设计师作品集),以及这次他实际用的 Monogram——一个视觉优先跟 AI 协作的应用。他看中的不是功能,是它的美学:极其干净,而且用颜色把注意力引到内容上、而不是引到 UI 上。这句判断后来直接变成了 design.md 里的硬约束。→ 详细
04

第二步 · design.md 是怎么生出来的(这一段最可复制)

  • 动作只有两个:贴图 + 一条 prompt。他把 Monogram 的几张截图直接复制粘贴进 Claude Code,然后给了一条四要件的 prompt:这里是某某的几张截图 / 请按这个视觉方向给 Tastemaker 写一份 design.md / 产品一句话定位(帮人们在一个页面上分享最爱的电影剧集和游戏)/ 一条审美硬约束——"界面要保持安静,让封面海报去承担色彩"。最后这句是整份 design.md 的灵魂,没有它出来的就是通用模板。→ 详细
  • design.md 里到底有什么:本质就是一个 markdown 文件,写着这个应用的基本设计原则,加上配色、字体、间距等等的"非常简单的建议"。他强调因果关系——正因为喂了几张你真心喜欢的截图,它才有机会产出真正贴合你想要的那种配色和样式规范,而不是凭空发挥。→ 详细
  • 不想自己生成还有现成货:z.sh(链接在视频简介里)收录了 Nike、SpaceX、Apple、Vercel、Notion 等知名网站的 design.md,点进任何一个,里面就是这些网站用的全部配色和字体规范。→ 详细
  • 他主动加了一条伦理免责:找灵感和直接照抄别人的应用是两回事;他给自己的理由是"我们做的产品和 Monogram 完全不是一个品类,所以从它的设计里借鉴一点,我心里是过得去的"。→ 详细
05

第三步 · 工具选型:他试过的四家,和一条省钱提示

  • AI-native 设计工具他都试过:Paper(长得像 Figma 但带 AI 能力)、pen.dev(能让一堆 agent 同时在你的设计稿上干活,他采访过创始人)、Figma 自己现在也有不少 AI 功能。这次选 Claude Design 的理由很朴素:本来就订了 Claude,而且它有几点他特别喜欢。→ 详细
  • 模型选择的省钱提示:虽然他喜欢 Fable,但"这类任务 Opus 完全有能力做出很好的设计",想省 token 就用 Opus。→ 详细
06

第三步 · 进 Claude Design 的第一条 prompt:五个要件

  • 附上 design.md 本体,而不是复述它,并明确要求"把 design.md 当成视觉系统来用"。(顺带一个小技巧:这个文件可以让它导出,也可以右键选"在 Finder 中打开"找到。)→ 详细
  • 点名要做哪两个页面:公开的品味主页(含最爱、最近影评、片单)+ 未登录状态的 landing page(最好拿一个真实的品味主页当范例展示)。→ 详细
  • 每个页面要两个变体,理由是"AI 本来就能一次生成多个版本,我们可以从里面挑最喜欢的";并且要求把它们摆在同一个页面上,方便对比和打磨。→ 详细
  • 明确平台:"先做 web 版本"——他专门解释这句话的作用是堵住它去做移动端设计。→ 详细
07

第三步 · Claude Design 最值钱的功能:它先反问你

  • 他明说这是他最喜欢、也想不通别家为什么不抄的一点——提交需求之后它不直接开工,而是先抛一串澄清问题,"这些问题真的能帮我把设计要求想透"。→ 详细
  • 他是这么答的(问题清单本身就是一份需求 checklist):范例主页展示谁的品味 → 选一个电影/剧/游戏都均衡涉猎的通吃型用户;两个变体各探索什么方向 → "我觉得布局是最关键的",于是定为"横排为主 vs 网格编辑风";主页放哪些板块 → 只留最爱、最近影评、自定义片单,其余砍掉;做几个页面 → 因为他不清楚"媒体详情页"是什么,就先定两个;配色 → 浅色和深色两版 mockup 都要;文案要多真实 → "完全写成真实文案"→ 详细
  • 最后那问值得单拎:选"真实文案",后面才有得挑剔——他之后删掉的那些"自以为妙语连珠的句子"、改掉的 slogan,都是因为它真写了文案才暴露出来的。假文案(Lorem ipsum 那种占位符)会把这些问题全部推迟到构建阶段。→ 详细
08

第三步 · 出稿之后:三种给反馈的方式

  • 先看它给了什么:品味主页两版——横排为主版(从上到下是最爱、最近影评、片单),和网格深色版(信息密度更高,片单被压成三个胶囊标签);landing page 也两版——一个拿个人主页当 demo,一个是更偏编辑风的海报墙。→ 详细
  • 方式一:直接改文件(点"编辑"手动删)。他当场删了三样东西:Claude 爱写的那种自以为妙语连珠的句子(比如"定义了这场争论")、一堆没必要的小胶囊标签、以及一个**"这个功能我们压根还没做"的关注按钮**。最后这条是纪律——界面上不许出现还不存在的功能。→ 详细
  • 方式二:打开侧边栏,给 AI 写一段结构化反馈(改动多、涉及布局重排时用这个,手改不动)。→ 详细
  • 方式三:直接在界面上加评论让它改(第五步里他提到的第三种)。三种方式的分工大致是:小的删改直接手改,布局级的改动写反馈,逐张审图时用评论。→ 详细
09

第三步 · 他的反馈原话:这就是"品味"落到手上的样子

  • 先明确选版:"我更喜欢 1A 和 2A,也就是浅色版。"深色那版他承认挺好看,但为了一致性还是选浅色;另一版"整体对不齐",直接淘汰。→ 详细
  • 四条具体改动:最爱改成一行六个、配左右箭头翻页"像 Netflix 那样";最近影评改成通栏,带封面图、五星评分和影评正文(原来全挤在一个网格里,"我更想要每条影评单独占一整行,这样空间更宽裕");片单也一行五个、跟最爱对齐,六张卡片全显示而不是压缩;页面加一个左侧导航,快速跳到最爱/影评/片单。landing page 那边他要求把产品预览挪到 hero 区块下面,让人先看到一个完整的品味主页当范例。→ 详细
  • 他没藏代价:"说实话,做到现在这个状态又多迭代了好几轮。"这一步不是一轮反馈就到位的。→ 详细
  • 连一句 slogan 都亲自动手:他把"用你的所爱定义你是谁"从主标位置挪走(觉得它有意思但不够直白),主标换成"一个品味主页,装下你爱的一切"。→ 详细
  • 他对这一整段的定论:"垃圾设计和真正好的设计之间的差距,无非就是有没有在细节上下功夫。Claude 不可能一次就给你生成完美的设计,你必须把自己的品味用上去。"→ 详细
  • 收口动作:导出成 zip。虽然有直接推给 Claude Code 的通道,但他习惯导出成 zip 或 HTML,理由是这样能导进 Claude Code、Codex 或任何你想用的 harness——不把自己锁死在一家工具里。→ 详细
10

第四步 · 先出图、再写 spec:跟传统流程正好反过来

  • 他的理由:"与其先憋一份文档、把所有默认状态和边界情况都抠一遍,不如先看几张关键视觉稿——那样更容易搞清楚这个产品到底是什么。"→ 详细
  • 他自己点破这是反着来的:传统做法是"我这种 PM 先写 spec,交给设计师去出 Figma,然后两份东西一起丢给工程师,让他再写一份技术方案"。这一整条流水线在他这里被折叠掉了。→ 详细
  • 第二个反常识:他反对把文档拆开。"我不喜欢东西散在一堆文件里,所以我更愿意把产品需求、设计和技术方案全塞进同一个文件。"他的 spec skill 干的就是这件事。→ 详细
  • 生成动作:把 Claude Design 导出的 zip(含两张关键界面)传进 Claude Code,一句 prompt——"把这些需求和设计整理成一份简洁的 spec,分成 product、design、tech 三个 tab"。→ 详细
11

第四步 · spec.html 三个 tab 各装什么

  • PRD tab:前面定下的用户问题 + 产品的几条高层目标 + 需求清单。两条格式要求值得抄——需求要写得非常精炼、扫一眼就能读完,而且按 app 的不同界面模块分开列(不是一大坨)。→ 详细
  • design tab:本质是 design.md 的 HTML 版("读起来更舒服")+ 几条设计原则 + 颜色和字体的 style guide + 一份 component library(下一节单讲)。→ 详细
  • tech tab:技术栈 + 一份数据表结构,理由很硬——"数据库一旦上了生产环境就特别难改",所以要写清数据怎么组织、做了哪些取舍。→ 详细
  • 一个笑话也是一次校准:AI 在 spec 里估这个 app 要做三周,"而实际上大概三十分钟就搞定了"。→ 详细
12

第四步 · component library 是防"AI 乱造组件"的保险丝

  • 这是他讲得最重的一条踩坑经验:"我以前不带 component library 直接做 app,结果通常是 AI 开始自由发挥、造出一堆奇奇怪怪的组件,整个 app 越看越乱。"→ 详细
  • 所以规则有两条,第二条更容易被忘:一是必须让它生成一份组件库;二是随着界面越做越多,要一直把这份组件库更新到最新——它是活的,不是一次性产物。→ 详细
13

第四步 · spec 必须有人真的读一遍,否则后面全是白烧的 token

  • 他把 spec 做成 HTML 的动机就是让人读得进去:"我把整个 /spec skill 设计成这样,就是为了让人真的读得进去——因为你必须逐条读完、给它反馈、把它打磨好,这一步非常重要。"→ 详细
  • 他在下一段又强调了一遍,并把代价说明白:一定要真读、给反馈去改、确认所有需求都说得通,然后再让它去出设计稿,"不然你就是在白烧 token"→ 详细
  • skill 的出处他自己讲清了利益相关:/spec skill 在 behindthecraft.com,给他付费 Substack 订阅者;但他也明说"你也完全可以让 AI 免费给你写一个,只要按我刚才演示的思路,让它输出这三个 tab 就行"。→ 详细
14

第五步 · 让 spec 驱动出全部核心界面

  • 动作:把 spec.html 传回 Claude Design,一句 prompt——"把需求里的所有核心界面都做出来",附上 spec 的 HTML。此时 spec.html 就是"我们要做的这个东西的唯一事实来源",而它下面还列着一堆尚未设计的界面需求。→ 详细
  • 出来的界面清单:之前的 landing page 和品味主页,加上创作者视角的"自己的品味主页"(带编辑功能、添加按钮、能改自己写过的评价)、完整游戏列表页、点开弹出的条目详情卡(可收藏、可打分、可标"想试试")。→ 详细
  • 他专门点名两类最容易漏的东西。第一类是默认状态、空状态和边界情况:新建好的品味主页里什么都没有,"那就需要一个明确的行动引导让用户去添加内容"。第二类是 onboarding 流程:认领用户名 → 挑六个你喜欢的东西 → 分享你的主页;他的理由是"如果你做的产品是真想拉到用户的,就必须给他们一个足够好的新手引导体验"。→ 详细
15

第五步收口 · 两份互相对齐的产物,和"至少 50% 时间在规划"

  • 手上这时候有两份东西,而代码一行没写:spec.html(产品、设计、技术需求)+ design.html(从 Claude Design 导出的所有核心界面设计稿)。他管这叫"两份互相对齐的产物"。→ 详细
  • 本期最想让人记住的一句:"用 AI 做东西,你至少要把一半的时间花在前期规划上。写代码这件事已经变简单了,但你得有一份足够扎实的计划,AI 才能按你想要的方式做出你想要的东西。"→ 详细
  • 成本论证是这套流程的地基:一句"帮我做个 app 整理电影剧集游戏"丢过去,做出来的肯定不是你想要的;而一旦数据库和技术栈都建起来,再改"比现在麻烦得多、贵得多"——现在只要改这两个原型 HTML 文件。→ 详细
  • 他给自己这套流程的定性很坦白:"某种意义上,这其实有点像瀑布式开发,只不过被 AI 加速了。"→ 详细
16

第六步 · 构建:起手先让 AI 提问,然后是很长的反馈链

  • 起手 prompt 又是一招反问:附上 spec.html 和 design.html,然后说"先看一遍 spec 和设计,动手之前告诉我你有什么疑问、有哪些含糊的地方需要我澄清"。他的原则是——默认一定存在你自己还没想清楚的模糊地带,让 AI 在写代码之前先向你提问,尽可能先解决掉。→ 详细
  • 然后是让它跑起 localhost,自己看,把不满意的地方截图贴回去。真实反馈样本:收藏和爱心图标只该在鼠标悬停时出现;profile 页面跟设计稿对不上;评价那一块去哪儿了;还有他自己之前忘了的 Netflix 式左右箭头要补上。→ 详细
  • 他反复破幻觉:"并不是说你把 design 的 HTML 和 spec 的 HTML 一传,它就能一把梭把你想要的全做出来。你还是得给它大量反馈",真要做出来"对话还是很长的"。→ 详细
  • 最容易被忽略的一条纪律,也是全片唯一提到的"反向同步":当它开始直接在代码里改产品的时候,一定要让它同步更新 plan 和 design 文件,保证所有东西是对齐的。→ 详细
17

成品与真实代价

  • 成品已上线(链接在视频简介):landing page 能看示例品味主页、能登录搭自己的、能加电影、能排序、有评价。"做到这个程度大概花了几个小时吧,我相信里面肯定还有 bug。"→ 详细
  • 技术侧和归因:过程包括搭一个 Supabase 数据库、让 AI 加登录鉴权;他补的那句归因才是重点——"如果我没在 spec 和设计里把那些关键需求先定下来,来回折腾会多得多。"→ 详细
18

他自己的收尾总结

  • 回顾时补了两点新料:第一步如果想做的是真能拉用户甚至赚钱的产品,还得想清楚有没有商业机会——"现在靠软件赚钱比以往任何时候都难";第三步要变体的深层理由是"好的设计师都喜欢先发散、多探索,最后再收敛到一个方向",他还自嘲"我不是设计师"。→ 详细
  • 最大收获他只留一句:把功夫下在前期规划上——"你前期规划做得越多,做出来的东西品味越好、完成度越高,也越有可能是一个真正有用、你自己也真心喜欢的产品。"→ 详细
  • 他向观众要方向:欢迎在评论区说想不想看更多"展示我真实 AI 工作流程"的视频,"而不是那种追着最新模型吹的视频"。→ 详细

本期是纯教程,没有 lightning round。把六步法压成一张可以照着做的速查卡:

干什么 产物 这一步的关键纪律
1 定义用户问题 一段客户问题 + 目标用户 + 网上证据 自用可以快,当生意做必须先验证有没有商业机会
2 找灵感、写 design.md design.md 必须喂真实参考截图 + 一条审美硬约束,否则出紫色垃圾风
3 在 Claude Design 探索原型 2 个关键页面 × 2 个变体 → 导出 zip 要变体、要真实文案、答完澄清问题;靠你的品味逐条改
4 写 HTML spec spec.html(product / design / tech 三 tab) design tab 必须含组件库;tech tab 必须含数据表结构;人要真读一遍
5 设计所有核心界面 design.html(全部界面) 别漏空状态、边界情况、onboarding
6 构建 app 可运行的 app 起手先让 AI 提问;代码改了要回写 plan 和 design 文件

一句总纪律:至少 50% 的时间花在第 1–5 步,因为这几步改的只是 HTML 文件,第 6 步之后改的是数据库。→ 详细

  • Peter Yang · YouTube 频道 Peter Yang;付费 Substack 与 skill 合集在 behindthecraft.com/spec skill 就在那里,附带 AI 工具优惠券和课程)。
  • 本期提到的外部资源:Monogram(视觉参考来源)· Mobbin(App UI 截图库)· Dribbble(设计师作品集)· z.sh(Nike / SpaceX / Apple / Vercel / Notion 等知名网站的现成 design.md)· Paper、pen.dev(其他 AI-native 设计工具,pen.dev 创始人访谈链接在视频简介)· Supabase(成品用的数据库)。
  • 成品站点与上述链接均在视频简介中。
🎯 于你何益 为你定制 · 非通用结论

这期直接命中三件事:app_incubator(最重,几乎是逐帧对撞)一人公司账号Holdwell 的 PRD 工厂。投资看板、家居号、Chief of Staff 这次真沾不上边,略过不硬掰。


app_incubator · 你的 7-Agent 造 App 链路

把 design.md 当视觉地基,而不是把风格写在 prompt 里

  • 怎么做的:Peter 全流程的视觉真源只有一份 markdown。他把参考应用的几张截图粘进 Claude Code,配一条 prompt 生成 design.md,里面是设计原则加配色、字体、间距的简单建议,还有一条审美硬约束——"界面要保持安静,让封面海报去承担色彩"。之后每一步(出设计稿、写 spec、建 app)都是拿这份文件往下传,而不是每次重新描述"我想要什么风格"。他反复讲的因果是:正因为喂了真实截图,它才有机会产出贴合你想要的规范,而不是一眼假的紫色垃圾风。
  • 你可以怎么做:你已经有一个从参考素材提炼设计系统的技能在做同一件事,而且做得比他重得多(7 层契约、三层 token、深浅两套)。所以真正值得抄的不是产出物,是传递链——去确认你那条 7-Agent 链路里,design.md 是不是每一个下游 agent 的强制输入,还是"第一个 agent 用完就躺在文件夹里"。这周挑一个已经跑过的项目,把设计 agent 到构建 agent 之间的交接内容翻出来,数一下 design.md 被引用了几次。答案如果是一次,那你有的是一份文档,不是一条地基。

三合一的 spec,和组件库这条保险丝

  • 怎么做的:他把产品需求、设计规范、技术方案压进同一份 HTML,分产品、设计、技术三个 tab。设计那栏里必须有一份组件库,理由是他自己踩过的坑:"以前不带组件库直接做 app,AI 就开始自由发挥、造出一堆奇奇怪怪的组件,整个 app 越看越乱。"而且组件库要随着界面增加持续更新,不是一次性产物。技术那栏里必须有数据表结构,理由是数据库一旦上生产就极难改。
  • 你可以怎么做:这正好补上你"设计稿即工程强制契约"最薄的那半块——契约管住了页面长什么样,但没管住组件会不会发散。给 app_incubator 加一条硬产出:设计 agent 每出一批界面,必须回写一份组件清单(名字、用途、有哪些变体);构建 agent 只允许用清单里的组件,要造新组件必须先申请入库。这一条对"越做越乱"的压制力,比再多画十张界面都大。

让 agent 先反问,再动手

  • 怎么做的:Peter 最喜欢 Claude Design 的一点,是提交需求后它不直接开工,而是先抛一串澄清问题——范例展示谁的品味、两个变体各探索什么方向、页面放哪些板块、要不要深色版、文案要多真实。他的评价是"这些问题真的能帮我把设计要求想透"。到了第六步他把这招复制到了构建阶段,起手 prompt 就是"动手之前告诉我你有什么疑问、有哪些含糊的地方需要我澄清",因为"你要默认一定存在你自己还没想清楚的模糊地带"。
  • 你可以怎么做:这就是你想要的"把该做什么前移到 agent",而且实现成本低得离谱——不需要 agent 更聪明,只需要在每个 agent 的第一句话里强制一轮反问。给设计 agent 和构建 agent 各加一段开场契约:先输出 5–7 个澄清问题、等人答完再开工。你现在卡着的"激活/首屏体验做不做、做到什么程度",恰恰是这类该由 agent 问你、而不是你想清楚了才敢喂给它的问题。

一人公司账号 · build-in-public

一期现成的验证体选题,而且供血正好对上你的缺口

  • 怎么做的:Peter 这套是完整可复现的六步,每步都有可抄物——起手 prompt 原文、design.md、三 tab 的 spec.html、导出 zip 的交接方式。更难得的是他把真实代价全抖了:Claude Design 那步"又多迭代了好几轮"、构建阶段"对话还是很长的,不可能一把梭"、成品做了几个小时"肯定还有 bug"、AI 自己估三周实际三十分钟。他视频末尾还直接问观众想不想看更多真实流程"而不是追着最新模型吹的视频"——这说明这个位置有明确的需求缺口,而你的 build-in-public 定位刚好站在缺口上。
  • 你可以怎么做:这是"大佬说 X 我试了"的标准弹药,动作也很具体——拿 drizzle tech 手上一个真实小项目跑一遍 Peter 六步法,和你现在的 7-Agent 链路做同题对照,记三个数:总耗时、返工轮数、花了多少钱。标题往"Peter Yang 说做 App 别开 Figma,我让我的 7 个 Agent 跟他跑了同一道题"上靠。然后过一遍你的弹药库闸门:**把你的判断和实测数字删掉之后,这篇还剩什么?**如果只剩六步法复述,那就是没过闸门,必须补上对照数据和你的结论。

Holdwell 的多-Agent PRD 工厂

"人必须真的读一遍"就是真人评审的执行点

  • 怎么做的:Peter 把 spec 做成 HTML 的动机,明说了就是让人读得进去,并且两次强调:必须逐条读完、给反馈、确认所有需求说得通,再让它去出设计稿,"不然你就是在白烧 token"。他把成本讲得很直白——越往后改越贵,最贵的是数据库建好之后。
  • 你可以怎么做:你担心真人评审走过场、意见回不了炉,症结通常不是规则不够多,而是没有一个环节逼人真的读。可以把评审的通过条件从"评审通过"改成一件可验证的小事:必须有人在文档上留下若干条具体修改意见("同意"不算)才算过。另外 Peter 给了个更省力的信号——把文档改成人愿意读的形态,本身就是治理手段。你那套碰撞协议的产出如果还是一长条 markdown,考虑给最关键的两三个环节做一版单页可扫的形态,读完成本降下来,读的人才会真读。

贵的东西要在便宜的时候定死

  • 怎么做的:他的技术栏必须有数据表结构(数据库上生产后极难改),设计栏必须有组件库(没有它 AI 会造杂牌组件)。两条是同一个逻辑:在只有 HTML 文件的阶段,把后面最难改的东西先定下来。
  • 你可以怎么做:这直接对上你六条产品线的跨线对齐难题。共享实体定义不是"有空再补"的活,它决定后面所有 PRD 会不会各说各话。先做最小版就行:把 ERP 里跨线出现频率最高的 5–8 个实体(订单、SKU、库存、客户之类)各写一段"有哪些字段、有哪些状态、谁能改",作为三驾马车的强制引用源。共享定义不会自己长出来,但补 8 个实体是一个下午的事。

更深三角度

该反着用

Peter 的语境是"做给自己用、不用考虑赚钱、几小时上线",所以他明说"如果是当生意做,我会花多得多的时间去调研"。你不是他——你每跑一个项目都同时在给一人公司攒资产和内容。所以他跳过的那一步(商业机会验证)恰恰是你要保留的。反过来,他花力气最多的那一步该反着来:他是一张张手改,一个一个删胶囊标签、删还没做的关注按钮、亲手改 slogan,靠的是个人品味逐张过。你有 7 个 agent,就不该每次都手工挑刺,而该把这些挑刺沉淀成设计 agent 的检查清单——禁止自作聪明的文案、未实现的功能不许出现在界面上、留白优先于信息密度。他只能靠品味,你可以靠规则批量执行,这是你的结构性优势,别浪费在手改上。

和你现在做法冲突

你的地基假设是"设计稿即工程强制契约",配着 Figma 的接口——设计在前、代码在后、设计稿是唯一真源、信息单向流。Peter 这套有三处顶着它:① 他压根不开 Figma,视觉真源是一份文本 design.md,Claude Design 只是探索容器,导出的 HTML 是快照而不是权威;② 他把 spec 和设计合成一份文件,而不是两条并行的链路;③ 最尖锐的一条——他要求 AI 在代码里改产品时反向更新 plan 和 design 文件,也就是承认设计稿会被实现反噬,契约是双向同步的,不是单向强制的。你现在的强制契约如果不允许回写,跑久了大概率会出现一种典型状态:代码是对的、设计稿是旧的、契约还在假装自己是真源。这个张力怎么解我不替你下结论,但至少值得测一次:让构建 agent 在实现偏离设计稿时必须二选一——要么退回改实现,要么回写改设计稿,不许沉默通过。

对你的镜子

你把 Figma 当契约的载体,Peter 把设计工具当探索的容器。他真正的契约其实不是任何一种文件格式,而是"有一个人必须坐下来把它读完"——所以他才费劲把 spec 做成 HTML。顺着这个看:你的 7-Agent 链路越顺滑,人被迫读的位置就越少。哪天它出问题,多半不是某个 agent 不够聪明,而是整条链路上已经没有一个"必须读完才能过"的关口了。


所以呢

可迁移思维模型

  • 【耐用】贵的东西要在便宜的时候定:组件库、数据表结构、导航结构,都在只有 HTML 文件的阶段定死;等数据库建起来再改,成本是数量级的差别。这条跟工具无关,五年后照样成立。
  • 【耐用】视觉先于文字降歧义:先出两张高保真界面再写文档,比先写文档再画图更容易让所有人(包括 AI)对齐"这到底是个什么产品"。你写 PRD、写小红书选题卡、甚至给 agent 下任务,都能用这个顺序。
  • 【耐用】先发散再收敛:一次要两个变体、并且明确指定它们各探索什么方向(他这次指定的是"横排为主 vs 网格编辑风"),比让 AI 直接给一个"最好的"有用得多——因为"最好的"没有对照物,你无从判断。
  • 【会过期】Claude Design 的具体交互(澄清问题、三种反馈方式)、z.sh 这个站、"用 Opus 别用 Fable 省 token"、behindthecraft 上卖的那个 skill——半年内都可能变,别写进你的 SOP 正文,放附录。

判断更新

你原来大概会默认"AI 做设计的瓶颈是模型的审美"。这期给的反例是:瓶颈是输入的确定性。同一个模型,喂一份带硬约束的 design.md、答完七个澄清问题、再给一份带组件库的 spec,出来的东西和一句话丢过去,完全是两个物种。所以你在 app_incubator 上该加的投入方向是"让 agent 拿到更确定的输入",不是"等更强的模型"。

这周一个赌注

拿 drizzle tech 手上任意一个还没开工的小 App,全程不开 Figma,只用「design.md + 三 tab 的 spec + 组件库清单」跑到可运行,全程记耗时和返工轮数。赢了,你手上就有一期带真实数字的验证体选题,同时验证了 Figma 到底是你链路里的必需品还是路径依赖;输了,你也拿到一份"为什么我的链路必须有 Figma"的硬证据。这两个答案里的任何一个,都比继续两边都留着、谁也没验证过要值钱。

接着读