Claude Design 更新后，我用一个指令把网站设计系统喂进 AI——难的不是下指令，是看懂它要动哪里

TL;DR — Claude Design 在 6/17 推出更新后，跟 Claude Code 的整合变得更深。这代表它不再只是凭提示词生成漂亮画面，而是可以透过 design-sync 读进网站真实的设计系统，让后续产出的设计更接近原本的品牌语言。

我这次把 paulkuo.tw 的品牌 tokens 接进 Claude Design：同步 10 个文件、validate exit 0、零 force 收尾。但真正值得记下来的，是过程中每一个需要人判断的瞬间：权限能不能放行、AI 读到的文件是否正确、我自己的记忆是否已经过时、最后需不需要另一双眼睛来验证。

工具越强，人的判断力就越值钱。

Claude Design 更新后，我第一时间想测的不是它能不能生成更漂亮的画面，而是它能不能真正接上我的网站。

于是我用 design-sync 把 paulkuo.tw 的设计系统喂进去。流程跑到一半，我盯着终端机上的权限确认框，手指停在 Enter 上方。它要的存取范围，比我眼前的动作大了一截：我只是要同步几个颜色和字体，它却要求碰一个看起来毫不相关的子目录。

那一秒，如果我只是习惯性按下 Yes，流程也许会继续往前走；但我不会真的知道，它到底准备动哪里。所以我停下来，退回去读它要做什么。后来证明，这个停顿是对的。

我想借这个停顿，拆解 Claude Design 这次更新背后更重要的问题：当 AI 工具强到可以把设计系统接进 codebase、甚至开始替你执行一整段工作流程时，人真正不能外包的是什么？我的答案是把关。而把关，比下指令难多了。

design ↔ code 打通了，这对有 codebase 的人意味什么？

以前用 AI 做设计，东西通常都够漂亮，真正的问题是它太像「任何人都可以用的漂亮」。Claude Design 原本可以帮你产 mock、产元件，但它不认得你的网站，也不知道你真正使用哪些颜色、字体、间距与元件逻辑，产出常常带着一种「通用 AI 设计感」：看起来不差，但不是你。这次更新真正有意思的地方就在这里：Claude Design 开始能够透过 Claude Code 接上 codebase，把你的设计现场读进来。

6/17 这版更新，对我来说关键不只是多了一个功能，而是 Claude Design 跟 Claude Code 之间的边界开始变薄。最重要的改变是设计系统汇入被重做了：现在 Claude Design 不只是听你描述品牌，而是可以读进一个 GitHub repo、设计档或原始资料，拿你的真实设计系统作为生成依据，甚至会自己拿产出去对照、发现不对再修。

对一个有自己 codebase 的人来说，这是一个分水岭。以前我的网站长什么样、用什么颜色和字体，跟 AI 帮我生出来的设计基本上是两个世界；现在，我可以用一个指令把这两个世界接起来。

上面是 Claude Design 现在的样子。左上角还挂着 Beta，但该有的入口都已经出现了：从文件开始、做简报、做产品原型、做线框图；下面则是你累积的设计专案。我这趟要做的，就是让清单里的东西，从一开始就长得像 paulkuo.tw。

顺带一提，它的用量是独立计量的：有自己每周的额度，跟你 chat、Claude Code 的额度分开算、不在同一池，所以设计上的用量不会回头吃掉你的对话或 Code 额度。我用的是 Max 方案，这趟同步额度上没有卡关。

这趟同步的数字不大，但它代表一件事：AI 不再只靠提示词猜测我的网站风格，而是开始读取真实的设计规格。

📊 这趟同步的数字

• 同步文件：10 个
• 内容范围：品牌 tokens（颜色、字体、间距）
• 验证结果：validate exit 0（零错误）
• 版控收尾：commit + push 三镜像，fast-forward、零 force
• 未来成本：建立 .design-sync/ 设定档，之后 re-sync 一个指令即可完成

先分清楚：桌机 app 是门，Claude Code 是引擎，Claude Design 是工作的地方

这里要先打个岔。很多人一听到「Claude Design 跟桌机 app 整合了」，会以为这只是一句话的事，其实这个连动有两层，分开看才不会混在一起。

第一层是入口的连动。桌机 Claude app 的侧边栏现在有 Claude Design 的捷径，点一下就能直达工作区，不用另外开浏览器。这一层只是「进得去」，app 把 Claude Design 收进来，让它成为一个可以直达的地方。

第二层才是重点：能力的连动。把既有 codebase 喂进去、设计完再接回开发，这种双向打通的引擎是 Claude Code，不是桌机 app 本身。而且桌机 app 里有 Chat、Code、Cowork 三个模式：Chat 不能驱动这套同步流程；Cowork 比较像知识工作的第二双眼睛，适合拿来做独立验证，等一下你会看到我就是这样用它；真正能把设计系统喂进 codebase、再接回开发流程的，是 Claude Code。

一句话：桌机 app 是门，Claude Code 是引擎，Claude Design 是工作的地方。所以接下来你看到的同步，全是 Code 在背后做的，不是 Chat，也不是 Cowork。

流程总览：五个阶段，两个关键决策

我把整趟走过的路画成一张图。重点不在步骤多漂亮，而是每一步背后都藏着一个判断。

整个流程大概是这样：开一个全新的 Claude Code session、跑 /update 抓最新指令、在 repo 根目录启动 /design-sync、逐一判断权限、用独立的眼睛验证，最后干净收尾。听起来像例行公事，但真正花脑力的是两个决策：第一，要同步到什么程度；第二，哪些权限可以放行。

为什么只同步 tokens？因为工具还没真正吃得下 Astro 元件

design-sync 跑起来后会问你要同步什么。我选了 tokens-only，也就是只搬品牌的底层规格，不搬完整元件。简单说，就是先让 AI 认得我的颜色、字体与间距，而不是急着让它理解整套 Astro 元件。

这不是保守，而是看清楚工具的边界。Claude Design 的设计系统汇入是读你的 codebase 跟设计档起家的，但我实测 paulkuo.tw 这种 Astro 专案，.astro 元件它目前还吃不进去。硬要它同步元件，得到的很可能是一套半准不准的东西；与其如此，不如只搬最干净、最不容易出错的那一层：颜色、字体、间距。这些是品牌的底色，搬过去之后，AI 之后帮我做任何设计，至少配色和字型是对的。

第二个决策是目标：tokens 要同步到哪里？它预设想倒进既有的 design system 母体，但我选了「开一个全新专案」。理由很简单：我不想让这次专属于 paulkuo.tw 的 tokens，混进那个以后还可能重复使用的共用设计系统里。一个动作会不会弄脏一个你以后还要用的东西，这种事工具不会帮你想，得自己判断。

AI 要你按 Yes 的时候，先问它到底要动哪里

回到开头那个权限框。跟 AI agent 协作时，你会一直遇到权限确认，多数人按到后面会麻木，看到框就直接 Yes。这是最危险的习惯。我的做法是把每个确认都当成一次小考，问自己两件事：它要动什么？放行范围有多大？

shell 指令其实也有基本文法。你不用会写程式，但至少可以先分辨一件事：它只是「读资料」，还是准备「改文件」。像 grep、sed 这类通常偏向读取或处理文字，但看到 > 这种重导向，就要知道它可能会把结果写进某个文件。能分辨「看」和「改」，就已经能避开很多不必要的风险。锁在工具自己沙盒里的动作大多可以放心，但一碰到你真实的程式码目录，或者出现「以后都不问」这种选项，就要把神经拉回来。

那个让我停手的框就是最好的例子。它一直冒出来，想让我授权一个 worker 子目录，但那个地方跟我正在做的 token 同步毫无关系。后来才搞懂，是因为当下的工作目录刚好在那个子目录底下，它才把那串路径当成预设范围丢出来。放行选项的范围，跟眼前的动作兜不起来，就是该踩刹车的信号。 不是它居心不良，而是它的预设逻辑不见得贴着你的意图走，这时候就得由你来校正。

不要相信印象，要相信现场读到的文件

中间有个小插曲，我蛮喜欢的。design-sync 要去找我的品牌 tokens 到底定义在哪里，我很有把握地以为在 src/ 里，毕竟源码都在那。结果它自己比对了一圈，在 public/styles/ 找到真正的源头。我记错了。

这件事反过来很有意思：它没有因为我语气笃定就照我说的去 src/ 里乱抓，而是认真核对，找到对的地方。这跟很多人对 AI 的刻板印象刚好相反：大家常说 AI 会乱编、会讨好你，但至少在这一次，它没有被我的笃定语气带偏，而是回到文件本身核对。

不过这也提醒我另一件事：AI 会核对，不代表它永远对。它跟人一样，脑袋里都有一份「记忆里的旧版本」，重要的事要当场读档查证，不要靠任何一方的印象。这趟我就被自己的记忆骗了一次，幸好流程里有核对这一关。

说到记忆骗人，还有另一个例子。同步完准备收尾时，我也预设 git push 会触发线上自动重建，就像很多 CI/CD 那样；但现场读了 repo 里的 CLAUDE.md 才发现，那个自动重建功能早就停用，现在部署走的是另一条路。又一次，现场文件覆盖掉我脑中的旧版本。这种被更正的时刻不该抗拒，要欣然接受，它就是「以现场为准」这条原则在替你挡掉一个错。

别让 AI 自己验自己：找独立的第二双眼睛

同步完成后，validate 回报 exit 0，十个文件也都到位了，看起来成了。但「工具说它成功了」跟「它真的对」是两件事。

我没有让执行同步的 Claude Code 自己验收自己，而是另外开了 Cowork，把它当成一个没有参与前面流程的第二双眼睛，拿原始 tokens 源头跟同步后的产出逐项比对：颜色值有没有抄错、有没有漏掉哪一条。确认无误后，我才 commit、push 到三个镜像，对齐干净、fast-forward、零 force。

这个动作是整趟最该被记住的纪律：让执行者自己验收自己，等于没验收。任何要推出去见人的东西，不管是程式、设计还是文章，在送出去之前，都该找一个没有参与制作的角色重新看一遍。

这也是我长期主张多模型认知协作的原因。重点不在多开几个视窗凑热闹，而在让不同角色互相质疑、互相校对。人则留在中间，负责定义标准、判断风险、确认最后的结果。

中途还有一个小乌龙。画面突然卡住，我一度以为断线，后来才发现只是误按 Ctrl+Z，把工具丢到背景暂停而已，打一个 fg 整个流程就回来了。这也再次提醒我：很多恐慌，其实来自于不知道底层正在发生什么。

工具越强，判断力越贵

把这趟浓缩成一句话：用 AI 做事，真功夫不在你会不会下指令，而在你看不看得懂它要动什么、肯不肯当场查证、懂不懂得找人把关。

design-sync 确实很强，一个指令就把我网站的品牌接进了 AI，以后做设计 AI 就能自动 on-brand。但让这件事「做对」而不只是「做完」的，从头到尾都是那些没有写在指令里的判断。这跟我一直在谈的品味与判断力是同一回事：当执行的成本被压到接近零，剩下的差异全部都在决策的品质。

Claude Design 这次更新，只是开始。接下来会有更多 AI 工具不只帮你生成内容，而是直接接上你的工作现场、读你的文件、改你的流程。能一键完成的事会越来越多，但正因如此，那个在按下去之前愿意停半秒、退回去读一眼的人，会越来越重要。

下次确认框跳出来时，别急着按 Yes。先问一句：你到底要动哪里？