![shot1.png](https://developer.qcloudimg.com/http-save/yehe-12612631/dc3777bc2020f5cfc8df4efffdb70865.png)![shot2.png](https://developer.qcloudimg.com/http-save/yehe-12612631/b53102414fc671e896f0d40335c8c00d.png)![shot3.png](https://developer.qcloudimg.com/http-save/yehe-12612631/2a34c48f8a88a463b291fa5069501d75.png)![shot2.png](https://developer.qcloudimg.com/http-save/yehe-12612631/cd0c8ef2e1e69ab9997f65b000bda58c.png)![shot3.png](https://developer.qcloudimg.com/http-save/yehe-12612631/f4563a4dc1274911447b283214a49e9d.png)![shot2.png](https://developer.qcloudimg.com/http-save/yehe-12612631/3a8b900045565b949770cf52c830db37.png)![shot3.png](https://developer.qcloudimg.com/http-save/yehe-12612631/93b0dc80d1cf96f962146f55758d4d68.png)![shot2.png](https://developer.qcloudimg.com/http-save/yehe-12612631/6a20f1f3e1ed509af61a7f6110c16d07.png)![shot2.png](https://developer.qcloudimg.com/http-save/yehe-12612631/d91262dfe4f6564914582d9d722bbba7.png)![shot2](https://developer.qcloudimg.com/http-save/yehe-12612631/bfefe89d6dc7b3de480a5006eb96d758.png)
![ptest.png](https://developer.qcloudimg.com/http-save/yehe-12612631/93a2bc632462002fcb37f604859435d9.png)> 本文记录我在一个内部数据看板项目中，用 WorkBuddy 智能设计助手完成从需求到高保真 UI 的全过程。核心目标是：不打开 Figma，只用文本描述，快速产出可交付的设计稿。

## 一、背景：为什么尝试 AI 设计工具

最近接到一个后台数据看板需求：要展示 6 个核心指标、1 张趋势图、1 个异常告警列表。按以往流程，我会先写 PRD，再请设计同事排期，前后端同学拿到设计稿后才能开工。一个简单页面，从需求到设计稿往往要 1～2 天。

在 2025 年下半年，我开始尝试把 AI 设计工具融入研发流程。WorkBuddy 的"Text-to-UI"能力让我可以直接用自然语言描述生成界面，再反复修改。这篇文章把整个过程和踩坑点整理出来。

## 二、WorkBuddy 是什么，能做什么

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

1. **文本生成界面**：输入"一个深色数据看板，包含 KPI 卡片、折线图、告警列表"，30 秒出初稿。
2. **结构化修改**：可以追加指令，比如"把 KPI 卡片改成 2x3 网格""折线图增加时间筛选器"。
3. **导出与协作**：支持导出 PNG、SVG，以及设计 token（颜色、字号、间距），方便前端还原。

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

## 三、实操：20 分钟完成数据看板

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

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

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

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

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

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

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

- 先调 KPI 卡片：icon + 指标名 + 数值 + 环比。
- 再调折线图：横轴时间、纵轴数值、异常点高亮。
- 最后调告警列表：级别、时间、描述、处理状态。

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

### 步骤 3：统一设计语言

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

- 主色：`#1E3A5F`（深蓝）
- 辅助色：`#3B82F6`（高亮）
- 告警红：`#EF4444`
- 背景：`#0F172A`
- 卡片背景：`#1E293B`

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

### 步骤 4：补标注和导出

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

```json
{
  "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 设计工具当作"草图到初稿"的环节，而不是"零成本出最终稿"。明确边界后，效率提升会很明显。


![shot1.png](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/12612631/20260710-ecc4a607.png?q-sign-algorithm=sha1&q-ak=AKIDhlISYxcHHzdHZ86X3Cx7u3fF2GZm2MQh_R8jjClEuRckTUvx0HNsSFlZxYwWIAKC&q-sign-time=1783655375;1783660775&q-key-time=1783655375;1783660775&q-header-list=host&q-url-param-list=&q-signature=a26ff50645079a3fd1005c2c21c1e16a18e40537&x-cos-security-token=5P2Bj6pHqqWmic3JYTRoxpK6Gk7563Oa3603c35515bf5ccde2ee49eeaa5a5b10G8ZXlm4bHOoRCuxXUOm2x1nyf7rrGEBYbpgJEjsIFWSioay2A8sVX-VO8bNmiYUXFlmVwoaPXoutsG8XKgdv09QD03Y3t7jYsWLmnr-iwn4eyotsw0qRmUHuPy1HLrYx97UeFgngLarZuuhW5Logs52menkdoWQGF4o_DymZ8bLOC4AW0kEEkbSfhpiwTB2MGuE7E-KyDagIA3TxEEMkSzLeNbT05k2jL6MED_tL240bPcWLFCT4kq81QKZVnpr1VDO5XyGNotUdpNRGyQ4q_p2jdBIDwL-g0dK-A64J8_NjGwiAnC-31DF9v-jzAQVcvLBAoQzjsSv7RVGv2E8OnjWenjO5oh-PDXppn9gfrg1J3VaQeVI_CSX3DTm0Wi5uzXAi8dUSJrHKnZaPlBK5gGLXv_BzbLDIVWu_AFVb4L3RCgMurnHHm1S3JDhooEkueZbLDopn8_d1F2aORzGS5hP65lXtaErmtfKV_k3pMGYJWbeZoZNrYfJbLRLyjIgOb8B1E8LEMlymM9EIcjlPB-YHQKQDPXlrUcl-iXP6i6P0maBLylt49L4VPC0BwQdNgNlrjNlRbElsacO39HgfW7VUG37wyBfVdt-XDIKliKLeww7QT7gjnz4hQkmIXO7UIhEB9m3AaKs8qIQ6creTFGl0CEt1MC3OH3MEpgjBnUcqAXLpcPIJWR7B6bf6k5Dw)![shot2.png](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/12612631/20260710-e1116865.png?q-sign-algorithm=sha1&q-ak=AKID81ESg1xMSBOeRiAbcgDqVFFYDtHGCDcz3SDd4sVLBe5lOdppIyRBgxmN2pRkE7SF&q-sign-time=1783655411;1783660811&q-key-time=1783655411;1783660811&q-header-list=host&q-url-param-list=&q-signature=a84876cb5e06ee022c658347415a7d0b92ea6a9d&x-cos-security-token=5P2Bj6pHqqWmic3JYTRoxpK6Gk7563Oaf6ba5821dc32fa6975260f7296cca1e4G8ZXlm4bHOoRCuxXUOm2x7GLrkf36U5QmTEd09hCS99y80hFi1NFvXArmaZ0MAdGRndcGvaiouiUBW07uYx7JP5HNnk96HfH73A2LRbZQ99kaPF3rHAvkbfaFeYQlB-3tjJxpqJutYnD15xZg9IhX9z6YVbXLF-HxoDGTxgzN29MPd47rVM5n0G07HIyHwq1wnpH1-Yq8zzTaWtJWVlGLUrn0_pxgfOl9eRnN4BSXxocJQsHM3zFxOGAEMEQdwum3Wodf7pugALDbhJ3K-QYEOuraMq7sP2hdxRMPy769h10O0p-3Wa2tZbfhjUUqfC8SskK0j9CnmZhlFmfkG9NEyjNkJjQOwzrYujKjrdME1flkl2nB35my3olXw4m716CyrRkZDozyQXYiS_VfUnym3J_VRGYxWi

#WorkBuddy# 用 WorkBuddy 智能设计助手，20 分钟从需求到可落地 UI：我的心得与实操

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

开发工具

前端

职业发展

数据监控

代码解释

WorkBuddy 

JSON

腾讯云BI特惠9.9元起！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

![shot1.png](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/12612631/20260710-ecc4a607.png?q-sign-algorithm=sha1&q-ak=AKIDhlI...

#WorkBuddy# 用 WorkBuddy 智能设计助手，20 分钟从需求到可落地 UI：我的心得与实操-腾讯云开发者社区-腾讯云

#WorkBuddy# 用 WorkBuddy 智能设计助手，20 分钟从需求到可落地 UI：我的心得与实操

#WorkBuddy# 用 WorkBuddy 智能设计助手，20 分钟从需求到可落地 UI：我的心得与实操

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐