# 三个 Claude，一个循环：我如何把设计探索接到实作上线 > 很多人以为 AI 工作流是一条直线的「流水线」，但真正的效率来自「循环」。本文拆解如何厘清三个 Claude 界面的能力边界，并通过明确的交接文件，建立一套从视觉设计到编程上线的自动反馈系统。 - Author: Paul Kuo（郭曜郎） - Date: 2026-06-18 - Pillar: 智能与秩序 / Intelligence & Order - Tags: 多 AI 协作, Claude Design, 设计到开发, 工作流, 能力边界, 循环思维, 人机协作 - Canonical: https://paulkuo.tw/zh-cn/articles/three-claudes-one-loop/ - Language: Simplified Chinese (简体中文) - Translation: AI-translated from the zh-Hant (Traditional Chinese) original - Original (zh-Hant): https://paulkuo.tw/articles/three-claudes-one-loop.md - Site index for LLMs: https://paulkuo.tw/llms.txt --- > **TL;DR** — 效率不是来自最强的模型，而是清晰的分工。我让三个 Claude 界面各自补位：Claude Design 负责视觉发想，网页版 Claude 负责逻辑批判，桌机版 Claude 负责编程实作。它们之间靠三种文件（草图、规格书、真实截图）作为沟通合约。这不是一条单向的流水线，而是一个循环：上线后的真实画面会回头修正最初的设计。
▶ 听摘要
AI 合成语音・作者本人声线克隆
每当要设计新版面，我的工作流程听起来都很没效率：同一件事，我会在三个不同的 Claude 界面之间来回传好几圈。先让 Claude Design 把视觉生出来；再丢给网页版 Claude 拷问「这合不合理」；接着交给桌机版 Claude 写进代码、上线部署；最后，把线上真实的画面截图，重新丢回 Claude Design 看哪里需要微调。 听起来很绕路，但我越用越笃定：这个「绕」，才是威力所在。 多数人使用 AI 的直觉，是想找一个足够强大的全能工具，把所有事情塞给它。AI 厂商也乐于贩售这种幻想：一个输入框，就能把想法变成成品。但我的经验刚好相反。没有任何一个界面能独自走完这条路，硬要它全包，结果就是每一步都做得勉勉强强。关键从来不是寻找完美的 AI，而是看清每个界面的能力边界，然后让它们在各自擅长的领域里发挥。 ## 三个 Claude：探索者、批评者与建造者 这三个界面的能力特质截然不同，硬件规格再强，也改变不了界面设计带来的行为差异。 Claude Design 是探索者。它最擅长让视觉「长出来」：快速生出画面草图（HTML mock）、绘制组件，甚至帮你把设计脉络写成框架。自从六月更新搬进桌机 App 后，它能直接读取你的既有代码（codebase），这让它生出来的设计能直接贴合现有的网站风格，而不是凭空画一张好看却不能用的图。但你要它处理复杂的数据串接或互动状态，它就显得吃力。它交付的成果，是一份视觉草图（mock）。 网页版 Claude（也就是 claude.ai）是批评者。它不负责产出视觉，但极度擅长进行设计批判：会不断拷问你「为什么要这样设计？有没有更好的取舍？」，并把模糊的设计语言翻译成工程师听得懂的规格说明书（spec）。你若叫它直接去写代码或画图，那是找错人。它交付的成果，是一份规格。 桌机版的 Claude Code 是建造者，负责动手干活的那一端，也就是上一篇〈[把网站设计系统馈进 AI](/zh-cn/articles/claude-design-sync-codebase/)〉里讲的 Code 工作流。它读写项目文件（repo）、修改网页组件、测试并部署上线，把想法真正写进代码。但美感与视觉发想从来不是它的强项。它交付的成果，是实际的代码，以及上线后的真实画面。 我把这三端的能力边界，以及它们之间怎么流动，画成一张图。 ![Three Claudes, One Loop：Claude Design（探索）、网页版 Claude（批判）、桌机版 Claude Code（实作）三端的能力边界，以及一个 explore → critique → implement → reflect 的循环](/images/articles/three-claudes-one-loop.svg) 把它们摆在一起，分工就一目了然：一个负责想象，一个负责挑毛病，一个负责落地。它们不是彼此的替代品，而是彼此的补位。 ## 三种文件，就是 AI 之间的「通讯协定」 三个界面各玩各的，要怎么无缝接轨？靠的是三种很具体的文件。Claude Design 把视觉交给建造者，靠的是一份 mock HTML；网页版 Claude 把判断交给建造者，靠的是一份 spec markdown；建造者把成果交回探索者，靠的是部署后的 screenshot。简单整理如下： | 交接方向 | 交接的文件 | 核心作用 | |---|---|---| | Claude Design → 桌机版 | mock HTML | 定义视觉外观 | | 网页版 Claude → 桌机版 | spec markdown | 定义逻辑与实作规则 | | 桌机版 → Claude Design | screenshot | 反馈线上真实呈现的结果 | 这三种文件，就是三个界面之间的「合约」。当输入与输出的规格被严格限缩，下一个 AI 才会清楚知道自己该做什么。 这套流程之所以不会崩溃，不是因为 AI 有多聪明，而是因为边界与合约足够清晰。人类团队也是如此，协作的混乱往往不是能力问题，而是交接模糊。AI 没有人类的「默契」，你给的接口有多精准，它们的协作就有多顺畅。 值得注意的是，过去这些文件需要人类手动复制粘贴，而 2026 年六月的这波更新，核心就是在消灭这些接缝。通过内建的自动同步（design-sync），「探索」与「实作」之间的转换变得越来越不费力。系统的循环结构没有变，变的是齿轮转动时的摩擦力变小了。 ## 为什么你需要循环，而不是流水线？ 人们最容易犯的错误，是把这个过程当成单向的「流水线」：设计、评估、写代码、收工。但真实世界是会对设计开玩笑的。 在草图里看起来完美的版面，一旦塞进真实的用户数据、遇上浏览器的字体渲染、切换到不同屏幕尺寸（RWD）时，往往会直接崩坏。 因此，代码上线不是终点。我一定会把真实网页的截图，重新馈回 Claude Design。这叫反思（reflect），让下一轮的优化建立在「真实长怎样」的基础上，而不是建立在「我的想象」上。 这就是流水线与循环的本质差异：**流水线假设你第一次就能做对；循环则假设你一定会出错。** 既然错误不可避免，不如在系统里帮「修正」留一条合法的路，让真实结果自动滚动回起点。 ## 起点对了，后面才不会白忙 前阵子聊到的[设计同步（design-sync）](/zh-cn/articles/claude-design-sync-codebase/)，本质上就是这个循环的「起点校准」。 当你把网站的设计规范（如品牌色、字体间距等 tokens）馈给 Claude Design，是在做什么？是在教这个「探索者」认得你的家门。它画出的第一笔线条，就会自带你网站的基因，而不是散发一股廉价、通用的 AI 味。 起点精准，后面滚动的每一圈才会有质量；如果一开始就歪了，你只是在循环里加速迷路而已。这也是[多模型认知协作](/zh-cn/articles/multi-model-collab-website-rebuild/)的核心：重点不是单一 AI 有多聪明，而是如何建立一个有秩序的结构，让它们互相补位。 ## 永远把人留在循环中央 看完了这套自动化闭环，你会发现一件有趣的事：三个 Claude 都极具威力，但没有一个知道「这艘船现在该开往哪里」。 要往哪个方向修正？哪一项功能取舍才符合商业利益？什么时候该喊停？这些攸关价值的决策，AI 碰不到，也做不好。 工具负责把每一步走得飞快，而人类负责决定方向。三个 AI 跑完一个循环，真正赋予这个循环意义的，永远是坐在中间、制定秩序的那个人。