从“画图的”到“定规则的”：设计师的 AI 时代新姿势

Hello 大家好，我是设计师鹏弟。

在一次 Demo 展示网站的改版项目里，我尝试用 Ardot × WorkBuddy 走完了全流程——从案头工作到设计稿修改，再到代码更新和 Skill 沉淀。

结果是：当我不在场时，别人也可以延续我的设计质量生成页面。

这次我把 AI 帮我做的事拆成四步，大家可以跟练起来：

STEP 01：梳理设计规范

我相信有很多设计师在工作中都会遇到一个现象：想把自己的专业能力尽可能发挥到最大，但大量的案头工作、反复试错、项目进度、实现成本等现实因素，导致最终得到的都是一个平衡的方案。

而 AI 工具却具备天然的优势：海量“知识储备”——苦学 7 年设计学，我可能也不及 AI 的一角。

这一步我做的事很简单：把网站链接丢给 AI，让它去分析同类 Demo 的差距在哪，然后总结成一份设计建议文档。

比如它给我算出来：现网是亮色主题，但展会强光下会反射发白；文字对比度只有 4:1，强光下会降到 2:1 以下，几乎不可读。这些结论不需要我一个个去测，AI 直接给我列成了表。

Tips：现在很多设计师对 AI 的关注都集中在“生成”“创意”“效果”这些偏结果的部分。但别忘了，设计师日常工作中也可以多多利用 AI 来完成案头工作——调研、分析、整理规范，AI 同样能干，而且干得很快。

STEP 02：整理设计系统

设计师在使用 AI 工具时，往往面临一个卡点：我没有特别规范的设计系统，那 AI 生成出来的页面是不是就没办法延续设计风格？

这个项目的情况更糟——旧网站不仅没有设计系统，连一些设计源文件都丢失了。

但我不仅让 AI 帮我提炼了设计组件，还让 AI 把所有组件按照第一步梳理的设计规范做了样式刷新。至此，我完全利用 AI 完成了整站新设计风格的刷新。原来散落各处的组件，现在统一成了一套可被识别、可被调用的设计系统。

Tips：连接 Ardot MCP，把你的现网链接丢给 AI，让它帮你读取前端代码，并在画布中整理成设计组件。（功能预告：Ardot 自带的“提取设计系统”功能即将上线，未来选中画布内容即可一键提取，敬请期待。）

STEP 03：设计转代码落地

首先我们需要想清楚一个原理：D2C（设计稿转代码）并不是什么神秘的东西。所有页面中的样式，从设计稿到开发上线，都是一次 D2C 的过程。在没有 AI 之前，这个过程需要手工精调校准，但现在可以利用 AI 帮忙。

D2C 的核心，是让 AI 认识你的设计元素。
想让 AI 认识，就要让每个元素有名字——不是“这个按钮”“那个卡片”，而是一个跟设计规范挂钩的、有明确含义的名字。
这些名字从哪来？从第一步梳理的“设计规范”和第二步整理的“设计系统”里来。

举个例子：
• 设计规范里定义“正文字号 = 16px、品牌色 = #007AFF”——这是规则
• 设计系统里把规范落实到具体组件上——这是载体
• 你在设计稿里把某个元素命名为“正文字号”——这是执行
有了这个名字，AI 就知道了三件事：它是什么、长什么样、代码里该怎么写。

当这个名字在设计稿和代码中保持一致时，即使你只改了设计稿的样式，代码也会跟着自动更新——因为你改的是“正文字号”这个定义，所有引用它的地方一起变。
我在这个项目里对设计组件做了很多细节调整——毛玻璃、色值、圆角、字号、透明度、点阵装饰等都是通过名字的一致性得到了还原。

Tips：D2C 过程中如果不确定代码有没有跟着设计稿更新，可以让 AI 连接 Ardot MCP，实时生成可预览的 html 文件来确认，不用等开发环境跑起来。

STEP 04：沉淀 Skill 复用

到这里已经完成了已有页面从样式到代码的刷新。但设计需求并不是一次性的，后续还会有新需求不断迭代。
我希望的是：让参与需求的其他角色，在没有设计师参与的情况下，也能延续设计质量。
这里需要做两个关键动作：让 AI 执行一份规则、让 AI 学会自动校验规则。然后将这套设计组件和规则沉淀为 Skill。
怎么沉淀？在 WorkBuddy 里用对话就能完成。
举个例子，你可以这样对 AI 说：

把本次新增的设计规范和组件规则沉淀为 Skill，命名为‘展会 Demo 设计规范’。后续所有新页面生成都基于这个 Skill 执行。

AI 会帮你把设计规范、组件库、校验规则打包成一个可复用的 Skill。之后再有新需求，一句话就够了。比如我说“调用‘展会 Demo 设计规范’Skill，帮我生成一个智能客服 demo”，它产出的页面就自动符合前面定下的所有规范——配色、字号、对比度、组件用法，全都对得上。

Tips：如果感觉 AI 并不“听话”，试着把这个规则用更严的措辞重写一遍，并配上正反例。比如把“字号不能太小”改成“所有可见文字必须 ≥ 13px，反例：12px ❌”。写到这个精度，AI 就不容易再跑偏。

跟练完这 4 步，你会得到什么

一次规范化的设计优化，以及一份可以被别人复用的设计质量。

这四步串起来看，其实是一条完整的链路：先梳理清楚“设计规范”（做什么样的设计），再整理出“设计系统”（用什么组件来做），然后通过 D2C 把设计落地到代码（怎么做出来），最后沉淀为 Skill（如何让别人也能照着做）。每一步都建立在前一步的基础上，前一步的产出就是下一步的输入。

也许你会问：这不就是组件库吗？
组件库时代，设计师的判断是这样的：
• 这个元素值不值得收入组件库？
• 这个组件是不是该升级？
• 这个新页面用哪个组件？
这些判断的回答者是设计师本人和设计稿，判断的边界终止于“组件库被设计师正确使用”——只要设计稿用对了组件，这件事就算成了。

但这一次的实践里，设计师的判断变成了这样：
• 这条规则要不要让代码也强制遵守？
• 这份组件说明要不要让 AI 也能看见？
• 这个数值改了之后，下游十几个页面的连锁反应能不能承担？
判断的对象不再止步于“设计稿用对组件”。设计师要回答的，是这条规则、这份说明、这个数值，能不能成立在一个“设计师不在场”的世界里——代码会按它写、AI 会按它生成、校验程序会按它判定。

所以我的答案是：叫不叫它组件库不重要，重要的是它的读者里第一次多了 AI。 当读者不只有人，写法和维护方式就必然要变。

如果你也想试试

整个过程我一行代码都没写。我不懂代码，全程就是用自然语言一次次跟 AI 明确需求，它给结果，我做判断。

三步开始跟练：
1.官网 ardot.tencent.com 注册（新用户可获 1000 Credits）
2.点右上角的 MCP 配置入口，勾选你所用的 IDE（WorkBuddy、CodeBuddy、Cursor 等都支持）
3.在对话里直接说需求，从第一步的“帮我梳理设计规范”开始

过程中遇到的所有问题，都可以直接和 AI 讨论——你只需要做好专业判断的掌舵者。

本文作者@腾讯设计Ardot，原文链接：https://mp.weixin.qq.com/s/lHKcqn8oh1i9CPyVun2f6Q