平时做组态画面、写监控界面的时候最烦的不是逻辑而是画图。水泵、阀门、管道、液位罐、温度传感器这些图元在传统组态软件里要么从图库里拖要么拿 SVG 一点点对坐标改一个设备位置后面所有连线都要跟着动。尤其到了项目方案阶段业务还没完全定画面先要出几版给业主看这时候每改一版都是体力活。后来我开始用 Claude Code 辅助做 SCADA 监控界面把原先要画半天一晚上的画面压缩到“写需求描述 让 AI 改几轮”的节奏。这篇文章就是基于这段时间的实践经验整理一份完整的实操教程Claude Code 怎么装、怎么用、怎么让它生成工控 HMI/SVG 图元、怎么和 SCADA 前端工程结合起来用。文章会覆盖概念背景、环境安装、完整实战案例、常见报错排查、工程化建议以及一个“100 个案例”的选题规划思路。不管你是做组态软件二次开发还是做 Web SCADA、物联网可视化大屏这套方法都能直接借鉴。1. 背景与核心概念1.1 Claude Code 是什么Claude Code 是 Anthropic 推出的命令行 AI 编程工具它不是一个普通的“聊天生成代码”页面而是可以直接运行在终端环境里、读写项目文件、执行命令、把多文件改动落到磁盘上的 AI Agent。通俗理解就是它不是给你一段代码让你自己粘贴而是能直接帮你改项目里的代码文件、运行测试、查看报错、再修复像一个坐在你终端里的结对程序员。这和我们平时用的网页版 AI 对话工具的区别很明显能力网页版 AIClaude Code生成代码片段支持支持读写本地文件不支持支持执行命令不支持支持跨文件修改手动复制粘贴自动修改运行调试不支持支持对接项目上下文手动粘贴自动读目录结构所以在工控 SCADA 这种“代码文件多、界面元素多、SVG 图形多、需要反复调整”的场景里Claude Code 比网页版 AI 更顺手。1.2 SCADA、HMI、PLC 的关系在做监控界面之前先把几个概念理清楚后面写提示词的时候才不会混淆。SCADA 是数据采集与监控系统Supervisory Control and Data Acquisition它负责把现场 PLC、仪表、传感器采集的数据汇总到上位机并展示在监控画面上同时可以下发控制指令。HMI 是人机界面Human Machine Interface它是 SCADA 系统里“人看和操作”的那部分。SCADA 是整体系统HMI 是其中的画面层。PLC 是现场控制器它直接连接传感器和执行机构HMI 和 SCADA 都不直接和物理设备打交道而是通过通信协议和 PLC 交互。所以在“用 Claude Code 做监控界面”这个任务里我们的核心工作其实是做 HMI 层的画面开发包括绘制设备图元布局工艺流程画面绑定实时数据实现报警闪烁、动画效果对接上级 SCADA 平台的数据接口1.3 为什么用 AI 做 SCADA 界面传统做监控画面的方式有几种用组态软件WinCC、组态王、力控等自带的图库和画布优点是拖拽方便缺点是图元风格老旧、界面做出来千篇一律。用 Web 技术Vue/React SVG/Canvas写自定义 HMI优点是可以做得很现代缺点是 SVG 坐标计算复杂画一个阀门来回改坐标很痛苦。直接买商业图库能解决一部分图元问题但价格不便宜而且风格未必适配。AI 介入之后最大的变化是图元生成和界面布局可以“用自然语言描述”AI 帮你写 SVG、写布局代码、写交互逻辑你再在 AI 生成的结果上微调。这样哪怕你不擅长手绘图形也能快速产出高质量的画面。2. 环境准备与安装 Claude Code2.1 安装前提Claude Code 是命令行工具安装前建议先确认以下几点操作系统Windows、macOS、Linux 都支持但不同系统的安装方式略有差异。这里以最常用的 Windows 和 Linux 服务器两种环境做说明。Node.jsClaude Code 原生安装依赖 Node.js 18 以上版本。如果本机还没有 Node.js需要先安装。Claude 账号需要能访问 Claude 服务的 Anthropic 账号同时需要通过 Claude Code 的授权登录。注意不同区域的账号权限可能会有差异实际以你账号下的显示为准。Git虽然是可选项但建议安装 Git。因为后面实际开发时会需要管理版本而且 Claude Code 在读取项目文件时配合 Git 能更好地跟踪改动。版本这块要特别说明一下Claude Code 迭代非常快命令、配置项、权限模型都在持续变化。下面给出的安装命令只能保证是当前阶段常用的方式如果你看到的版本界面不同以官方最新文档为准。2.2 安装步骤Windows / Linux如果你使用的是 Windows PowerShell先确认 Node.js 版本node -v npm -v如果输出正常接着用 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后验证是否装好claude --version如果你在 PowerShell 下执行claude --version时提示“无法加载 claude因为在此系统上禁止运行脚本”说明 PowerShell 执行策略限制了脚本运行可以当前用户放开限制Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser这个方法只影响当前用户不会影响系统级安全策略。放开后再执行claude --version如果你用的是 Linux 服务器很多工控上位机就是 Linux 环境同样先装好 Node.js然后执行相同的 npm 安装命令。如果是在内网环境没有外网 npm 源需要搭建本地 npm 私服代理或者提前下载好离线包这个根据你们公司的内网策略来。2.3 授权登录与基本验证第一次运行 Claude Code会进入授权登录流程claude按照终端里的提示完成登录授权。授权完成后你会进入一个交互式命令行对话界面。可以先问一句最简单的话帮我写一个 hello world如果 Claude Code 正常返回并生成了文件说明环境已经没问题了。2.4 在 VSCode 中使用 Claude Code除了纯终端模式Claude Code 也可以配合 VSCode 使用。你可以在 VSCode 的终端里直接运行claude这样既能用 VSCode 看代码又能在下方终端里和 AI 交互。也可以关注官方是否有对应的 VSCode 插件或桌面版桌面版对不熟悉命令行的人来说更友好。配置方式都在不断更新建议直接参考官方仓库里的 README。3. 用 Claude Code 做 SCADA 监控界面的整体思路3.1 明确你的交付物动手之前先想清楚你要让 AI 产出什么工控监控界面的交付物一般分三类第一类是静态 SVG 图元。比如一个水泵、一个阀门、一个电机以 SVG 文件形式存在后续可以手动或程序化拼装到上位机画面里。第二类是完整 HTML/HMI 页面。比如一个泵站监控页面包含工艺流程图、实时数据标签、报警列表。这类页面用于 Web SCADA 系统或可视化大屏。第三类是组态软件脚本。有些传统组态软件支持脚本语言你可以在上位机里写脚本控制动画效果。Claude Code 无法替你做组态软件里拖拽图元那一步但可以辅助生成脚本逻辑。我用 Claude Code 主要是做第一类和第二类。下面内容也围绕这两类展开。3.2 把监控界面需求拆成提示词要让 AI 做得又快又好关键不是“拼命描述你要什么”而是把需求拆成可执行的小任务。一个完整的监控页面可以拆成下面这些子任务页面布局结构顶部标题栏、左侧菜单、中间工艺画面区、底部报警信息栏工艺流程图水池、水泵、管道、阀门的 SVG 布局数据展示标签、数值、单位、数据刷新逻辑交互逻辑点击设备弹窗、开关控制按钮报警状态颜色变化、闪烁效果拆好之后挨个让 Claude Code 实现而不是一次把所有需求都塞给它。3.3 提示词示例让 AI 生成一个水泵图元先来看一个最简单的图元生成提示词帮我生成一个工业用的水泵 SVG 图元要求 1. 画布 100x100 2. 水泵主体是一个圆形中间有叶轮 3. 进出口是左右两个短管 4. 颜色使用工业灰和蓝色 5. 代码精简不要复杂滤镜Claude Code 会生成类似下面的 SVGsvg xmlnshttp://www.w3.org/2000/svg width100 height100 viewBox0 0 100 100 !-- 水泵主体 -- circle cx50 cy50 r30 fill#F0F0F0 stroke#333 stroke-width3/ !-- 叶轮 -- path dM50 50 L62 38 A20 20 0 0 1 62 62 Z fill#4A90D9 stroke#2C5F8A stroke-width1.5/ path dM50 50 L38 62 A20 20 0 0 1 38 38 Z fill#4A90D9 stroke#2C5F8A stroke-width1.5/ !-- 进口管 -- rect x5 y42 width20 height16 fill#666 stroke#333 stroke-width2/ !-- 出口管 -- rect x75 y42 width20 height16 fill#666 stroke#333 stroke-width2/ !-- 转轴中心点 -- circle cx50 cy50 r5 fill#333/ /svg这段代码生成的 SVG 在浏览器里打开就是一个简单的工业水泵图标。它的优点是简单、干净、没有多余元素方便后续通过 JavaScript 操作颜色和动画。3.4 图元规范化是后续复用的关键单独生成几个图元不难难的是让整套图元风格统一、尺寸一致、命名规范。我的做法是让 Claude Code 按固定的规范批量生成图元比如颜色统一从预设色板取色画布尺寸统一为 100x100每个图元文件单独一个 SVG 文件文件命名用英文小写下划线例如pump_centrifugal.svg、valve_butterfly.svg这样一来后续在 Web SCADA 项目中引入时只要写一个通用的动态加载组件就能根据设备类型自动加载对应图元文件不需要每个图元单独写页面。4. 完整实战用 Claude Code 做一个泵站 SCADA 监控页面下面进入核心实战部分。我们的目标是用 Claude Code 生成一个“泵站 SCADA 监控界面 Demo”包含工艺流程图、实时数据、报警提示。先说明一下这个实战的边界这不是一个生产级的 SCADA 系统而是一个可以跑起来的 HMI 前端原型模拟数据来自前端定时器。生产环境里你需要把模拟数据替换成真实的 PLC 数据采集服务比如通过 Modbus TCP、OPC UA 或者 MQTT 接入。4.1 创建项目结构打开终端用 Claude Code 帮我们初始化项目结构创建一个名为 pump-station-hmi 的项目结构如下 - index.html主页面 - assets/css/style.css样式文件 - assets/js/Chart.js数据图表逻辑 - assets/js/app.js主逻辑 - assets/svg/pump_centrifugal.svg单级离心泵图元 - assets/svg/valve_butterfly.svg蝶阀图元Claude Code 会直接在当前目录下创建这些文件夹和占位文件。如果你更习惯自己先手动建好目录也可以mkdir pump-station-hmi cd pump-station-hmi mkdir -p assets/css assets/js assets/svg touch index.html assets/css/style.css assets/js/app.js4.2 让 Claude Code 生成主页面结构启动 Claude Codeclaude然后输入请生成 index.html要求 1. 是泵站 SCADA 监控页面 2. 顶部是标题栏 3. 左侧是工艺流程图包含水箱、水泵、阀门、管道 4. 右侧是实时数据面板 5. 底部是报警列表 6. 直接引用 assets/css/style.css、assets/js/app.js 7. 使用中文界面Claude Code 生成的index.html大致如下实际生成可能有差异这里展示核心结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title泵站 SCADA 监控界面/title link relstylesheet hrefassets/css/style.css /head body header classhmi-header h1泵站 SCADA 监控界面/h1 div classheader-status span classstatus-dot/span span系统运行中/span /div /header div classhmi-container div classprocess-area !-- 工艺流程图将在这里动态渲染 -- div idprocess-view/div /div div classdata-panel h3实时数据/h3 div idreal-time-data/div h3设备控制/h3 div iddevice-control/div /div /div div classalarm-panel h3报警信息/h3 ul idalarm-list/ul /div script srcassets/js/app.js/script /body /html注意生成的代码结构可能会和你预期的细节不一致比如类名、布局比例。这时候不需要手动改浏览器里的效果直接在 Claude Code 对话里继续提要求页面太挤了把工艺流程图区域宽度调整为 70%右侧数据面板宽度调整为 30%中间加一条分隔线。Claude Code 会直接修改index.html和style.css里的对应样式不需要你自己翻文件改。4.3 生成核心 SVG 工艺流程画面工艺流程图是监控页面的核心。我们让 Claude Code 生成包含“水箱—水泵—阀门—管道”的 SVG 画面。请在 index.html 的 #process-view 里放一个 SVG 工艺流程图要求 1. 左侧是一个立式水箱液位 50%颜色为浅蓝色 2. 水箱底部右侧连接一条管道 3. 管道中间串联一台离心泵 4. 泵后连接一个蝶阀 5. 管道末端通向右侧外部 6. 所有设备标注中文名称 7. 设备坐标要合理管线要连贯可以参考 Claude Code 可能生成的 SVG 效果核心代码如下svg idprocess-svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 800 400 width100% height400 !-- 水箱 -- rect x50 y50 width150 height250 fill#E8F4FD stroke#333 stroke-width3 rx5/ rect x50 y175 width150 height125 fill#AED6F1 strokenone/ text x125 y45 text-anchormiddle font-size16水箱/text text x125 y250 text-anchormiddle font-size14 fill#2C3E50液位 50%/text !-- 管道水箱右侧出口到泵入口 -- line x1200 y1175 x2330 y2175 stroke#7F8C8D stroke-width8/ !-- 离心泵 -- circle cx370 cy175 r45 fill#D6EAF8 stroke#2C3E50 stroke-width3/ path dM370 175 L385 160 A30 30 0 0 1 385 190 Z fill#2980B9/ text x370 y235 text-anchormiddle font-size14离心泵/text !-- 管道泵出口到蝶阀 -- line x1415 y1175 x2520 y2175 stroke#7F8C8D stroke-width8/ !-- 蝶阀 -- rect x520 y155 width30 height40 fill#F9E79F stroke#2C3E50 stroke-width3 rx4/ line x1535 y1155 x2535 y2195 stroke#2C3E50 stroke-width2/ text x535 y215 text-anchormiddle font-size14蝶阀/text !-- 管道蝶阀到末端 -- line x1550 y1175 x2700 y2175 stroke#7F8C8D stroke-width8/ !-- 管道末端箭头 -- polygon points700,175 690,165 690,185 fill#7F8C8D/ /svg这段 SVG 描述了一个最简单的工艺画面水箱出来的水经过离心泵加压通过蝶阀后输送到下游。在浏览器里打开页面你可以直接看到设备图元。这时候你就可以把这套“图元组合”的思路固化下来让 Claude Code 先出单设备图元再出管道连线最后叠加标注和动态数据层。4.4 实现实时数据模拟与交互逻辑SCADA 界面不能是死图需要有动态效果。我们让 Claude Code 在app.js里实现以下功能每 2 秒随机更新水箱液位液位超过 85% 时报警点击水泵可以切换启停状态水泵运行时叶轮旋转动画右上角显示通信状态提示词这样写请在 app.js 中实现以下功能 1. 定义全局状态对象包括 pumpRunning、valveOpen、waterLevel 2. 每 2 秒用 setInterval 更新 waterLevel在 30~90 之间变化 3. 根据 waterLevel 更新 SVG 中水箱蓝色液位的高度 4. 点击水泵区域时切换 pumpRunning 状态 5. pumpRunning 为 true 时SVG 中的水泵叶轮加旋转动画 6. 页面顶部显示当前日期时间每秒更新 7. 如果 waterLevel 85在报警列表中新增一条报警记录根据这些要求Claude Code 生成的app.js核心逻辑如下// 全局状态 const state { pumpRunning: false, valveOpen: true, waterLevel: 50 }; // 获取 SVG 中的元素 const svg document.getElementById(process-svg); const tankWater svg.querySelector(#tank-water); // 更新液位 function updateWaterLevel(level) { const maxHeight 250; const height (level / 100) * maxHeight; tankWater.setAttribute(y, 300 - height); tankWater.setAttribute(height, height); document.getElementById(water-level-text).textContent 液位 ${Math.round(level)}%; } // 模拟数据刷新 setInterval(() { state.waterLevel Math.max(30, Math.min(90, state.waterLevel (Math.random() * 10 - 5))); updateWaterLevel(state.waterLevel); if (state.waterLevel 85) { addAlarm(液位高报警, 当前液位 ${Math.round(state.waterLevel)}%); } }, 2000); // 水泵点击事件 document.getElementById(pump-area).addEventListener(click, () { state.pumpRunning !state.pumpRunning; document.getElementById(pump-status-text).textContent state.pumpRunning ? 运行 : 停止; const impeller document.getElementById(pump-impeller); impeller.style.animation state.pumpRunning ? spin 1s linear infinite : none; }); // 报警列表 function addAlarm(message, detail) { const list document.getElementById(alarm-list); const li document.createElement(li); li.textContent [${new Date().toLocaleTimeString()}] ${message}${detail}; list.appendChild(li); } // 时钟显示 setInterval(() { document.getElementById(clock).textContent new Date().toLocaleString(zh-CN); }, 1000);注意这里的叶轮旋转需要配合一个 CSS 旋转动画。可以把下面的样式加到style.csskeyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }同时SVG 里的叶轮元素需要加上idpump-impeller并且设置transform-origin为叶轮中心点。因为 SVG 元素的变换默认基于原点所以要专门指定#pump-impeller { transform-origin: 370px 175px; }如果你发现点击水泵时动画效果没有出现优先检查叶轮元素的 id 是否匹配、CSS 里的 transform-origin 是否对准了叶轮的圆心。4.5 运行与验证所有文件生成完毕后在项目根目录用浏览器打开index.html即可查看效果。如果你安装了 VSCode 的 Live Server 插件也可以右键index.html- Open with Live Server启动本地静态服务浏览器访问 http://127.0.0.1:5500 查看。如果页面空白打开 F12 控制台优先看以下报错Cannot read properties of null (reading setAttribute)说明 JS 里引用的 SVG 元素 id 不存在检查app.js里的 id 是否和index.html的 SVG 元素一致。Failed to load resource: 404说明引用的 CSS 或 JS 文件路径不对检查index.html里的相对路径。只要这三个文件的路径和引用关系正确页面应该能正常显示工艺流程图和数据面板。5. 常见问题与排查思路在 Windows 环境、Linux 环境和项目开发过程中我整理了几类高频问题按现象、原因、解决思路列成表格问题现象常见原因解决思路claude命令无法识别Node.js 未安装或未加入 PATH执行node -v检查 Node.js重装后重新打开终端PowerShell 提示禁止运行脚本当前 PowerShell 执行策略为 Restricted执行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser安装时报 npm 权限错误npm 全局目录权限不足使用管理员终端安装或配置本地 npm 目录Claude Code 卡在登录授权网络无法访问授权页面检查代理和网络策略必要时配置允许名单AI 生成的 SVG 坐标不对齐提示词里没有明确画布尺寸和坐标要求每次生成前先约定画布大小和坐标系AI 生成的管道线不连贯设备图元是分别生成的坐标衔接不紧密先画整体布局再拆子图元或者让 AI 先生成整图再拆浏览器打开 HTML 是空白JS 报错导致渲染中断F12 打开控制台根据报错逐条修复叶轮动画不转transform-origin没有设置或 id 不匹配确认 CSS 中 transform-origin 对准叶轮圆心液位不变化setInterval 被浏览器拦截或元素 id 错误确认不是休眠标签页并检查元素选择器是否为空页面样式乱CSS 文件没有正确加载检查link标签的 href 路径确认大小写一致除了这些还有一个高频问题是“AI 生成的代码和我的项目框架不匹配”。比如你的 SCADA 项目用的是 Vue 或 React不是原生 HTML那 Claude Code 生成的index.html就不能直接嵌入。解决办法不是让 AI 重新写整个项目而是让它先读取你项目的目录结构和组件文件再改成对应的组件方式。比如 React 项目里可以这样提示这是一个 React TypeScript 项目请读取 src 目录结构然后在 src/views/PumpStation.tsx 里实现一个泵站监控组件复用已有的 SVG 图元样式从 assets/scss 中引入。Claude Code 会先看项目结构再按你项目的技术规范生成代码而不是继续生成独立的 HTML 页面。6. 用 Claude Code 做 SCADA 界面的最佳实践6.1 提示词规范从模糊到精确用过一段时间 Claude Code 之后我最大的感受是它的输出质量直接取决于输入的约束程度。“画一条管道” 和 “从水箱右侧出口坐标 200,175到离心泵入口坐标 330,175画一条 8px 宽的灰色管道两端不留空隙” 的产出结果是完全不同的。写提示词的时候建议遵循 4 个要素位置在哪个文件里操作目标要生成什么功能约束颜色、尺寸、命名、风格验收怎么判断完成一个标准提示词的模板如下文件{文件路径} 任务{要做什么} 约束{颜色、尺寸、单位、命名规则、禁止事项} 验收{要能看到什么效果/运行什么命令}6.2 建立可复用的 SVG 图元库在实际工控项目里图元库是资产。如果每次做项目都重新让 AI 画一遍图元效率提升有限。正确做法是第一用 Claude Code 批量生成一批标准化图元统一画布尺寸 100x100统一风格。第二把图元按设备类型分类管理assets/svg/ ├── pump/ │ ├── pump_centrifugal.svg │ ├── pump_vacuum.svg │ └── pump_dosing.svg ├── valve/ │ ├── valve_butterfly.svg │ ├── valve_gate.svg │ ├── valve_ball.svg │ └── valve_check.svg ├── tank/ │ ├── tank_vertical.svg │ ├── tank_horizontal.svg │ └── tank_spherical.svg └── sensor/ ├── sensor_temperature.svg ├── sensor_pressure.svg └── sensor_flow.svg第三把标准 svg 文件复制到不同项目里共用。需要改颜色时用 Claude Code 全局替换而不是打开 SVG 手动改十几个文件的 fill 属性。6.3 让 AI 先生成整体再拆模块在画联动比较多的流程画面时不要一开始就让它“生成一个水泵、一个阀门、一个水箱”然后自己拼那样容易对不齐。更好的策略是先让 AI 画完整画面的 SVG不带交互动态效果。确认布局、管道连线、设备位置都满意后。再让 AI 把整段 SVG 拆成独立文件。最后再逐步添加交互逻辑。这样做的原因是AI 在生成“整体画面”时会自己规划坐标设备和管道之间的衔接是连贯的。如果先生成零散图元再拼接坐标完全对不上反而要花大量时间去矫正。6.4 生产环境的数据接入边界务必记住一条Claude Code 生成的是 HMI 画面层不是 SCADA 的数据采集层。生产环境中画面上的数据必须来自 PLC 或数采服务。常见接入方式有Modbus TCP很多 PLC 支持简单成熟。OPC UA现代化、跨平台适合大型 SCADA 架构。MQTT适合物联网场景设备数据推送到 BrokerWeb HMI 订阅。数据库轮询从实时数据库如 InfluxDB、TDengine查最新数据。在实际项目中前端画面应该通过 WebSocket 或 HTTP 接口和上位机后端通信而不是像 Demo 里那样前端定时器自己造数据。这一点在项目交付时尤其重要避免出现“演示环境能跑接现场数据就不动”的尴尬场面。6.5 版本管理与回滚使用 Claude Code 修改文件时它会直接改动磁盘上的文件。这个时候如果不用 Git一旦改错或者改到一半不满意想回到之前的版本就很麻烦。强烈建议在项目里初始化 Gitgit init git add . git commit -m 初始项目结构接下来每次让 Claude Code 完成一批修改后都先人工检查核心改动再提交一次git add . git commit -m 生成泵站监控画面V1这样即使 AI 改出一堆问题也可以通过git diff查看具体改了什么用git checkout回滚到上一个稳定版本。对于工控项目这种需要稳定优先的场景版本管理不是可选项而是必须项。7. “100 个案例”选题规划与扩展方向既然这篇文章的目标是“用 AI 做工控 SCADA 监控界面”我顺便把后续会持续产出的“100 个案例”方向整理一下。这既是我自己的选题规划也可以给你做一个参考。7.1 按行业划分每个行业的工艺流程不同监控画面的元素也不同可以做一批行业案例污水处理提升泵房、鼓风机房、沉淀池、加药间水处理与供水取水泵站、水厂过滤、加压泵站、管网监测热力管网换热站、一次网、二次网、循环泵水利泵站闸门、水泵、液位、流量、雨量光伏电站逆变器、汇流箱、箱变、电表工厂产线传送带、电机、传感器、阀门7.2 按功能模块划分图元库生成水泵系列、阀门系列、罐体系列、仪表系列动画效果管道流动效果、雷达扫描、报警闪烁、旋转动画数据面板实时曲线、棒图、仪表盘、趋势分析报警管理报警条、历史报警、报警确认、声音提示权限与操作登录页、操作按钮、操作日志大屏展示数据大屏、GIS 地图、设备分布图7.3 按提示词技巧划分20 个常用图元提示词模板15 个流程画面布局提示词10 个动画效果提示词10 个数据面板提示词5 个大屏场景提示词通过这种“行业 功能 提示词技巧”的矩阵组合100 个案例能形成一套完整的知识库。每篇文章都以可复现的代码作为核心读者可以直接把 SVG 或 HTML 文件拿到自己的项目里改。7.4 从 Demo 走向生产系统再往下走单纯的前端展示就不够了需要逐步深入接入真实协议实现一个 Node.js 或 Python 的 Modbus TCP 数据采集服务把 PLC 寄存器读到的数据通过 WebSocket 推给 HMI。数据存储用 TDengine 或 InfluxDB 存历史数据HMI 上能拉取历史曲线。多画面管理参考组态软件的做法做一个画面切换器支持流程图、曲线图、报表页互相跳转。权限系统登录、不同角色看到不同操作按钮。告警推送短信、钉钉、企业微信机器人报警通知。这些内容适合作为后续案例的进阶方向。8. 一些工程上的提醒最后补充几条偏工程实践的建议。第一现场环境通常和开发环境不一样。你在自己电脑上生成的页面到了客户现场可能运行在一台老旧工控机上浏览器还是老旧版本。开发时尽量避免使用太新的 CSS 或 JavaScript 特性如果不确定兼容性用 Claude Code 生成代码时可以在提示词里加一句“兼容 Chrome 80 及以上浏览器”。第二工控网络安全原则不能因为“用 AI 提速”就打折扣。涉及设备控制的界面必须有操作确认机制所有控制指令必须通过上位机服务端下发而不是直接从前端页面发到 PLC不要在画面里硬编码任何密码或 token。第三所有历史数据的展示逻辑尽量走后端接口。不要让前端 AI 生成的代码直接访问生产数据库数据访问的鉴权和频控应该统一在后端完成。第四关于 Claude Code 本身的能力边界。它很擅长写代码、改文件、重构、生成 SVG但在工控项目中它无法替代你确认工艺是否正确、数据点表是否完整、联动逻辑是否符合现场要求。AI 生成的画面是“展示层”底层的设备点表、控制逻辑、联锁条件仍然需要工程师自己验证。越是核心的控制逻辑越不能盲信 AI 自动生成的代码。我最近还在做一件比较有意思的事把常用的图元提示词整理成一套“工控 HMI 提示词模板库”每次开始新项目时不用重新组织语言直接把模板里的设备类型、行业前缀、颜色风格替换一下就能快速生成一批风格统一的画面。这样用 Claude Code 就不再是一次性玩具而是慢慢变成团队里可以复用的生产力工具。