用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 编程代理 / 终端命令行工具
开发方	Anthropic（Claude 系列模型）
核心功能	读取项目代码、生成代码文件、执行命令、自动化重构、批量生成界面
主要应用	用自然语言生成 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.js

Claude 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 Key：

claude

终端会输出一个登录链接，打开链接完成授权后，回到终端继续操作。如果你配置了 Anthropic API Key，也可以用环境变量方式：

export ANTHROPIC_API_KEY="你的API Key"

Windows PowerShell 下使用：

$env:ANTHROPIC_API_KEY="你的API Key"

3.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 claude

Claude 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 PATH
PowerShell 安装报错	执行策略禁止运行脚本	输入`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 图元整理成标准图库，复用到后续所有项目。