Claude Code 是运行在终端里的 AI 编程助手它能直接读写项目文件、执行命令也能按自然语言指令生成和修改代码。这次要拆的案例是 Claude Code 100 个案例里比较贴近现场的一项用 AI 做工控 SCADA 监控界面。SCADA 监控界面在工控项目里用量大、重复度高、样式要求统一传统组态软件做起来费时纯手写 Web 页面也繁琐而 Claude Code 恰好能把“生成 SVG 设备图元、组装监控页面、绑定模拟数据”这些事变成对话式操作。这篇文章不是只讲概念而是按实际落地顺序拆一遍环境准备、单页面跑通、图元库复用、批量生成、报警曲线控制类进阶功能再到真实项目里最容易踩的坑。1. SCADA 监控界面到底难在哪Claude Code 能解决什么1.1 先分清 SCADA、HMI、PLC 的关系刚开始接触工控的人很容易把 SCADA、HMI、PLC 混在一起聊。简单说PLC 是现场控制器负责采集传感器信号、执行逻辑输出SCADA 是上位机监控系统负责把 PLC 的数据读上来做展示、报警和历史存储HMI 是人机界面也就是操作员看到的屏幕画面。SCADA 软件里做的画面本质上就是 HMI。传统组态软件里叫“画面”或“窗口”Web 化之后叫“监控页面”。只要这个边界清楚了就能理解 Claude Code 在这个场景里的位置它不是去替代 PLC 或网关而是帮你把 HMI 这一层的界面代码快速做出来。1.2 传统流程里的重复劳动集中在哪里传统组态软件做监控画面流程基本是新建画面拖拽设备图元配置变量绑定数据点再写联动脚本。一个中型站点三四十页画面很正常每页放上十几个图元每个图元要处理运行、停止、故障三种以上状态。真正耗时间的往往不是“画一个水泵”而是“把同样的水泵画三十遍再逐个绑定点位”。换成 Web 技术做 HMI重复劳动也没有消失甚至更明显。每个页面要写 HTML 结构、SVG 图元、CSS 样式和 JavaScript 逻辑。如果某个设备符号要统一调整比如把故障状态从红色改成橙色你得把所有页面改一遍。这类工作特别适合让 AI 辅助完成因为它的核心是“规范统一”和“批量执行”。1.3 Claude Code 在监控界面开发中的定位Claude Code 在 SCADA 监控界面开发里主要能干四类活生成 SVG 设备图元比如水泵、阀门、液位计、温度表、信号灯生成监控页面比如设备概览页、单设备详情页、报警列表页生成模拟数据源在真实 PLC 还没接通之前先用假数据验证界面生成接口调用示例比如通过 HTTP 或 Modbus 把点位值读到前端。它不是组态软件替代不了 WinCC、组态王这类商业平台的完整功能。但对于原型验证、Web 监控前端、内部工具和小型站点的监控页面它足够好用。顺便说一句这类 AI 编程工具不只有 Claude CodeCodex 和其他 Agent 类工具也能做类似的事。选哪个主要看模型能力、账号可用性和团队使用习惯。案例里重点用 Claude Code是因为它在终端交互、文件读写和长任务执行上比较顺手。2. 准备环境不是装上就能用2.1 安装之前先确认 Node.jsClaude Code 依赖 Node.js 生态安装前最好先确认本机环境。打开终端输入node -v npm -v如果能看到版本号说明 Node 基础环境没问题。如果提示命令不存在需要先装 Node.js建议选择 LTS 长期支持版本。版本太旧可能跑不起来版本太新也可能遇到兼容问题所以最稳妥的做法是装一个比较新的 LTS 版本然后重启终端再确认。这一步看着简单但很多人后面报错根因就在这里。我第一次装的时候直接跑 npm 命令结果报权限错误后来发现是 Node 安装目录权限有问题。2.2 npm 安装命令与常见权限问题安装命令本身不复杂npm install -g anthropic-ai/claude-code常见安装问题主要出在 Windows 环境。很多人会在 PowerShell 里遇到执行策略限制报错内容大概类似“无法加载文件因为在此系统上禁止运行脚本”也可能遇到 npm 全局目录无权限报错类似“EACCES: permission denied”。我的建议是先用 nvm 或类似工具管理 Node 版本这样 npm 全局包会装到用户目录权限问题会少很多。如果不用版本管理器在 Windows 上遇到执行策略问题可以考虑调整当前用户的 PowerShell 执行策略或者检查当前用户对 Node 安装目录的权限。公司电脑最好先和 IT 确认不要随意改系统级配置。安装完成后用这条命令确认装好了claude --version如果提示找不到命令多半是 npm 全局路径没有加入 PATH。2.3 登录验证与编辑器集成Claude Code 安装后首次运行会在终端里引导登录或配置访问凭证。这一步一般和 Anthropic 账号相关可能需要订阅或 API 访问权限。登录方式和账号要求会随官方策略调整落地时以当前官方说明为准。在 VSCode 里使用非常方便不用装额外插件直接打开集成终端运行claude然后它就能读取当前项目目录看到文件树创建和修改文件。集成终端的好处是AI 在改文件的时候你能同步看到文件结构变化心里有数。也有人在 Claude Code 里通过兼容接口接入其他模型但不同模型对工具调用的支持程度差别很大稳定性不一定有保障。如果只是学习或生产使用建议优先用官方支持的方式。2.4 用最小指令验证环境是否可用环境装好后别急着让它生成整个 SCADA 项目。先做一个最小验证。运行 claude 进入交互界面输入请创建一个 demo.html页面标题是“工控监控Demo”显示文字“Claude Code环境正常”。如果这条指令能完成说明读写文件、生成代码、基本交互链路都没问题。后续遇到复杂项目报错时至少不会怀疑是安装坏了。3. 从零生成第一个 SCADA 监控画面先跑通单界面3.1 把需求说清楚比说什么都重要Claude Code 做出来的界面质量很大程度取决于指令是否具体。SCADA 监控界面特别讲究工业风格和逻辑闭环如果你只说“做一个水箱监控页面”它很可能给你一个通用后台管理页面然后你还要来回改好几轮。我一般会这样写指令请生成一个SCADA风格的水箱液位监控页面使用原生HTMLCSSJavaScript不要用框架。 要求 1. 页面深色工业风背景深灰整体适合工控屏显示 2. 左侧是SVG绘制的水箱图液位高度根据变量动态变化 3. 右侧显示实时液位值、进水流量、出水流量 4. 下方有“启动进水”“停止进水”两个按钮 5. 先不接后端用setInterval模拟数据变化 6. 所有代码放到一个monitor.html文件里为什么用原生 HTMLCSSJS不用 React 或 Vue因为 SCADA 监控界面的运行环境经常是工控机、老电脑或内网隔离环境没有外网不方便拉 CDN 依赖。原生页面可以双击直接打开部署成本最低。如果后面要批量生成几十个页面原生页面也更稳定。为什么要求先放到一个文件里前期验证阶段单文件最好排查问题。等页面和图元多了再拆成公共文件也不迟。3.2 检查生成结果不只看能不能打开Claude 生成文件后不要着急打开浏览器就觉得完事了。先把文件结构看一遍确认它真的只生成一个 HTML 文件没有静默引入 CDN 字体、CDN 库或额外脚本。如果页面里引用了外网资源而目标环境没有外网页面打开就是残缺的。然后打开浏览器控制台确认没有报错。这一步要仔细看。控制台报错未必来自代码语法也可能来自某个外部资源加载失败。我习惯在验证阶段先断网或清缓存看一遍确保这个页面不做外网依赖也能正常显示。3.3 模拟数据逻辑要看三个关键点页面打开后数据应该是动态的。这里需要检查三点。第一刷新间隔是否合理。如果每 100 毫秒刷新一次 SVG 液位视觉效果很流畅但真实 PLC 数据通常不会这么快而且频繁操作 DOM 会让页面越来越卡。模拟阶段用 500 毫秒到 1 秒比较合适。第二是否考虑了边界值。比如水箱液位范围是 0 到 100模拟数据不能一直往上加超过 100。液位超过容器范围后视觉上会溢出来界面就失真了。所以指令里最好直接写明取值范围。第三按钮事件是否真的影响数据。比如点击“启动进水”后液位应该上升点击“停止进水”后液位应该保持不变。如果按钮只改了一个普通状态变量没有影响模拟数据的逻辑那这个控制闭环就没有形成。3.4 把第一个页面当成模板而不是终点单页面跑通之后项目才刚刚开始。实际工程不会只有一个水箱还会有泵房、罐区、配电房、污水站每个区域都有类似页面。所以我会把第一个页面当成模板来沉淀。让 Claude 总结这个页面里哪些是容器结构、哪些是图元、哪些是数据绑定函数然后把“单个页面文件”升级为“一套可复用的页面模板”。这样一来后续做批量生成时就是在模板上填不同设备的数据而不是每次从零开始。4. SVG 图元库与设备符号一次生成批量复用4.1 先统一风格再生成图元SCADA 监控界面里的设备符号看起来简单但如果不统一风格页面会很乱。今天生成的水泵是圆角造型明天生成的是方形造型放到同一个画面上非常违和。正确做法是先让 Claude Code 生成一套统一风格的 SVG 图元库固定尺寸、固定颜色状态、固定命名规则。之后所有页面从这套图元库引用。我给 Claude 的典型指令长这样请生成一个SVG水泵图元保存为pump.svg。 要求 1. 尺寸64x64 2. 包含泵体、电机、进水管、出水管 3. 使用class控制状态 .running { fill: #2ecc71; } .stopped { fill: #7f8c8d; } .fault { fill: #e74c3c; } 4. 代码简洁不要外部依赖把颜色状态提前定义好很重要。SCADA 图元的状态视觉是行业习惯绿色运行、灰色停止、红色故障、黄色报警。如果每个页面里临时让 AI 自由发挥颜色后面肯定要返工。4.2 常用 SCADA 图元有哪些在监控界面里常用图元可以整理成一张表这张表也适合直接交给 Claude图元类型用途需要表达的状态水泵供排水、循环系统运行、停止、故障阀门管道开闭控制开、关、故障液位计储罐、水池液位液位高度变化温度表设备温度监测正常、高温报警压力表管道压力监测正常、超压报警管道介质流向流动、静止、异常电机风机、搅拌机等运行、停止、故障信号灯状态指示绿、黄、红有了这张表可以逐个让 Claude 生成也可以一次让它生成全部。但一次生成好多图元时一定要逐个人工检查确认尺寸、颜色状态和命名都符合预期。4.3 图元状态与点位值的映射逻辑图元的视觉状态最终要由数据点位的值来决定。比如水泵状态来自 PLC 里的一个整数0 表示停止1 表示运行2 表示故障。前端要做的就是把数字映射到 CSS 类名。这个逻辑在 Claude 生成的代码里要重点检查。最常见的坑是它把状态数值直接显示在页面上而没有做颜色映射页面看起来就是一堆 0、1、2。指令里优选直接说清楚状态字段state的取值范围是0、1、2。 0表示停止class用stopped1表示运行class用running2表示故障class用fault。 请写一个updateDeviceState函数输入state数值切换对应的CSS类。这样生成出来的代码后面接真实数据时基本不用改结构只改数据来源。4.4 图元库的组织方式与页面引用图元库建好后建议按目录组织svg/ pump.svg valve.svg tank.svg fan.svg pages/ station1.html station2.htmlSVG 文件在 HTML 页面里的引用方式有三种用img标签、用svguse引用、直接内联 SVG 代码。用img最简单但没法用 CSS 控制内部颜色状态所以不适合需要切换运行/停止/故障颜色的设备图元。用svguse可以控制颜色但要考虑浏览器跨文件引用 SVG 的兼容性。我的实际经验是如果页面需要频繁切换状态颜色直接内联 SVG 代码最可靠。所以图元库里的 SVG 文件主要用来统一维护和参考实际生成页面时让 Claude 根据图元库内容把 SVG 内联到 HTML 里。页面文件会大一点但稳定性好不会遇到引用不到的问题。5. 批量生成多个监控页面把指令变成工程流程5.1 先整理一份准确的点位表批量生成页面的前提是有一份准确的点位表。点位表是 SCADA 工程的“数据字典”描述每个设备在哪个区域、属于什么类型、对应什么标签名、取值范围和报警阈值。点位表可以是 CSV、Excel 或 JSON。我最推荐用 JSON因为 Claude Code 对 JSON 结构化数据理解最准确也容易批量处理。下面是一个简化示例[ { id: P-101, name: 1号供水泵, area: 泵房A, type: pump, tag: P101_STATE, stateRange: [0, 1, 2] }, { id: T-201, name: 1号储罐, area: 罐区B, type: tank, tag: T201_LEVEL, min: 0, max: 100 } ]把这份文件保存为 points.json放到项目目录下然后让 Claude Code 读取它。5.2 用指令驱动批量生成给 Claude 的批量生成指令可以这样写请读取项目目录下的points.json。 根据每个元素生成一个监控页面 1. 页面文件名为 id.html例如 P-101.html 2. 页面根据type字段调用对应图元pump用泵图元tank用液位图元 3. 页面显示name、area、tag 4. 每个页面包含模拟数据刷新逻辑 5. 所有页面共用style.css这里第 2 条是关键。Claude Code 需要知道每种 type 对应什么 SVG 图元、什么数据绑定方式。所以前面建立图元库的步骤很重要最好把图元样本文件也放在项目目录里让它参考这些文件而不是自己另想一套结构。5.3 批量生成之后要抽样加扫描批量生成不能只抽样看一眼就当完事。页面一多容易出现某些设备的 SVG 图元缺失页面里只有文字没有图形文件名或页面标题重复点位 tag 写错或顺序错位模拟数据的取值范围和设备类型不匹配。我验证批量生成结果的顺序是统计生成了多少文件与点位表数量做对比随机打开 3 到 5 个页面确认页面结构完整用脚本扫描每个页面里的 id 和 tag和点位表交叉比对检查页面之间的公共代码确认样式和脚本已经抽离公共文件。如果要写扫描脚本可以让 Claude Code 自己生成一个。但最终比对结果还是需要人来判断。5.4 给真实数据源预留位置批量页面里的模拟数据只能验证界面效果。真正接入 SCADA 时每个设备数据来自 PLC、网关或后端数据服务。所以批量生成时我会要求 Claude 在页面里预留一个统一的数据访问层。例如所有读点位的地方都走一个函数function getPointValue(tag) { // TODO: 接入真实SCADA数据源 return mockData[tag] || 0; }后续接真实数据时只需要改这一个函数页面其他逻辑不用动。这个设计看起来简单但批量页面多时非常关键。如果不提前约定AI 可能每页都直接操作 mockData等接入真实数据时就要每个页面单独改了。6. 报警列表、趋势曲线与控制指令监控界面的进阶内容6.1 报警列表要先把数据结构定下来SCADA 监控页面绕不开报警功能。报警列表展示的是设备异常事件比如“P-101 水泵故障”“T-201 液位超限”。我建议先定义数据结构再让 Claude 生成界面。常用结构是[ { time: 2025-01-10 09:12:00, device: P-101, name: 1号供水泵, type: 故障, level: 高, status: 未确认 } ]报警页面通常是表格形式需要支持按时间排序、按级别筛选、新报警高亮闪烁。这些行为都要在指令里写清楚不要只说“做一个报警列表”。闪烁效果是容易出 bug 的地方。有些 AI 生成的代码用 CSS animation 控制整行闪烁导致整行文字都一闪一闪反而看不清。更稳的写法是只让“报警级别”或“状态”列闪烁。6.2 趋势曲线图表库必须本地化趋势曲线在 SCADA 里很常用一般显示液位、温度、压力等过程量随时间的变化。Claude Code 通常会引入 Chart.js 或 ECharts 这类图表库。这里的坑是内网工控环境经常访问不了 CDN打开页面时图表库加载失败曲线区域直接空白。建议提前把图表库文件下载到项目目录让 Claude 引用相对路径vendor/ echarts.min.js页面里引用script srcvendor/echarts.min.js/script这件事最好在生成趋势页之前就安排妥当否则 AI 默认会写 CDN 链接到时候离线环境就跑不起来。6.3 设备启停控制AI 只能写示例代码监控界面里经常有“启动”“停止”按钮。点击后需要通过后端或网关把指令写入 PLC。这里要特别谨慎。Claude Code 可以生成按钮点击事件、HTTP 请求示例、Modbus 写入函数框架但它不了解现场 PLC 的寄存器地址、安全联锁逻辑和操作权限要求。AI 生成的只是示例不能直接接到真实设备上就认为可用。如果是 Demo 或原型按钮事件可以调用一个模拟接口。我一般让 Claude 生成async function sendCommand(device, command) { // 示例调用后端控制接口 const response await fetch(/api/control, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ device: device, command: command }) }); return response.json(); }真实对接时后端必须补权限校验、操作记录、超时判断和异常回滚。这些逻辑不能依赖 AI 生成后直接上线必须由工控和安全人员审查。6.4 哪些功能适合 AI哪些必须人工把关在进阶功能里适合 AI 的有报警列表界面、趋势图配置、模拟数据生成、接口调用示例、SVG 图元视觉调整。不太适合 AI 直接生成后上线使用的有PLC 通信协议底层封装、安全联锁逻辑、与特定组态平台深度绑定的复杂逻辑、生产环境的稳定性和并发代码。判断标准很简单界面代码出错影响的是显示控制逻辑和通信逻辑出错可能影响操作安全。这个边界要清楚。7. 实际落地时最容易踩的坑7.1 Claude Code 报错不一定是模型能力问题用 Claude Code 过程中会遇到各种报错。很多新手第一反应是工具不好用但实际多数是环境或项目结构问题。我建议的排查顺序是看终端里的完整错误信息不要只看第一行确认当前工作目录是不是项目目录Claude Code 操作的是当前目录下的文件确认文件路径中有没有特殊字符、中文空格或权限限制确认是否超过会话额度限制这类提示通常和 token 或账号额度有关不代表代码有错确认 Node 版本和 npm 依赖版本是否符合要求。很多“看起来像模型不聪明”的报错实际上是环境问题。把环境理清了问题就消掉一大半。7.2 SVG 图元的显示兼容问题SVG 在本地浏览器里正常不代表目标工控机上一定正常。常见问题有viewBox 设置不正确导致图元变形多个 SVG 图元 ID 重复复制后忘记改 ID导致引用错乱使用的 CSS 新特性或滤镜在老版本浏览器里不支持内联 SVG 引用外部资源离线环境下显示不全。工控现场的浏览器环境经常偏旧。生成图元时建议直接用经典 SVG 写法少用太新的特性。7.3 页面性能下降的排查方向监控页面跑久了最常见的现象是内存不断增加CPU 持续升高。原因是实时刷新逻辑写得太粗糙。我见过不少 AI 生成的实时页面用 setInterval 每秒创建新数组、每隔一段就重建 DOM跑一个小时后页面越来越卡。排查时打开 DevTools 的 Performance 面板看哪个函数占用时间最长。常用的优化方向降低刷新频率从 1000 毫秒改成 2000 或 3000 毫秒避免反复创建对象尽量复用同一个变量只更新变化的数据不要整块重绘 SVG历史数据用环形数组保存不要无限追加。7.4 生成代码要纳入版本管理Claude Code 生成代码的速度很快代码量增长也快。如果不用版本管理改坏了很难回退。我建议项目一开始就初始化 Git让 Claude 每次修改前先看当前文件状态改完后再人工提交一次。版本管理临时用不上线上出问题时非常有用。另外Claude Code 本身有权限配置可以限制它只能读写项目目录。这个功能在工控机上特别重要因为工控机上可能存在其他重要文件不能让 AI 的操作范围超出项目目录。8. 整套流程的落地顺序与边界8.1 这套方法真正省时间的地方把这套流程用下来最省时间的场景有这么几类。界面原型从零到有一个能演示的监控 Demo传统方式可能要做一两天AI 辅助之后几十分钟就能有一版。重复页面批量生成点位表整理好之后几十个设备页面可以一次生成剩下的是检查和修正。SVG 图元维护改颜色、改尺寸、加状态用自然语言描述比手改 SVG 坐标和 class 快很多。代码重构把内联重复代码改成公共函数引用Claude Code 处理这类重构也很快。8.2 不要过度依赖 AI 的场景反过来这些场景建议人工把关。真实 PLC 点位映射和寄存器地址必须人工核对不能直接信 AI 生成的地址表。安全权限相关代码比如操作员登录、指令下发鉴权要由系统设计者确定不能只靠生成代码。与特定 SCADA 平台的深度集成比如 WinCC 脚本、组态王画面逻辑AI 不一定熟悉你使用的具体平台版本和内部对象模型生成的内容更适合当参考。性能优化AI 能提供方向但实际调优还是要基于现场的监控数据和浏览器 Profiler 信息。8.3 我建议的实践顺序最后整理一下顺序。安装好 Claude Code用最小指令确认环境正常。选一个具体设备比如水箱或水泵生成单页面 Demo。确认页面风格和数据模拟逻辑没问题后建立 SVG 图元库。整理点位表明确每个设备的类型、标签名、取值范围和状态含义。用点位表批量生成页面再扫描验证。开始对接真实数据源先把读逻辑统一到一个数据访问函数里。最后再实现控制指令、历史曲线、报警确认等功能。全程用 Git 记录版本勤提交。这套流程不一定覆盖所有 SCADA 项目但对基于 Web 的监控界面、原型 Demo 和小型工控站点来说很实用。踩过几次之后我发现很多问题不是 AI 不会写代码而是环境、输入数据和安全边界没有提前定清楚。把这些框住之后Claude Code 做监控界面开发确实比纯手工画效率高不少。