企业官网建设流程全解析

2016 年，Figma 回答了一个问题：设计师最快的出图方式是什么。它用一套组件、变量、嵌套变体的系统赢了。

赢得很彻底。

但赢的代价，是创造了一套越来越难打理的东西。

一个颜色变量，八个值

Figma 自己的产品设计文件里，有一个颜色变量面板，里面有 946 个颜色变量，分层嵌套在类似「bg/desktopBackgrounded」这样的路径下。一个单独的颜色变量，在八个不同的模式下各有不同的值：亮色、暗色、FigJam 亮色、FigJam 暗色、DevMode 亮色、DevMode 暗色、Slides 亮色、Slides 暗色。

一个下拉框组件有 12 个变体，每个变体有自己的属性名称，比如「DS Library Swap」「QA Plugin」「Growth Stepper」「Sharing Actions」。

还有一个效果样式面板，里面有一个样式叫「light/elevation-300-tooltip」。展开看，它定义的是一个 0.5 像素的黑 30% 透明度投影。它有自己的命名样式，因为这是唯一能标注它对应哪个 CSS 变量的方式。

这是 Figma 自己的文件，Figma 自己的团队做的。这是黄金标准。

调试这个颜色需要五分钟，然后你需要搬到乡下

现在想象你要调试一个颜色显示不对的问题。

你检查组件，组件引用了一个变量，变量又指向另一个变量，另一个变量又引用了一个模式，模式在实例层面被覆盖了，实例又嵌在一个有 library swap 的嵌套组件里。

到了这一步，你要么考虑拿起代码，要么搬到乡下当牧羊人，因为在这个系统里多待一分钟你就要发疯了。

这就是 Figma 的「胜利」留下的隐藏代价。

它创造了一套在程序层面极难处理、文档残缺的格式。它用自己的方式把设计变成了一个有严密 Schema 的东西，但同时在上面套了一个「随便啦」的即兴创作外衣。就像一个 A 型人格被迫表演放松，内心却在尖叫你的 frames 没嵌套好、你的 tokens 断开了、你没对齐网格。

LLM 是在代码上训练的，不是在 Figma 的那套原语上。所以当代码变得越来越容易写、AI Agent 越来越强的时候，源真理会自然地流回代码。

为什么要在陶罐的水彩画上费劲，而不是直接揉泥巴？

Claude Design 做了什么

Anthropic 的 Claude Design 不是设计工具的 AI 版本。它是另一种思路：让 AI 直接生成代码，然后用代码生成设计。

几个关键能力：

它会读你的代码库，自己建一套设计系统。你不需要手动导入变量、配置颜色——Claude 扫一遍你的代码，就知道你的品牌用什么颜色、什么字体、什么组件。然后它生成的每个项目自动继承这套系统。

它可以生成可交互的原型。不是静态图，是真的可以点的、可以操作的。设计师把线框图丢进去，出来的是一个可以直接演示的版本，不需要写代码，不需要 PR，不需要 code review。

它可以直接把设计交给 Claude Code。一个按钮，Claude 把所有东西打包成 handoff bundle，丢给 Claude Code，工程侧直接开始写。

它和 Canva 打通了。Canva 的 CEO 亲自出来站台，说他们的设计师用 Claude Design 之后，原来需要 20 个 prompt 才能复现的复杂页面，现在只需要 2 个。

两个完全不同的赌注

现在回过去看 Figma 的处境，就清晰了。

Figma 做了一件了不起的事：把设计过程变成了一套可版本化、可协作、可编程的系统。但它的前提是：设计文件是源真理。

为了维持这个前提，它创造了一个越来越复杂的中间层。Figma Make 做的是：我给你的设计文件加上 AI 能力。Claude Design 做的是：把你的设计系统直接建立在代码里，然后让 AI 在这个基础上生成。

两个完全不同的赌注。

作者把这种思路追溯到一个工艺美术运动的原则，叫「truth to materials」——一个东西应该诚实地呈现它是什么、怎么做的，而不是伪装成别的东西。Figma 刚好是反的。

而 Claude Design 是第一个真正押注在「直接做代码」上的设计工具。

对 Figma 意味着什么

短期来看，Figma 不会消失。它有 millions 的用户，有十几年的设计资产在里面，有完整的协作工作流。这些不会一夜之间被替代。

但有几个结构性的压力：

它在被绕过。当产品经理可以直接用 Claude Design 出线框图，然后直接丢给 Claude Code 实现，Figma 的「设计-工程交接」价值链就被绕过了。设计文件的版本控制、组件库、设计系统——这些 Figma 的核心资产，在这条新路径上变成了可选的，而不是必须的。

它的护城河在变成围墙。Figma 越来越依赖自己的格式和生态系统，这让它变得更封闭。但越封闭，它在 AI 时代能获得的训练数据就越少，就越难让外部 AI 系统理解和集成它的设计系统。

它需要重新定义自己的价值。如果「源真理」不再是设计文件，那 Figma 是什么？一个复杂的协作工具？一个设计资产管理器？

更重要的问题

这场分歧背后有一个更大的问题：当 AI 能直接理解和生成代码的时候，「设计工具」到底应该是什么？

Figma 的答案是：让设计文件变得更强大，让 AI 来增强它。

Claude Design 的答案是：绕过设计文件，直接在工作流里生成。

两个答案都在解决同一个问题，但指向了完全不同的未来。

Figma 赢得了一场已经不太重要的战争。而 Claude Design 正在指向的那场战争，Figma 可能还没有准备好参与。

股价为什么跌

Claude Design 上线之后，Figma 和 Adobe 的股价都跌了。市场不是在为今天反应，是在为明天定价。

Figma 的处境很直接。

Claude Design 不是一个功能更强的 Figma——它是绕过 Figma 的路径。当一个产品经理可以直接描述需求、Claude 生成可交互原型、然后一键交给 Claude Code 实现，Figma 那个「设计文件和代码之间的桥梁」的价值就被重新评估了。

Figma 的护城河是什么？协作网络效应、组件系统、设计到工程的交接流程。但如果 AI 接管了交接，协作在 AI 原生工具里发生，Figma 的网络效应就面临压力。市场看到的是：即使 Figma 今天还是龙头，它的可防御性在下降。

这不是说 Figma 会倒闭——而是说它的「确定性」在降低。在估值模型里，这种不确定性能让溢价消失得很快。

Adobe 的处境更深一层。

Adobe 的核心不是「协作设计」，它的核心是「创意工具的订阅制」。你每个月付钱给 Creative Cloud，因为它是你做设计的唯一方式。

Claude Design 的出现，让「做设计」这件事的入口变了——你不再需要打开 Photoshop 或者 Illustrator，你只需要描述你要什么，AI 帮你生成。这个逻辑如果成立，Adobe 的订阅基础就不是被抢走了，而是被绕过了。

更糟糕的是，Adobe 的 AI 策略（Firefly）是在自己的生态里做 AI 增强——它假设你的工作流还在 Adobe 里。Claude Design 的赌注是直接重构这个工作流。两个不同的赌注，指向了不同的未来。

市场对 Adobe 的担心不只是「竞争」本身，而是「Adobe 押注的方向是不是正确的方向」。

参考来源

• Claude Design 官方发布页面
• Sam Henri Gold：Thoughts and feelings around Claude Design
• HN 讨论（219票）