挑战一句话生成可视化大屏设计稿

介绍

ChatGPT Image 2.0 的出现，让数据可视化大屏的设计工作又迎来了一次跃迁。我最近在想如果用户只说一句“我要做一个智慧港口大屏”，AI 能不能直接帮我们生成一张可用的设计稿？

我的判断是：直接生成最终稿可能不现实，但生成一张“设计师启动稿”是可行的。

目标

我一开始没有把它定义成“大屏自动生成器”，这个目标太大，而且很容易变成噱头。更实际的定位是：一句话生成可视化大屏设计稿，用于设计师启动、售前方案、产品原型和业务沟通。这类图的价值不是最终交付，而是快速对齐几个问题：

1. 这个大屏到底是什么主题。
2. 中间主视觉应该是地图、园区、港区、农场，还是业务架构图。
3. 左右两侧应该放哪些业务图表。
4. 整体气质是医疗清洁风、港口调度风、农业监管风，还是政务运营风。
5. 客户、产品、设计师是否认可这个方向。

如果这些问题都没有对齐，AI 直接出图大概率会变成“看起来很像大屏”的壁纸。画面也许漂亮，但图表没有业务含义，主视觉和指标也对不上，最后还是不能进入真实工作流。因此我把这个工具做成了一个 skill，而不是简单写一段 prompt。

想法构思

最初设想的流程很简单：

1. 用户发起消息：“我要做一个港口大屏”。
2. AI 先生成对应的确认方案 brief.md，给用户确认。
3. 用户可以调整方案里的场景、主视觉、对象、指标，以及每个图表面板的标题和内容。
4. 确认之后选择视觉风格，提供几种风格方向，包括参考图和文字描述。
5. 设置输出格式和画面比例，用户没要求就默认 png、16:9。
6. 然后生成图片方案。
7. 后续如果方向确认，再考虑转成 SVG 或导入 Figma 做二次设计编辑。

这里有个很重要的取舍：不要一上来承诺“直接生成可编辑 SVG”。

因为现在真正难的不是生成一个 SVG 文件，而是让这个 SVG 同时满足视觉质量、图层结构、组件复用和可编辑性。第一阶段如果强行追求可编辑，反而会卡在视觉效果上。所以我现在更倾向于先生成高质量位图概念图，等方向确认后，再把它拆成结构化方案、布局蓝图和组件映射，最后再进入 SVG / Figma 阶段。

skill 的整体流程

整个 skill 拆成了 5 个阶段。

1. 一句话理解需求

用户的输入可能很短，比如：

1. 我要做一个港口大屏
2. 我要做一个智慧医疗大屏
3. 广州南沙智慧楼宇，主体参考这张图
4. 智慧农业数据可视化大屏，主体为某个农场

这里 AI 不能马上出图，而是要先判断几个基本问题：

1. 行业主题是什么。
2. 业务场景是什么。
3. 目标用户是谁。
4. 主视觉应该用什么表达。
5. 图表应该围绕哪些业务问题展开。

2. 生成 brief.md 给用户确认

brief.md 是这个流程里最关键的一步。

它不是形式主义，而是为了防止 AI 直接乱画。用户说一句话，AI 需要把这句话翻译成一个可以讨论的方案。

我要求 brief 里至少包含这些内容：

1. 大屏标题
2. 目标用户
3. 使用场景
4. 设计目标
5. 主视觉建议和理由
6. 6 个图表面板
7. 每个图表的标题、表达形式、业务问题、字段和数据说明
8. 需要用户确认的假设

比如做小区域智慧农业监管大屏时，AI 不能只写“左边放折线图，右边放饼图”。它应该写清楚：

1. 中央主视觉是农场鸟瞰场景 + 热力图层 + 种植作物图层。
2. 左侧可以放区域农业核心状态、环境热力趋势、地块状态矩阵。
3. 右侧可以放作物种植结构、传感器与设备在线态势、异常地块与处置闭环。
4. 作物图层里要体现作物名称、温度、含水量、肥度、风险状态。

这样用户才有机会在出图前调整方案。如果用户认为主视觉不对、指标不对、场景不对，直接改 brief 就可以，不需要等图出来以后再推倒重来。

3. 选择视觉风格和输出规格

brief 确认后，再进入视觉风格选择。这里也不能只给“科技蓝、暗黑风、浅色风”这种泛泛标签。大屏的色彩和质感应该跟行业、客户和使用场景有关。

比如：

1. 医疗偏白蓝、冰蓝、浅青，强调卫生、清洁和秩序。
2. 港口通常可以走蓝绿调，但如果用户指定紫色和白色，也要能适配。
3. 农业可以走绿色，但不能做成廉价的亮绿色，也不能像普通白底后台系统。
4. 楼宇和园区可以偏浅色科技，也可以偏城市运营风。

默认输出规格目前设定为：

1. 格式：png
2. 比例：16:9
3. 尺寸：1920x1080

这一阶段的价值是把画面气质先定住，避免后面每次都靠一段很长的 prompt 临时描述。

4. 生成图片方案

真正出图是在第四步。这里的提示词会强制带上已经确认的 brief、布局规则、图表内容和视觉风格。尤其要强调一点：如果用户只是要求改色调，就不能顺手把图表内容也改掉。

这个问题在测试时遇到过。比如农业大屏第一版内容结构还不错，但白色面板和背景不好看。后来改成深绿色农业科技风时，AI 容易把图表类型和内容也一起换掉。这个时候提示词就必须写清楚：只改视觉风格，不改图表标题、字段、面板内容和业务结构。

也就是说，出图阶段的重点不是“自由发挥”，而是“在确认方案内发挥”。

5. 后续 SVG / Figma 方向

图片方案确认后，才进入后续结构化。这一步目前还不是第一阶段的重点。我的想法是先把“从一句话到图片启动稿”的链路跑顺，再逐步解决 SVG 和 Figma 的图层编辑问题。

合理路径应该是：

1. 确认位图概念图。
2. 抽取结构化 proposal.json。
3. 生成布局蓝图。
4. 建立图表组件和资产映射。
5. 生成 dashboard.svg。
6. 再导入 Figma 做二次设计编辑。

核心规则设计

这个 skill 的价值不只是 prompt，而是把大屏设计经验变成底层规则。

如果没有这些规则，AI 生成的大屏会有几个典型问题：图表很像装饰、左右面板太单调、主视觉和图表割裂、色彩总是科技蓝、画面看起来热闹但没有业务重点。

所以我先沉淀了几类规则。

1. 布局规则

当前先采用固定上下结构：

1. 顶部是标题、时间、状态、告警等信息。
2. 主体区域左右两侧为固定宽度图表列。
3. 中间区域放主视觉，例如地图、园区、建筑、港区、农场、业务架构图。
4. 默认 6 个图表面板，左右各 3 个。

固定布局不是因为它最完美，而是因为第一阶段要追求稳定。大屏设计稿的变量已经很多了，如果一开始连布局也完全放开，AI 很容易把画面做散。等基础链路稳定后，再扩展横向调度型、地图主导型、架构图主导型、运营驾驶舱型等布局模板。

2. 图表表达规则

不能每个行业都套同样的折线图、饼图、柱状图。图表应该从业务问题出发，而不是从图表库出发。

比如港口大屏更适合出现泊位状态、堆场热力、岸桥作业、集卡流向、异常闭环；医疗大屏更适合出现床位水位、患者流向、科室负载、急诊拥堵、资源利用；楼宇大屏可以关注楼层设备矩阵、能耗结构、人流趋势、停车水位、工单闭环；农业大屏则更适合地块状态矩阵、环境热力、作物结构、传感器在线、异常处置。

后面我专门给 skill 增加了一个图表表达库，让 brief 阶段就能有更多选择。这样一来，AI 不会每次都机械地生成“左边折线图、右边饼图”。

3. 中科智城气质

这个规则是为了限制画面气质。我希望它生成的大屏更接近企业和政务客户能接受的方案，而不是廉价炫技的视觉图。

所以我给它加了几条约束：

1. 专业、干净，企业/政务客户可接受。
2. 重秩序和解决方案感。
3. 少廉价炫技，不要随机霓虹、过度赛博和无意义光效。
4. 画面不能填得太满，需要有呼吸感。
5. 图表和主视觉尽量融合，不要每个面板都像生硬贴上去的白色卡片。

4. 色彩规则

AI 很容易把所有大屏都做成深蓝背景、青色线框、霓虹边框。短期看像科技风，做多了就完全没行业差异。所以把色彩规则改成按行业走：

1. 医疗：白蓝、冰蓝、浅青。
2. 港口：蓝绿为主，也支持用户指定紫白。
3. 农业：绿色为主，但要控制饱和度，避免廉价感。
4. 政务/园区：低饱和蓝绿、灰蓝、浅色科技。

色彩规则不只是为了好看，也是为了让客户一眼感知行业属性。

实现方式

这个 skill 本身没有复杂到需要写一套系统，更多是把流程、规则、模板和辅助脚本组织清楚。当前主要结构是：

data-screen-concept-builder/  SKILL.md  references/  brief-template.md  design-rules.md  chart-expression-library.md  visual-styles.md  svg-handoff.md  scripts/  create_brief.py  scan_assets.py  archive_image.py

SKILL.md 负责定义什么时候使用这个 skill，以及完整工作流。brief-template.md 用来约束确认方案的结构，design-rules.md 用来写底层设计规则，chart-expression-library.md 用来扩展不同行业的数据表达形式，visual-styles.md 用来管理风格选项。

几个脚本主要做辅助工作：

1. create_brief.py：从一句话生成初版 brief。
2. scan_assets.py：扫描本地已有的图表、主体、参考图资产。
3. archive_image.py：把生成图片归档到文章或项目目录里。

这里最关键的不是代码复杂，而是让 AI 每一步都知道自己该做什么、不该做什么。skill 的作用就是把这些约束固定下来，避免每次重新靠人肉补 prompt。

效果实例

下面几张图是测试过程中生成的不同方向。

医疗大屏的方向是“院级运营态势 / 院区态势 + 业务架构”。这类场景不能太暗，也不能做得过于赛博，整体更适合白蓝、冰蓝、浅青这种卫生整洁的色调。

 

楼宇大屏参考了用户提供的主体图片，重点不是重新发明一个楼宇，而是把建筑主视觉、运营指标和左右图表融合起来。

 

港口大屏按“港口调度运行态势”理解，主视觉采用港区鸟瞰场景 + 调度链路。这个案例里用户指定了紫色和白色，所以没有强行套蓝绿色。

 

农业大屏的迭代最能说明问题。第一版内容结构可以，但白色面板和背景偏普通后台系统。

 

这些图都还不是最终设计稿，但已经可以作为设计师启动稿：能看出主题、主视觉、图表结构、色彩方向和整体气质。设计师接手后，可以继续优化图层、字体、图表细节和真实数据。

适用场景和边界

这个 skill 比较适合下面几类场景：

1. 售前方案里的大屏概念图。
2. 产品经理做原型方向探索。
3. 设计师启动稿和视觉方向探索。
4. 业务方快速确认大屏主题、图表结构和主视觉方向。

它目前可能不适合直接承担这些任务：

1. 直接生成可上线的前端工程。
2. 直接替代设计师做最终稿。
3. 对真实数据准确性有严格要求的生产系统。
4. 一步到位生成完全可编辑的高质量 SVG 或 Figma 文件。

换句话说，它目前更像一个前置生产力工具：帮团队快速从一句模糊需求走到一张可以讨论的设计启动稿。

总结

这件事真正有价值的地方，不是让 AI 画一张炫酷图片，而是把「理解需求 - 生成 brief - 用户确认 - 选择风格 - 出图 - 后续结构化」这条链路固定下来。只有把行业理解、图表表达、视觉规则和团队气质都放进 skill，AI 生成的图才有机会进入真实工作流。

现阶段它更适合作为设计师启动稿和方案沟通工具。等 brief 结构、组件映射和 SVG / Figma 转换链路稳定之后，才有机会进一步变成更完整的大屏设计生产工具。

这个Skill还是严重依赖image 2.0的生图模型的，兴趣的盆友可以帮忙测试一下返图给我。另外，现在codex移动端远程控制功能也出来了，真的可以体验手机上一句话生成大屏的爽感。