4 小时搭完设计系统，设计到代码这堵墙正在变薄

The Design Project 那条视频，标题很抓人。

用 Claude、Cursor 和 Figma，4 小时搭完一套设计系统。

8 分 40 秒的视频，20.9 万播放，6500 多点赞。设计类内容能跑到这个密度，说明它戳中了很多团队天天都卡的老问题。

设计系统这东西，过去听着就很重。

产品先提需求，设计师整理颜色、字体、间距、组件状态，前端再把这些规范翻译成代码。中间只要有一个地方没对齐，后面就是一轮又一轮对稿。

按钮高度差 2px，要改。

主色换了，变量要改。

Figma 里看着没问题，到了页面里又不对。

这类活不难，但很磨人。它消耗的更多是时间。

AI 开始接管翻译层

视频里最有意思的点，就是 AI 开始接管这段「翻译」工作了。

它从 Figma 里读颜色、字体、间距这些规范，再生成组件代码。设计侧改主色，代码侧变量跟着同步。

组件库不再完全靠人肉对齐，而是尽量让设计规范和工程实现贴在同一套数据上。

这事听起来像小优化，其实影响挺大。

以前设计稿到代码，中间隔着一层人工翻译。设计师说「这里是主按钮」，前端要理解它对应哪个 token、哪个状态、哪个 hover、哪个 disabled。

现在 AI 能把这层翻译做掉一部分，设计和代码之间的损耗就会小很多。

视频里还给了一组数字，整体效率提升 38%，上市时间加快 40%，任务完成速度提高 34%。

这些数字先按视频口径看，不用当成所有团队都能复现的标准答案。

AI 不是只会帮你写几段 CSS，它开始往更前面的设计规范、组件体系和交付链路里钻。

产品经理要更会提需求

对产品经理来说，这会很刺激。

以前 PRD 写完，后面要等设计、等前端、等联调。现在 AI 可以同时碰设计和代码，你提需求的速度变快了，验收压力也变大了。

你说不清楚，它就做偏。

你验不出来，它就把偏差带进组件库。

所以产品经理以后反而更需要把需求讲明白。漂亮话没用，状态、边界、优先级要说清楚。

独立开发者会很爽。

一个人做产品，最烦的是每个环节都要自己补。页面要好看，组件要统一，代码还不能乱。过去很容易做成「功能能用，但一看就是程序员页面」。

这条链路如果跑通，至少能把设计系统这块门槛往下压一大截。

你不一定要会完整的设计系统方法论，也不一定要手写一套组件库。先让 AI 根据 Figma 和需求吐出一个可运行的基础版本，再慢慢调，这比从空白文件开始强太多。

设计师的价值会往前挪

设计师也不是没事干了。

但那些重复整理规范、反复对齐间距、手动维护组件状态的活，价值会被压得很低。

更值钱的部分会往前挪，审美判断、复杂交互、品牌气质、系统边界，这些 AI 还不太会自己拿主意。

手调每一个 padding 的工作会少，判断这套东西该不该做的工作会变多。

这条视频让我在意的地方，不只在 4 小时这个数字有多夸张。

我更在意的是，设计师和前端之间那堵墙开始变薄了。

以前设计稿是一边，代码是一边，中间靠人来回传话。现在 AI 站在中间，两边都能读一点，两边都能写一点。

这会改变很多团队的协作方式。

以后做产品，可能不再是「先等设计排期，再等前端排期」。更常见的情况会是，先让 AI 拉一版能跑的设计系统，产品、设计、前端一起挑毛病，再往下推进。

从设计到代码，距离正在从跨部门协作，缩短到同一个下午。

这件事，值得所有还在按传统排期做产品的人重新看一眼。