资讯动态

一句话生成一块工业大屏:myBuilder AI 智能体生成看板演示

发布时间:2026/10/15 13:32:42 来源:尧图企业网站定制
⚠️能力状态声明请先读这段AI 辅助设计含 AI 生成报表、AI 智能体精确修改报表、AI 智能体生成看板已在内部开发完成但目前尚未对外发布上线。本文是 myBuilder AI 实验室的成果演示用于说明该能力的技术路线与设计取向不代表当前发布版本已包含此功能。当前通过任何渠道获取的 myBuilder 版本均不包含这些 AI 能力。功能何时上线、以什么形态上线以官方发布公告为准。请勿依据本文安排采购或生产计划。摘要这是 myBuilder AI 实验室成果演示的第三篇。第一篇讲从零生成报表第二篇讲精确修改报表这一篇换了个对象——大屏看板。我用一句话「我在纺织印染行业的一家染整加工企业帮我设计一个定型车间生产数据监控大屏看板」让 AI 生成了一块 1920×1080 的工业大屏5 张 KPI 卡 4 个图表 1 张明细表 仪表盘与能耗趋势7 个区块在一张画布上排布完成全程约 1 分半。这篇想讲的重点不是AI 会画大屏了而是当 AI 面对的不是一段能顺着排下去的文字而是一张固定尺寸的画布时它要同时满足哪三类约束——几何、组件、业务与数据。以及它自己做的那个动作验算两块内容会不会重叠。一、先分清报表和大屏是两种完全不同的难题前两篇讲的是报表。这次讲看板第一件事得说清楚——这两件事在技术上根本不是同一类问题别被都是生成一个页面骗了。维度报表前两篇大屏看板本篇布局方式流式文档组件从上到下顺排高度自适应绝对定位画布每个元素有精确的x / y / width / height尺寸约束宽度约束高度自由可滚动、可打印分页固定设计尺寸 1920×1080等比例缩放适配fitMode: contain视觉要求简洁、可读、可打印深色主题 装饰边框 标题条要有大屏感元素数量级十几个区块常见数十个元素密集排布在同一屏内刷新机制打开时取数可配定时自动刷新本次为 30 秒一轮出错表现某个区块不好看元素重叠、错位、越界——整块屏就废了最后一行是分水岭。报表少排一个组件页面往下顺一顺就行大屏上两个元素坐标算错它们会直接叠在一起视觉上就是事故。所以大屏生成要额外解决三件事几何——在固定画布上把 N 个元素摆开不许重叠、不许越界缩放到别的屏幕还要不走形组件——只用平台组件库里真实存在的组件并且按平台的数据契约把数据接进去业务与数据——这块屏该监控哪些指标指标之间的数值关系对不对得上这三件事恰好构成了本文第三节。二、演示一句话 → 一块 1920×1080 的工业大屏演示环境是内部开发版 myBuilder IDE本地部署。先说清一个容易混的点大屏看板在平台里是一种「页面类型」设计器里叫「看板页」。所以这次入口不是报表设计管理而是页面设计管理 → 新增页面定义 → 页面类型选「看板页」得到页面编码demo.aiDesignDashboard2。2.1 操作就五步步骤操作说明1页面设计管理 → 新增页面定义页面类型选「看板页」拿到一个空的看板定义2进入看板设计器打开的是dashboardDesigner一块空白画布3工具栏点「AI辅助设计」弹出对话框标题写明「AI辅助设计看板」4输入需求 选模型点「执行」模型下拉可选演示用Deepseek-V4.1-Flash5看「结果返回」区AI 的设计过程流式可见从需求分析一路推到组件 JSON2.2 我输入的需求一字未改我在纺织印染行业的一家染整加工企业帮我设计一个定型车间生产数据监控大屏看板一句话。没给尺寸、没给字段、没给配色、没说要几个图表、更没给数据。2.3 它在「结果返回」区做了什么点执行后AI 的思考过程流式输出。这段过程本身很有信息量摘几条我印象最深的① 它先把定型车间该监控什么列出来。这是最早出现的一段也是最像行业老师傅的一段。它自己拆出了这些指标烘干和幅温度 (oven zone temperatures) · 定型时间 (setting time) · 门幅/幅宽 (fabric width) · 超喂率 (Overfeed rate) · 张力 (Tension) · 落布温度 (fabric drop temperature) Quality metrics: 一次合格率 (First-pass yield) · 质量异常 · 克重 (Gram weight/GSM) · 手感 (Hand feel) Energy consumption: 电力、天然气、蒸汽 · 吨布能耗 Equipment status: 各机台状态运行/停机/待机/故障· 机台效率 OEE然后它把这些归纳成五大监控维度产能达成、工艺参数、设备状态、质量、能耗。值得说一句的是定型热定型是染整后整理的关键工序这个判断是它自己下的需求里没提。② 它在做像素级布局规划。接下来这段是纯几何计算KPI cards: Card i at x 25 i*380 (since 35030380): x: 25, 405, 785, 1165, 1545 text region 33.3%~66.6%33.3% of 1920 63966.6% 1279 chart: x240, height350 … y268 w580 h3181920 宽的画布5 张卡各 350 宽、间隔 30首卡左边距 25——这是一套能自己算得通的栅格。它还在算标题居中区域该落在哪一段避免和左右两侧的信息打架。③ 它自己验算了两块内容会不会重叠。这条是我认为最值得单独拎出来的细节。在拼装组件 JSON 时它写了这么一句Component 4: time label { text:updateTime, x:1560, y:6, width:335, height:36, horizontalAlign:right } Wait time label overlaps main title region? main title label 660-1260, time 1560-1895. fine.它在自己检查坐标区间有没有交叠——主标题占 660–1260时间占 1560–1895不相撞放行。这句fine.很轻但它是大屏生成和报表生成最本质的区别所在报表可以往下顺大屏必须算得清。④ 它自己算平了数据的账。布局定了之后是造数。它先定了今日产量 86.5 万米然后去设计各机台产量对比这个分组柱形图Let me group by bar: 计划 vs 实际. Let me make it 6 groups (6 定型机). 计划: 24, 20, 18, 18, 10, 8 (total 98) 实际: 22.5, 18.6, 15.2, 16.8, 8.1, 5.3 (total 86.5) matches 今日产量 86.5万米. Good.6 台设备的实际产量合计 指标卡上的今日产量。指标卡与图表不是两组互不相干的数字是能对上的。还有一段更细的取舍做设备运行状态分布时它发现设备太少饼图撑不起来machineStatus … (total 30 machines? but we have 6 定型机…) Let me say the workshop has 定型机 6 台 预缩机/呢毯机等其他 6 台 12 台. Status: 运行 9, 待机 2, 故障 1. Good enough.它意识到6 个数据画饼图太单薄于是主动扩大了统计范围并把数字配平。这是个设计判断不是文本补全。⑤ 最后它照着平台的数据契约把组件拼成 JSON。它明确说了图表组件是怎么接数的the chart component binds data via dataField / nameField / valueField / groupField and merges into jsOption series2.4 它交付的是一份「设计说明书」设计完成后AI 没有只丢一堆 JSON 出来而是给了一份结构化说明。核心是这张表区域内容组件顶部标题栏企业名 “定型车间生产数据监控大屏” 实时时间装饰标题 文本标签KPI 指标带今日产量 86.5 万米 / 计划完成率 92.3% / OEE 85.6% / 一次合格率 98.2% / 平均车速 45.8 m/min5 组边框容器 文本标签中区左各机台产量对比计划 vs 实际按 6 台定型机分组柱形图柱形图中区中定型机温区温度监控8 个温区温度曲线150–190℃折线图中区右设备运行状态分布运行 9 / 待机 2 / 故障 1环形图底部左机台生产实时明细订单号、品种、门幅、车速、定型温度、产量、合格率、状态表格状态字典着色底部右质量指标一次合格率仪表盘 今日综合能耗趋势仪表盘 面积图而且它写明了三条自己遵守的规范画布规范1920×1080、等比例缩放、30 秒自动刷新数据规范每个图表/表格的dataField / nameField / valueField / groupField均与页面 data 样例数据严格匹配数值符合染整业务常识门幅 140–168cm、车速 36–48 m/min、定型温度 180–195℃组件规范全部使用组件知识中支持的组件2.5 落地结果画布上直接出一块完整大屏点确认后画布直接渲染出了成品。运行时打开这块屏7 个区块全部到位顶部左侧企业名中间大标题「定型车间生产数据监控大屏」右侧实时时间2026-10-12 17:51:44KPI 指标带今日产量86.5万米 计划完成率92.3% 设备综合效率OEE85.6% 一次合格率98.2% 平均车速45.8m/min各机台产量对比计划/实际分组柱形图1#–6# 定型机单位万米定型机温区温度监控温区 1–8 温度曲线纵轴 140–200℃设备运行状态分布环形图运行中 / 待机 / 故障机台生产实时明细6 行数据状态列按字典着色运行绿 / 待机黄 / 故障红质量指标监控98.2% 仪表盘今日综合能耗趋势08:00–19:00 面积图单位 kgce明细表长这样截自运行态大屏机台订单号品种门幅(cm)车速(m/min)定型温度(℃)产量(万米)合格率(%)状态1#定型机D20260615-018全涤针织布1684819522.599.1运行2#定型机D20260615-021涤棉混纺布1524519018.698.4运行3#定型机D20260615-025纯棉汗布1604218515.297.6运行4#定型机D20260615-030氨纶罗纹布1454018816.898.9运行5#定型机D20260615-033涤纶弹力布150381928.196.5待机6#定型机D20260615-035锦纶网眼布140361805.395.2故障这些数字全部是 AI 生成的演示数据不是任何企业的真实生产数据。品种、门幅、车速这些字段的业务合理性是 AI 按染整常识配的仅用于展示能力。耗时视频时间轴 00:30 点执行 → 02:03 画布渲染完成约 1 分半。三、技术关键一次要同时满足三类约束第一节说大屏要额外解决几何、组件、业务与数据三件事。这一节把演示里的证据对上去。3.1 几何约束它算的是坐标而且会自查重叠大屏的元数据和报表完全不同——每个元素带绝对定位。视频里能看到它写的组件 JSON 长这样// 主标题文本标签节选 { id: lbl1000000000000000000000000003, type: label, text: 定型车间生产数据监控大屏, x: 660, y: 2, width: 600, height: 44, horizontalAlign: center, verticalAlign: middle, fontColor: #FFFFFF, fontSize: 28px, fontBold: true, fixed: true }两个细节值得看32 位组件 idlbl 28 位——和报表篇里组件的 id 规则一致。这不是 AI 随手编的字符串是引擎的 id 规范。布局参数是显式的x / y / width / height 对齐方式 字号字色。所以它能被算、能被校验、能被设计器拖拽。然后是那个我觉得最漂亮的动作——它自己在验算重叠Wait time label overlaps main title region? main title label 660-1260, time 1560-1895. fine.它是把两个元素的 x 区间拿出来做了个区间相交判断。做报表生成时不需要这一步流式排布天然不重叠做大屏必须做。至于换块屏幕会不会走形平台层给了答案——根配置里写死了这三个字段{ type: h5dashboard, designWidth: 1920, designHeight: 1080, fitMode: contain, // 等比例缩放适配 backgroundColor: #0a1230, timerEnabled: true, timerDuration: 30000 // 30 秒自动刷新 }设计按 1920×1080 算运行时按contain等比缩放适配实际屏幕。也就是说 AI 只需要把设计态那一块画布算对适配交给引擎——这是把几何问题关进了一个有限范围的框里。3.2 组件约束它只能用手上有的组件这一点在演示里很明显AI 全程用的是看板组件库里的组件而不是自己写 HTML CSS 画一个大屏。从 JSON 里能读到的组件类型label文本标签、borderBox系列边框容器带bbl / bbc / bbr / bbt / bbg这类方位变体、chartBar/chartLine/chartPie/chartGauge图表、table表格、装饰性标题组件main-title/sub-title这类。注意它是怎么组织一个图表面板的——三层套borderBox「bbl」x25 y220 w610 h380 ← 外框容器装饰 定位 └ borderBox8-image「subL」x40 y228 w300 h30 ← 标题条装饰图 └ label「各机台产量对比」 ← 标题文字 └ chartBar「chartBar」x40 y268 w580 h318 ← 图表本体组件是复用的、有命名规范的、成体系的。AI 做的是在既有组件库里选型 摆位 接数不是从零造一个页面。而且它接数走的是平台的数据契约不是自己往图表里塞 ECharts optionthe chart component binds data via dataField / nameField / valueField / groupField and merges into jsOption series也就是说AI 只负责把 data 里的字段名填到组件的绑定属性上由引擎去组装成 ECharts 配置。这是一条重要的边界——AI 不直接产出渲染层代码它产出的是这个组件的值字段绑到 data 的哪个 key。至于视觉风格配色也在元数据里背景#0a1230、主文字#cfe8ff、标题#7ce7fd、表格表头底#12244d状态三色#67C23A运行/#E6A23C待机/#F56C6C故障。暗色大屏的一整套视觉规范最终都落在元数据的色值字段上。3.3 业务与数据约束它得知道这块屏该看什么还得让数字自洽前两条是能不能摆上去这条是摆上去有没有用。业务侧它自己完成了从行业到指标的拆解定型时间、超喂率、门幅、克重、OEE、吨布能耗……再收敛成五大维度。这不是通用常识能做到的密度说明它拿到的不是大屏这个词的字面理解而是平台知识库里关于看板设计技能与组件 Schema 的规范——第 1 轮它调用的就是ide_aiResourceConfig_api_loadByCode先把技能和知识加载进来再动手。数据侧它自己把账算平了6 台定型机实际产量合计 86.5 万米 指标卡今日产量86.5 万米分组柱形图的系列计划/实际与图例、单位万米自洽饼图数据太少 → 主动扩大统计范围到 12 台设备并重新配平为 9/2/1明细表的门幅、车速、温度都落在染整工艺的合理区间这一条我认为是大屏生成和图表堆砌的真正分界。一张漂亮的屏如果指标卡说产量 86.5 而图表加起来是 120懂业务的人一眼就废了——因为它连数对得上这关都没过。3.4 补一个细节它自己判断了这次是新建还是修改这个点很小但它把前两篇和这篇串起来了。AI 在动手前做了个判定技能与组件知识已学习完毕。当前看板定义为空判定为新建看板。它是先读了当前的看板定义发现是空的才判定新建。反过来如果定义非空它就走的应该是修改流程——也就是第二篇里那套「变更清单」改了什么位置、改前是什么、改后是什么。同一个智能体两个分支定义空 → 生成定义非空 → 修改并交变更清单。这也是为什么这一篇的最终交付物是一份设计说明书说明我要摆什么、摆在哪而上一篇的交付物是一份变更清单说明我动了什么——交付物的形态取决于它是从零出发还是从已有出发。反过来看那些只会重新生成一版的工具它们没有第一个分支的判定所以每次都是推倒重来用户也没法核对自己原来的东西有没有被改动。四、三个场景连起来看是同一套机制在复用把三篇放到一张表里会看到一件比AI 能干什么更重要的事01 生成报表02 修改报表03 生成看板对象报表流式文档布局报表就地修改看板页绝对定位画布输入一句话需求一句话需求一句话需求AI 先做什么加载报表设计技能与组件 Schema加载技能 读取当前报表定义加载看板设计技能与组件知识并判定新建/修改过程中自检排放源口径、图表选型改动与既有结构自洽补数据字段元素重叠验算 数值自洽交付物一份完整的报表定义一份变更清单一份设计说明书产物形态设计器元数据组件 JSON设计器元数据增量修改看板页元数据绝对定位组件树接管方式画布上继续拖拽编辑画布上继续拖拽编辑属性面板直接改 X/Y/宽高/绑定三件事的共同点只有一句话AI 的输出始终落在引擎的元数据里。这正是我最想说的那个判断——这不是模型变强了是元数据架构给的红利。如果 AI 面对的是裸代码或一张截图它会遇到三个过不去的坎坎裸代码/截图引擎元数据它知道该动哪吗要在成千上万行里找它知道那是某个组件的某个属性它知道有没有摆歪吗看不出来“看起来还行”有坐标就能算重叠、算越界用户能核对吗靠肉眼 diff属性面板 / 编辑 JSON原生功能就能看第三行这次体现得最直观——视频里有一个镜头选中 KPI 组件后右侧属性面板直接列出 X 坐标、Y 坐标、宽度、高度、文本绑定todayOutput、字号、字色。也就是说AI 画完的东西用户能接着改改的方式跟人自己画的完全一样。AI 不是吐出一个能看不能碰的成品它交的是半成品只不过这个半成品已经是能跑的了。五、安全机制还是同一套第三篇了机制没变只对一下号机制本次演示中的体现接口白名单读知识走ide_aiResourceConfig_api_loadByCode保存走saveDashboardDefinition——都在平台登记范围内AI 不能直接改库用户令牌每次调用带当前用户令牌AI 以用户身份而非管理员身份运行远程调用 令牌校验代码注释原话「必须采用远程调用启用令牌校验防止 AI 越权」轮次上限有maxRounds兜底不会无限重试烧成本操作留痕每次调用的名称与结果都进日志AI 做了什么可查另外值得留意的一点AI 每次换一个设计器就要按那个设计器的规范干活。报表的绑定语法是 HTML 模板里的${startDate}看板的绑定语法是todayOutput。两套语法、两套 Schema、两个保存接口——而它都按各自的规矩来。这恰好说明它不是在猜是在读平台的规范。六、能力规划全貌截至本文AI 辅助设计仍是三大类里最先落地的一类因为它产出的东西元数据结构化程度最高、最易校验。目前进度分类功能项状态AI 辅助设计AI 生成报表内部开发完成未上线AI 智能体精确修改报表内部开发完成未上线AI 生成看板页内部开发完成未上线AI 生成流程 / 窗体 / 台账页 / 详情页 / H5 页 / 打印格式规划中AI 辅助编程表达式 / 前端脚本 / 后端脚本 / 业务接口规划中AI 辅助建模数据表 / 菜单模块规划中AI 应用开发框架向用户开放可自主开发智能体等 AI 应用规划中说明「AI 智能体精确修改报表」不单独计为规划外的新能力——它是AI 生成报表这个场景下的第二个验证维度生成 修改三大类的 14 项口径不变。截至目前内部跑通的是**报表生成/修改与看板生成**这两个对象上的三个场景。回头看这三篇的顺序其实是照着对象的结构化程度走的报表——元数据最规整、校验规则最明确 → 最先跑通且顺手把修改这个更难的场景也验了看板页——多了绝对定位、装饰组件、深色主题几何约束变重 → 第二个跑通流程 / H5 / 打印格式——交互逻辑与排版约束更复杂 → 还在规划中先挑最容易校验的落不是挑最炫的落。这是这套规划里唯一一条我觉得没得商量的原则。七、诚实边界这次演示没有证明什么局限说明只演示了一种车间、一种尺寸定型车间 1920×1080。换行业离散制造、能源、园区、换分辨率2560×1440、竖屏、异形屏效果不能直接外推数据是 AI 造的演示数据86.5 万米、9/2/1 设备状态、六个订单号全是生成的。业务口径对不对必须由懂业务的人核——它能保证数对得上不能保证数是对的风格只呈现了一种取向深色科技风是最常见的那种大屏不代表它已经能覆盖各种企业 VI、品牌配色要求依赖元数据完整机制成立的前提是页面由设计器配置生成、结构完整。对导入的、结构不规范的历史页面效果不保证没有验证真实数据接入演示用的是样例数据。真实场景要接 EMS / MES / IOT 取数报表能跑通不等于数据链路已经打通未上线见下节八、现在能用上吗——还不能结论不能。AI 辅助设计当前处于内部开发完成、尚未上线的状态。本文是成果演示不是交付说明。事项状态AI 生成报表 / 精确修改报表 / 生成看板页✅ 内部验证通过对外发布❌尚未上线无可用版本无公布时间平台本身的下载与部署✅ 正常可用与 AI 是否上线是两件独立的事如果你看完本文去自己环境里找「AI辅助设计」没找到——那是正常的不是你操作错了。那现在发这篇的意义建议你带走两样可迁移的东西AI 生成的东西能不能被接管这个判断标准看它产出的是不是可以被原生工具继续编辑的结构。AI 画完一块屏你选中一个卡片就能改 X/Y/宽高和改自己画的一样——这才叫生成否则只是出了一张图。数值自洽这个验收点以后拿到任何 AI 生成的数据看板第一件事就是加总核对——指标卡的数字和图表能不能对上。这一关过不了后面全是白搭。如果你关心的是平台本身怎么获取这部分现成可用与 AI 无关产品发布与下载页可获取当前主推版本12 元为 1 天下载会员当天下载的版本永久授权使用含私有化部署不分版本企业版 3,980 元一次买断 366 天会员服务会员期内新版本均可下载、可开票服务支持不中断。⚠️再次提示以上对应的是平台现有能力AI 辅助设计不在其中。现在开通下载会员拿到的版本同样没有这些 AI 功能。九、最后三篇写下来我发现自己反复在回答同一个问题AI 在系统里干活凭什么能被信任第一篇的答案是它输出的东西有结构。第二篇的答案是它把改动讲清楚了。这一篇的答案有点不一样——它自己会验算。Wait time label overlaps main title region? ... fine.这句fine.其实是一个信号AI 在动手之前先给自己立了规矩然后按规矩自检。不许重叠、数值要对得上、只能用组件库里的组件、绑定要走平台契约。让 AI 在系统里干活的难点从来不是它会不干而是它干得没有边界。而边界这件事靠提示词是划不出来的——得靠系统本身有结构、有规范、有可校验的地方。元数据就是这个可校验的地方。互动提问你们公司现在有几块大屏在跑做一块大屏最耗时间的到底是想清楚该看什么指标还是把这些图对齐摆好看——我猜是后者占了七成而后者恰恰是最应该被机器接管的那部分。评论区说说你们的屏是找谁做的、花了多长时间。附件B站演示视频myBuilder AI实验室AI智能体生成看板

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑