WorkBuddy对话出UI：不碰图层-知了AI

一、为什么”对话出 UI”正在改变设计交付流程

过去十年，UI 设计的标准流程是：产品经理写文档，设计师开 Figma，一层一层拖图层、拉参考线、对齐像素，然后一轮一轮地走评审。一个中等复杂度的后台页面，光是”把左侧导航收窄 8 像素、把主色从蓝换成品牌绿”这种改动，就可能来回消耗半天时间。而 WorkBuddy 的「设计创意」模式配合 Ardot 画布，给出了一条完全不同的路径：你用自然语言描述需求，AI 生成结构化的澄清卡片帮你收敛需求，然后在画布上直接出稿，后续修改靠圈选加一句话完成——全程不需要碰任何图层。

这就是越来越多人讨论的 WorkBuddy 出 UI 的核心价值：它把设计师的”操作时间”压缩成了”表达时间”。你不再需要学习图层、组件、约束系统，只需要学会把需求说清楚。本文将以一次完整的真实流程为线索，把这条链路拆成四段：需求描述 → 结构化澄清卡片 → 画布出稿 → 局部圈选修改，并给出可以直接套用的模板、句式和校验清单。

需要先说明边界：WorkBuddy 的对话式设计不是万能的。它适合需求明确、模块化、页面相对标准的后台或工具页；对强动画手势、无障碍与多语言要求极高、强依赖插画和 3D 定制的设计，它仍然只能做打底稿的角色。认清这个边界，才能把省下来的时间真正花在刀刃上。

二、WorkBuddy 对话式设计的能力全景

在进入流程之前，先把能力盘清楚，避免用错期待。

2.1 与 Ardot 画布的双向同步

WorkBuddy「设计创意」模式与 Ardot 画布联动，云端与浏览器端实时双向同步。这意味着两件事：第一，你在对话里说的每一句修改，画布上的稿子会即时更新；第二，你在画布上执行的新增、修改、删除等设计操作（即”编辑画布”能力）也会同步回对话上下文，AI 知道你动过哪里。这个双向通道是”不碰图层也能走完一轮”的技术前提——你既可以纯对话推进，也可以在画布上直接改，两条路径随时切换。

2.2 设计类型与风格模板

WorkBuddy 支持五类设计：移动端 App 界面、网站页面 / Landing Page、品牌 Logo、海报 / Banner、PPT 演示文稿。内置模板分两个维度：默认展示的是品牌风格模板，包括 TDesign、Apple、Meta、Miro、Notion、Spotify、Discord、Linear、X AI、Ferrari 等；而当你选定了设计类型（比如 PPT 设计），模板列表会切换为该类型专属的风格，如优雅杂志、高级黑灰、创意橙黑、极简灰白等。如果不主动选，AI 会根据你的描述自动匹配，你也可以在对话里用自然语言换风格，比如”整体改成 Spotify 那种深色高饱和的感觉”。

2.3 图片素材的两种处理开关

图片素材有两种处理方式，出稿前要选好：一是色块占位，先确认版式结构，图片位置用色块标记，后续手动替换真实素材；二是 AI 生图，手头没有现成素材时，直接生成成品图一次到位。经验法则是：版式还没定稿时用色块占位（避免浪费积分在会被换掉的图上），版式确认后再切 AI 生图或传真实素材。

2.4 导出与还原

设计稿可导出 PNG、SVG，以及设计 token（颜色、字号、间距），方便前端还原。更进一步，可以把 token 整理成 JSON 直接写成 CSS 变量。设计确认后，还能让 WorkBuddy 读取选中的 Frame，整理组件树、样式变量与资源，再按你的技术栈生成 HTML、React、Vue、ArkUI、Flutter 代码。但要注意：权限、接口、状态这些画布里没写的东西，Agent 不会自动知道，生成出来的代码只是骨架，业务逻辑仍需工程师补齐。

2.5 反向能力：代码转设计

它也支持反向操作——把现有网页转成可编辑节点。但字体、图片、绝对定位、响应式这几项转换后仍需人工检查，不要指望一步到位。这条反向通道更适合”接手遗留项目、先把旧页面变成可编辑底稿”的场景。

三、四段链路总览：一次完整的”不碰图层”出稿

把整条链路先画出来，后面逐段展开：

第一段：需求描述    —— 一句话定结构 + 风格，模块清单代替长段落
第二段：澄清卡片    —— AI 生成"要 / 不要 / 待定"三栏卡片，收敛模糊点
第三段：画布出稿    —— 选设计类型与风格模板，色块占位先看版式
第四段：局部修改    —— 圈选范围 + 单一指令，逐处迭代直至定稿

这四段的本质是一次需求的逐层收敛：第一段解决”我要什么”，第二段解决”我到底要什么”，第三段解决”长什么样”，第四段解决”哪里不对改哪里”。每一段都有明确的产出物和验收标准，跳段往往会返工。

一个可以量化的预期：按本文流程操作，一个标准后台页面（登录页、列表页、详情页这类）从空对话到第一版可用稿，通常在 15-30 分钟内完成；消耗积分参考为简单页面 50-100、中等 100-200、复杂 200-400，局部修改每处 10-30（不同时段口径可能变化，请以”参考”看待）。

四、第一段：需求描述怎么写——首句定乾坤

绝大多数对话出稿的失败，都失败在第一句话。常见错误是贴一整段 PRP 文档进去，AI 读完只抓住零星几个关键词，出稿方向跑偏，后续每一轮都在纠偏。正确做法是：首句先定义页面结构与风格，不要过长；然后用模块清单列出页面包含哪些区块。

4.1 首句模板

首句只承担两个任务：结构 + 风格。参照这个模板：

【首句模板】
做一个【设计类型】的【页面名称】，整体【结构描述】，
风格参考【品牌风格模板或形容词组合】。

【示例】
做一个网站页面的 SaaS 数据后台首页，整体为「左侧固定导航 + 顶部
工具栏 + 主区域三栏卡片」结构，风格参考 Linear，深色底、克制配色。

首句之后紧接模块清单。模块清单的核心是”枚举而非叙述”——每行一个模块，写清楚模块名和一句话说明，而不是写成段落。这样 AI 可以逐模块理解，后续局部修改时也能按模块定位。

【模块清单模板】
页面包含以下模块（从上到下）：
1. 顶部导航：Logo + 5 个菜单项 + 右侧搜索框与头像
2. 数据概览区：4 张指标卡（今日新增、活跃、留存、转化）
3. 趋势图区：一个折线图卡片 + 一个柱状图卡片
4. 列表区：最近 10 条订单表格，含状态标签与分页
5. 页脚：版权信息一行

图片素材：全部使用色块占位，版式确认后再处理。

注意最后一句”图片素材：全部使用色块占位”——这是把 2.3 节的素材开关显式写进需求，避免 AI 在版式未定时就烧积分生图。

4.2 需求描述的三个禁忌

禁忌一：首句过长

首句一旦超过两行，结构和风格信息就会被稀释。实践结论是：首句控制在 40 字以内，只说结构 + 风格，其余细节全部交给模块清单。这也是迭代原则里”第一句先定义页面结构与风格，不要过长”的具体执行方式。

禁忌二：用叙述代替清单

“页面上方有一些数据卡片，下面是一个表格，表格里要有状态”——这种叙述式描述，AI 会自行脑补数量、布局和字段。而清单式的”4 张指标卡””10 条订单表格”，AI 的发挥空间就被约束住了。对话式设计里，模糊 = 随机。

禁忌三：第一轮就提修改意见

第一轮需求还没出稿，就开始描述”左边距要大一点、圆角要小一点”是在浪费轮次。先让稿子出来，再用第四段的圈选修改逐处调。没有锚点之前谈细节，双方都在空对空。

4.3 独到理解：需求描述是给未来的自己写定位坐标

很多人把需求首句当成”给 AI 的开场白”，这是低估了它的作用。实际上，首句和模块清单定义了一套坐标系：后续每一次局部修改，都是在这个坐标系里定位。”把第 2 模块的第三张卡片”这种指令之所以能精准命中，前提是第一轮就建立了清晰的模块编号。所以写模块清单时顺手编号，收益会贯穿整轮迭代。

五、第二段：结构化澄清卡片——把沟通成本前置

5.1 澄清卡片是什么

需求描述发出去之后，不要急着让 AI 直接出稿。更高性价比的做法是：让 WorkBuddy 先针对你的需求生成一份结构化澄清卡片，把模糊地带全部摊开，分成三栏——”要 / 不要 / 待定”：

要：明确需要的能力或元素（如”需要深色模式””表格要支持排序”）；
不要：明确排除项（如”不要轮播图””不要注册引导弹窗”）；
待定：AI 无法从需求推断、需要你拍板的分歧点（如”主色用品牌绿还是行业蓝””列表默认显示 10 条还是 20 条”）。

使用方式很直接：在对话里说”先不要出稿，根据我的需求生成澄清卡片，列出要/不要/待定三栏”，AI 会逐项列出。你把”待定”栏逐个拍板，”要/不要”栏扫一遍确认无遗漏，再回复”按确认后的澄清卡片出稿”。

5.2 澄清卡片模板

【澄清卡片模板】
■ 要（已确认）
- 深色主题，参考 Linear 的暗色层次
- 指标卡带同比涨跌箭头与百分比
- 表格操作列固定右侧

■ 不要（已排除）
- 不要登录/注册流程页
- 不要营销性质的 Banner 区
- 不要图标动效

■ 待定（请拍板）
- A1：主色——品牌绿 #00C853 还是科技蓝 #2979FF？
- A2：趋势图默认时间范围——近 7 天还是近 30 天？
- A3：移动端是否需要本页的响应式版本？

5.3 为什么澄清卡片是整条链路里性价比最高的一步

这里给出一个本文最重要的观点：澄清卡片本质上是把沟通成本前置。传统流程里，这些”待定”项不会消失，只会换一种更贵的形态出现——它们会变成第三轮评审会上的争议、变成前端还原时的返工、变成上线前的”为什么这里是蓝色”的临时救火。每一次延后，修复成本都在放大；在澄清卡片阶段拍板，成本只是回复一行字。

更进一步说，澄清卡片还有一层隐性收益：它强制 AI 和你在”同一个假设集合”上工作。对话式设计最大的风险不是生成质量差，而是双方对同一个词的理解不同——你说”简洁”，AI 理解的是极简灰白，你脑子里想的是 Notion 式的信息密度。三栏卡片把这些理解差异在出稿前就变成一个个可拍板的具象问题，随机性被大幅压缩。

5.4 待定项的拍板技巧

面对”待定”栏，不要每项都深思，用三个快捷规则加速：

有参照就抄参照：竞品或参考图里怎么做的，就怎么定，并在后续上传参考图让 AI 对齐；
定不了的先定默认值：如”列表默认 10 条，后续可调”，把可逆的决策快速关掉；
影响版式的优先拍：主色、结构类待定项直接影响出稿，优先处理；文案类、阈值类可以留到局部修改阶段。

六、第三段：画布出稿与风格模板选择

6.1 选设计类型，再选风格模板

确认澄清卡片后，进入出稿环节。第一步是选设计类型：移动端 App 界面、网站页面 / Landing Page、品牌 Logo、海报 / Banner、PPT 演示文稿，五选一。选型的意义不只是分类——选了设计类型（比如 PPT 设计），模板列表会切换为该类型专属风格（优雅杂志、高级黑灰、创意橙黑、极简灰白等）；不选类型，看到的则是跨类型的品牌风格模板（TDesign、Apple、Meta、Miro、Notion、Spotify、Discord、Linear、X AI、Ferrari 等）。

6.2 风格模板的三种使用姿势

姿势一：直接指定品牌模板

需求里写”风格参考 Notion”，出稿即套用。这是最快路径，适合已经知道对标风格的场景。品牌模板的好处是”整套设计语言一致”：配色、圆角、字重、间距都成体系，AI 不会自己发明第四种灰。

姿势二：不选，让 AI 自动匹配

描述里出现”极简、留白、工具感”这类关键词，AI 会自动匹配相近的风格。适合需求探索期——你还没想好对标谁，先让 AI 给一个合理默认，看效果再调。

姿势三：对话中自然语言换风格

稿子出来后不满意整体气质，直接说”换成 Spotify 那种深色高饱和的”。由于双向同步，画布会整体换肤。注意：换风格属于全局重绘，消耗会比局部修改高，建议在版式满意之后、细节打磨之前做。

6.3 善用参考图与竞品截图

WorkBuddy 支持参考上传的图片（竞品截图 / 参考图）生成相似风格新稿。实战建议：上传 1-3 张参考图，并在需求里注明”参考图的布局密度，但不参考它的配色”。拆开参考维度比整体模仿效果更好——布局、配色、组件形态是可以独立指定的三个维度。

6.4 出稿后的第一轮验收：只看三件事

第一版稿出来后，不要陷入细节。只检查三件事：

结构对不对：模块清单里的 1-5 是否都出现了、顺序和层级是否一致；
风格对不对：整体气质是否接近指定模板，主色、明暗是否正确；
密度对不对：信息密度是偏空还是偏挤——这决定要不要增删模块。

三件事都过关，再进入局部修改；任何一件不过关，先回到对应段落修正（结构问题改需求清单，风格问题换模板），不要用局部修改去硬调全局问题——那是本轮流程里最常见的积分黑洞。

七、第四段：局部圈选修改——四种句式打天下

7.1 画布直改与对话修改，两条路都要会用

稿子定版式后进入细调阶段。此时有两条修改路径，可以随时混用：

画布直接改：双击改文字、右侧属性面板改颜色、拖拽或改边距调间距、上传 Logo 替换占位图。适合”我知道确切值”的机械改动；
对话圈选改：在画布上圈选目标区域，再用一句话描述改动，AI 理解后同步更新画布。适合”我要一种效果，具体值让它定”的语义改动。

两条路径之所以能混用，靠的是云端与 Ardot 浏览器端的实时双向同步——画布上的手动编辑会回到对话上下文，对话指令也会实时落到画布。

7.2 局部修改指令的四种句式

圈选之后，指令质量决定一次命中还是来回三轮。总结下来是四种句式：

句式一【精确值指令】：圈选 + 直接给值
"把选中卡片的圆角改成 12px，背景改成 #1E1E2E"
→ 你知道确切值时用，一次命中，消耗最低。

句式二【参照指令】：圈选 + 指向参照物
"让选中区域的间距和上面那张指标卡保持一致"
→ 页面内已有正确示范时用，避免自己算数值。

句式三【语义指令】：圈选 + 描述效果
"把选中的这个区块做得更有层次感，卡片和背景拉开对比"
→ 知道要什么感觉、不知道具体参数时用。

句式四【结构指令】：圈选 + 描述增删重组
"把选中的两列卡片合并成一个横向滑动的卡片组"
→ 涉及模块增删或重组时用，改完务必校验版式。

四种句式的选用优先级：精确值 > 参照 > 语义 > 结构。能用前面的就不用后面的——越靠后，AI 自由发挥空间越大，版式被打乱的风险越高。

7.3 为什么一次只改一处反而更快

这里值得展开第二个核心观点：一次只改一处，比一次提十个需求更快，原因有三层。

第一层是归因清晰。十条指令打包发出去，稿子更新后如果整体不对味，你无法判断是哪条指令的副作用，只能全部回滚重来。而单条指令的因果链清晰：改了→看了→好或不好，不好就撤销这一处，成本只有一处修改的积分（参考 10-30）。

第二层是避免指令间冲突。”把标题缩小””让标题更醒目””这块留白多一点”三条指令同时下达，AI 必须自行仲裁优先级，结果不可预测。逐条下达时，每一步你都在场，冲突在发生前就被你拦住了。

第三层是注意力匹配。一次只改一处，意味着你的注意力只需要校验一个局部区域，三秒能确认；十条指令改完，你要重新审视整页，校验成本反而更高。这就是”按模块推进，一次只改一处”这条迭代原则背后的账：它省的不是生成时间，是你的校验时间——而校验恰恰是整个流程里最贵的人力。

7.4 改完如何校验没打乱版式

每次局部修改后，用这份 30 秒校验清单过一遍：

邻位检查：被改元素上下左右的邻居，间距和對齐有没有被连带挤动；
跨列检查：如果是宽度/栅格类改动，同一行的其他列有没有错位；
一致性检查：改动后的样式值（圆角、颜色、字号）是否与页面内同类元素一致——不一致就是版本漂移的开始；
滚动检查：改动是否把内容推出了可视边界，产生了意外的横向或纵向滚动。

其中第三项要用同一套设计 token 来兜底：所有颜色、字号、间距都从 token 里取值，就不存在”第七种灰”。这也是迭代原则第三条”用同一套设计 token 保证统一”的落地点。

八、设计 token：让风格统一的唯一抓手

8.1 token 的整理与导出

WorkBuddy 的画布稿可导出设计 token——颜色、字号、间距三类。前端拿到 token 就能低成本还原视觉，而不需要对着设计稿逐一吸色、量间距。更进一步，可以把 token 整理成 JSON，直接写成 CSS 变量。

8.2 设计 token JSON 模板

{
  "color": {
    "primary": "#2979FF",
    "primary-hover": "#1565C0",
    "bg-base": "#0F1115",
    "bg-card": "#1A1D24",
    "text-primary": "#E8EAF0",
    "text-secondary": "#9AA0B0",
    "success": "#00C853",
    "warning": "#FFB300",
    "danger": "#FF5252"
  },
  "typography": {
    "font-family": "Inter, PingFang SC, sans-serif",
    "h1": { "size": "28px", "weight": 600 },
    "h2": { "size": "20px", "weight": 600 },
    "body": { "size": "14px", "weight": 400 },
    "caption": { "size": "12px", "weight": 400 }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "radius": "12px"
  }
}

8.3 token 与局部修改的联动

token 不只是导出产物，更是迭代期的统一工具。局部修改时优先用参照句式（”和主色一致”），AI 会从 token 取值而不是即兴发挥。实践口径是：一轮迭代里，改动指令中至少七成应落在”参照 token 或精确值”的句式上，语义句式只用于风格探索阶段。

九、两种流程的耗时对比：对话出 UI vs 手工拖图层

以”一个标准 SaaS 后台首页 + 三轮迭代”为例，对比传统手工流程与 WorkBuddy 对话式设计（以下为典型情况的经验估计，具体因人与需求而异）：

环节	手工 Figma 拖图层	WorkBuddy 对话出 UI	差异说明
搭建页面骨架	2-4 小时（画框、建栅格、逐层摆放）	5-10 分钟（首句 + 模块清单 + 出稿）	结构由模块清单驱动，一次成形
统一风格与规范	1-2 小时（建样式、逐元素应用）	选模板即得，token 自动成套	品牌风格模板天然成体系
图片素材占位	20-40 分钟（画占位框、填灰块）	色块占位开关一步完成，或 AI 生图	版式期用占位，定稿期再生图
单处局部修改	3-10 分钟（找图层、改属性、检查联动）	30-60 秒（圈选 + 一句指令）	积分参考每处 10-30
换整体风格	1-3 小时（调色板 + 全局替换）	一句话换模板，全局重绘	换风格是全局操作，建议版式定后再做
交付前端还原	标注 + 导出 + 口头对齐，半天起	导出 PNG/SVG + token JSON + 按技术栈生成代码	权限、接口、状态仍需工程师补齐
整轮合计	约 1-2 个工作日	约 1-2 小时	省下的时间应投入边界场景与细节

注意最后一行不是宣称”设计师可以被替代”。对话式设计省掉的是确定性劳动，而强动画手势、无障碍、多语言、插画与 3D 定制这些领域，专业设计师的判断依然不可替代。正确姿势是：AI 走完标准链路，人把时间花在标准链路覆盖不了的地方。

十、适用与不适用场景对照

维度	适合用对话出 UI	不适合，需人工主导
需求明确度	模块化、结构清晰，能用清单枚举	需求仍在探索，页面形态未定
页面类型	后台、工具页、Landing Page 等标准页面	强动画手势、沉浸式交互页
合规要求	常规可用性要求	无障碍与多语言要求极高的产品
视觉资产	常规组件、图表、占位图、AI 生图	强依赖定制插画、3D 资产的设计
迭代方式	按模块推进、逐处修改	大量联动的全局实验性改版

十一、从设计稿到代码：确认后的最后一公里

设计定稿不是终点。WorkBuddy 支持在设计确认后，读取你选中的 Frame，整理组件树、样式变量与资源，再按目标技术栈生成 HTML、React、Vue、ArkUI、Flutter 代码。使用时的三点提醒：

先读 Frame 再生成：明确指定让 AI 读取哪个 Frame，生成结果的组件划分会忠实于画布结构；
技术栈写具体：如”React + Tailwind + 函数组件”，约束越具体，代码越接近可用；
记住 Agent 的知识边界：权限、接口、状态这些画布里没写的东西，Agent 不会自动知道。生成代码前，把接口字段、状态逻辑以文字形式补充给 AI，能显著减少返工。

代码生成后仍需工程师审查：视觉还原能对照 token JSON 逐项核对，业务逻辑则需要人工补齐。这条”设计 → 代码”通道的正确定位是省掉还原性劳动，而不是省掉工程判断。

十二、完整实战复盘：一个数据后台页的 40 分钟

最后把四段链路串成一次完整实战，记录每一步的时间与产出：

0-5 分钟｜需求描述：发出首句（”做一个网站页面的 SaaS 数据后台首页，左侧固定导航 + 顶部工具栏 + 主区三栏卡片，风格参考 Linear”）与 5 项模块清单，声明”图片全部色块占位”；
5-10 分钟｜澄清卡片：让 AI 生成三栏澄清卡片，共 11 项——要 5、不要 3、待定 3。拍板 A1 主色用科技蓝、A2 趋势图默认近 7 天、A3 本期不做移动端响应式；
10-20 分钟｜画布出稿：选定网站页面类型 + Linear 品牌模板，出第一版稿。按 6.4 节三件事验收：结构对、风格对，但信息密度偏挤——趋势图与列表间距不足；
20-35 分钟｜局部修改：共 6 轮单处修改——① 句式一改指标卡圆角 12px；② 句式三”让趋势区块更有层次感”；③ 句式二”列表行间距与指标卡内边距一致”；④ 画布双击改 3 处文案（手动，不走对话）；⑤ 上传 Logo 替换导航占位图；⑥ 句式一调整表格状态标签颜色为 token 中的 success/warning；每轮改完跑 30 秒校验清单，无一轮返工；
35-40 分钟｜导出交付：导出 PNG 预览 + token JSON 转 CSS 变量；指定 Frame 让 AI 整理组件树并生成 React 代码；接口与状态逻辑标注留给工程师。

全程约 40 分钟、消耗积分参考 180 左右（中等页面 100-200 区间内，加 6 轮局部修改各 10-30），产出物包括：可编辑画布稿、token JSON、组件树、React 骨架代码。若走传统流程，同样的产出大约需要一个工作日。