实战案例：用AI提示词设计数据可视化大屏，从指标架构到可开发落地稿的5步体系

背景

「可视界」是一家专注智慧园区与物联数据可视化的小型SaaS公司，主要给园区、楼宇、政企交付「数据大屏」（在展厅/指挥中心的大尺寸屏幕上实时展示楼宇的能耗、人流、设备、安防等数据）。过去大屏设计是他们的痛点：投标和签单前的demo大屏设计，要么找UI设计外包（一套大屏视觉稿报价5000到2万元、1到2周），要么用现成模板（千篇一律的蓝黑科技风）。公司只有一名兼职设计师，实在忙不过来。

数据大屏的AI生图与其他图片生成最大的区别是：它服务「真实数据」，不是「装饰」——生成的必须是「装了真实业务数据结构」的可视化示意，图表要表达正确的信息层级，而不是一幅「看起来炫但全是乱码假数据」的风景画；且它要能「二次开发落地」，开发拿到的应是可照着抄的界面示意而非一张孤立的艺术海报。AI生图最大的坑恰恰在这里：它默认把图表画成无法辨认的乱码。本文复盘5步流程，最终「可视界」用Midjourney+参数化提示词，在5个工作日内产出多个可投标的智慧园区大屏设计稿，并把「如何让假数据不穿帮」沉淀成方法论。

第一步：指标层级与版式架构设计

提示词

你是资深数据可视化设计师，专精企业数据大屏与智能驾驶舱。请为一个「智慧园区运营驾驶舱」大屏做前置的指标与版式架构设计（这是生成过程稿前必须先定的东西）：

业务域：智慧楼宇/园区，覆盖能耗、人流、安防、设备、停车、物业服务

请输出：
1. KPI指标层级：把核心指标按「一级重点指标 / 二级支撑指标 / 三级细节指标」分层，每个指标配一个可计算的、规范的中英文命名（如能耗总量 Energy Usage / 单位面积能耗 EUI），并指定理想的图表类型（如人流走柱状/折线、能耗走面积图或环形、设备状态走进度条/雷达）。
2. 版式架构：为「16:9 大屏」规划六个核心区块——顶部标题区、左侧两块、中间主视觉（地图/大数字）、右侧两块、底部告警条；给出每区块承担什么指标组、信息层级与视觉锚点建议。
3. 主题与配色：避免千篇一律的「蓝黑科技风」，给出2套差异化配色方案（一套企业专业、一套园区亲和），给主色/辅色/警示色的HEX与「图表数据颜色」的区分原则（信息色 vs 装饰色）。
4. 数据真实性原则：为后续AI生图定义「什么能画、什么必须后期替换」——列出AI易乱画的元件（具体数字、文字、真实地图、可读标签），给出「用示意图形/条形代替真数字」的提示词策略。
5. 生成模板统一后缀：为大屏设计一套固定后缀（perspective/镜头、材质、风格），确保多张子图是一套系统。

约束：数据大屏要「可被读取」，视觉层级服务于信息层级，不追求夸张的艺术化。

产出：指标体系把能耗、人流、安防、设备、停车五大域的KPI分层，每个指标配规范名称与建议图表。版式架构定为六区块：顶部标题、左上是能耗总览（面积图/环形）、左下是安防与设备状态（进度条/雷达）、中间主视觉是园区3D地图+重点大数字、右侧是人流趋势（柱状/折线）与停车、底部是实时告警滚动条。配色避开「蓝黑科技」主路，给了「企业专业（深蓝稳）」与「园区亲和（暖木+青）」两套。数据真实性原则是本步核心产出：明确告诉AI「数字、文字、真实地图、可读标签必乱画，要用示意条形/环形/无字大数字代替」——这直接决定后面不穿帮。并定统一后缀，让整屏是一套。

踩坑：AI默认给的关键绘制建议几乎全是「蓝色科技光效+悬浮透明卡片」的样板间套路，年轻人第一个e感觉土。这步的价值是先把「信息架构」从「视觉样式」里剥出来，否则直接进生图，得到的一定是「好看但没数据逻辑」的科技展板。另一个关键坑在「真数字会穿帮」——必须从这步就立规矩：大屏素材上所有数字文字都要后期替换，前期只要「位置对、大小对、形态对」。

第二步：大屏整体版式与主视觉生成（Midjourney）

提示词

design a professional enterprise IOT data dashboard mockup for a smart campus, top-right corporate deep navy plus one accent teal, 16:9 layout, six content blocks: top title band, left-top energy dashboard area(gauge + ring chart) rather than a processed 3d map in the center, place holders shown as abstract rounded bars and large clear numerals (numbers intentionally generic), thick bottom alert ticker bar, clean grid, modern flat UI with slight elevation ( NOT the usual dark blue neon sci-fi style ), readable, layout-first not deco-first, sense of order
--ar 16:9 --v 6 --style raw --s 300

产出：第4版（L4）的版式最稳——六区块布局清晰，中间主视觉用「园区俯瞰示意+大数字」而不是过度炫技，左上的能耗用环形加灯牌、右下的停车与人流用柱状与折线，底部告警条明显。配色为「深蓝加青色点缀」，去掉霓虹光效后显得专业克制。用统一的--ar 16:9 --s 300 --style raw后缀生成多张变体，确认版式骨架后，后续所有子模块都在这个骨架上开发。

踩坑：大屏最容易犯的错是「整体看起来很好，但放大看全是乱码数字和乱飞的线」。解法是把「layout-first not deco-first」「large clear numerals (numbers intentionally generic)」写进提示词，且统一用s 300低压，减少AI「自由发挥」出炫技细节。另一个坑是AI默认还是往「黑底蓝纽碧光」的科技风跑，必须用「NOT dark blue neon sci-fi」反向强调，才压回专业扁平。

第三步：各区块子模块与图表组件细化

提示词 【能耗区】细化左上能耗模块：

energy dashboard module mockup, a large donut chart showing energy mix with warm accent, two side gauges for power usage, small sparkline trend, generic labels in Chinese styled placeholders, deep navy background with teal energy accent, clean flat panel, numbers intentionally generic, UI component
【人流区】细化右上下人流行情：
```plaintext
occupancy traffic module, bar chart and smooth area line showing visitor trend, a delta badge, crisp grid lines, consistent navy teal palette, generic axis labels, large clear numerals, flat UI, component style
【设备安防与告警】细化状态与告警条：
```plaintext
device and security status module, progress bars for online devices, small radar for coverage, a bottom red alert ticker band with translucent warning chips, consistent navy teal, readable flat UI, generic text placeholders

产出：每个子模块独立生成并保证同一配色与扁平风格——能耗区是大号环形图加两侧表盘与Sparkline趋势，人流区是柱状加平滑面积线加涨跌角标，设备安防区是进度条加雷达加底部红告警滚动条。所有数字文字都被刻意做成「位置占位」而非真实可读内容，方便后期在Figma或开发里逐项替换成真实数据。三块子图统一navy background + teal accent + flat UI + numbers intentionally generic，确保与L4主屏无缝拼合。

踩坑：子模块的坑是「与主屏风格漂移」——自由生成时常会跑出蓝紫渐变或加光晕，破坏统一。解决是把主屏的配色与「flat UI, numbers generic」当成每张子图都要带的「风格头」，反复引用。另一个坑是AI仍爱把「告警」画成吓人的满屏红，用「translucent warning chips + consistent palette」把它压成「克制的一行提示」。所有子图都必须与主屏「同色系且能对接」，否则拼屏时一眼穿帮。

第四步：多屏适配与四类大屏变体

提示词

基于这套「智慧园区驾驶舱」系统设计，扩展出四个不同用途的大屏变体（保持同一品牌视觉语言）：
1. 能耗驾驶舱（energy focus）：让能耗成为中央主角，可再生能源占比放在最大位置
2. 安防指挥中枢（security command）：中央换成园区监控屏网/巡检轨迹，强化告警与调度
3. 招商与物业大屏（leasing & property）：弱化技术感，突出楼宇面积、出租率、服务工单，面向展板和物业值守，更简明友好
4. 移动/小屏适配示意（compact）：横竖布局的紧凑版，减少图表密度，大数字兜底
每张配说明与建议落地尺寸（展示厅立屏/指挥中心/园区前台）。

产出：扩展出四类大屏变体，每类在同一视觉语言下各有侧重：能耗驾驶舱让可再生能源占比主位，安防中枢把监控网与巡检轨迹作主视觉并强化告警调度，招商物业屏弱化技术感突出出租率与服务工单（面向前台和物业），紧凑版为横竖小屏适配、减少图表密度、用大数字兜底。一套「园区驾驶舱」构成了能覆盖展厅、指挥中心、前台、移动端的多形态产品线，投标时可直接按客户场景选型。

踩坑：变体的坑是「换个用途就换了配色」——做安防屏时AI容易用上刺眼的红黑、做招商楼又画成宣传海报。用开头一步定的「同一品牌视觉语言」+--style raw low s把风格锁住，只换信息重心。另一个坑是「紧凑版拿平版当手机」——小屏适配要真的缩减图表密度、放大数字、调整长宽比，不能只是缩小图。每种变体都标了落地尺寸，投标时又专业又省事。

第五步：可开发落地稿（Figma标注与组件化）

提示词

你是前端开发对接顾问。基于已生成的大屏设计稿，输出可开发的落地说明：
1. 区块与组件拆分：把整屏拆成可复用的前端组件（标题栏、KPI卡片、环形图、柱状图、告警滚动条），给每块的宽度比例、z-index层级、栅格建议。
2. 数据接法：实时数据通过API轮询/WebSocket接入，静态示意换成真实指标名称与单位；列出哪些元件用echarts/图表库实现、哪些用真实地图。
3. 响应式与多屏：主视觉16:9 与 32:9 拼接屏、竖屏指挥屏的断点建议。
4. 设计交接：导出图层命名的设计标注规范，把「numbers generic」占位统一替换为真实KPI模板（`{energy_total}`），附一块如何批量替换占位数字的操作清单。
5. 验收清单：交付后逐项核对图表是否可读、配色是否对比度合格、告警是否显眼机制可靠。

产出：输出一份可开发的落地文档——把大屏拆成可复用组件、给出相对gird比例与层级、标注哪些图表用图表库实现、给出16:9/32:9/竖屏的断点与适配思路。最关键的是把AI生成的「generic数字占位」用{energy_total}这类真实KPI模板批量替换，前端拿来就能接。另附巧把占位数字替换为真实数据的操作清单与验收清单。AI生图从「一张图」真正变成「一套能上线的产品界面」。

踩坑：交付的坑是「只给图不给规范」——如果只丢一堆生成图给开发，前端无法判断组件拆解、数据接法、层级占比，返工严重。把「组件拆分、数据接法、断点、验收清单」写成文档后，对接顺畅。另一个坑是「占位数字替换漏了细节」——要列出具体占位位置与替换模板，否则开发要么漏换、要么误把「意图形状」当真实图表。落地文档是把AI生图推过「有用」这道坎的关键一步。

成果与复盘

「可视界」用Midjourney在5个工作日内完成了智慧园区驾驶舱的完整大屏设计稿（主屏+四类变体+可开发文档），成本仅为一个月的Midjourney订阅费，对比UI外包一套大屏视觉稿5000至2万元，成本降低约99%。凭借这套可投标的设计稿与组件化落地思路，公司连续拿下了几个智慧园区的前期演示订单，客户反馈「大屏终于看起来像我们内部系统，而不是放PPT」。

可复用清单

1. 先「信息架构」后「视觉」：数据大屏先定指标分层（一级/二级/三级）与建议图表类型，把「装了真业务的结构」和「炫酷的样式」剥开，避免只得到「好看但没数据逻辑」的科技展板。
2. 数据真实性是防穿帮底线：明确AI必乱画的元件（真实数字、文字、地图），用「示意图形+通用大数字占位」代替，真实数据一律后期替换，从第一步起立这个规矩。
3. 反向排除「蓝黑科技风」：AI默认爱跑黑底蓝纽碧光霓虹，「NOT dark blue neon sci-fi + flat UI + strategy raw + low s」才能压回专业扁平；版式优先于装饰。
4. 统一「风格头」驱动子图：给每张子模块都带上同一套配色与「style头」（如navy background + teal accent + flat UI + numbers generic），防止子图与主屏风格漂移、拼屏穿帮。
5. 多屏变体锁同一视觉语言：能耗/安防/招商/移动端变体只换信息重心、不换配色，same visual language+低s把风格钉死，并标注落地尺寸便于投标选型。
6. 生成图要推过「可开发」这道坎：输出组件拆分、数据接法、断点适配与验收清单，用{真实KPI占位模板}批量替换generic数字——只有可落地，AI生图才算从「一张图」变成「一套产品界面」。