用Claude Code从零搭建SCADA监控大屏：AI生成HMI界面实战

Claude Code 在工控圈最近关注度涨得很快。这类终端里跑起来的 AI 编程代理最大的价值不只是帮你写函数而是能根据一段自然语言描述直接生成一套完整可运行的 SCADA 监控界面。这次我们来看一个很实战的方向用 Claude Code 从零搭一套工控 SCADA 监控大屏包含工艺流程图、设备状态、实时数据和告警列表并且全部用本地文件跑通不依赖商业组态软件授权。这个项目的核心不是某个现成仓库而是“Claude Code 工控组态思维”的组合玩法。你可以把它理解成给 Claude Code 一段需求它直接输出 HTML SVG JavaScript 的监控界面代码你再把这段代码挂到自己的数据源上就是一个轻量 SCADA HMI 原型。整个过程能跑在普通开发机上不需要专用工控机也不需要组态软件加密狗。本文会带你把以下内容完整走一遍Claude Code 的安装、登录和基本使用方式包含 VSCode 集成和常见启动报错。SCADA、HMI、PLC 三者到底是什么关系AI 在中间能承担哪个环节。用 Claude Code 生成工控监控界面的完整提示词模板和分批实施思路。从 SVG 设备图库到图表联动再到模拟数据刷新和告警推送的实测流程。批量生成多个监控页面的工程化方法以及资源占用和问题排查。如果你正在做组态软件选型、工控 HMI 界面原型设计、或者想给现有 SCADA 系统补一套快速可视化页面这篇文章可以直接收藏。1. 核心能力速览先把结论放在前面。能力项说明工具类型AI 编程代理 / 终端命令行工具开发方AnthropicClaude 系列模型核心功能读取项目代码、生成代码文件、执行命令、自动化重构、批量生成界面主要应用用自然语言生成 SCADA 监控界面、HMI 页面、SVG 图元、数据可视化面板运行环境Node.js 18在终端运行VSCode 可通过命令行集成推荐硬件普通开发机即可CPU 推理和 GPU 均可对显卡没有强依赖显存占用工具本身占用可忽略主要取决于本地是否运行推理模型是否支持 API支持可作为终端工具调用 Claude 模型接口是否支持批量任务支持可编写脚本批量生成页面和组件适合场景SCADA 原型设计、HMI 界面开发、工控 SVG 图库生成、PLC 数据模拟需要注意一点Claude Code 本身是一个“代码 Agent”不是专门的 SCADA 软件。你得到的产物是网页风格的监控界面代码也就是一种轻量 Web SCADA 方案。它适合做界面原型、数据展示层和前端交互不替代 PLC 控制器和实时数据库。2. 适用场景与使用边界2.1 适合谁用工控系统集成商需要快速给客户出监控界面效果图先谈方案再落地。自动化工程师想用 HTML/SVG 做 HMI 原型不想为演示项目买组态软件授权。前端工程师进入工控行业把 SCADA 界面当成数据可视化项目来做Claude Code 能显著降低上手成本。院校和实训场景做 PLC 通信、SCADA 监控教学时需要低成本的演示界面。2.2 能解决什么问题商业组态软件如 WinCC、Intouch、组态王功能强但存在三堵墙授权费用高、图元扩展不方便、二次开发需要专门的脚本语言。Claude Code 生成的是标准 Web 技术栈代码这意味着浏览器直接打开无需安装客户端。SVG 图元可以用代码批量生成方便复用。数据接口可以用 HTTP、WebSocket 或本地 JSON 文件模拟。界面风格可以随时改改代码比改组态工程更直观。2.3 不适合什么场景需要硬实时控制的场景监控界面不能直接替代 PLC 控制逻辑。需要通过认证评审的工业项目安全等级和合规性需要专门验证。大型分布式 SCADA 系统数据采集、历史存储、报警处理需要专业平台支撑。没有明确需求边界就交给 AI 自由发挥容易生成结构混乱、逻辑难维护的界面。2.4 合规与安全边界文章中所有案例均基于本地测试环境使用模拟数据。如果你要对接真实 PLC 或生产数据必须注意先切断控制通道只读采集数据不要在监控界面里直接下发控制指令。涉及工厂内部 IP、设备型号、工艺参数时注意脱敏。商业项目使用前确认 Claude 服务条款和所在团队的合规要求。不要在生成代码中包含任何绕过授权、破解组态软件或窃取知识产权的指令。3. 环境准备与前置条件3.1 操作系统Claude Code 官方支持 macOS、Windows 和 Linux。Windows 下推荐使用 Windows Terminal PowerShell或安装 Git Bash 使用 Linux 风格的终端命令。3.2 安装 Node.jsClaude Code 是 npm 包需要 Node.js。建议安装 Node.js 18 或更高版本。安装完成后确认版本node -v npm -v如果版本过低去 Node.js 官网下载 LTS 版本重新安装即可。3.3 安装 Claude Code使用 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后检查版本claude --version如果出现claude 不是内部或外部命令说明全局安装目录没有加入 PATH重新安装 Node.js 并勾选“Add to PATH”即可。3.4 登录验证首次运行需要登录 Claude 账号或配置 API Keyclaude终端会输出一个登录链接打开链接完成授权后回到终端继续操作。如果你配置了 Anthropic API Key也可以用环境变量方式export ANTHROPIC_API_KEY你的API KeyWindows PowerShell 下使用$env:ANTHROPIC_API_KEY你的API Key3.5 VSCode 集成热门搜索里很多人关心“VSCode 配置 Claude Code”。实际上Claude Code 不需要专门插件也能和 VSCode 配合在 VSCode 中打开你的项目文件夹。按Ctrl 打开内置终端。在终端中运行claude。Claude Code 可以直接读取当前项目目录下的文件并调用编辑器修改代码。如果你需要更紧密的编辑器集成可以在 VSCode 扩展市场搜索 Claude Code 相关插件但核心工作流还是终端交互。4. 安装部署与启动方式4.1 命令行启动进入工作目录后直接运行mkdir scada-demo cd scada-demo claudeClaude Code 启动后进入对话模式可以直接输入中文或英文指令。4.2 非交互式执行Claude Code 支持一次性执行指令适合脚本化和持续集成。claude -p 生成一个简单的工控SCADA监控页面包含两个水箱和一个水泵的工艺流程-p参数表示 print 模式Claude Code 执行完任务后在终端输出结果。4.3 启动失败排查如果你遇到热门搜索中的“claude code powershell 安装报错”常见情况是 PowerShell 执行策略限制。可以尝试Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser然后重新打开终端运行claude。5. 功能测试与效果验证接下来是重点用 Claude Code 实际生成工控 SCADA 监控界面。我会按一个真实项目的推进方式分步测试。5.1 先想清楚 SCADA 界面需要什么SCADA数据采集与监控系统界面通常包含工艺流程图水泵、阀门、水箱、管道、电机等设备图元。实时数据显示流量、液位、压力、温度等数值。设备状态颜色运行绿色、停止灰色、故障红色。告警列表报警时间、点位名称、报警描述。控制按钮启动/停止设备但测试阶段用模拟数据。趋势曲线历史数据曲线展示。HMI 和 SCADA 的区别可以简单理解为HMI 是“人机界面”SCADA 是“监控和数据采集系统”。SCADA 范围更大HMI 是它的显示终端之一。PLC 负责采集和控制SCADA 负责监控和管理。Claude Code 在中间的位置是帮你快速生成 SCADA 的 HMI 显示层。5.2 第一次生成一个基础泵站监控页面在 Claude Code 对话中输入请在当前目录生成一个 pump-station.html 文件 这是一个工控SCADA泵站监控界面要求 1. 使用 HTML CSS JavaScript不要用任何外部框架。 2. 页面左侧是工艺流程图画一个蓄水池、一个水泵、一个高位水箱通过管道连接。 3. 水泵和管道使用 SVG 绘制蓄水池使用矩形 液面效果。 4. 页面右侧显示实时数据进口压力、出口压力、水泵转速、流量。 5. 数据先用 JavaScript 模拟每 2 秒随机变化一次。 6. 水泵运行状态用绿色表示停止用灰色。 7. 提供启动和停止按钮点击后改变水泵状态和颜色。 8. 整体风格偏工业控制深色背景适合监控大屏。Claude Code 会生成一个pump-station.html。用浏览器打开后可以看到SVG 工艺流程图。液位变化的蓄水池。水泵状态切换。右侧实时刷新的数据面板。这是第一轮验证重点看 Claude Code 能否把“工艺流程图 实时数据 状态控制”一次性生成出来。如果页面空白检查浏览器控制台报错多半是 JavaScript 语法问题直接把报错信息贴回给 Claude Code 修复。5.3 第二轮迭代增加告警和趋势曲线基础页面跑通后继续追加需求请在 pump-station.html 基础上增加 1. 当出口压力大于 0.8MPa 时产生一条告警显示在右侧告警列表。 2. 告警列表包含时间、点位名称、报警描述、状态。 3. 增加一个流量趋势曲线使用 canvas 绘制最近 30 个数据点。 4. 当水位低于 20% 时蓄水池液面颜色变为黄色提示。这一步验证 Claude Code 的“增量修改”能力。你会发现它不是在旧文件上乱加而是会读取现有代码结构在合适位置插入功能。预期结果压力超过阈值时告警列表自动新增一条记录。趋势曲线实时滚动显示。低液位时颜色变化。5.4 第三轮扩展为多页面监控系统一个 SCADA 项目通常有多个监控画面比如泵站画面、配电画面、总貌画面。在对话中输入请把当前项目改造成多页面监控系统 1. 创建一个 index.html 作为总览页面包含三个监控子页的入口。 2. 创建 pump-station.html 保持现有泵站监控。 3. 创建 power-meter.html设计一个配电监控页面显示三相电压、电流、功率因数。 4. 创建 overview.html显示全厂工艺总貌。 5. 使用统一的 CSS 文件 style.css 和统一的 JS 文件 common.js。这一步能生成一个基本的 SCADA 前端框架。验证标准是浏览器打开 index.html 能看到三个入口。点击每个入口能跳转到对应页面。所有页面样式统一。5.5 SVG 图元库的批量生成工控组态软件一般都内置图元库而 Claude Code 可以直接生成 SVG 图元。这是非常实用的能力。输入提示词请生成一个 svg-library.html 文件 包含以下工控设备 SVG 图元每个图元尺寸统一为 200x200 1. 离心泵 2. 闸阀 3. 电动阀 4. 压力变送器 5. 液位计 6. 电机 7. 流量计 8. 温度传感器 每个图元下方标注名称点击图元可以复制对应的 SVG 代码到剪贴板。生成后你在做下一个 SCADA 界面时可以直接复用这些 SVG 代码。这比在组态软件里一个一个拖拽图元高效得多。你可以把生成的图元整理到单独的文件夹里形成自己的“工控SVG图库”。6. 接口 API 与批量任务6.1 用 Claude Code 批处理接口生成页面如果你有 10 个监控点位要生成页面不需要逐个对话。可以准备一份 Excel 或 JSON 格式的点位清单然后让 Claude Code 按模板批量生成。假设设备清单如下[ { id: pump-01, name: 1号进水泵, type: pump, tags: [进口压力, 出口压力, 转速] }, { id: valve-02, name: 2号调节阀, type: valve, tags: [开度, 流量] }, { id: tank-03, name: 储水罐, type: tank, tags: [液位, 温度] } ]在 Claude Code 中新建一个devices.json文件然后输入请读取 devices.json 为每个设备生成一个独立的监控页面 html 文件 每个页面的结构保持一致 包含设备名称标题、状态指示、SVG 示意图、对应标签的实时数据曲线。 文件命名为 {id}.html。Claude Code 会根据设备类型生成不同页面输出到当前目录。批量任务里避免一次塞太多设备我建议每次 3 到 5 个跑完检查再继续能减少出错概率。6.2 接入实时数据的接口方式生成好的 SCADA 页面要接入真实数据。最常见的两种方式HTTP 轮询方式在 JavaScript 中请求后端接口async function fetchRealtimeData() { try { const response await fetch(/api/process_data, { method: GET, headers: { Content-Type: application/json } }); const data await response.json(); updateUI(data); } catch (error) { console.error(数据获取失败:, error); } } setInterval(fetchRealtimeData, 2000);WebSocket 方式适合实时性要求高的场景const socket new WebSocket(ws://127.0.0.1:8080/ws); socket.onmessage function(event) { const data JSON.parse(event.data); updateUI(data); };具体的接口地址和字段名需要根据实际项目调整。如果是测试阶段直接使用模拟数据即可。6.3 API 调用模板如果你需要在自己的工具链中直接调用 Claude Code 的能力可以用命令行脚本方式claude -p 根据 devices.json 模板生成 pdf 页面 --output-format json也可以用 Node.js 写一个简单脚本批量执行不同提示词const { execSync } require(child_process); const prompts [ 生成一个进水车间监控页面包含3台泵和2个水箱, 生成一个出水车间监控页面包含2台泵和1个加药装置, 生成一个配电室监控页面包含进线柜、母联柜、出线柜 ]; for (const prompt of prompts) { const command claude -p ${prompt}; execSync(command, { stdio: inherit }); console.log(已完成:, prompt); }这种批量调用方式适合做整站 SCADA 界面的基础框架生成。7. 资源占用与性能观察7.1 Claude Code 本身的资源占用Claude Code 是一个终端工具内存占用通常在几百 MB 级别对开发机构成不了压力。它的算力需求在云端模型侧本地电脑只需要有稳定的网络。如果在本地搭建 Ollama 或其他推理服务来跑模型资源占用才会明显上升。7.2 SCADA 页面的性能观察生成的 HTML 页面性能取决于浏览器渲染 SVG 和 Canvas 的复杂度。在开发中要注意SVG 图元数量单页 50 个图元以内通常流畅超过 200 个建议用 Canvas 渲染。数据刷新频率2 秒轮询对浏览器没有压力如果做到 100ms 刷新就要考虑数据包大小和 DOM 更新性能。Canvas 趋势曲线如果长时间运行不清理可能导致内存缓慢增长。Claude Code 生成的代码不一定处理了这种情况需要人工检查定时器清理逻辑。页面数量多页面场景建议统一抽公共组件避免每个页面重复绘制相同的大图元。7.3 降低页面负载的方法把 SVG 图元固化成图片或独立模块不要每次页面加载都重复解析。批量 DOM 更新时用documentFragment或字符串拼接后一次性插入。高频数据使用节流函数保证 UI 刷新频率不超过每秒 5 次。单页只展示核心设备更多细节放到点击后的弹窗或子页面。8. 常见问题与排查方法问题现象可能原因排查方式解决方案claude命令找不到Node.js 未安装或全局目录不在 PATH在终端输入node -v检查 Node 是否可用重新安装 Node.js勾选 Add to PATHPowerShell 安装报错执行策略禁止运行脚本输入Get-ExecutionPolicy查看策略执行Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser登录后提示无权限账号额度或 API Key 未配置正确运行claude doctor查看诊断信息检查账号余额、API Key 是否有效生成的 HTML 打开后页面空白文件名路径错误或 JS 报错按 F12 打开浏览器控制台将报错信息贴回 Claude Code让 AI 修复SVG 图元显示错乱viewBox 比例设置不一致检查每个图元的 viewBox 属性统一 svg width 和 height并在 Claude Code 中要求统一为 200x200数据不刷新定时器未启动或 JS 文件加载顺序错误在控制台输入console.log(setInterval)检查是否赋值检查 script 标签是否放在 body 末尾批量生成时页面结构不一致每次对话上下文丢失将模板要求放在每次提示词的开头编写标准提示词模板每次替换变量生成的页面风格不符合工控审美初始提示词没有描述风格在提示词中增加“深色背景、工业监控、大面积数据展示”追加一轮界面美化指令控制按钮无效事件监听绑定错误检查元素 ID 是否与 JS 中一致让 Claude Code 检查 addEventListener 绑定逻辑Claude Code 输出被截断单次生成内容过多拆分需求一次只做一件事分阶段生成页面然后合并9. 最佳实践与使用建议9.1 提示词工程给 Claude Code 写需求和给新来的同事派活一样信息越具体结果越靠谱。好的 SCADA 界面生成提示词应该包含角色你是一名资深的工控组态工程师和前端开发工程师。 任务生成一个污水处理厂提升泵房监控页面。 技术栈HTML CSS JavaScript SVG不使用外部框架。 页面结构 - 上方工艺流程图展示集水井、潜水排污泵、管道、出水井。 - 左侧实时数据面板展示液位、流量、泵运行状态。 - 右侧告警列表。 视觉风格深蓝灰色背景设备运行绿色停止灰色故障红色。 数据来源先用 JS 模拟每2秒更新。9.2 分阶段交付一次性让 Claude Code 生成一个完整 SCADA 系统容易失控。推荐顺序单个页面静态布局。模拟数据动态刷新。状态联动和告警。图表和趋势曲线。多个页面整合。接入真实接口。每完成一步用浏览器验证一次。发现问题马上修复不要累积到最后。9.3 建立自己的工控 SVG 图库Claude Code 可以生成 SVG 图元但每次重新生成就浪费了。更高效的做法是建立assets/svgs/目录。按设备类型命名pump.svg、valve.svg、tank.svg。在提示词中要求“读取现有 SVG 目录中的图元使用统一风格生成新页面”。时间久了这就是你的个人工控组态图库和商业组态软件自带的图元库用途一样。9.4 数据安全不要把真实生产数据、客户内网 IP、PLC 点位表直接贴进 AI 对话。测试阶段全部用模拟数据。需要对接真实数据时在页面代码里通过接口读取不要让 AI 接触原始数据内容。9.5 备份与版本管理Claude Code 每次生成的内容可能有细微差别。建议把生成代码纳入 Git 管理每个阶段打个标签方便回滚。目录结构建议scada-project/ ├── assets/ │ ├── css/ │ ├── js/ │ └── svgs/ ├── pages/ │ ├── pump-station.html │ ├── power-meter.html │ └── overview.html ├── data/ │ ├── devices.json │ └── mock_data.js └── docs/10. 总结与下一步Claude Code 做工控 SCADA 监控界面最值得尝试的点是它把“界面原型开发”的时间压缩到了分钟级。传统组态软件里拖几个小时图元的活用自然语言描述需求后反复迭代几轮就能看到完整效果。最先应该验证的功能是“单一页面生成”也就是 5.2 节的基础泵站页面。跑通这一步说明 Claude Code 的代码生成能力在你的网络环境下是正常的。最容易踩的坑是跨页面复用和风格统一。单页效果不错但多个页面之间导出的样式可能不一致。解决办法是在提示词里强调“基于已有的 style.css 和 common.js”或者直接把现有文件路径告诉 Claude Code让它先读取再修改。后续你可以往这些方向继续扩展对接 WebSocket 实时数据替换模拟数据源。增加历史曲线查询和报表导出。结合 PLC 仿真器做数据联调。把生成的 SVG 图元整理成标准图库复用到后续所有项目。建议收藏备用下次要做 SCADA 监控界面时直接按这套流程走一遍能节省大量出图时间。