🔧 阿川の電商水電行
從安裝到實測：基於 Claude Code + GLM-4.7 的前端生成與評測實戰
引言
近一來，程式碼生成類工具逐漸從「寫幾行示例程式碼」走向「完整功能交付」，但真正落到工程實踐時，很多工具仍停留在 Demo 階段：要麼跑不起來，要麼改動成本過高。本次評測的核心目標並不是追求「炫技」，而是站在開發者真實使用場景出發，驗證一套組合方案是否具備以下能力：
- 是否能在本地環境中快速跑通
- 是否能端到端生成可演示、可交付的前端成果
- 是否減少重複勞動，而不是製造新的維護負擔
因此，本文選擇了 Claude Code + 藍耘 MaaS 平台 這一組合，從命令行工具接入開始，結合多個真實前端需求案例，對模型在網頁應用、遊戲及 3D 可視化等場景下的表現進行實測分析。評測重點不在「模型參數」或「理論能力」，而在於：它到底能不能幫開發者省時間、少踩坑。
最大輸出和最大輸入一比一，編碼能力放在下面了，個人覺得是挑不出毛病的好吧。不信你試試
一、命令行使用 Claude Code（安裝與配置）
步驟一：安裝 Claude Code（命令行）
前提
- Node.js ≥ 18（建議使用 nvm 管理版本以避免權限問題）。
- macOS：推薦用 nvm 或 Homebrew 安裝 Node.js，不建議直接雙擊 pkg 安裝（可能有權限問題）。
- Windows：請先安裝 Git for Windows。
安裝
npm install -g @anthropic-ai/claude-code安裝完成後驗證：
claude --version
步驟二：配置藍耘 MaaS 平台
-
註冊 / 登入：訪問藍耘 MaaS 平台，完成帳號註冊並登入。
-
在「API KEY 管理」中創建 API Key，並複製備用。
在本機設置環境變數（推薦方式：編輯配置文件）
- macOS / Linux：
~/.claude/settings.json - Windows：
%USERPROFILE%/.claude/settings.json
示例 settings.json（請替換your_lanyun_maas_api_key）：
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "your_lanyun_maas_api_key",
"ANTHROPIC_BASE_URL": "https://maas-api.lanyun.net/anthropic",
"API_TIMEOUT_MS": "3000000",
"CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1,
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "/maas/deepseek-ai/DeepSeek-V3.2",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "/maas/deepseek-ai/DeepSeek-V3.2",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "/maas/deepseek-ai/DeepSeek-V3.2"
}
}
同時創建（或確認）~/.claude.json：
{
"hasCompletedOnboarding": true
}
生效提示
- 配置完成後請打開一個新的終端窗口以載入新的環境變數。
- 啟動
claude，首次會詢問是否使用該 API key（選擇Yes），並請在第一次訪問時同意信任工作目錄（允許讀取文件以便程式碼功能）。
步驟三：常見排查
- 若手動修改
~/.claude/settings.json後不生效：- 關閉所有 Claude Code 窗口，重新打開新的終端。
- 若仍不生效，嘗試刪除該文件並重新生成配置（注意備份原文件）。
- 檢查 JSON 格式是否正確（可用在線 JSON 校驗工具）。
- 檢查版本與更新：
claude --version claude update
二、編碼工具中使用 claude-code：三個端到端案例（含提示與實測評價）
每個案例先給出「需求 + 提示詞」示例，然後給出對模型產出（程式碼/效果）的實測評價，評價盡量貼近工程實踐：是否能直接運行、需要手工修改的點、功能完整性、性能與安全注意項。
案例 1：互動式個人血壓記錄網頁 — 前端端到端生成
需求：希望 GLM-4.7 能夠生成一個簡單的個人血壓記錄網頁應用，包括錄入血壓數據的前端介面和一個數據可視化大屏展示頁面，要求介面美觀，且支持單人登入功能。
提示詞：我們向 GLM-4.7 輸入了如下的自然語言提示：
請用 HTML、CSS 和 JavaScript 創建一個完整的個人血壓記錄網頁應用。要求包括：1) 使用者登入介面；2) 血壓數據錄入表單（收縮壓、舒張壓、測量日期）；3) 數據可視化大屏介面，以圖表展示歷史血壓記錄；4) 整體介面風格現代簡潔，配色協調美觀。5) 將前端程式碼與樣式、腳本整合在一個 HTML 文件中，方便直接運行。
實測評價（工程視角）
- 可運行性：生成的單文件 HTML 通常能在本地直接打開並運行，圖表（如用 Chart.js）能正常渲染——基本可直接跑通。
- 需要人工補充/注意點：持久化通常僅用
localStorage，真實生產需後端與加密；登入為前端模擬（不安全），若要求真登入需接入後端 API 與認證方案。 - 程式碼質量：結構清晰但註釋與邊界檢查（表單驗證、異常處理）需補充；樣式可直接用但對響應式與無障礙要進一步優化。
- 總結：非常適合原型與內部演示；若要上線需補後端、認證與輸入校驗、數據導出等工程工作。
案例 2：Web 雙人對戰小遊戲（Joy-Con 風格）
需求：開發一個基於 Web 的雙人對戰小遊戲，介面風格模仿 Nintendo Switch 主機的 Joy-Con 手柄，包括左右兩個虛擬手柄和中間的遊戲畫面。要求實現基本的遊戲邏輯和簡單的控制功能。
提示詞：我們向 GLM-4.7 輸入了如下提示：
請用 HTML5 Canvas 和 JavaScript 編寫一個雙人對戰小遊戲。介面要求模仿 Nintendo Switch 的 Joy-Con 手柄：左側藍色手柄，右側紅色手柄，中間為遊戲畫面。玩家 1 使用鍵盤 A/D 移動，J 攻擊，K 跳躍；玩家 2 使用鍵盤 U/I/O 分別釋放技能。遊戲要求有基本的角色移動和攻擊判定邏輯，介面風格統一美觀。請將所有程式碼整合在一個 HTML 文件中，確保在瀏覽器中打開即可運行。
實測評價（工程視角）
- 可運行性：模型生成的 Canvas 遊戲通常包含主循環、碰撞/判定的基本實現，能夠進行本地試玩；幀率在普通瀏覽器和單頁面邏輯下表現正常。
- 需要人工補充/注意點：物理判定、碰撞響應和輸入去抖（debounce）常是「粗糙實現」，需手動修正以避免卡頓或誤判；網路對戰未實現（僅本地雙人）。
- 程式碼質量：邏輯上可讀，但沒有模組化（全部放在全局），不利於維護；建議拆分為模組或使用簡易引擎封裝。
- 總結：適合快速原型與教學演示；若做成產品需重構輸入處理、物理/判定邏輯、以及添加資源管理與關卡數據。
案例 3：前端可視化元件生成
需求：創建一個基於 Three.js 的 3D 場景，包含一個華麗的寶塔和周圍盛開的櫻花樹，場景要求視覺精美、結構清晰，且支持用戶通過滑鼠或手勢進行交互控制（如旋轉場景、縮放視圖）。
提示詞：我們向 GLM-4.7 輸入了如下提示：
請用 Three.js 編寫一個包含寶塔和櫻花樹的 3D 場景。要求：1) 寶塔位於場景中央，裝飾華麗；2) 周圍環繞盛開的櫻花樹，營造花園氛圍；3) 場景使用等軸測或俯視視角，光影柔和，有適當的環境光和定向光以產生投影；4) 支持滑鼠拖動旋轉場景和滾輪縮放查看；5) 所有程式碼整合在一個 HTML 文件中，使用 CDN 引入 Three.js 及其依賴，確保直接打開即可運行。
實測評價（工程視角）
- 可運行性：多數生成結果能在現代瀏覽器中打開並展示場景（依賴 CDN 的 Three.js），基礎交互（OrbitControls）通常可用。
- 需要人工補充/注意點：模型與細節（如櫻花樹的粒子/貼圖）可能是簡單幾何或貼圖替代，若追求視覺精細需要自行替換高品質模型/貼圖與烘焙光照或使用 PBR 材質；陰影與性能在低端設備上需做 LOD/簡化處理。
- 程式碼質量：示例程式碼多為教學風格，未必包含資源加載進度管理與錯誤處理；建議加上紋理壓縮、異步加載與記憶體釋放邏輯。
- 總結：適合演示級視覺效果與交互交付；商業級視覺需投入美術資源並改造渲染管線與性能優化。
三、補充建議（快速 checklist）
- 環境：Node.js 用 nvm 管理、macOS 權限使用 sudo 謹慎；Windows 使用 PowerShell / Git Bash 測試命令。
- 配置：編輯
~/.claude/settings.json時注意 JSON 語法（逗號、引號、轉義）；每次修改後重啟終端。 - 模型選擇：通過
~/.claude/settings.json修改ANTHROPIC_DEFAULT_*_MODEL字段來切換模型；切換後啟動claude並在交互中用/status確認。 - 安全/上線：所有「示例僅前端」場景上線前必須接入安全認證、後端存儲與輸入驗證（避免注入與隱私洩露）。
總結
從本次實際使用和多個案例的結果來看，Claude Code 在接入藍耘 MaaS 後，已經具備「工程可用級」的生成能力，尤其在以下幾個方面表現比較穩定：
- 端到端能力明確：在單文件 HTML、前端 Demo、Canvas 遊戲、Three.js 場景等任務中，生成結果大多可直接運行，減少了大量「拼程式碼」的前期工作。
- 適合作為原型與驗證工具：非常適合用在需求驗證、內部演示、方案評審和教學場景中，而不是一開始就手寫全部程式碼。
- 開發者心智成本低：命令行方式接入，不改變現有工作流，比網頁對話式工具更符合日常編碼習慣。
當然，也需要客觀看待它的邊界：
- 生成程式碼在安全性、模組化、性能優化方面仍需要人工介入；
- 登入、數據存儲、多人協作等生產級能力仍需配合後端體系完善；
- 更複雜的專案仍然離不開開發者的架構設計與工程判斷。
整體來看，這套方案的價值並不在於「替代程式設計師」，而在於把開發者從重複、低價值的樣板工作中解放出來，讓時間更多地投入到業務邏輯、架構設計和體驗打磨上。
如果你的目標是： 更快做出可運行的東西，而不是從零寫樣板程式碼，那麼 Claude Code + 藍耘 MaaS，已經是一個值得放進工具箱裡的選項。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
