后端也能出设计稿：一名 IT 后端开发用 WorkBuddy + Ardot 做小程序设计的实战指南

做了多年后端，最怕产品丢来一句"先出个设计稿看看"。这次我反过来——用 WorkBuddy 的智能设计助手，把一句话需求直接做成可点击、可验收的小程序原型。

一、简单的自我介绍

• 行业：IT
• 岗位：后端开发。日常和接口、数据库、部署打交道，Figma 只会开不会画。
• 痛点：需求还停留在口头时，没有稿子就没法评审、没法排期，开发也不愿动手。
• 目标：不学设计软件、不画一条线，也能交付一份"能看、能点、能拿去评审"的小程序设计。

选的载体是一个本地化、零付费、可交互的小程序——所有数据留在设备内，不接任何第三方 API，不买素材。约束越硬，越能检验工具的真实能力。

二、第一步：把输入材料放进工作空间

动手前，我先把"喂给 WorkBuddy 的东西"整理清楚。工作空间里实际纳入的内容有三类：

关键动作：约束清单必须写明白。不写"零付费"，工具默认会去引外部资源，后期全部推倒。把约束前置，等于替自己省掉一轮重做。

三、第二步：配置 WorkBuddy（设计创意 Ardot）

WorkBuddy 里负责"出设计"的是智能设计助手，其底层创意画布叫 Ardot。它不是单一按钮，而是一套有层级的创作环境。理解这四层，后端也能像搭服务一样搭界面：

• L1 设计文件（.ardot）：一次设计 = 一个文件，可多人共编、随时回看历史版本。对应后端思维——这就是"项目根目录"。
• L2 页面 Page：一块画布。多屏同页平铺，方便横向比对间距。对应"一个页面容器"。
• L3 屏幕 / 画板 Frame：按 390×844 的设备框落地单屏，从状态栏到 Tab 栏都在里面。对应"一个路由视图"。
• L4 组件 & 图层：可复用的 Tab 栏、卡片、按钮，以及最底层的文本 / 矢量 / 填充图层。对应"组件库 + DOM 节点"。

用法（对后端最友好的一点）：

1. 对话即生成——说清功能，助手在画布上建文件、铺多屏，不必手绘线框；
2. 改局部——选中某个节点直接提要求，只动那一个节点，父级和兄弟节点不受影响（和"只改某个组件 props"一个道理）；
3. 令牌统一——配色、圆角、间距集中定义，改一处全局跟着变；
4. 截图校验 → 导出——每屏回看溢出与对齐，再把画布导出为可点 HTML 原型。

配置时，启用了「设计核心 + UI 设计」两项能力，其创意画布即 Ardot。其余保持默认即可。

四、第三步：分步操作过程

下面是完整操作流程，以及我在每一步遇到的真实问题与处理。

① 准备输入材料——见第二节，把简报+ 约束清单放进工作空间。

② 配置 WorkBuddy——启用 Ardot 设计创意，确认设计核心 / UI 设计能力在线。

③ 需求拆解与架构——这一步最有价值。我提方向，助手回一份信息架构：底部五个 Tab（今日清单 / 专注计时 / 健康统计 / 习惯打卡 / 我的），每 Tab 只保留一条主路径，下钻控制在两级。我做了一次主动评论：名字可以俏皮，视觉不能轻浮，否则用户不敢存本地数据。助手据此把基调定为"克制的有序感"。

④ 画布分步落地——按架构在 Ardot 上铺屏：先 5 个主屏，再补任务详情、数据导出两个二级页，最后加编辑态与导出成功弹层。全程复用同一套设计令牌。

⑤ 截图校验与调整——这是闭环关键。回看每屏，我碰到的三个问题：

• 原型热区连不上：画布内的原型跳转无法用对话直接连接。处理——改在画布画一张"导航跳转图"标注各节点 ID，真正的点击逻辑放到导出的 HTML 高保真里实现。

• 列表项溢出 2px、环形数字换行：多屏落地后截图发现细节错位。处理——把溢出项改为 fill_container 自适应宽度，数值区加宽，重新截图确认。
• 图标几何退化报错：个别图标用了多段 path 导致渲染失败。处理——改写成单 path 多子路径重绘。

⑥ 串联与导出验收——把各屏在 HTML 高保真里接成真实跳转（Tab 切换、详情→编辑、导出→成功弹层），至此一个下午拿到可演示原型。

五、第四步：产出物与验收标准

可验收成果不是"一张好看的图"，而是以下四件：

1. Ardot 设计文件（.ardot）：含 5 主屏 + 2 二级页 + 1 编辑态 + 1 弹层，全部基于同一令牌，风格一致。
2. 导航跳转图：标注每个屏的节点 ID 与跳转关系，作为接原型的"接线表"。
3. 可交互 HTML 高保真：能在浏览器点通核心链路（Tab 切换、任务详情→编辑→保存回写、数据导出→成功弹层、专注计时真实倒计时）。
4. 设计令牌清单：配色、圆角、间距、字体栈的明确取值，供后续真机工程直接复用。

验收口径：

• 视觉：奶油底 #F8F5F0、主绿 #2F9E6E、琥珀 #E08A2B，圆角与间距与设计令牌逐项吻合；
• 结构：两级下钻内可返回，无死路；
• 交互：上述核心链路在 HTML 里真实可点；
• 约束：零第三方依赖，数据不出设备。

六、复盘：后端做设计的三条体会

1. 把约束前置，比会画线更重要。需求边界写清楚，工具就不会自作主张引外部资源。
2. 架构阶段省的一小时，能换回落地阶段的一整天。先和助手把信息架构捶死，再铺屏，错位少一大半。
3. 校验要落在"截图回看"上，不是脑子里过一遍。真正的问题（溢出 2px、数字换行）只有回看才看得见。

七、结语

过去我总觉得"出设计稿"是别人的活。这次用 WorkBuddy + Ardot 走完一遍才明白：后端真正缺的不是审美，而是一个能把想法快速"立"起来的环境。你负责想清楚结构与约束，剩下的体力活，交给身边的设计搭档。

如果你也压着一个"一直停在嘴边"的想法，不妨就现在，把它做出来第一版。