背景：从一个常见的 0→1 场景说起
做 0→1 项目最令人兴奋又头疼的阶段，是方向还没定的探索期。需求评审刚对齐完方案 A，过两天 PM 又带着竞品报告走来说”我们再聊聊 B 方向”；再过一周，他拿着新的用户访谈记录回来，倾向又悄悄转向了 C。每调整一次方向，传统设计流程就要把几十张画板推倒重来——设计师被夹在”快速试错”和”高质量交付”之间，很难两全。
于是我们尝试了一种实践：把 Workbuddy 和 Ardot 接在一起——前期用 Workbuddy 跑 Vibe Coding 快速验证方向，后期用 Ardot 的 MCP 能力做正式稿，让不同阶段使用各自擅长的工具。
前期用 Workbuddy 跑 Vibe Coding，追求速度和灵活性。设计师用自然语言快速生成可交互原型，团队基于真实交互做多方案比较，而不是盯着静态稿想象。方向共识达成后，再转入 Ardot 做正式设计——利用其 MCP AI 能力将关键页面流程一笔写入，省去逐页拖拽组件、搭建骨架的基本工作。
简单说：前期求快求灵活，用 Workbuddy 试方向；后期求细求质量，用 Ardot 提效率。
下面分四步详细讲讲我们的具体做法。
STEP 01：Workbuddy Vibe Coding 构建 Demo 原型
传统痛点：交互方案只能用静态设计稿表达，产品、设计、开发三方对齐时，每个人脑补的交互细节都不一样。等到开发出可交互版本才发现理解偏差，返工成本极高。
新做法：设计师直接用 Workbuddy，通过自然语言描述（Vibe Coding），快速生成可交互的前端原型。
效果：
- 1天内产出可点击、可交互的功能 Demo，而不是一叠静态画板
- 产品/设计/开发基于同一份可运行的原型对齐，减少理解偏差
- 原型代码后续直接作为前端开发的参考基线，不是”画完就扔”的废稿
实操要点：Vibe Coding 阶段聚焦于业务上下文、信息架构和需求场景分析，快速探索多个方案，不强求表现层细节。
这一步对我们而言更核心的价值在于把设计验证的时间点尽量前移——从”开发完成后”提前到”方案构思阶段”。
STEP 02：AI 按用户流将关键页面画入 Ardot（初始搭建提效 30%）
传统痛点：设计师拿到交互方案后，要在 Ardot 里从空白画板开始逐页搭建——导航、列表、表单、弹窗，大量重复性操作。
新做法：基于第一步产出的 Demo 原型和用户流描述，让 AI 自动将关键页面录入 Ardot。AI 识别出用户流中的关键场景（页面加载 → 自由浏览 → 搜索 → 查看检测），一键生成对应的设计画板，结构、层级、基础组件自动就位。
如果新功能与现网已有模块的页面布局一致，我们还会把现网那份设计稿直接拖进 Ardot，作为 AI 写入的修改基础——在已有设计稿上改为新功能。这样原页面布局得到像素级保留，省去从零绘制整套设计稿。
在操作细节上，我们会要求 AI 从原子组件开始搭建页面，而不是直接堆散元素——同一个组件建好变体后，不同页面只需切换变体值就能表达不同状态，一处修改全稿生效，后期调整中能大幅度减少重复劳动。这套做法经过多次实践，已经沉淀成一个可复用的 Skill，后续类似需求直接调用即可，不需要从头写提示词。
实操要点：关键一步是使用 Ardot MCP 连接 Workbuddy，直接在 Vibe Coding 的同一段对话中让 AI 画入 Ardot。这样无需额外传递上下文——AI 已经知道你要画什么，直接操作即可。
效果：
- 页面骨架搭建时间缩短约30%
- 设计师不再从零开始，而是直接在一个”80 分”的粗坯上精修
- 与现网已有模块布局一致的新功能，可以直接复用原有设计稿做基础，原页面布局像素级保留
STEP 03：设计师手动精修细节
在我们当前的实践中，这一段以人工为主——这些环节的判断更依赖人的经验，交给设计师更可靠，也更接近业务语境。而精修这件事，在 Ardot 里直接拖拽调整，比在 Workbuddy 里用语言描述修改更高效。改一个 4px 间距、换一种 hover 颜色，写一段提示词来回要几分钟，直接拖几秒钟——这种”小颗粒度”调整，设计工具天然比自然语言更胜一筹。
手工调优的内容包括：
- 信息层级——哪些字段该突出，哪些该收起来
- 微交互——hover 态、加载态、空态、错误态
- 视觉上的极致对齐——像素级精度、组件边距、栅格对齐
- 样式细节——间距、圆角、阴影、字号、颜色与设计系统的一致性
STEP 04：AI 协作绘制细节（细节调整提效 80%）
传统痛点：细节调整是设计流程中最耗时的环节——做响应式适配要逐个元素调整；Mock 画板的数据填充要手动录入；版本迭代后组件库变动要逐页替换。
新做法：在 Ardot 内直接使用 AI 协作能力，处理以下高频场景：
| 场景 | AI 做什么 | 设计师做什么 |
|---|---|---|
| Mock 画板细节 | 一键填充真实数据样式、自动生成多样化样本 | 确认数据合理性 |
| 响应式布局 | 识别当前画板布局，生成初步响应式规则 | 微调断点策略 |
| 组件批量替换 | 识别旧版组件实例，全局替换为新版 | 验证替换结果 |
实操要点：在 Ardot 内选中某个元素或画板，直接回显到 AI 对话框内——不用手动描述”改哪个元素的哪个属性”，选一下，说出来，AI 就能定位到具体对象进行操作。
效果：
- 细节调整环节提效约 80%
- 原来需要 1-2 小时的精修工作量，Ardot AI 几分钟内帮你完成
全流程效率总览
| 环节 | 传统耗时（估算） | AI 辅助耗时 | 提效比例 |
|---|---|---|---|
| Demo 原型产出 | 2-3 天（手搓可交互原型） | 1天 | ~30% |
| 设计稿初始搭建 | 30分钟-1小时 | 10-20分钟 | ~30% |
| 细节调整与适配 | 1-2 小时 | 5-10分钟 | ~80% |
| 总计 | 2-3 天 | ~1 天 | ~55-60% |
三条心得
1. AI 更像在帮设计师干掉”体力活”，而不是替代设计师本身。
画 20 个相似的画板、填充 Mock 数据、做响应式变体——在我们看来，这些更接近”设计体力活”，目前阶段 AI 通常能做得更快、更稳定。而信息架构决策、微交互品味、文案推敲这些环节，我们目前更倾向于交给设计师——一来 AI 在这些维度上还不够稳定，二来这些判断对业务语境依赖度高，需要人来承担。
2. “先跑通再优化”比”一次到位”更现实。
Vibe Coding 出原型 → AI 搭骨架 → 人工精修 → AI 批量调细节，每一步允许不完美，但每一步都向前推进，每个环节主要解决它最擅长的问题，不强求一步到位。
3. 可交互原型是 AI 设计流的关键起点，不是单纯的副产品。
很多人把 Workbuddy 生成的原型当作”参考一下”的东西。我们的实践发现，它更像是整个 AI 设计流的关键起点——有了它，AI 能更好地理解用户流、提取关键页面、辅助录入 Ardot。从 Workbuddy 对话直接写入 Ardot，上下文流转的体验非常丝滑——不用复制粘贴需求背景、不用重新描述用户流，AI 已经知道你要画什么。
写在最后
截至目前，这套工作流已经运用在 3+ 个需求交付中，覆盖从前期方案探索到后期细节打磨的完整链路。
如果你也在尝试把 AI 嵌入设计流程，一个快速启动的建议：无需一开始就追求整系统的全自动，先找到每个环节的”更优人机分工”。先识别出哪些环节是机械、重复、AI 表现稳定的，把这些交给 AI；把人的时间留在更需要判断力、更依赖业务语境的环节上。
本文作者@腾讯设计Ardot