当设计师不再画图，而是开始写"规矩"

Hi，大家好，我是七帅。

今天这篇文章的起因，说来挺有意思。

前两天我在琢磨一件事：现在有些设计师，已经不怎么打开 Figma 画图了。他们把自己的设计规范、组件库搞成一个个"Skill"文件，直接喂给 AI，然后让 AI 产出前端代码。

当时我第一反应是：这靠谱吗？

结果今天自己亲手跑了一遍完整流程——从 MasterGo 设计稿里把整套设计系统扒下来，做成 Skill，然后直接用它生成了一个博客页面。

说实话，干完之后我真觉得，这事儿比我想象的成熟得多。

01 从"让 AI 照着画"到"让 AI 照着规矩来"

以前设计师和开发的协作流程，大部分人是这样的：设计师在 Figma 或 MasterGo 里吭哧吭哧画完设计稿，导出标注，扔给前端。前端对着标注一点点还原，中间还得反复确认"这个间距是多少""这个圆角是几像素"。

这套流程跑了好多年，说实话，效率真谈不上高。

但现在有一批人走了条挺另类的路：不画图了，直接把设计规范变成一套规则文件。

这套规则文件就是我们说的"Skill"。它不是一个组件库，也不是一份 PDF 文档，而是一份 AI 能读懂、能执行的设计指南。里面包含颜色 token、排版规范、圆角值、阴影参数、组件状态……所有设计师平时要跟开发反复沟通的东西，全都用结构化的方式写进去了。

AI 拿到这套规则之后，每次生成代码都会严格遵循——不会出现"差 1px"的问题，因为规则本身就是代码级的。

02 亲手跑了一遍，确实能跑通

光说不练假把式。我今天就用自己的设计系统试了一把。

第一步，打通 MasterGo 和 AI。MasterGo 有个东西叫 Magic MCP，通过 MCP 协议把设计稿的数据直接接到 Claude Code 里。配置很简单，一行命令的事：

claude mcp add mastergo-magic-mcp -- npx -y @mastergo/magic-mcp --token=你的token

连上之后，我给了它两个设计文件的链接——一个是《华润医商设计规范》，一个是《CRDesign Web 组件库》。

第二步，从设计稿里提取数据。这一步有个小坑：URL 里要带 layer_id 参数才能读到具体内容，光给 page_id 是不行的。搞定之后，AI 直接把颜色体系、排版规范、圆角规则、容器样式全部扒了出来——8 套颜色体系，每套 10 个色阶，18 个排版 token，5 个组件的完整状态规范。

第三步，把提取到的数据整理成 Skill 文件。写好 CSS 变量、组件规范、禁止事项，保存到 ~/.claude/skills/crdesign/ 目录。

最后一步，直接让 AI 用这套规范生成一个博客页面。结果就是：颜色、字号、圆角、按钮样式全部符合设计规范，品牌色 #F99D33 用在了该用的地方，圆角值都是 2 的倍数——没有 3px、7px 这种野路子。

整个过程从连接到产出，大概两小时。

03 设计师的角色变了，但没被取代

看到这里你可能会问：那设计师是不是要失业了？

我的判断是：不会失业，但角色会变。

以前设计师的核心产出是"图"——一张张视觉稿。以后呢，核心产出可能是"规则"——一套套可执行的设计约束。

这其实是设计师一直想做但没做到的事：设计系统不再是一份"参考文档"，而是变成了真正被执行的规则。AI 每次写代码都得遵守，不存在"参考性地实现"这回事了。

但这里有个前提：设计师得学会用结构化的方式表达自己的设计意图。不是"我感觉这个间距差不多"，而是"间距必须是 8 的倍数"。不是"颜色稍微亮一点"，而是"品牌色 6 级 #F99D33，hover 态用 5 级 #FAB357"。

这种能力，有人叫它"Context Engineering"——上下文工程。说白了就是：你得能精确地描述你想要什么。

04 目前还做不到的

不过我也得说实话，现在这套流程还有明显的短板。

第一，复杂的交互动画和响应式断点，靠描述还是有损耗。AI 能理解"hover 时颜色变深"，但"滚动到某个位置后卡片依次浮入"这种效果，还是得人写。

第二，探索阶段的视觉方案——风格还没定、需要快速试错的时候，Figma 的自由度仍然更高。Skill 更适合已经确定规范的项目。

第三，不是标准化的页面（营销页、品牌官网），靠 Skill 生成的效果还不够好。适合后台管理、表单、列表这类标准化 UI。

写在最后

今天最大的感受是：AI 拿走了"执行"这一层，但"判断什么是对的"这件事，短期内还是人的活。

设计师能不能适应这种转变，关键不在于会不会写代码，而在于能不能把自己的审美判断力，转化成 AI 能理解的规则。

能转化的，效率会有数量级的提升。转化不了的，确实会有点被动。

或许今天这篇文章的起因，就是最好的例子——我不是设计师，但我花了两个小时，把一套企业级设计系统从 MasterGo 里搬到了 AI 里，然后直接用它生成了一整个页面。

这在一年前，还挺难想象的。

七帅

产品设计师 用设计让产品更有温度

热爱产品，热爱生活。相信好的设计源于对生活的细腻观察。

喜欢用 AI 工具提升效率，探索设计与科技的边界。工作之余，享受阅读、旅行和一切美好的事物。

费曼学习法践行者，价值投资探索者。