跳到主要内容
版本：Next

3.4、AI页面助手

AI页面助手通过自然语言描述需求，自动生成布局专业、元素齐全的工业监控页面、HMI 操控页面与数据看板。生成范围可选择单页面，也可生成包含页面跳转的多页面系统；生成前还能设置风格偏好，让同一工程的页面保持统一风格。对于产线总览、流程监控等场景，还可生成符合工艺关系的流程图，并在保存时拆解为可继续编辑的 CMS 设备图片、管道、标签和测点组件。生成结果支持预览、微调、保存为 CMS 页面，并可衔接智能绑定完成变量接入，帮助工程师快速完成监控页面类工程开发。

3.4.1、功能说明​

  • 多模态输入构建页面：支持通过自然语言描述页面 "主题（用途）、视觉风格（可选）、核心内容（需展示的数据 / 元素）" ，也可以上传需求附件或参考图、选择页面模版、选择素材资源。AI会参考模版、图片和素材信息生成页面。
  • 风格偏好设置：生成前可选择页面风格，选择后会自动沿用到后续生成的页面，无需重复描述，确保所有页面生成保持风格的一致性。
  • 双模式按需生成：
    • 快速模式：AI 智能补全上下文缺失细节，提供快速的页面生成体验。适用于方案前期的快速构思、概念验证与原型探索。
    • 引导模式：基于可视化卡片交互智能引导用户完善配置，并在生成前提供方案确认与调整环节，确保交付结果与业务意图精准对齐。适用于标准严格、需求明确的工程交付场景。
  • 生成范围可控：生成前可选择单页面或多页面。单页面只生成一个主页面，速度更快、消耗更低，适合快速体验、方案验证或在现有工程中扩展页面；多页面可根据需求生成一个或多个页面及页面跳转，适合搭建完整系统。生成范围在首次发送需求后锁定，避免 AI 因“系统”“平台”“操控台”等描述误判生成页数。
  • 多类型页面生成：AI页面助手可根据用户需求，混搭图表、控制、显示、状态四大类组件生成页面，支持分析看板、HMI 、报表以及多种组件组合的复合页面。
  • 工艺流程图生成与组件化转换：当用户明确提出“工艺流程图”“产线总览”“流程监控”，页面助手可识别行业、工艺、设备、管道、介质与流向，生成流程图并应用到页面中。保存到 CMS 时，可进一步拆解为设备图片、管道、文字标签和测点占位等可编辑组件；
  • 素材资源引用：生成页面时可直接引用用户已选择的素材资源，包括设备图、3D 模型等。
  • 智能局部重构：支持对已生成页面进行精细化调整。用户可自由框选页面内的特定区域，通过自然语言指令驱动 AI 快速完成局部组件的定向重构与样式优化。
  • 无缝对接生产环境：生成的页面涵盖实时数据展示（如电流、电压、生产计数）、设备状态反馈、控制交互元素和素材资源展示，可从 HTML 预览保存并转换为 CMS 页面组件。工程师仅需根据实际工程需求进行简单微调（如组件位置、颜色调整、变量绑定确认）即可投入使用。

3.4.2、核心优势​

1. 工程效率跃升​

监控页面设计周期从传统 "小时级" 缩短至 "分钟级"，大幅加快工程交付进度。

效率对比：

页面类型传统开发AI生成积分消耗效率提升
简单监控页（10-20个组件）2-3小时3-5分钟20积分/次提升95%
标准看板（30-50个组件）4-6小时5-10分钟20积分/次提升96%
复杂大屏（50+个组件）1-2天10-20分钟30积分/次提升97%
成本效益

按人工成本计算，节省1小时的开发时间价值远超20积分的成本。AI生成不仅提升效率，更能显著降低项目成本。

2. 开发零门槛​

OT工程师无需掌握UI设计或前端开发技能，仅通过自然语言描述需求即可完成专业页面开发。

传统方式 vs AI方式：

传统方式：
学习UI设计 → 学习组件库 → 手动拖拽布局 → 调整样式 → 配置属性
需要：设计能力 + 技术能力 + 大量时间

AI方式：
描述需求 → AI生成 → 简单微调
需要：清晰表达需求的能力

3. 页面风格统一​

生成前可设置风格偏好，一次选择即可在后续生成中持续生效，减少页面之间的明暗、主色和组件样式漂移。当需求中存在多处风格信息时，按 "用户输入框中的明确要求 ＞ 风格偏好 ＞ 页面模板 ＞ 参考图 ＞ AI 自动补全" 的顺序合并。

4. 从页面预览到工程落地​

AI页面助手不只生成静态效果图，还支持将页面预览中的组件转换为 CMS 原生组件，并与变量智能绑定衔接。对于 HMI 操控页，显示类、控制类和状态类组件可以进入后续绑定流程，减少从设计稿到可运行页面之间的重复配置。

3.4.3、典型使用场景​

场景一：工程方案快速验证​

背景：项目投标阶段需向客户展示界面原型，或内部评审新看板布局。

传统方式：

  • 设计师出设计稿：1-2天
  • 开发人员实现原型：2-3天
  • 总计：3-5天

AI方式：

  • 输入需求："创建产线整体看板，包含OEE、产量趋势和设备状态列表"
  • AI生成高保真页面：5分钟
  • 微调优化：10-20分钟
  • 总计：30分钟内

价值：助力工程方案快速沟通与迭代，提升投标成功率。

场景二：复杂页面工程快速启动​

背景：开发含工艺计算、多数据处理的功能页面。

策略：

  1. 先用AI生成页面"骨架"：

    创建配方管理页面，包含：
    - 左侧：配方列表（表格）
    - 中间：参数输入区（10个输入框）
    - 右侧：实时数据显示区（5个数值框）
    - 底部：保存、加载、删除按钮

  2. AI生成基础布局和组件

  3. 工程师专注于后台逻辑和功能实现

价值：减少前端布局耗时，让工程师聚焦核心业务逻辑。

场景三：多页面工程标准化构建​

背景：为生产车间创建数个同类设备监控页。

步骤：

  1. 在首次发送需求前，将生成范围选择为“多页面”

  2. 准备统一的"风格提示词"：

    工业灰风格，高亮色为青色，卡片式布局，
    标题字体18px，数据字体24px加粗

  3. 在提示词中明确页面清单，并包含统一风格描述：

    工业灰风格，高亮色为青色，卡片式布局，
    标题字体18px，数据字体24px加粗。
    创建注塑车间首页，以及注塑机1号、2号、3号监控页，
    每个设备页面包含温度、压力、周期时间、产量计数，
    页面上设计导航栏可以相互跳转

  4. 在预览中检查页面数量、页面跳转和视觉一致性

效果：

  • 大部分页面布局、字体、颜色保持一致
  • 5个页面从1天缩短到1小时
  • 降低工程标准化成本

场景四：HMI 操控页面快速生成​

背景：设备操作页面需要同时包含参数显示、状态指示、操作按钮和报警信息，传统方式需要工程师逐个拖拽组件并配置样式。

AI方式：

  • 输入需求："生成一张注塑机 HMI 操控页面，包含参数监控、运行监控、系统操作、当前报警和手动调试区"
  • AI 自动混搭显示、控制、状态类组件
  • 在预览中确认布局后保存为 CMS 页面
  • 使用智能绑定完成读写变量绑定

价值：快速搭建可继续配置的 HMI 页面骨架，减少组件选择、布局和基础样式配置时间。

场景五：工艺流程总览页面生成​

背景：水处理、氢能、空压站、锅炉或冷站等项目需要展示设备连接、管道流向、介质颜色、工艺段和关键测点，传统方式需要逐个绘制设备与管线。

AI方式：

  1. 输入工艺关系，或上传现有流程图作为参考：

    创建一张水处理系统的 SCADA 工艺总览页面，
    工艺流程为原水池 → 原水泵 → 多介质过滤器 → 活性炭过滤器 → 清水池。
    用蓝色管道表示原水和清水，标注流向，
    展示各水池液位、泵运行状态、进出口压力和瞬时流量，
    右侧增加当前报警和系统启停操作区。

  2. AI 识别设备、主管线、介质、流向和测点，生成流程图及完整页面

  3. 在预览中核对工艺关系、设备位置、管道颜色和流向

  4. 保存到 CMS，将流程图拆解为设备图片、管道、标签和测点组件

价值：减少工业流程图从需求梳理、设备排布、管线绘制到 CMS 组件重建的重复工作，快速获得可继续配置的工艺总览页面。

3.4.4、5分钟快速上手​

步骤1：打开AI页面助手​

在页面编辑器中，点击右上角的"AI助手"按钮，或在新建页面时选择"AI生成"。

image-20260515184852199

步骤2：明确生成范围、需求与模式​

首次发送需求前，先选择快速模式（AI自动补齐需求）或引导模式（AI卡片交互提问补充需求）。 在对话框中输入页面需求，也可以上传需求附件或参考图、选择页面模版、选择素材资源。例如：

创建一个注塑机监控页面，深色科技风格，
包含：
- 实时温度曲线图
- 压力仪表盘
- 生产计数显示
- 设备状态指示灯
- 启动/停止按钮

选择生成模式：

引导模式

然后选择页面生成范围：

页面生成范围

  • 单页面：只生成一个主页面，速度快、消耗低，适合快速体验、方案验证或页面扩展
  • 多页面：根据需求生成一个或多个页面和跳转关系，适合完整系统

发送第一条需求后，当前会话的生成范围会被锁定。如需切换，请关闭当前窗口并开启新会话后重新选择。

生成前还可以设置风格偏好：

风格偏好设置

  • 风格预设：从风格示例中选择符合自己需求的页面风格
  • 选择后会沿用到后续生成的页面，无需重复设置

单个页面如果对颜色有特殊要求，直接在需求输入框中说明即可，不会改变整体的风格偏好。

也可根据需求上传参考图、选择参考模版或选择设备资源：

AI页面助手

如果需要生成工艺流程图，建议在需求中明确工艺对象、设备上下游关系、管道介质、流向、关键测点和控制区域；也可以上传已有 P&ID、SCADA 截图或工艺示意图作为参考。

步骤3：等待AI生成​

AI会在30～60秒内分析需求并生成页面，生成过程中会显示进度提示。若已选择素材资源，AI 会在页面中引用并生成对应展示区域。涉及工艺流程图时，AI 还会识别工艺关系、生成流程图并组织配套的状态、控制、报警和参数区域，请根据进度提示耐心等待。

步骤4：预览和微调​

  • 查看生成的页面效果
  • 如需调整，可以：
    • 选中指定区域，通过对话的方式让AI修改
    • 选中素材资源区域，让AI调整位置、尺寸或展示方式
    • 或继续与AI对话进行整体优化

步骤5：保存为 CMS 页面​

确认预览效果后，将页面保存为 CMS 页面。页面中的 HTML 预览内容会转换为可继续编辑的 CMS 页面组件。工艺流程图页面保存时会显示转换进度，并将设备、管道、标签和测点拆解为 CMS 组件；转换期间页面和相关按钮暂时不可操作。

步骤6：智能绑定数据​

点击"开始智能绑定"，让AI自动匹配变量到组件，详见AI智能绑定。

3.4.5、提问技巧（快速生成优质页面）​

技巧一：基础标准页面生成公式​

公式：主题（页面用途）+ 风格（可选）+ 核心内容（需展示的数据 / 元素）

示例1 - 简单监控页：

创建一个机器人焊接工作站的监控页，
深色科技风格，
包含实时焊接电流图表、电压曲线、生产计数显示和设备状态指示灯。

示例2 - 生产看板：

创建一个产线整体看板，
卡片式布局，蓝色主题，
包含OEE仪表盘、产量趋势折线图、设备状态列表、报警信息滚动条。

示例3 - 数据分析页：

创建一个能耗分析页面，
浅色简洁风格，
包含日/月/年能耗对比柱状图、各设备能耗占比饼图、
实时功率曲线、能耗排名表格。

技巧二：大屏定制页面生成公式​

公式：主题 + 风格 + 布局结构（屏幕分区）+ 详细元素（每个区域的图表 / 数据）

示例 - 1920x1080大屏：

为1920x1080屏幕设计一个冲压机监控页，
工业灰风格，高亮色为橙色；

页面分为左、中、右三列：
- 左侧（宽度30%）：用仪表盘显示OEE，下方显示设备状态卡片
- 中间（宽度40%）：顶部显示设备名称，中间用折线图显示实时压力曲线，
  底部显示当前工单信息
- 右侧（宽度30%）：用表格显示历史故障记录，最多显示10条

所有文字使用微软雅黑，标题18px，数据24px加粗。

image-20251025210628071-4c3e94480dfa565689ae43bf2c94168c

技巧三：使用参考风格​

如果有喜欢的页面风格，可以描述参考对象：

创建一个类似特斯拉工厂监控风格的页面，
极简黑白配色，科技感强，
包含已选设备资源展示、实时数据流动效果、
关键指标大数字显示

技巧四：生成 HMI 操控页面​

公式：设备对象 + HMI 功能区 + 读写组件 + 状态和报警要求

示例 - HMI 操控页：

创建一张 1920x1080 的注塑机 HMI 操控页面，
深色工业风格，
包含参数监控、运行监控、系统操作、当前报警、手动调试、参数设置。

参数监控中展示温度、压力、速度、产量等实时数值；
系统操作区包含启动、停止、复位、清零、报警解除按钮；
状态区用指示灯显示运行、停止、故障状态；
参数设置区包含温度设定和速度设定输入框。

3.4.6、常见问题​

Q1: AI生成的页面不符合预期怎么办？​

A: 可以尝试：

  1. 重新描述需求：使用更具体、更清晰的语言
  2. 分步骤生成：先生成基础布局，再逐步完善
  3. 提供参考：描述类似的页面风格或参考对象
  4. 手动微调：在AI生成的基础上手动调整

Q2: 如何让多个页面保持统一风格？​

A:

  1. 第一次生成时，详细描述风格要求
  2. 保存这段"风格提示词"
  3. 后续生成其他页面时，复用这段提示词
  4. 只修改具体内容部分，保持风格描述不变

Q3: AI生成的组件可以修改吗？​

A: 完全可以。如果对生成的页面不满意，您可以选中指定区域，通过对话的方式让AI直接进行修改。此外，AI生成的页面也是标准的CMS页面，您还可以手动进行：

  • 拖拽调整组件位置和大小
  • 修改组件属性（颜色、字体、样式等）
  • 添加或删除组件
  • 修改数据绑定

Q4: 生成的页面可以保存为模板吗？​

A: 可以。生成并优化好的页面可以保存为模板，供后续项目复用。

Q5: AI支持生成移动端页面吗？​

A: 支持。在描述需求时，指定"移动端"或"手机端"，并说明屏幕尺寸，AI会生成适配移动端的页面布局。

Q6: AI支持生成 HMI 操控页面吗？​

A: 支持。您可以明确描述需要的功能区和组件类型，例如参数监控、运行监控、系统操作、手动调试、参数设置、报警记录等。AI会根据需求组合显示类、控制类和状态类组件，生成可继续转换和绑定的页面。

Q7: 素材资源怎么放到生成页面里？​

A: 在输入需求时，通过"选择素材"选择需要引用的资源即可，例如设备图、3D 模型等。AI会将已选择的素材资源应用到生成页面中。

Q8: HTML 预览和 CMS 页面是什么关系？​

A: AI会先生成可预览的页面效果。确认后保存为 CMS 页面时，页面内容会转换为 CMS 原生组件。转换后可以继续编辑组件属性、调整布局，并配合智能绑定完成变量绑定。

Q9: 什么情况下会生成工艺流程图？​

A: 当您明确要求生成工艺流程图、产线总览或流程监控页面，选择 HMI 操作界面、SCADA 组态总览等页面类型，或描述了设备上下游连接关系时，AI 会生成工艺流程图。普通看板或无流程关系的页面不会被强制添加流程图。

Q10: 工艺流程图保存后还能编辑吗？​

A: 可以。保存到 CMS 时，系统会尽量将设备、管道、标签和测点转换为独立组件，便于调整位置、样式和数据绑定；同时保留整张流程图作为兜底背景。保存后应人工核对设备连接、管道流向、介质颜色和组件拆解结果。

Q11: 如何控制只生成一个页面或生成多个页面？​

A: 在首次发送需求前选择生成范围。选择“单页面”时，即使需求中包含多个页面，AI 也只生成一个主页面，并优先识别首页、总览、大屏、工作台或最具代表性的业务入口；选择“多页面”时，页面助手才会根据需求生成多个页面和页面跳转。首次发送后生成范围会被锁定，如需切换请关闭当前窗口并开启新会话。

3.4.7、最佳实践​

1. 先简单后复杂​

第一次使用时，从简单页面开始，熟悉AI的能力和风格后，再尝试复杂页面。这样既能快速上手，也能避免在复杂需求上浪费积分。

2. 建立提示词库​

将常用的、效果好的提示词保存下来，建立团队的提示词库，提升团队整体效率。

3. 首次发送前确认生成范围​

快速验证一个页面时选择单页面；需要完整系统、多个功能模块和页面跳转时选择多页面。生成范围在首次发送后会被锁定，因此提交需求前应先确认，避免因页面数量不符合预期而增加等待时间和积分消耗。

4. 善用迭代优化​

如果一次生成不满意，可以继续与AI对话进行调整。但要注意，每次对话都会消耗20/30积分，建议：

  • 尽量在第一次就描述清楚完整需求
  • 如果需要调整，一次性说明所有修改点：
"请做以下调整：
1. 把左侧的图表改为仪表盘
2. 增加一个报警信息滚动条
3. 调整为深色主题"
  • 避免多次单独修改，节省积分

5. 结合智能绑定​

页面生成后，立即使用AI智能绑定完成变量绑定，实现端到端的快速开发。

6. 测试验证​

生成的页面在投入生产前，务必在测试环境中验证：

  • 检查布局在不同分辨率下的显示效果
  • 验证数据绑定是否正确
  • 验证控制类组件是否只绑定到正确的写入变量
  • 检查引用的素材资源在运行态是否正常显示
  • 对工艺流程图页面，核对设备上下游关系、主管线与支路、介质颜色、流向和关键测点是否符合现场工艺
  • 检查流程图拆解后的设备图片、管道、标签和测点组件是否完整，整图兜底背景是否正常
  • 测试交互功能是否正常

3.4.8、下一步​

  • AI变量助手 - 页面生成能力掌握后，下一步学习变量创建与点表导入，为页面绑定准备真实数据来源。
  • AI建表助手 - 变量准备完成后，继续学习历史归档、统计表和业务数据表配置。
  • AI智能绑定 - 当页面和变量都准备好后，学习如何把页面组件与变量快速绑定。
  • API对接助手 - 当页面需要展示 MES、ERP 或云平台接口数据时，继续学习 API 互联配置。