飞书 AI 搭建仪表盘
Maker 渗透率
多维表格搭建用户中使用功能的比例
产物撤销率
用 AI 搭建仪表盘后，撤销产物的比例
组件样式开发提效比例
通过 Harness，开发周期 7 → 0.25 人天
一句话生成仪表盘
在飞书多维表格里，很多业务人员会用表格管理销售、项目、运营数据。但仪表盘搭建门槛一直较高，很多用户难以上手，即便搭出来，也很难搭得好看。
我作为主设计师，负责 AI 搭建仪表盘的功能，让用户只需描述业务目标，AI 就能理解需求并生成图表和布局。在这个项目中，我重点优化了体验、布局、组件三个层面，不仅让用户体验更顺滑，还深度参与工程，让仪表盘产物更美观。
新建一个商品管理仪表盘，用于基础信息管理，库存监控，销售分析。需要包含商品分布矩形树图和流量转化桑基图。
飞书多维表格
钉钉
Airtable
相同提示词下仪表盘产物对比
AI 的黑盒特性
体验层
单次生成耗时 3 分钟，过程缺少反馈，用户容易焦虑。如何让生成过程透明、可理解？
布局层
仪表盘布局不稳定，AI 缺乏排版判断力。如何沉淀 AI 可执行的规则，让布局更美观？
组件层
AI 图表样式与仪表盘现有组件差异过大。如何让组件具备统一的视觉品质？
任务透明化
生成一个完整仪表盘通常需要 3 分钟。在这个过程中，用户难以知道 AI 是否理解了需求，是否还在正常工作。等待时间越长，用户越容易产生不确定感。因此在体验层，我的策略是让 AI 执行的任务尽可能透明化。我将执行任务分为侧栏区和画布区：
新建一个商品管理仪表盘
为了更好地为你创建仪表盘，我需要先确认一些关键信息。
感谢你提交的信息，我会分 3 步来完成：
正在执行第 1 步：搭建商品管理仪表盘
正在执行第 2 步：商品结构与库存分析模块
画布区
定位 AI 操作范围
侧栏区
解释 AI 当前行动
从澄清到产物可视化
与通用 agent 不同，在仪表盘场景中，用户不关心 AI 调用了什么工具，而是 AI 是否理解业务目标、如何组织看板、正在生成什么组件。因此，我在侧边栏着重展示了产物生成的过程与状态。
通过澄清卡片明确用户的业务目标，让用户从场景出发，明确分析对象、数据范围、核心指标和分析维度。
通过计划卡片展示 AI 准备如何组织仪表盘，包括看板模块、指标优先级、图表类型和页面结构，让用户在生成前理解产物方向。
在执行阶段，不强调底层工具调用，而是展示当前正在生成的布局区域和组件类型，例如指标卡、趋势图、排行表、明细表等。
在完成阶段展示已生成的核心模块、组件数量和对应的仪表盘，帮助用户从快速检查和调整产物。
定位执行状态
仅靠侧边栏还不够，用户的主要视线停留在画布区。如果进度只出现在侧边栏，用户仍然无法把"AI 正在做的事"和"画布上的位置"对应起来。因此，我在画布区也展示了 AI 正在执行的内容。
在生成开始时，画布区会出现一个蓝色边框，蓝框顶部同步展示执行进度，让用户第一时间知道生成已经启动，并且正在正常推进。
在真实组件生成前，先渲染仪表盘骨架，让用户提前看到页面的大致结构，降低还没开始生成的不确定感。
当 AI 正在生成某个组件时，指针会同步指向该组件位置，并更新文案，让用户知道当前执行任务落在画布的哪一块。
让排版稳定可控
完整仪表盘生成的难点，不只是"能不能生成图表"，而是多个组件组合在一起时，能不能形成一个稳定好看的业务看板，因此我在过程中做了大量的提示词工程，以确保 AI 能搭出数据合理的组件基础上有美观的布局。
Before
布局有空洞，组件选择单一且尺寸不合理
After
评估底座模型
在调优前，我们先构建了一套覆盖真实业务场景的评测集，用同一组 Prompt 横向比较不同模型的生成结果。我主要参与模型评估，从组件丰富度、布局稳定性和布局灵活性三个维度对所有模型进行打分。基于这套评估，我们选择 Doubao 作为可落地的底座模型，同时明确后续需要补齐的布局能力边界。
判断模型是否能根据业务目标主动选择合适的图表和模块。
检查生成结果是否紧凑、完整，是否存在明显空洞、重叠或比例失衡。
评估模型能否重组信息结构，而不是机械堆叠组件。
模型横评维度
Gemini 3
Doubao 1.8
DeepSeek V3.2
Kimi K2
Qwen 3
相同提示词下各模型表现
审美规则量化
确定底座模型后，核心工作转向 Prompt 工程。我们逐步把布局规则、推荐尺寸和边界场景写入生成流程，让模型产出更稳定可用的仪表盘。
将仪表盘布局统一到 48 列栅格和 x / y / w / h 坐标语言，并通过坐标计算检查重叠和空洞。
不同组件更适合不同的长宽比。将这些尺寸偏好写入 Prompt，可以让模型优先选择更稳定的展示形态。
基于生成结果持续归纳更优布局规律，让模型不只是少出错，也能生成更美观的版式。
## 1. 重叠 / 空洞校验
- 画布采用 48 列固定宽度 Grid，每个组件必须输出整数 `x / y / w / h`。
- 重叠校验：任意两个组件不能同时发生横向相交和纵向相交。
- 空洞校验：同一行带内按 x 排序，首尾贴边、相邻组件无间隙。
## 2. 组件推荐尺寸
- 指标卡：推荐 `h = 6`，与图表同行时可适当增高。
- 表格 / 透视表：推荐 `24 ≤ w ≤ 48`，可占满全宽。
- 排行榜 / 漏斗：推荐 `8 ≤ w ≤ 24`、`12 ≤ h ≤ 24`，保持竖向结构。
## 3. 布局软约束
- 信息顺序按「指标总览 → 分析图表 → 明细数据」排列。
- 同一行指标卡不超过 `6` 个，图表组件不超过 `3` 个。这一步本质上是把抽象审美规范，细化为模型可理解、可遵循、可被程序检查的量化规则。
提升布局上限
当布局已经稳定可用后，我们希望结果不只是“不出错”，而是在信息组织、视觉平衡和版式灵活性上有更高上限。因此我们用同一套评测集 Prompt 同时生成 Doubao 和 Gemini 的结果，再把 Gemini 中更优的排版沉淀为 SFT 样本，用蒸馏的方式反向提升目标模型。
评测集 Prompt
用固定业务问题保证样本来源一致。
并行生成
同时请求 Doubao 和 Gemini，比较布局差异。
筛选样本
剔除逻辑错误或视觉不达标的 Gemini 结果。
SFT 训练
把高质量布局样本提供给 Doubao 进行监督微调。
提升上限
将更强模型的布局能力迁移到可落地底座模型。
让组件样式统一
布局层解决多个组件如何组合；组件层要解决的是，AI 新图表能否和现有仪表盘的一方组件保持统一。仪表盘已有成熟的一方组件视觉语言，包括颜色、图例、坐标轴、标签密度和交互状态。Base AI 一期需要新增近 50 个高级图表，如果样式没有对齐，同一张仪表盘里就会出现明显割裂。
因此组件层的目标有两个：把 AI 图表对齐到一方组件规范；同时搭建设计可参与、AI 可执行、研发可接入的样式配置链路。传统流程里，单个图表从设计到联调约 7 人日，而这条链路能让样式规范变成可复用、可验证、可批量上线的工程输入。
提示词难控样式
一开始，我尝试直接通过 Prompt 约束图表样式：把颜色、圆角、坐标轴、图例、标签等规则写进系统提示词，希望模型在生成图表时自动套用统一规范。但实际验证后发现，这条路很难支撑上线质量。
一期需要支持近 50 个 AI 图表，不同图表的坐标轴、图元、标签密度和交互状态都不一样。通用 Prompt 很难同时覆盖环形图、桑基图、矩形树图、组合图等复杂场景。
模型在转译样式需求时经常遗漏参数、写出无效配置，或生成与真实 VChart 代码库不匹配的实现。样式看似能描述，但无法稳定落到可上线的配置代码里。
Vibe Code 本地样式验证
为了快速判断图表样式如何调优，我先在本地搭建了一个模拟仪表盘环境，把需要调整的图表集中放在同一个页面中。这样不需要每次都走完整研发链路，就能直接看到配置修改后的视觉效果。
本地环境接入 VChart 图表代码和仪表盘场景，让样式调整基于真实组件，而不是脱离工程的静态设计稿。
将产品中的颜色、字号、间距等设计系统 Token 写入配置，确保 AI 图表和现有仪表盘组件保持一致的视觉语言。
沉淀一个专门用于图表样式调优的 Skill，让 AI 按固定流程查询 VChart 文档、理解目标图表、生成配置代码，并更新本地预览。
Vibe Code 本地样式验证环境
Harness 批量上线
本地验证解决了“怎么调好看”的问题，但要真正上线，还需要把配置稳定地写回工程。因此我和研发一起搭建 Harness 流程，让图表样式从手动修改，升级为基于文档和 AI 的自动化交付。
过去调整一个图表组件，需要先在 Figma 中描述样式，再由研发理解、实现、联调和发版。现在可以直接基于图表代码库和配置结构工作，把设计判断沉淀成配置文档，再通过 Harness 批量更新到真实工程中。
设计验证样式
在本地仪表盘中调试图表效果，确认图元、标签、图例、坐标轴等样式标准。
沉淀配置文档
将确认后的样式配置整理成 AI 可以读取的图表配置规范。
Harness 读取配置
研发提供自动化流程，定位对应图表类型并写入真实代码仓库。
AI 更新与验证
AI 修改代码、打包并完成基础验证，设计只在结果可用后介入微调。
设计边界的拓展
这个项目让我重新理解了 AI 产品中设计师的价值边界。设计师不再只是定义界面和体验路径，而是参与 AI 产物质量的控制，并和上下游一起搭建能把设计判断落到真实系统里的流程。
在传统产品中，设计师负责确定性的界面体验。但在 AI 产品中，最终结果无法完全由设计师定义，而是由模型根据用户输入动态生成的。这意味着设计师的责任从"设计一个好用的界面"，延伸到了"设计一个能稳定产出好结果的系统"。
组件层的项目是在 2026 年 2 月份完成的，它将传统的瀑布式交付改为了更高效的设计自闭环交付。然而站在 6 月份这个时间点，我认为借助 Browser Use，Goal 等工具，AI 应该可以自主闭环配置和验证流程，而设计只在 AI 完成到 80 分后介入调整。