Thoughts and Feelings around Claude Design
*关于 Claude Design 的一些想法和感受*
译注： 原文为英文，本文为全文中英双语对照翻译。原文作者：Sam Henri Gold，发布于 2026-04-18。
🇬🇧 EN: I tried Claude Design yesterday and I have a theory for how this whole thing shakes out.
🇨🇳 ZH: 我昨天体验了 Claude Design，于是产生了一个理论，想跟大家聊聊整个领域会如何发展。
🇬🇧 EN: As product teams scaled and design needed to justify itself inside engineering orgs, it was pushed toward systematization — and Figma invented its own primitives to make that work: components, styles, variables, props, and so on. Some concepts are borrowed from programming, some aren’t, and the whole thing doesn’t neatly map onto anything. Guidance evolves, migrations pile up, and if you want to automate any of it you’re stuck with a handful of shoddy plugins. The beast is hairy enough that entire design roles now specialize in wrangling the system itself.
🇨🇳 ZH: 随着产品团队规模扩大，设计需要在工程组织中证明自己的价值，于是被推向系统化——Figma 因此发明了自己的原语：组件、样式、变量、属性，等等。有些概念借鉴了编程，有些则没有，整个体系并不能干净地映射到任何现有事物上。指引不断演进，迁移堆积如山，如果你想自动化其中的任何环节，只能用少数几个简陋的插件凑合。这套系统极其臃肿，以至于催生了专门负责折腾系统本身的整个设计角色。
🇬🇧 EN: There’s always been a tense push-pull between Figma and code over what the source of truth should be. Figma won over Sketch partially by staking its claim there — their tooling would be canonical.
🇨🇳 ZH: Figma 与代码之间始终存在一个紧张的对拉——到底谁才是真相的来源。Figma 赢了 Sketch，部分原因是它在工具链上占据了霸主地位——它的工具将成为标准。
🇬🇧 EN: That victory had a hidden cost. By nature of having a locked-down, largely-undocumented format that’s painful to work with programmatically, Figma accidentally excluded themselves from the training data that would have made them relevant in the agentic era. LLMs were trained on code, not Figma primitives, so models never learned them. As code becomes easier for designers to write and agents keep improving, the source of truth will naturally migrate back to code. And all the baroque infrastructure Figma had to introduce over the past decade will look nuts by comparison. Why fuss around in a lossy approximation of the thing when you can work directly in the medium where it will actually live? If we want to make pottery, why are we painting watercolors of the pot instead of just throwing the clay?
🇨🇳 ZH: 那场胜利有一个隐藏的代价。由于 Figma 天然具有封闭、几乎无文档的格式，程序化处理它极其痛苦，无意间将自己排除在了训练数据之外——而这些数据本可以让它们在智能体时代保持竞争力。LLM 是在代码而非 Figma 原语上训练的，所以模型从未学习过它们。随着代码对设计师来说越来越容易编写、智能体不断改进，真相的来源将自然迁移回代码。Figma 过去十年不得不引入的所有繁复基础设施，届时相比之下会显得极其荒唐。为什么要在对实际事物的有损近似中费尽周折，而不直接在它最终栖身的媒介中工作？如果我们想做陶器，为什么要去画陶罐的水彩画，而不是直接揉捏泥土？
🇬🇧 EN: At work, we’ve spent quite a bit of time back-porting design changes made directly in code back to Figma and it is not fun. I can’t share that file, but for a fair comparison, this is Figma’s own design system file for their product. I have to assume it was built by the most competent design system team you can find. And yet…
🇨🇳 ZH: 工作中，我们花了大量时间将在代码中直接做出的设计改动反向移植回 Figma，这体验一点都不好玩。我不能分享那个文件，但为了公平比较，这里是 Figma 自家产品的设计系统文件。我不得不假设这是你能找到的最有能力的设计系统团队构建的。然而……
🇬🇧 EN: A modal footer component open to its variant property editor, showing 12 variants with a dropdown full of values like "DS Library Swap," "QA Plugin," "Growth Stepper," and "Sharing Actions." The right panel lists eight props like "Border," "Second CTA," and "Helper Text"
🇨🇳 ZH: 想象一下调试一个看起来不对的颜色。你检查组件，组件用了一个变量，变量指向另一个变量，那个变量引用了一个模式，模式在实例层面被覆盖了，实例又嵌套在一个有库交换的组件里。到了这一步，你要么考虑拿起代码，要么搬去乡下当牧羊人，因为再多一分钟这个破玩意儿你就要抓狂了。
🇬🇧 EN: The effect styles panel for a slider component, showing a style named "light/elevation-300-tooltip." Expanding it reveals its entire definition: a 0.5px drop shadow at 30% black. It has its own named style because that’s the only way to document what CSS variable it corresponds to.
🇨🇳 ZH: 所以，当真相的来源迁移回代码时，Figma 陷入了一个尴尬的位置：手握一套本质上还是手动、停留在前智能体时代的系统——如果有人从头设计，绝不会在今天设计出这样的东西。
🇬🇧 EN: A combo input component with 16 variants. Its children in the layers panel are named things like "Default, Default, Close Button=False" and "Default, Focused, Close Button=True"
🇨🇳 ZH: 我认为设计工具从此刻起会分叉成两种截然不同的形态——几乎就像 Figma 和所有其他竞争者之间重新敲定了一个 2016 年已经回答过的问题：谁能帮助我，一个设计师，最快地把我脑海中的想法实现出来？
剧透：Figma Make 不是答案。Figma Make 感觉主要是让已经深度使用 Figma 生态的人受益——它读取 Figma 样式、组件库和专有属性（或者我喜欢叫的「Prop Props」），它是这个新格局中唯一一个仍然假装设计文件是权威来源的工具。它适合那些想要（或不得不）留在 Figma 体系内的人。
🇬🇧 EN: These are Figma’s own files. Built by their own team. This is the gold standard.
🇨🇳 ZH: Claude Design 是这两个工具中的第一个，它采取了截然相反的赌注。工艺美术运动有一个原则叫「忠实于材料」——事物应该诚实于它是什么以及它如何被制造，而不是伪装成别的东西。Figma 最终走到了这个原则的反面：一套极度僵化的模式，配上一种随意的「就靠感觉吧」的外壳。就像一个 A 型人格的人天生无法放松，被迫表演淡定，而内心却在尖叫：你的框架没有嵌套、你的 token 脱离了你什么都没对齐。Claude Design 虽粗糙，但至少诚实于它本身：归根结底就是 HTML 和 JS。
🇬🇧 EN: Imagine debugging a color that looks wrong. You check the component. The component uses a variable. The variable is aliased to another variable. That variable references a mode. The mode is overridden at the instance level. The instance lives inside a nested component with a library swap applied. At this point, you’re either considering picking up code or moving to the countryside and becoming a sheep farmer because one more minute of this will make you lose your goddamn mind.
🇨🇳 ZH: 它还有一个巨大的结构性优势：它的兄弟是 Claude Code。我完全可以想象，未来 Claude Design 直接把东西丢给 Claude Code，反之亦然。Claude Design 的入门流程已经支持导入你的代码库。设计与实现之间的反馈循环——从一开始就是摩擦的来源——将变成一场单一的对话。
🇬🇧 EN: So as the source of truth shifts back to code, Figma is left in an odd spot: holding a largely manual, pre-agentic system that nobody in their right mind would design from scratch today.
🇨🇳 ZH: 从这一刻涌现的另一个工具，将完全不期望任何代码。它将是一个纯粹的探索环境——在这里放下矩形、堆叠图层样式、摆弄混合模式和渐域，完全放飞想象，不受系统或 prompt 惯例的约束。也许它是一个支持 Apple Pencil 的 iPad 应用，让你可以快速勾勒一堆矩形。37signals 现在可以干一件很有趣的事。或者它走向另一个方向——更像 Photoshop，全面押注高保真合成，让我们的想象力肆意驰骋——既然不再受制于 CSS 效果的天花板。难道不觉得有点奇怪吗：Figma 生命中 90% 的时间里，唯一的图层效果只是一个投影或模糊？
🇬🇧 EN: I think design tooling forks into two distinct shapes from here — and there’s almost a clock resetting between Figma and every other tool competing to answer the same question they answered in 2016: who can help me, a designer, get my ideas out fastest?
🇨🇳 ZH: Figma 的 Sketch 时刻正在迅速逼近。如果把这句话说给维多利亚时代的孩子听，他们可能会中风。
🇬🇧 EN: Spoiler: it’s not Figma Make. Figma Make feels like it primarily benefits people who have already drunk the Kool-Aid — it reads from Figma styles, component libraries, and proprietary props (or, as I like to call them, Prop Props), and it’s the only tool in this new landscape still pretending the design file is canonical. It’s the tool for people who want to (or have no choice but to) stay inside the system.
🇨🇳 ZH: 编者按：以下内容仅面向 Sketch 和 Figma 团队。如果你不在其中，可以跳过。
致 Figma：我能想象这篇帖子在 Figma 内部 Slack 上引发讨论的场景。如果你在 Figma 看到这篇文章：去年我面试的时候你们没有录用我，这才有了这篇文章。你们的损失，大兄弟。
致 Sketch：把你们的脑袋从屁股里拔出来，给他们点颜色看看。加入粒子效果。加入浮雕效果。加入网格变形。去他妈的，加入金属着色器。去发疯。别再躺在「天生 Mac 原生」上吃老本了。放下可可饮料，对鲜血感到饥渴。
致妈妈：抱歉说了脏话。
🇬🇧 EN: Claude Design is the first of those two tools, and takes the opposite bet. There’s an Arts and Crafts principle called “truth to materials” — the idea that a thing should be honest about what it is and how it’s made, rather than masquerading as something else. Figma ended up being the opposite of this: a set of extremely rigid schemas with a free-form “just vibes, man” costume over the top. Like a Type-A personality physically incapable of relaxing, forced to perform chill while internally screaming that your frames aren’t nested and your tokens are detached and nothing is on the grid. Claude Design, for all its roughness, is at least honest about what it is: HTML and JS all the way down.
🇨🇳 ZH: 补充：@jonnyburch 在 Twitter 上分享了一篇链接到他们博客的文章，内容相似，如果你想深入了解，值得一读。