AREX Feed Article
Peter Yang：学会对 AI 说"先别写代码"，是做出好产品的第一步
Peter Yang 用一篇 25 分钟教程和一套六步工作流，给出了一个反直觉的判断：AI 时代做产品，规划花掉一半时间才算及格。
"Good upfront planning with AI is the difference between getting the product you want vs. getting slop."7 月 29 日，拥有 25.2 万粉丝的 AI 教育作者 Peter Yang 在 X 上发了一条推文，附上了他用 Claude Design 和 Claude Code 从零搭建一款应用的全过程教程。这句写在推文末尾的判断，在发布 24 小时内拿到了 9.2 万次浏览和 141 次书签收藏。
Peter Yang 是 AI 教程领域最有影响力的独立创作者之一。他的 "No AI Slop" 写作提示词在 GitHub 上拿到了 3100 颗星，被大量开发者嵌入了日常 workflow。这一次，他把注意力从"怎么写"转向了"怎么做"：用 Anthropic 的 Claude Design 和 Claude Code，演示了从想法到可运行应用的完整六步流程。
教程的主角是一款叫 Tastemaker 的应用，一个让用户跨电影、剧集和游戏展示个人品味的个人主页。Yang 用它作为载体，展示了一套他称之为 "AI-native design process" 的方法论。而这套方法论最扎眼的主张，恰好和主流 AI 开发直觉背道而驰：在让 AI 碰代码之前，先把设计文档、原型和交互规格全部做扎实。
25 万粉丝的 AI 导师，为什么盯上了 Claude Design
Peter Yang 的 Substack 名为 "Creator Economy"，定位是"给忙人的实用 AI 教程和访谈"。他的内容不追热点，不做评测，只做一件事：把 AI 工具变成可复现的工作流。
这一次他选了两个工具：Claude Design 和 Claude Code。Claude Design 是 Anthropic Labs 在今年 4 月随 Opus 4.7 一起推出的设计协作工具，定位是用对话的方式生成视觉输出，覆盖原型、幻灯片和单页设计。Claude Code 则是 Anthropic 的终端编程代理，已经成了不少开发者的主力编程搭档。
两个工具之间的"设计到代码"闭环，是 Yang 这套方法论的前提条件。Claude Design 可以直接把设计原型打包为 Claude Code 可读的 handoff bundle，包含组件结构、设计 token、布局层级和引用资源。Claude Code 收到后不需要像解读 PNG 截图那样"猜意图"，而是直接读取结构化规格，用项目已有的组件库和代码模式开始写功能。
这个闭环的意义，Yang 在教程里没有花大篇幅讲，但他在 X 上的两条后续推文把这个判断讲透了。
一份 design.md，就是一道刹车
在教程的第二步，Yang 引入了一个概念：design.md，一份纯文本文件，里面写的是配色、字体、间距等设计约束。
这件事看起来像是多此一举。Claude 本身就能生成 UI，为什么还要手写一份设计约束？
Yang 在教程配套的推文里给出了答案。"We've gone from AI defaulting to designs that look like purple slop to those that have that recognizable Claude look."他的意思是：AI 生成的 UI 已经从早期的紫色浆糊进化到了一个更精致的阶段，所有东西都长得像 Claude 做出来的。一份 design.md 的作用，就是打破这种"Claude 味"的同质化。
他的做法是：先到 Mobbin 这样的设计参考库找灵感，截取几张喜欢的应用界面，扔给 Claude，让它反向提取出一份 design.md。Yang 给了一个具体例子：他用了一个叫 Monogram 的应用作为视觉参考，要求 Claude "让界面安静下来，让封面图承载色彩"。Claude 据此生成了一份约束 Tastemaker 视觉方向的设计文档，从色彩到间距到排版都做了规定。
X 用户 Timur Yessenov 在评论区给出了一个精准的总结："The hard part is resisting the first working screen. Once Claude can make a prototype fast, every vague requirement turns into UI you now have to unlearn. A design md is mostly a brake, and that is why it works."
这句话点中了要害。AI 的强项是速度，但速度本身会成为陷阱。当你看到一个"能用"的界面时，你的大脑会不自觉地把它当成正确答案，哪怕它和你真正想要的产品差了十条街。一份 design.md 就是一道刹车。它不是让你变慢，而是让你在加速之前先把方向盘对准。
Claude Design 最好的功能藏在对话里
Yang 对 Claude Design 给出了一个高度个人化的评价："It feels more like working with a design partner than using a tool."
在后面的推文中，他进一步展开：Claude Design 最好的功能不是画布，不是导出，不是和 Claude Code 的联动。是它在动手之前会先问问题。每当你给出一个设计需求，Claude Design 不会立刻开始画图，而是先抛出一串澄清性问题：你的目标用户是谁？这个页面的核心操作是什么？你希望用户看到的第一眼是什么？
Yang 写得很直白："I'm surprised other AI design tools haven't copied this yet."
这个细节和 design.md 构成了同一枚硬币的两面。design.md 是人在帮 AI 设定边界，而澄清性问题是 AI 在帮人理清思路。两者合在一起，形成了一种"双向规划"：不是人单向地指挥 AI，而是人和 AI 在设计开始之前先对齐一次认知。
Yang 在教程里演示的具体流程是：把 design.md 和产品描述一起扔给 Claude Design，让它生成关键页面的原型。他特意提到，这一步不需要用到最强的 Fable 模型，Opus 就完全够用，可以省下一大笔 token。
HTML 规格书：从设计到代码的"翻译层"
教程的第四步，是 Yang 整套方法论里最容易被忽略但也最体现他工程思维的一环：HTML 规格书。
做完 Claude Design 原型之后，Yang 不会直接把原型扔给 Claude Code 让它开写。他中间插入了一步：让 Claude 把整个产品拆成一份交互式的 HTML 规格书，里面同时包含了产品需求、设计规范和前端技术选型。这份规格书本身就是一个可点击的页面，产品经理能看懂，设计师能核对，工程师能直接照着实现。
Yang 在教程里展示了他自己写的一个 /spec skill，一个 Claude Code 的自定义命令。当他在 Claude Code 里输入 /spec 时，Claude 会自动创建一份包含产品描述、设计约束和技术要求的 HTML 文档。"My /spec skill will even make UI components to keep your designs consistent,"Yang 在付费订阅内容里写道。这个 skill 目前仅限付费用户使用，但他的 /no-ai-slop skill 是开源的，已经拿到了 3100 颗 GitHub 星。
规格书的核心价值在于：它把设计原型从"视觉参考"变成了"结构化指令"。当 Claude Code 拿到一份包含了组件规格、交互状态和边界情况的 HTML 文档时，它不需要从截图里反推布局，不需要猜测某个按钮应该是 primary 还是 secondary。规格书里已经全部写清楚了。
这一步加上前面的 design.md 和 Claude Design 原型，Yang 给自己的方法论建立了一个三层防御体系：设计约束层（design.md）防止 AI 跑偏，视觉原型层（Claude Design）验证交互方向，规格书层（HTML spec）把模糊的"做个好看的页面"翻译成精确的工程语言。三层都做完，才轮到 Claude Code 上场写代码。
闭环是新壁垒
Yang 的教程在技术层面展示了 Claude Design 和 Claude Code 的联动，但这套工作流背后的战略含义比教程本身更值得关注。
Claude Design 是目前唯一一个能把自己的设计原型转化为 Claude Code 原生可读 handoff bundle 的 AI 设计工具。这个"闭环"在当前的 AI 工具生态里没有对等的存在。
Figma 是开放式的。设计师导出文件，开发者照着实现，两个环节之间的信息折损是常态。v0 生成的是 React 组件，但组件活在 v0 的沙箱里，拖进真实项目需要手动适配。Lovable 能自动部署，但你交出的是对底层的控制权。
Claude Design + Claude Code 的闭环，本质上是一个垂直整合的策略。同一个模型家族的产消两端，Claude 生成设计，Claude 消费设计，信息不会在格式转换中丢失。Yang 的教程恰好在为这个闭环做一个"用户手册"式的验证：一个独立创作者，用这套工具，做出了一款真实可用的应用。
Anthropic 现在的产品矩阵正在形成一种类似微软 Office 当年的布局：Claude Code 管工程，Claude Cowork 管异步协作，Claude Design 管视觉产出。三个产品共享同一个模型底座，用的越多，切换成本越低。
7 月 24 日刚发布的 Claude Opus 5，性能逼近 Fable 5 但价格只有一半，让这套工具链的使用门槛进一步下探。
Yang 在教程末尾的总结，对他来说可能只是一句经验之谈，但放到整个 AI 开发范式的语境里看，它是一个值得认真对待的判断："Planning should take at least half your time."
在 AI 让写代码变得几乎零成本的当下，规划反而成了最稀缺的能力。不是因为 AI 做不好规划。Claude Design 的澄清性问题和 design.md 的生成过程说明 AI 已经能做规划了。稀缺的是"忍住不写代码"的自律。
Peter Yang 的教程被 AI-Weekly 和 The Neuron 两家 AI 日报同时收录，而这距离 Anthropic 发布 Claude Opus 5 不到一周。当工具链本身还在以每周一次的速度迭代时，方法论的价值会超越工具的价值。工具会变，但"先想清楚再动手"不会过时。
参考链接：