# Claude Design 更新后，我用一个指令把网站设计系统喂进 AI。难的不是下指令，是看懂它要动哪里 > Claude Design 在 6/17 推出更新、跟 Claude Code 深度整合，设计工具开始能读 codebase、同步真实设计系统。我用 design-sync 把 paulkuo.tw 的设计系统喂进 AI，这篇拆解的不是操作，而是 AI agent 越能动手、人越要顾好的三件事：权限把关、以现场为准、独立验证。10 个文件、validate exit 0、零 force 收尾。 - Author: Paul Kuo（郭曜郎） - Date: 2026-06-18 - Pillar: 智能与秩序 / Intelligence & Order - Tags: Claude Design, design-sync, AI agent 协作, 设计系统, 权限把关, 超级个体, 人机协作 - Canonical: https://paulkuo.tw/zh-cn/articles/claude-design-sync-codebase/ - Language: Simplified Chinese (简体中文) - Translation: AI-translated from the zh-Hant (Traditional Chinese) original - Original (zh-Hant): https://paulkuo.tw/articles/claude-design-sync-codebase.md - Site index for LLMs: https://paulkuo.tw/llms.txt --- > **TL;DR** — Claude Design 在 6/17 推出更新后，跟 Claude Code 的整合变得更深。这代表它不再只是凭提示词生成漂亮画面，而是可以通过 `design-sync` 读进网站真实的设计系统，让后续产出的设计更接近原本的品牌语言。 > > 我这次把 paulkuo.tw 的品牌 tokens 接进 Claude Design：同步 10 个文件、validate exit 0、零 force 收尾。但真正值得记下来的，是过程中每一个需要人判断的瞬间：权限能不能放行、AI 读到的文件是否正确、我自己的记忆是否已经过时、最后需不需要另一双眼睛来验证。 > > 工具越强，人的判断力就越值钱。
▶ 听摘要
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](https://claude.com/blog/claude-design-stays-on-brand-for-daily-work) 之间的边界开始变薄。最重要的改变是设计系统汇入被重做了：现在 Claude Design 不只是听你描述品牌，而是可以读进一个 GitHub repo、设计文件或原始数据，拿你的真实设计系统作为生成依据，甚至会自己拿产出去对照、发现不对再修。 对一个有自己 codebase 的人来说，这是一个分水岭。以前我的网站长什么样、用什么颜色和字体，跟 AI 帮我生出来的设计基本上是两个世界；现在，我可以用一个指令把这两个世界接起来。 ![Claude Design 的 designs 列表画面，列出 Design System、Paul_Ai Capibility 等多个设计项目](/images/articles/claude-design-designs-list-anon.png) 上面是 Claude Design 现在的样子。左上角还挂着 Beta，但该有的入口都已经出现了：从文件开始、做简报、做产品原型、做线框图；下面则是你累积的设计项目。我这趟要做的，就是让清单里的东西，从一开始就长得像 paulkuo.tw。 顺带一提，它的[用量是独立计量的](https://support.claude.com/en/articles/14667344-claude-design-subscription-usage-and-pricing)：有自己每周的额度，跟你 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。 | 角色 | 它负责什么 | |---|---| | 桌机 Claude app | Claude Design 的入口，负责让你直达工作区 | | Claude Code | 真正驱动「喂 codebase ↔ 接回开发」的引擎 | | Claude Design | 生成设计、制作原型的工作区 | 一句话：桌机 app 是门，Claude Code 是引擎，Claude Design 是工作的地方。所以接下来你看到的同步，全是 Code 在背后做的，不是 Chat，也不是 Cowork。 ## 流程总览：五个阶段，两个关键决策 我把整趟走过的路画成一张图。重点不在步骤多漂亮，而是每一步背后都藏着一个判断。 ![把 codebase 的设计系统接进 Claude Design 的实战流程：五阶段加两个关键决策，底部三条把关心法](/images/articles/claude-design-sync-flow.svg) 整个流程大概是这样：开一个全新的 Claude Code session、跑 `/update` 抓最新指令、在 repo 根目录启动 `/design-sync`、逐一判断权限、用独立的眼睛验证，最后干净收尾。听起来像例行公事，但真正花脑力的是两个决策：第一，要同步到什么程度；第二，哪些权限可以放行。 ## 为什么只同步 tokens？因为工具还没真正吃得下 Astro 组件 `design-sync` 跑起来后会问你要同步什么。我选了 tokens-only，也就是只搬品牌的底层规格，不搬完整组件。简单说，就是先让 AI 认得我的颜色、字体与间距，而不是急着让它理解整套 Astro 组件。 这不是保守，而是看清楚工具的边界。Claude Design 的设计系统汇入是读你的 [codebase 跟设计文件](https://www.anthropic.com/news/claude-design-anthropic-labs)起家的，但我实测 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。 这个动作是整趟最该被记住的纪律：让执行者自己验收自己，等于没验收。任何要推出去见人的东西，不管是代码、设计还是文章，在送出去之前，都该找一个没有参与制作的角色重新看一遍。 这也是我长期主张[多模型认知协作](/zh-cn/articles/multi-model-collab-website-rebuild/)的原因。重点不在多开几个窗口凑热闹，而在让不同角色互相质疑、互相校对。人则留在中间，负责定义标准、判断风险、确认最后的结果。 中途还有一个小乌龙。画面突然卡住，我一度以为断线，后来才发现只是误按 `Ctrl+Z`，把工具丢到背景暂停而已，打一个 `fg` 整个流程就回来了。这也再次提醒我：很多恐慌，其实来自于不知道底层正在发生什么。 ## 工具越强，判断力越贵 把这趟浓缩成一句话：用 AI 做事，真功夫不在你会不会下指令，而在你看不看得懂它要动什么、肯不肯当场查证、懂不懂得找人把关。 design-sync 确实很强，一个指令就把我网站的品牌接进了 AI，以后做设计 AI 就能自动 on-brand。但让这件事「做对」而不只是「做完」的，从头到尾都是那些没有写在指令里的判断。这跟我一直在谈的[品味与判断力](/zh-cn/articles/post-code-era-taste/)是同一回事：当执行的成本被压到接近零，剩下的差异全部都在决策的质量。 Claude Design 这次更新，只是开始。接下来会有更多 AI 工具不只帮你生成内容，而是直接接上你的工作现场、读你的文件、改你的流程。能一键完成的事会越来越多，但正因如此，那个在按下去之前愿意停半秒、退回去读一眼的人，会越来越重要。 下次确认框跳出来时，别急着按 Yes。先问一句：你到底要动哪里？