用 WorkBuddy 智能设计助手，20 分钟从需求到可落地 UI

概述​

本文记录用 WorkBuddy 智能设计助手完成数据看板 UI 的完整流程：从写 Prompt、拆模块细化、统一设计 token，到导出 JSON 给前端还原。包含真实踩坑心得。​

​

​

​

​

44%

​

​

​

​

56%

​

​

​

​

本文记录我在一个内部数据看板项目中，用 WorkBuddy 智能设计助手完成从需求到高保真 UI 的全过程。核心目标是：不打开 Figma，只用文本描述，快速产出可交付的设计稿。​

​

一、WorkBuddy 是什么，能做什么​

​

​

​

​

52%

​

​

​

​

48%

​

​

WorkBuddy 是一个面向产品的 AI 设计助手，定位为"用一句话生成页面"。实际使用下来，它主要覆盖三个环节：​

文本生成界面：输入"一个深色数据看板，包含 KPI 卡片、折线图、告警列表"，30 秒出初稿。​

结构化修改：可以追加指令，比如"把 KPI 卡片改成 2x3 网格""折线图增加时间筛选器"。​

导出与协作：支持导出 PNG、SVG，以及设计 token（颜色、字号、间距），方便前端还原。​

它不是 Figma 的替代品，而是需求探索阶段的加速器。适合需求明确、页面相对标准的场景。​

二、实操：20 分钟完成数据看板​

下面是我做这个看板的真实步骤。​

步骤 1：写 Prompt，锁定信息架构​

第一句话不要写得太长，先定义页面结构和风格：​

​

代码块​

Plain Text

一个深色主题的数据监控看板，顶部是标题和最后更新时间，中间是 6 个 KPI 卡片，下方左侧是折线图，右侧是告警列表。整体风格简洁、专业。​

​

WorkBuddy 会生成多个版本。我选了一个信息层级最清晰的，作为基础。​

步骤 2：拆模块，逐步细化​

不要一次提 10 个需求。我按模块推进：​

•

先调 KPI 卡片：icon + 指标名 + 数值 + 环比。​

•

再调折线图：横轴时间、纵轴数值、异常点高亮。​

•

最后调告警列表：级别、时间、描述、处理状态。​

每次只改一个模块，生成后对比，再决定保留或回退。​

步骤 3：统一设计语言​

为了避免页面像"拼凑的"，我让 WorkBuddy 用同一套设计 token：​

•

主色：#1E3A5F（深蓝）​

•

辅助色：#3B82F6（高亮）​

•

告警红：#EF4444​

•

背景：#0F172A​

•

卡片背景：#1E293B​

把这些 token 写给 WorkBuddy，后续所有生成都会基于这套配色。​

步骤 4：补标注和导出​

生成完成后，我导出为 PNG 给产品和后端同步视觉，同时把设计 token 整理成 JSON，方便前端直接写 CSS 变量。​

​

代码块​

Plain Text

{"colors": {"primary": "#1E3A5F","accent": "#3B82F6","danger": "#EF4444","bg": "#0F172A","card": "#1E293B"},"spacing": {"xs": 4, "sm": 8, "md": 16, "lg": 24}}​

​

四、心得：适合与不适合​

用了 3 个月之后，我总结了几个真实结论：​

适合的场景：​

•

需求明确、模块化的后台/工具页面。​

•

需要快速对齐视觉方向，而不是像素级精修。​

•

团队里没有全职设计师，或设计资源排期紧张。​

不适合的场景：​

•

品牌营销活动页、复杂交互（如动画、手势）。​

•

对无障碍、多语言适配要求极高的系统。​

•

强依赖插画、3D、定制图形的设计。​

五、写在最后​

WorkBuddy 没有让我变成设计师，但让我这个前端/产品在需求早期就能拿出可落地的视觉方案。对研发团队来说，最大的价值是减少"等设计稿"的阻塞时间。这次数据看板，从需求到定稿，我前后只花了 20 分钟，后续前端按设计 token 还原也顺利。​

如果你也在做类似的工具型产品，建议把 AI 设计工具当作"草图到初稿"的环节，而不是"零成本出最终稿"。明确边界后，效率提升会很明显。​