企业官网建设流程全解析

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 Code，Codex 和其他 Agent 类工具也能做类似的事。选哪个，主要看模型能力、账号可用性和团队使用习惯。案例里重点用 Claude Code，是因为它在终端交互、文件读写和长任务执行上比较顺手。

2. 准备环境：不是装上就能用

2.1 安装之前先确认 Node.js

Claude 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风格的水箱液位监控页面，使用原生HTML+CSS+JavaScript，不要用框架。 要求： 1. 页面深色工业风，背景深灰，整体适合工控屏显示 2. 左侧是SVG绘制的水箱图，液位高度根据变量动态变化 3. 右侧显示实时液位值、进水流量、出水流量 4. 下方有“启动进水”“停止进水”两个按钮 5. 先不接后端，用setInterval模拟数据变化 6. 所有代码放到一个monitor.html文件里

为什么用原生 HTML+CSS+JS，不用 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用stopped；1表示运行，class用running；2表示故障，class用fault。 请写一个updateDeviceState函数，输入state数值，切换对应的CSS类。

这样生成出来的代码，后面接真实数据时基本不用改结构，只改数据来源。

4.4 图元库的组织方式与页面引用

图元库建好后，建议按目录组织：

svg/ pump.svg valve.svg tank.svg fan.svg pages/ station1.html station2.html

SVG 文件在 HTML 页面里的引用方式有三种：用<img>标签、用<svg><use>引用、直接内联 SVG 代码。

用<img>最简单，但没法用 CSS 控制内部颜色状态，所以不适合需要切换运行/停止/故障颜色的设备图元。用<svg><use>可以控制颜色，但要考虑浏览器跨文件引用 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 写错或顺序错位；
• 模拟数据的取值范围和设备类型不匹配。

我验证批量生成结果的顺序是：

1. 统计生成了多少文件，与点位表数量做对比；
2. 随机打开 3 到 5 个页面，确认页面结构完整；
3. 用脚本扫描每个页面里的 id 和 tag，和点位表交叉比对；
4. 检查页面之间的公共代码，确认样式和脚本已经抽离公共文件。

如果要写扫描脚本，可以让 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 src="vendor/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 过程中会遇到各种报错。很多新手第一反应是工具不好用，但实际多数是环境或项目结构问题。

我建议的排查顺序是：

1. 看终端里的完整错误信息，不要只看第一行；
2. 确认当前工作目录是不是项目目录，Claude Code 操作的是当前目录下的文件；
3. 确认文件路径中有没有特殊字符、中文空格或权限限制；
4. 确认是否超过会话额度限制，这类提示通常和 token 或账号额度有关，不代表代码有错；
5. 确认 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 我建议的实践顺序

最后整理一下顺序。

1. 安装好 Claude Code，用最小指令确认环境正常。
2. 选一个具体设备，比如水箱或水泵，生成单页面 Demo。
3. 确认页面风格和数据模拟逻辑没问题后，建立 SVG 图元库。
4. 整理点位表，明确每个设备的类型、标签名、取值范围和状态含义。
5. 用点位表批量生成页面，再扫描验证。
6. 开始对接真实数据源，先把读逻辑统一到一个数据访问函数里。
7. 最后再实现控制指令、历史曲线、报警确认等功能。
8. 全程用 Git 记录版本，勤提交。

这套流程不一定覆盖所有 SCADA 项目，但对基于 Web 的监控界面、原型 Demo 和小型工控站点来说，很实用。踩过几次之后我发现，很多问题不是 AI 不会写代码，而是环境、输入数据和安全边界没有提前定清楚。把这些框住之后，Claude Code 做监控界面开发，确实比纯手工画效率高不少。