AVL Code
全部案例
#009 · 原型開發

案例研究 · 原型開發

電力產業收入與成本監控系統

你是電力產業的開發/售前人員，手裡是客戶的「收入與成本監控-預警系統」XMind 功能腦圖，任務是在不動後端的前提下快速產出可演示原型。照本文三步做完，你會拿到一份功能結構樹 JSON、14 條守護測試，以及一個 40.6KB 的單檔案高保真原型——15 個頁面、ECharts 圖表、電力工業級深色主題，瀏覽器開啟即可演示。

對象：352KB XMind 需求腦圖· 約束：純前端靜態展示 · 不接後端/資料庫· 瀾砥大模型· 交付：15 頁原型 · 40.6KB 單檔案· 自檢：pytest 14/14 · ruff/semgrep 0 問題

檢視會話內容 下載會話存檔 可匯入 AVL Code 工作區重播完整對話 線上檢視原型 檢視案例報告

會話回放與報告為簡體中文原始記錄 · 生成依據：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 替換成即時資料？