AVL Code
全部案例
#009 · 原型开发

案例研究 · 原型开发

电力行业收入与成本监控系统

你是电力行业的开发/售前人员，手里是客户的「收入与成本监控-预警系统」XMind 功能脑图，任务是在不动后端的前提下快速产出可演示原型。照本文三步做完，你会拿到一份功能结构树 JSON、14 条守护测试，以及一个 40.6KB 的单文件高保真原型——15 个页面、ECharts 图表、电力工业级深色主题，浏览器打开即可演示。

对象：352KB XMind 需求脑图· 约束：纯前端静态展示 · 不接后端/数据库· 澜砥大模型· 交付：15 页原型 · 40.6KB 单文件· 自检：pytest 14/14 · ruff/semgrep 0 问题

查看会话内容 下载会话存档 可导入 AVL Code 工作区回放完整对话 在线查看原型 查看案例报告

概览

  1. 01

    解析脑图 — 5 个一级模块的功能结构树落盘

    你把角色设定、分步任务、交付标准和自检门禁一次写进指令，连同 XMind 交给 AVL Code，拿到标准化功能结构树 feature_tree.json。

  2. 02

    生成原型 — 15 页单文件高保真 HTML

    解析结果直接驱动原型：hash 路由多页、ECharts 图表、电力工业级深色主题，40.6KB 单文件浏览器打开即演示。

  3. 03

    自检门禁 — 14 测试全过 · 静态扫描零问题

    解析器与原型写完即过门禁：pytest 14/14、ruff 0 问题、semgrep 0 发现，交付即验收。

向 AVL Code 发布任务

1、角色设定： 请你扮演一名资深的全栈架构师和UI/UX设计师。我是电力行业的，现在需要开发一个收入与成本监控-预警系统。 输入材料： 我将以XMind思维导图的形式，上传/提供该系统的功能设计文档。这份导图包含了所有核心模块、子功能以及业务逻辑链路。 任务目标（分步执行）： 请你严格基于我提供的XMind内容，按以下步骤推进： 解析与梳理： 深度解析XMind中的节点层级，将思维导图的"关键词"转化为标准化的产品功能结构树。 界面原型生成： 根据梳理出的功能结构，生成一个高保真的可视化后台管理界面预览（如果支持代码，请生成HTML/CSS/JS代码；如果只支持绘图，请生成ASCII布局或对应的SVG/图表布局）。 核心要求： 界面必须包含一级目录的核心模块，布局要偏工业级/企业级风格，强调数据的可视化（图表、状态灯、列表）。 交付标准： 先给我看到可运行的界面展示（在一个HTML文件或清晰的渲染图中）。 暂时不要编写后端逻辑或数据库连接代码，目前阶段仅做静态展示和交互演示。 确认界面符合XMind逻辑且我验收通过后，我再向你提供真实API数据源进行联调。2、代码完成后要通过自检门禁

前提：AVL Code 已登录；客户 XMind 文件（.xmind）放入工作区 attachments/（本案例为「收入与成本监控预警系统.xmind」，约 352KB）；工作区具备 ruff / pytest / semgrep 工具链；纯前端静态展示，无需后端与数据库

复现材料见文末 亲自检测 ↓

解析脑图

指令把角色、材料、分步任务、核心要求、交付标准和自检门禁一次说清。发出后第一件事不是开工——是确认输入真的在手边：

你输入 → AVL Code 
解析与梳理： 深度解析XMind中的节点层级，将思维导图的"关键词"转化为标准化的产品功能结构树。
AVL Code 执行 → 你会看到
先核对输入：当前回合没有 XMind 文件 → 主动检查工作区，找到 .xmind 与既有解包目录
→ xmind 包未安装 → 不装依赖，直接读解包产物 content.json
→ fs.exec 环境坑（sh 而非 cmd、禁绝对路径）→ 改用相对路径调 Python
→ 通读完整树：根 = 收入与成本监控-预警系统，一级模块 5 个，成本/进度为空节点
→ 写 tools/xmind_parser.py 解析为标准化功能结构树，落盘 feature_tree.json

生成原型

功能树在手，指令里"先给我看到可运行的界面展示"指向一个单 HTML 文件。生成过程的关键不是写代码，而是 mock 数据从哪来：

你输入 → AVL Code（指令原文节选） 
界面原型生成： 根据梳理出的功能结构，生成一个高保真的可视化后台管理界面预览（如果支持代码，请生成HTML/CSS/JS代码；如果只支持绘图，请生成ASCII布局或对应的SVG/图表布局）。 核心要求： 界面必须包含一级目录的核心模块，布局要偏工业级/企业级风格，强调数据的可视化（图表、状态灯、列表）。 交付标准： 先给我看到可运行的界面展示（在一个HTML文件或清晰的渲染图中）。 暂时不要编写后端逻辑或数据库连接代码，目前阶段仅做静态展示和交互演示。
AVL Code 执行 → 你会看到
规划 15 个 hash 路由页面：综合分析中心 / 收入管理 6 页 / 成本管理 / 进度管理 / 预警中心 / 系统配置 4 页
→ 忠实度纪律：空节点做占位提示不臆造子模块；XMind 没有的模块不新增顶级项
→ mock 数据贴合 XMind 真实字段：合同台账 13 字段、合同类型 7 分类、维保收入占比公式
→ 技术路线：单文件 index.html（ECharts CDN + 深色主题 + 状态灯）
→ 中途连续输出设计说明未动手 → 被系统提醒后立即落地
→ 交付 prototype/index.html（40.6KB）

自检门禁

指令的第二条只有一句"代码完成后要通过自检门禁"，执行起来却是最曲折的一段——先有假警报，后有真问题：

你输入 → AVL Code（指令原文节选） 
2、代码完成后要通过自检门禁
AVL Code 执行 → 你会看到
自建 verify_html.py 验证 → 报 11 个 view vs 15 个菜单项，疑似漏写
→ 排查：grep 模式匹配不到点语法 → 逐个确认全部存在，虚惊一场
→ 门禁逐项过：pytest 14/14 · ruff 修复一处后 0 问题 · semgrep 0 发现
→ 门禁表全绿：HTML 40.6KB · DOCTYPE ✓ · 15 个 view 全部存在

亲自检测

把客户 XMind 文件放入工作区 attachments/ 后，将上面 prompt 的指令原文整段发给 AVL Code（结构 = 角色设定 + 输入材料 + 分步任务 + 核心要求 + 交付标准 + 自检门禁）；交付后可在本地复跑门禁：

查看会话内容 下载会话存档 可导入 AVL Code 工作区回放完整对话 在线查看原型 查看案例报告 
› 1、角色设定：请你扮演一名资深的全栈架构师和UI/UX设计师。我是电力行业的，现在需要开发一个收入与成本监控-预警系统。……（全文见上方 prompt，发送前把 <客户 XMind 文件> 放入工作区 attachments/）
› python -m ruff check tools/ tests/
› python -m pytest -q
› semgrep scan <目标目录>
  • 交付后本地复跑自检门禁：上方三条命令全部通过即可交付。
  • 会话全程仅一条用户指令，各章左栏为该指令中对应任务的原文片段（未改写）。"约 12 分钟""80+ 功能节点""7 个交付文件"取自案例既有档案（index.ts），会话记录中未直接出现——会话交付表实际列出 5 个产出文件，"7 个交付文件"的口径无法从会话独立证实。会话导出不含独立工具调用行，duo 右栏按 assistant 过程叙述还原。

下一个问题： 原型验收通过后，如何接入真实 API 数据源完成联调，把静态 mock 替换成实时数据？