AI AGENT & CIVIL ENGINEERING

两小时：带你用 AI
手搓结构力学求解器

从 Vibe Coding 到 Harness 与 Loop Engineering：结构工程师如何借助 AI Agent，开发属于自己的专属个性化工具。

周

周文琪

上海非解构数字科技有限公司 · 2026.08.27

Vibe Coding Harness Engineering Loop Engineering WASM / Visual Eyes Vue + Docker + Electron

PARADIGM SHIFT

范式革命：从“软件奴隶”到“工具自造者”

01. 为什么每一个结构工程师都需要学会自己做工具？

🧱 传统研发的“不可能三角”

高门槛现状

✘
商业软件大而全：动辄几十G，学习成本极高，但针对特定项目的个性化需求永远得不到满足。
✘
自研门槛高不可攀：过去做个带界面的力学工具需要“力学算法专家 + 前端GUI开发 + 渲染引擎 + 运维团队”。
✔
AI Agent 拆除了大门：大模型接管了语法、矩阵装配、界面代码与打包，工程师只需专注于力学逻辑与表达。

“AI 时代最核心的竞争力，不是你会用多少款商业软件，而是你拥有把力学想法瞬间转化为可运行工具的结构表达力。”

🎯 目标：构建随时响应个人工程意图的专属工具 Parametric FEA

CORE CONCEPT 1

何为 Vibe Coding？意图驱动开发

02. 抛弃死记硬背的 API 语法，用工程师的直觉对话

👨‍💻 传统编码模式 (Code-First)

语法泥潭

Traditional Syntax // 必须精确记忆框架语法与 DOM 操作
const canvas = document.getElementById('app');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#D97757';
// 手动计算贝塞尔曲线控制点...
// 一个小笔误导致白屏崩溃 💥

!
人类 90% 的精力被消耗在语法琐事、环境配置与框架版本冲突中。

✨ Vibe Coding 模式 (Intent-First)

意图驱动

Prompt Flow > 工程师提示词:
"请在 Vue 3 画布中绘制杆件弯矩图 (BMD)。
要求：
1. 弯矩图必须画在构件的【受拉侧】；
2. 梁跨中承受均布荷载，弯矩呈二次抛物线分布；
3. 鼠标悬停时动态显示该截面的弯矩设计值。"

✔
人类负责下定义、定规范、提要求、做验收；AI 负责写组件、调算法、打补丁。

CORE CONCEPT 2

Harness Engineering：给大模型戴上“缰绳”

03. 约束、规范与环境脚手架：如何确保 AI 不跑偏、不幻觉？

🏇 为什么光有 Prompt 还不够？

护栏系统

大模型就像一匹野马，算力强大但缺乏确定性边界。Harness Engineering（缰绳工程）就是通过工程化手段，为 AI 提供护栏与运行轨道：

1
项目级规则注入 (`.cursorrules` / `CLAUDE.md`)：声明强制力学约定（如坐标系朝向、受拉侧定义、文件架构）。
2
强类型契约 (TypeScript Schemas)：严格定义 NodeDTO、ElementDTO，杜绝 AI 自由发挥产生格式错误。
3
自动化测试桩 (Test Harness)：每次 AI 修改有限元内核后，自动运行简支梁标定算例校验精度。

📋 真实的力学 Harness 配置文件示例

CLAUDE.md

Rules Config # 结构力学求解器开发护栏规范

1. 坐标系规范: 全局坐标系 X 向右, Y 向上。
2. 制图规范: 弯矩图必须画在构件受拉侧。
3. 架构解耦:
- 计算层: `/src/core/solver.ts` (纯直接刚度法算法)
- 渲染层: `/src/components/CanvasView.vue`
4. 单元测试: 修改计算层后必须通过 `npm run test:fem`

💡 规则一次注入，终身受用：AI 将永远在力学红线之内高效狂奔。

CORE CONCEPT 3

Loop Engineering：Agent 的闭环自愈控制

04. 从单次问答 (QA) 走向“感知-行动-观察-修正”的自我进化

1. 意图解析 (Think)

工程师提出需求
AI 拆解实现路径

➔

2. 代码落地 (Act)

编写 Vue 组件
更新刚度矩阵算法

➔

3. 环境执行 (Run)

自动编译构建
本地沙箱运行

➔

4. 报错捕获 (Observe)

捕获 stderr 堆栈
感知点击坐标偏移

➔

5. 动态自愈 (Fix)

反查坐标逆变换
自动打补丁重试

💡 真实自愈案例：滚轮缩放后点击坐标错位

自动闭环调试

在手搓 NSStructure 2D 过程中，加入缩放功能后点击画布添加节点失效。在 Loop Engineering 架构下，AI 自动捕获点击事件中的 `clientX/Y` 并反查当前的缩放矩阵，自动推导出逆变换公式 \(X_{world} = (X_{screen} - O_x) / Scale\)，无需人工介入一行行 Debug。

EXTENSIONS

Skills 与 MCP：打通专业工程世界的通用接口

05. 为什么说 MCP 是工程师连接现实算力的“万能 USB 接口”？

🔌 MCP (Model Context Protocol)

连接器标准

✓
标准化开放协议：由 Anthropic 提出的跨平台协议，让任何大模型无缝连接外部工具。
✓
本地系统能力接管：通过 MCP，AI 可以直接读写本地项目文件、执行终端 Docker 命令、检查浏览器渲染状态。
✓
专业软件直连：可扩展连接 AutoCAD、SAP2000 OAPI、SQLite 力学校核数据库。

📦 Skills (领域专属技能包)

专业资产化

★
行业知识资产化：把“如何组装梁单元刚度矩阵”、“钢筋排布避让规则”打包成可重用的技能文件（`SKILL.md`）。
★
按需自动激活：当你在对话中提到“计算弯矩”或“检查混凝土剪压比”时，Agent 自动调取对应 Skill 执行。

“以前你的经验是写在内部 PPT 里，未来你的经验是沉淀为一个个可执行的 Skills。”

TOOLKIT & INFRA

武器库：结构工程师的 Vibe Coding 完整装备矩阵

06. 除了 MCP 与 Plugin，构建专业级力学工具还需要哪些核心装备？

1. 规则与记忆 (Harness)

红线护栏

`CLAUDE.md` / `.cursorrules`：每次对话前静默注入，锁定受拉侧弯矩与工程分层规范，避免 AI 遗忘。

2. 视觉校验 (Visual Eyes)

多模态自检

Headless Chrome / Playwright：让 AI 在后台自动截屏力学画布，多模态看图自检弯矩受拉侧方向与清晰度。

3. 浏览器强算 (WASM)

零服务器

Pyodide / WebAssembly：将 Python NumPy/SciPy 或 C++ 有限元直接编译进纯前端，免后端服务器秒算。

4. 毫秒热重载 (Vite HMR)

心流体验

Vite 极速工程脚手架：50ms 局部热更新，实现真正的“一边和 AI 提需求，一边实时看力学图形刷新”。

5. 多智能体协作 (Subagents)

分工编排

Agent 分工编排：算法 Agent（矩阵推导）+ 图形 Agent（Canvas 渲染）+ 质检 Agent（标准算例校验）。

6. 原生桌面打包 (Electron)

双击运行

Electron / Tauri CLI：一键将 Web 前端代码打包为离线双击运行的 Windows 原生 `.exe` 独立专业软件。

BEST PRACTICES

小白必背：Vibe Coding 三大黄金心法

07. 90% 的人觉得 AI 写不好代码，都是因为踩了这三个坑

1. 小步快跑，增量演进

❌ 错误做法：“请给我做一个像 SAP2000 那样能算高层抗震的有限元软件。”（AI 必崩）

✔ 正确心法：从“白底网格画一个点”开始，再到“连成杆件”，再到“加均布荷载”，每次只迭代一个清晰目标。

2. 精准现场，拒绝抽象

❌ 错误做法：“你的荷载箭头算错了，赶紧修一下。”（AI 根本不知道错在哪）

✔ 正确心法：“Y 向集中荷载为 -10kN 时，箭头画向了右侧且没有对齐节点，请修改荷载矢量的极坐标转换函数。”

3. 分层解耦，三权分立

✔ 结构化意识：
• 数据层：只存节点坐标与单元连接
• 计算层：只负责矩阵求解 \(K \Delta = P\)
• 视图层：只负责把数字画成弯矩图
各司其职，改界面绝不破坏力学算准度。

TECH PILLAR 1

技术揭秘 1：Vue 3 响应式力学状态模型

08. 数据驱动视图：结构力学实体的中枢神经

⚡ 响应式数据流驱动 (Reactivity)

状态联动

TypeScript / Vue 3 // 结构力学核心实体声明
const model = reactive({
  nodes: [ { id: 1, x: 0, y: 0, fix: [1,1,1] } ],
  elements: [ { id: 1, n1: 1, n2: 2, E: 2.1e11, I: 8e-5 } ],
  loads: [ { elemId: 1, type: 'UDL', q: -10 } ]
});

// 计算属性：模型改变时自动触发求解
const result = computed(() => solveFEM(model));

无需手动监听重绘事件！当你在属性框修改弹性模量 \(E\) 或拖拽节点，Vue 的响应式中枢自动触发矩阵重新装配与求解。

🎨 交互画布组件拆分

模块架构

1
`ToolBar.vue`：正交对齐、节点/构件添加、框选、删除与求解触发按钮。
2
`CanvasViewport.vue`：滚轮缩放、画布平移、鼠标网格吸附与光标捕获。
3
`PropertyPanel.vue`：单元刚度（\(EA, EI\)）、支座约束与荷载数值双向绑定。

TECH PILLAR 2

技术揭秘 2：Canvas/SVG 力学图线原位渲染

09. 弯矩图 (BMD)、剪力图 (SFD) 与变形云图的规范化绘制

📐 专业力学制图在前端的落地

受拉侧约定

M
弯矩图 (BMD)：严格按照我国规范绘制在构件受拉侧（通过截面弯矩符号与局部法向矢量计算偏移量）。
V
剪力图 (SFD)：垂直于杆件绘制阴影填充与数值标注。
N
轴力图 (AFD)：不同色彩区分拉压（受拉蓝色、受压红色）。
Δ
原位变形图：基于 Hermite 三次样条插值，支持位移放大系数滑块动态缩放。

📊 实机效果：弯矩受拉侧包络与支座反力矢量 Internal Forces

DELIVERY MATRIX

双形态交付：一套代码，通吃网页与桌面端

10. Web Application vs Desktop Native Application

🌐 形态 A：Web 网页应用 (Docker)

浏览器即开即用

技术栈：Vue 3 + Nginx + Docker

分发：http://ai.venchy.online

☁️

Deploy Command # 一键拉起云端 Web 服务
docker compose up -d --build

✓
零安装成本：手机、平板、Mac、Windows 任何设备只要有浏览器即可秒开。
✓
团队协同与教学：发一个 URL 链接，所有人立刻同步体验你的力学模型。

💻 形态 B：桌面原生软件 (Electron)

独立安装包

技术栈：Vue 3 + Electron + Node IPC

产物：NSStructure2D_Setup.exe

🖥️

Build Command # 一键生成 Windows .exe 绿色安装包
npm run build:electron

✓
完全离线运行：像 AutoCAD / SAP2000 一样双击打开，无需网络即可强算。
✓
本地硬件与文件权限：自由读写本地工程文件（`.str`、`.dxf`），调用底层 C++ 求解器。

WASM & PERFORMANCE

前沿加速：WebAssembly (WASM) 与免服务器强算

11. 将成熟的 Python / C++ 有限元脚本直接塞进浏览器纯前端运行

🚀 为什么 WASM 是土木工具的利器？

极速本地执行

1
零后端服务器运维：传统方案需要配置复杂的 Python Flask/FastAPI 服务器，而 WASM 让**用户的浏览器直接充当算力节点**。
2
复用现有科学计算资产：通过 **Pyodide**，你现有的 NumPy / SciPy 杆系求解脚本无需重写，直接在前端无缝执行。
3
绝对的数据安全与隐私：工程结构拓扑与内力数据 100% 留在本地内存，不经过任何云端传输。

💡 Pyodide 纯前端力学计算示例

In-Browser Python

Browser Python / WASM // 浏览器前端直接加载 Python 矩阵求解
import { loadPyodide } from 'pyodide';
const pyodide = await loadPyodide();
await pyodide.loadPackage('numpy');

// 直接在前端运行 Python 有限元内核
const forces = pyodide.runPython(` import numpy as np # 直接刚度法方程求解 [K]{Δ} = {P} delta = np.linalg.solve(K_global, P_global) delta.tolist() `);

RUNTIME & DEVOPS

技术揭秘 4：Node.js 与 Docker 容器化底座

12. 现代前端工程化基石与环境解耦交付

⚡ Node.js 现代工程底座

NPM 生态

1
极速构建 (Vite)：秒级热更新，修改力学公式或画布样式实时刷新。
2
海量生态包支持：NPM 生态中的矩阵求解库、Three.js 3D 渲染库、DXF 解析库信手拈来。

NPM Ecosystem # 一键安装数学矩阵库与 CAD 导出库
npm install mathjs three dxf-writer

🐳 Docker 容器化多阶段构建

20MB 极简产物

Dockerfile # Stage 1: 前端快速编译
FROM node:18-alpine AS builder
RUN npm run build

# Stage 2: Nginx 生产环境 (产物仅 20MB)
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

无论是发给同事还是部署到云端，`docker compose up` 彻底消灭依赖冲突。

LIVE DEMO

现场演示：WSL 2 × Docker Desktop 实战运行

13. 在 Windows 环境下玩转原生 Linux 容器与力学求解

🖥️ 现场操作步骤清单

实机命令

WSL 2 Bash # 1. 进入 WSL 工程目录
cd ~/nsstructure-2d

# 2. 一键构建并拉起求解器容器
docker compose up -d --build

# 3. 查看容器映射端口 (51674 -> 80)
docker ps | grep nsstructure

# 4. Windows 浏览器直连
http://localhost:51674

🎯 成果体验：两小时全闭环手搓的 Web 求解器 localhost:51674

DEBUGGING TIPS

避坑指南：AI 生成代码的典型 Bug 与排查

14. 真实 Vibe Coding 过程中的典型痛点与优雅化解

⚠️ 换行符 CRLF 坑

现象：Windows 编辑的代码在 Linux/WSL 容器中运行报 `\r` 找不到命令。

化解：在根目录添加 `.gitattributes` 设置 `* text eol=lf`，一劳永逸规范跨平台格式。

⚠️ 缩放坐标偏移

现象：鼠标滚轮缩放后，点选添加节点的位置与鼠标指针出现漂移。

化解：给 AI 提示词明确要求加入全局视图变换矩阵逆运算，将屏幕像素映射回物理坐标。

⚠️ 荷载正负号约定

现象：输入负数荷载时箭头绘制反向或文字重叠。

化解：在 Harness 规则中明确规定：“荷载箭头方向严格跟随物理向量符号，数值显示绝对值”。

FUTURE & VISION

行业思考：结构工程师的三大未来趋势

15. 两小时做求解器这件事，本质上不是“炫技”

趋势一：工具自造时代

未来不会只有 SAP2000 / MIDAS 等通用巨无霸，还会涌现出成千上万个针对具体工程、特定构件的“工程师专属定制小工具”。

趋势二：结构表达力爆发

未来谁能做到“把力学想法精准表达为可运行工具”，谁就拥有行业核心话语权。AI 会做事，但决定做什么事的是结构工程师。

趋势三：知识沉淀升级

知识不再只是师傅带徒弟或陈旧的技术总结 PPT，而是直接沉淀为“可执行的 AI 提示词与自动化求解工具”，实现算法资产化。

CONCLUSION & Q&A

互动交流 & Q&A 答疑

16. 拥抱 AI，成为驾驭算力的新一代结构工程师

💬 寄语每一位土木工程师

“不要害怕大模型替代我们，而要学习大模型能替我们做什么。
结构行业不会被 AI 吃掉，但不会用 AI 的结构工程师一定会被其他工程师吃掉。”

主讲人：周文琪
单位：上海非解构数字科技有限公司

微信扫码预约

B站扫码预约

欢迎在弹幕中提出你在开发力学工具、Vue 或 Docker 部署中的任何疑问！

两小时：带你用 AI 手搓结构力学求解器

周文琪