文章庫

本文彙總了 Claude Code 環境下全棧逆向工程工具鏈的安裝與配置，涵蓋 8 個 MCP 服務器和 4 組 Skill 套裝，覆蓋 Java/Android、Native/SO、JS/Web 三層逆向場景，包含來源、安裝命令、核心能力和全局配置文件。1. 概述本文檔記錄在 Claude Code 中全局安裝的 12 個逆向工程工具（8 個 MCP 服務器 + 4 組 Skill 套裝）的完整配置。覆蓋 Java 層、Native 層、JS/Web 層全棧逆向分析場景。安裝環境：Windows 11，Git Bash (MINGW64)Python 3.11.9 + uv 0.7.12 + pip 24.0Node.js v22.20.0 + npm2. 安裝清單2.1 Java/Android 逆向 — jadx-mcp-server來源：https://github.com/zinja-coder/jadx-mcp-server安裝路徑：C:\Users\wangs\.claude\mcp-servers\jadx-mcp-server安裝命令：git clone https://github.com/zinja-coder/jadx-mcp-server "$HOME/.claude/mcp-servers/jadx-mcp-server"cd "$HOME/.claude/mcp-servers/jadx-mcp-server"uv sync主要能力（約 25 種工具）：代碼檢索：獲取所有類、搜索類/方法、獲取源碼、SMALI 代碼Android 資源：獲取 AndroidManifest、字符串、資源文件交叉引用：類/方法/字段的 xrefs 分析重命名：類、方法、字段、包、變量重命名調試：棧幀、線程、變量檢查MCP 通信架構：Claude Code ←→ MCP Server (stdio) ←→ JADX GUI Plugin (HTTP :8650) JADXGUI端監聽 127.0.0.1:8650操作時序：2.2 Native/SO 逆向 — ida-pro-mcp來源：https://github.com/mrexodia/ida-pro-mcp安裝命令：pip install https://github.com/mrexodia/ida-pro-mcp/archive/refs/heads/main.zipida-pro-mcp --install主要能力：反編譯、反彙編、交叉引用、控制流分析函數/字符串/導入/導出列表註釋、重命名（函數、局部變量、全局變量）、類型聲明調試器控制（斷點、寄存器，需 --unsafe 標誌）在 IDA 上下文中執行任意 Python 代碼支持 IDA Pro 9.0+ 的無頭模式（idalib）MCP 通信架構：Claude Code ←→ Python MCP Server (stdio) ←→ IDA JSON-RPC Plugin (127.0.0.1:13337) ←→ IDA Pro操作時序：2.3 JS/Web 逆向 — js-reverse-mcp來源：https://github.com/nicecaesar/js-reverse-mcp安裝命令：npm install -g js-reverse-mcp主要能力：頁面觀察與腳本定位：列出腳本、獲取/保存源碼、搜索定位Hook 與運行時採樣：Hook 全局函數、追蹤 webpack 內部函數、Hook 數據採樣斷點與執行控制：按行號/代碼文本設斷點、暫停/恢復/單步執行、獲取調用棧和作用域變量網絡分析：XHR/Fetch 斷點、請求列表與調用棧追溯、WebSocket 消息反混淆與復現：反混淆代碼、導出本地復現工程反檢測架構：基於 Patchright（Playwright 反檢測 fork），60+ Stealth 參數，自動移除 navigator.webdriver 等特徵。操作時序：2.4 動態 Hook — frida-mcp來源：https://github.com/dnakov/frida-mcp安裝命令：git clone https://github.com/dnakov/frida-mcp.git "$HOME/.claude/mcp-servers/frida-mcp"pip install "$HOME/.claude/mcp-servers/frida-mcp"pip install frida-tools主要能力：交互式 JavaScript REPL：實時執行 Frida 腳本，捕獲 console.log 輸出腳本注入與進度追蹤：注入自定義 Frida 腳本並追蹤注入進度進程/設備監控：實時監控目標進程狀態和內存原生函數 Hook：通過 REPL 直接 Hook 目標函數並獲取回調消息操作時序：2.5 瀏覽器自動化 — playwright-mcp來源：https://www.npmjs.com/package/@playwright/mcp（Microsoft 官方）安裝命令：npm install -g @playwright/mcp@latestnpm install -g @playwright/testnpx playwright install chromium主要能力（34 種工具）：導航：browser_navigate交互：browser_click、browser_type、browser_fill、browser_hover截圖：browser_take_screenshot（全頁面或元素級）數據提取：browser_snapshot（無障礙樹）、browser_evaluate（JS 執行）會話管理：導出/導入登錄態操作時序：2.6 文件系統訪問 — filesystem-mcp來源：https://www.npmjs.com/package/@modelcontextprotocol/server-filesystem（Anthropic 官方）安裝方式：通過 npx 按需加載，無需手動安裝主要能力：讀寫文件、創建目錄、移動文件搜索文件、查看目錄樹結構路徑遍歷防護：安全範圍限定在 F:/ 目錄操作時序：2.7 API 請求驗證 — curl-mcp來源：https://www.npmjs.com/package/@247arjun/mcp-curl安裝命令：npm install -g @247arjun/mcp-curl主要能力：curl_get、curl_post、curl_put、curl_delete、curl_download、curl_advanced操作時序：2.8 JS/Web 逆向 MCP — JSReverser-MCP來源：https://github.com/NoOne-hub/JSReverser-MCP安裝路徑：C:\Users\wangs\.claude\mcp-servers\JSReverser-MCP安裝命令：cd "$HOME/.claude/mcp-servers"git clone https://github.com/NoOne-hub/JSReverser-MCP.git JSReverser-MCPcd JSReverser-MCPnpm installnpm run build主要能力（約 30+ 種工具）：頁面觀察與腳本定位：列出腳本、獲取/搜索源碼Hook 與運行時採樣：Hook 全局函數/方法、追蹤調用鏈、數據採樣斷點與調試控制：按行號/代碼文本設斷點、單步執行、調用棧/作用域變量請求鏈與網絡分析：XHR/Fetch 攔截、請求調用棧追溯、WebSocket 消息監控頁面自動化：導航、DOM 查詢、點擊、輸入、截圖本地復現與證據：導出復現工程、記錄逆向證據、會話狀態保存/恢復深度分析：代碼收集、AI 理解代碼、反混淆、風險面板工作方法論："先觀察 → 優先 Hook → 最後斷點 → 面向復現 → 證據優先 → 純算後置"技術棧：TypeScript (96.4%)，Apache-2.0 協議。內置 h5st、falcon、a-bogus 等案例參數。可選：配置 .env 文件的 DEFAULT_LLM_PROVIDER（openai/anthropic/gemini）和對應 API Key 以啓用 AI 增強分析（如 understand_code 工具）。操作時序：2.9 JS/Web 逆向 Skill — jshook-skill來源：https://github.com/wuji66dde/jshook-skill安裝路徑：C:\Users\wangs\.claude\skills\jshook-skill安裝命令：cd "$HOME/.claude/skills"git clone https://github.com/wuji66dde/jshook-skill.git jshook-skillcd jshook-skillnpm installnpm run build可選：複製 .env.example 為 .env，配置 OPENAI_API_KEY 或 ANTHROPIC_API_KEY 以啓用 AI 反混淆。主要能力：代碼收集：智能模式（summary/priority/incremental），Token 溢出防護AI 反混淆：20+ 混淆類型識別，Babel AST 分析，JSVMP/Packer 解包加密檢測：識別 AES/RSA/MD5/SHA 及自定義算法，安全評分CDP 調試器：條件斷點、URL/腳本定向斷點、單步執行、變量檢查、Watch 表達式Hook 注入：攔截函數、XHR/fetch、WebSocket、Cookie、eval、定時器、屬性訪問反檢測：16 項隱身特性（WebDriver 隱藏、Canvas/Audio 指紋噪聲、WebGL 覆蓋、5 平台預設）瀏覽器自動化：自動啓動 Chrome/Edge、頁面導航、點擊、輸入、截圖技術棧：TypeScript (99.7%)，GPL-3.0 協議。需要 Node.js ≥ 18。操作時序：2.10 JS/Web 逆向 Skill — jsr-reverse（reverse-skill）來源：https://github.com/715494637/reverse-skill安裝路徑：C:\Users\wangs\.claude\skills\jsr-reverse安裝命令：git clone https://github.com/715494637/reverse-skill.git /tmp/reverse-skill-tmpcp -r /tmp/reverse-skill-tmp/jsr-reverse "$HOME/.claude/skills/jsr-reverse"rm -rf /tmp/reverse-skill-tmp主要能力：請求鏈證據：建立"目標請求 → 觸發動作 → 上游依賴 → 狀態消費 → 正常/風控分支"的可驗證證據鏈寫入邊界證明：定位動態字段、請求頭、Cookie、消息對象的真實 writer/builder/sink殼恢復：解包 JSVMP、AST、Worker、WASM、webpack/runtime、協議封裝/橋接層運行時對齊：識別對象、狀態、時序、生命週期、指紋、風控分支導致的執行偏差檢查點驗證：固定樣本，對齊輸入/輸出/中間狀態/依賴，產生可交付結論分析進度記錄在 reverse-records/請求鏈路.md。涵蓋請求塊、運行時補充、恢復補充、驗證補充四個維度。操作時序：2.11 JS 補環境 Skill — js-env-patcher來源：https://github.com/zhizhuodemao/js-env-patcher安裝路徑：C:\Users\wangs\.claude\skills\js-env-patcher安裝命令：cd "$HOME/.claude/skills"git clone https://github.com/zhizhuodemao/js-env-patcher.git js-env-patcher主要能力：自動補環境閉環：執行混淆 JS → 診斷缺失環境 → 自動補環境 → 循環直到跑通內置多種環境模板（env/ 目錄）環境監控（scripts/ 目錄）參考文檔（references/ 目錄）觸發場景：給定混淆 JS 文件要求補環境、逆向分析、沙箱執行，或提到 a_bogus/JSVMP/指紋/反檢測。操作時序：2.12 JS 逆向 Skill 套裝 — xbsReverseSkill來源：https://github.com/lwjjike/xbsReverseSkill安裝路徑：C:\Users\wangs\.claude\skills\（三個子目錄）安裝命令：git clone https://github.com/lwjjike/xbsReverseSkill.git /tmp/xbsReverseSkill-tmpcp -r /tmp/xbsReverseSkill-tmp/ast-deobfuscation "$HOME/.claude/skills/ast-deobfuscation"cp -r /tmp/xbsReverseSkill-tmp/web-reverse-algorithm "$HOME/.claude/skills/web-reverse-algorithm"cp -r /tmp/xbsReverseSkill-tmp/web-reverse-env "$HOME/.claude/skills/web-reverse-env"rm -rf /tmp/xbsReverseSkill-tmp包含三個獨立 Skill 模塊：ast-deobfuscation — AST 反混淆使用 Babel AST 做分層、可回退的定向反混淆。處理 _0x 標識符、字符串表、自執行解碼包裝、dispatcher 對象、虛假常量分支、控制流平坦化（while/for + switch）、if (literal === opcode) 分發鏈。內置 Reese84、頂象、極驗4、同花順、網易易盾、小紅書、OB 變種等專用腳本。web-reverse-algorithm — 純算/協議逆向面向複雜 header/cookie 簽名、混合加密、JSVMP/VMP、Wasm、PoW、響應解密、驗證碼參數還原。從最終請求/cookie/verify/WebSocket 幀倒推 writer → builder → entry → source，設計瀏覽器與本地對齊驗證方案。web-reverse-env — 瀏覽器補環境覆蓋 Proxy 吐環境、原型鏈修復、native toString 保護、描述符保護，以及 navigator/document/storage/canvas/WebGL/crypto/performance/WebRTC/Worker 等模塊化補環境構建。技術棧：JavaScript (95.3%) + Python (4.7%)，MIT 協議。操作時序：3. 全局配置文件配置文件路徑：C:\Users\wangs\.claude\settings.json{ "mcpServers": { "jadx-mcp-server": { "command": "D:\\Python311\\Scripts\\uv.exe", "args": ["--directory", "C:\\Users\\wangs\\.claude\\mcp-servers\\jadx-mcp-server", "run", "jadx_mcp_server.py"] }, "ida-pro-mcp": { "command": "D:\\Python311\\python.exe", "args": ["D:\\Python311\\Lib\\site-packages\\ida_pro_mcp\\server.py"] }, "js-reverse": { "command": "npx", "args": ["js-reverse-mcp"] }, "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "F:/"] }, "frida": { "command": "D:\\Python311\\Scripts\\frida-mcp.exe" }, "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] }, "curl": { "command": "npx", "args": ["@247arjun/mcp-curl"] }, "js-reverser": { "command": "node", "args": ["C:\\Users\\wangs\\.claude\\mcp-servers\\JSReverser-MCP\\build\\src\\index.js"] } }, "permissions": { "allow": [ "mcp__pencil", "mcp__jadx_mcp_server", "mcp__ida_pro_mcp", "mcp__js_reverse", "mcp__filesystem", "mcp__frida_mcp", "mcp__playwright", "mcp__curl", "mcp__js_reverser" ], "defaultMode": "auto" }}4. 使用前置條件工具名稱使用前需滿足的條件jadx-mcp-serverJADX GUI 運行中 + jadx-ai-mcp 插件[1] 已安裝（插件端口 8650）ida-pro-mcpIDA Pro 8.3+（推薦 9.0）+ 已加載目標二進制文件（端口 13337）；IDA Free 不支持js-reverseChrome 啓動命令：chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debugfridaUSB 連接設備，或本地已運行待分析的進程playwright已執行 npx playwright install chromium 安裝瀏覽器filesystem無需額外條件，首次執行時 npx 自動下載curl無需額外條件js-reverserChrome 啓動命令：chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debugjshook-skillChrome/Edge 瀏覽器 + 可選：配置 .env 的 AI API Key 以啓用 AI 反混淆jsr-reverse需要 js-reverse-mcp 配合使用以獲取頁面運行時數據js-env-patcherNode.js 運行環境，用於沙箱執行混淆 JSxbsReverseSkillNode.js 運行環境（ast-deobfuscation 需要 Babel）參考文獻[1] jadx-mcp-server：https://github.com/zinja-coder/jadx-mcp-server[2] jadx-ai-mcp 插件：https://github.com/zinja-coder/jadx-ai-mcp[3] ida-pro-mcp：https://github.com/mrexodia/ida-pro-mcp[4] js-reverse-mcp：https://github.com/nicecaesar/js-reverse-mcp[5] frida-mcp：https://github.com/dnakov/frida-mcp[6] Playwright MCP：https://www.npmjs.com/package/@playwright/mcp[7] Filesystem MCP：https://www.npmjs.com/package/@modelcontextprotocol/server-filesystem[8] Curl MCP：https://www.npmjs.com/package/@247arjun/mcp-curl[9] JSReverser-MCP：https://github.com/NoOne-hub/JSReverser-MCP[10] jshook-skill：https://github.com/wuji66dde/jshook-skill[11] reverse-skill：https://github.com/715494637/reverse-skill[12] js-env-patcher：https://github.com/zhizhuodemao/js-env-patcher[13] xbsReverseSkill：https://github.com/lwjjike/xbsReverseSkill

完成

Playwright測試Agent三劍客：Planner_Generator_Healer操作指南_v1

Playwright v1.56 引入 Planner、Generator、Healer 三大 AI 測試 Agent，將測試工程師由「寫代碼」變為「審查代碼」，實測效率提升約 90%。

完成

Open Design開源AI設計平台操作指南

Open Design 開源 AI 設計平台操作指南——本地優先、多 Agent 兼容，內置 19 個 Skills 同 71 套 Design Systems

完成

逆向Claude Design：huashu-design-深度解析

huashu-design：一個讓AI Agent一句話生成高質量HTML設計嘅Skill

完成

我逆向了Claude Design！免費開源！

逆向 Claude Design 並開源「huashu-design」：一個 agent-first 嘅設計 skill，喺 terminal 一句話生成 PPT、App 原型同動畫

完成

實用AI產研工具：AI設計生成、靜態博客、多模型原型、產品分析

五個實用AI產研工具推介：涵蓋設計生成、靜態博客、多模型原型、AI編程規範同產品分析，全部開源有GitHub。

完成

GitHub 6300 星！huashu-design：在終端打一句話，拿回一份大廠級設計稿

用一句話喺終端生成大廠級設計稿——huashu-design 係一個畀 AI Agent 用嘅設計 Skill，支援原型、PPT、動畫等，上線一週攞 6300 星。

完成

當AI出圖引爆設計圈，huashu-design直接掀翻了設計交付鏈

huashu-design 將設計結果直接推進交付物，補齊 AI 設計工作流最長嘅一段距離

完成

很多人問我的 AI UI 工作流，被我完整拆成一條完整鏈路：先講需求和目標，再落 UI Spec，再做視覺探索，再進入組件化實現，最後再修復

MaxKing寶藏全棧開發者 × 量化交易 × AI 重度用戶。這裏記錄我用 AI 提升效率、解決問題、優化流程的真實實踐，也分享工具背後的判斷、踩坑和可複用方法。上次發了一個文章：別再只讓 Codex 寫代碼了，它更適合接管整條 UI 生產線本意是想着能少用一個工具就少用一個，codex能一手包，何必多用一個呢？但很多人發了留言關於 AI 生成圖片，再生成代碼的工作流。我從留言中，發現最常見的誤區其實不是工具選錯了，而是順序一開始就亂了。如果只是生成一張圖，很多工具都能做到。根據圖片生成一段代碼，現在也有不少工具可以試。但真實項目裏的頁面，不是一張靜態圖。它有業務目標，有模塊優先級，有數據狀態，有響應式適配，有組件複用，也有後續維護成本。所以我更願意把 AI UI 落地工作流拆成一條完整鏈路：先講需求和目標，再落 UI Spec，再做視覺探索，再進入組件化實現，接着用截圖對比把偏差一輪一輪收回來。這篇就按這個順序拆。我把這套鏈路叫做 AI UI 工作流。它不是“先出一張圖，再把圖轉成代碼”這麼簡單，而是把頁面從想法推進到可運行、可維護狀態的一組步驟。這條鏈路大致分成六步：1. 需求與目標：先講清楚頁面服務誰，解決什麼問題，用戶核心動作是什麼。 2. UI Spec：把頁面拆成結構化說明，包括模塊、組件、狀態、響應式和驗收標準。 3. 視覺探索：基於 UI Spec 生成視覺參考圖，看信息層級、模塊關係和視覺風格。 4. 組件化實現：用 Codex / Cursor 根據 UI Spec + 參考圖落 React 頁面，優先複用組件庫。 5. 截圖對比與修正：用瀏覽器截圖和參考圖對比（script可以自動生成截圖），逐項修正佈局、間距、密度和狀態。 6. 交付與沉澱：把 Prompt、UI Spec、組件結構、mock 數據和修正清單沉澱成模板。AI UI 落地不是圖直接轉代碼。最容易踩坑的地方，是圖看起來沒問題，真到實現階段才發現結構和狀態都不對。01-MaxKing.cc-為什麼一定要有工作流？很多人做 AI 頁面，會直接跳到工具層。用哪個工具生成圖？用哪個工具把圖轉代碼？要不要進 Figma？要不要直接丟截圖？ Codex、Cursor、Claude Code 該怎麼搭？這些問題當然重要，但如果沒有工作流，工具越多，反而越亂。因為出圖、寫代碼、修頁面，本質上是三個不同問題。出圖解決的是視覺方向。它回答的是：這個頁面大概應該長什麼樣。寫代碼解決的是工程實現。它回答的是：這個頁面怎麼拆組件、怎麼接數據、怎麼維護。修頁面解決的是落地偏差。它回答的是：生成結果和預期之間差在哪裏，怎麼一步步收斂。一開始讓 AI 生成圖，圖很好看；然後拿圖去轉代碼，發現結構不對；再讓 AI 改代碼，它開始亂改；到頭來還是自己手動調。這類問題通常不是某個工具不行，而是前後步驟沒有對齊。所以我的判斷很直接：AI UI 落地不能只靠單點工具，必須靠一套輸入輸出明確的工作流。每一步都要知道：這一環輸入什麼？輸出什麼？由誰判斷？進入下一步的標準是什麼？只有這樣，AI 才不是“隨機幫你生成一下”，而是能真正進入開發流程。02-MaxKing.cc-第一步：先拆需求與目標我現在做 AI 頁面，第一步不是打開圖片生成工具，也不是打開代碼編輯器。第一步是先問清楚：這個頁面到底要解決什麼問題？比如一個交易儀表盤頁面，不能只說：我要一個高級一點的交易後台。這個需求太空了。更好的拆法，是先把人和目標說清楚：這個頁面給誰用？用戶打開頁面後最重要的事情是什麼？頁面最重要的信息是什麼？用戶有沒有關鍵操作？頁面做到哪一步，才算滿足需求？比如交易儀表盤，它不是單純“做一個好看的後台”。更準確的描述應該是：這是一個給個人交易者 / 專業交易員使用的賬户首頁，目標是讓用戶登錄後快速查看賬户風險、當前持倉、交易信號和最近活動。頁面優先級是：風險預警 > 賬户概覽 > 持倉表格 > 信號面板 > 最近活動。這段話看起來普通，但它會決定後面所有結果。如果這一步不清楚，AI 會自己補腦。它可能會把頁面做得很炫，但風險模塊不突出。它可能會加很多圖表，但真正關鍵的持倉信息不清楚。它可能會做得像展示頁，但不像一個真實可用的業務頁面。先把目標、用戶、主路徑和信息優先級講清楚，後面的工作才有座標系。03-MaxKing.cc-第二步：把需求變成 UI Spec需求說清楚以後，我不會馬上讓 AI 畫圖。我會先整理一份 UI Spec。UI Spec 就是寫給 AI 和工程實現看的結構化頁面說明書。它關心的不是“好不好看”，而是頁面目的、模塊、組件、狀態和佈局。也就是說，它要把一個還比較模糊的頁面想法，拆成後面可以直接執行的結構。比如一個頁面至少要講清楚：頁面目的是什麼？目標用戶是誰？核心動作是什麼？頁面有哪些模塊？每個模塊是什麼組件類型？有哪些狀態？桌面端和移動端怎麼適配？頁面怎麼驗收？還是以交易儀表盤舉例，可以先寫成這樣：YAMLMaxKing.ccpage: name: 交易儀表盤 purpose: 幫助用戶快速查看賬户風險、持倉和交易信號 target_user: 個人交易者 / 專業交易員 primary_action: 查看當前賬户風險 layout_type: dashboardsections: - name: 賬户概覽 component_type: Metric Cards priority: high - name: 風險預警 component_type: Alert Card priority: high - name: 持倉表格 component_type: Data Table priority: medium - name: 信號面板 component_type: Signal Cards priority: mediumstates: - loading - empty - error - normal這份東西的價值很大。因為後面的視覺生成、代碼實現、截圖修正，都可以圍繞它展開。沒有 UI Spec，AI 只能根據一句話或一張圖猜結構。有了 UI Spec，AI 至少知道這個頁面應該怎麼組織。UI Spec 是這套工作流裏最關鍵的中間層。它解決的是：從“模糊想法”到“可執行頁面結構”的問題。04-MaxKing.cc-第三步：再做視覺探索有了 UI Spec 以後，我才會進入視覺探索。這裏可以用 gpt-image-2 或其他圖片生成工具。但這一步的目標，不是讓 AI 隨便畫一個“高級頁面”。我會明確告訴它：這張圖只是視覺參考，不是最終設計稿。優先保證頁面結構、信息層級和模塊關係清楚。頁面要像真實 SaaS 產品界面，不要像概念海報。不要過度科幻，不要複雜 3D，不要無意義裝飾。後續要能落到 React + Tailwind + 組件庫裏。也就是說，視覺探索階段主要看四件事。第一，信息層級是否清楚。用戶第一眼能不能看到最重要的信息？第二，模塊關係是否合理。賬户概覽、風險預警、持倉表格、信號面板之間的關係是否清楚？第三，視覺密度是否合適。交易儀表盤不能太空，也不能亂成一團。第四，是否適合組件化實現。卡片、表格、按鈕、徽章、狀態提示能不能拆成真實組件？這裏有一個很重要的判斷：視覺圖不是源頭，UI Spec 才是源頭。圖片只是幫助我們確認視覺方向。它不能決定產品結構，也不能替代工程約束。如果生成圖有些細節很好，可以吸收。如果生成圖和 UI Spec 衝突，我會優先相信 UI Spec。05-MaxKing.cc-第四步：組件化實現視覺方向確認後，才進入代碼實現。這一步我通常會用 Codex / Cursor 這類 coding agent。但我不會只丟一張圖給它。我會同時給它：* UI Spec * 視覺參考圖 * 技術棧 * 組件庫約束 * 頁面狀態 * mock 數據要求 * 驗收標準比如技術棧可以先約束為：TEXTMaxKing.ccReact TypeScript Tailwind CSS shadcn/ui同時要求它：優先複用 Card、Table、Badge、Button、Tabs、Alert 這類基礎組件。不要為了還原視覺效果寫一堆不可維護的代碼。不要把所有東西寫在一個大組件裏。 mock 數據集中放在 mockData.ts。頁面必須支持 loading、empty、error、normal 四種狀態。響應式至少支持桌面端和移動端。代碼實現階段的目標，是根據 UI Spec 做組件化實現，並儘量貼近視覺參考。這裏要接受一個現實：第一版代碼通常不會完美。它可能佈局基本對了，但間距不夠好。它可能組件結構對了，但視覺密度還要調。它可能桌面端能看，移動端還要優化。沒關係。第一版最重要的是：能跑起來。結構是對的。組件邊界是清楚的。狀態沒有漏掉。後續可以截圖修正。06-MaxKing.cc-第五步：截圖對比與修正很多人對 AI 頁面失望，是因為他們期待一次生成完美結果。我現在不這麼期待。我更關注它能不能進入一個穩定的修正閉環。這個閉環是：TEXTMaxKing.cc參考圖 ↓ 代碼實現 ↓ 瀏覽器截圖 ↓ 對比差異 ↓ 局部修正 ↓ 再次截圖這一步非常重要。因為瀏覽器裏的真實頁面，和靜態視覺圖一定會有差異。真實頁面要處理寬度，要處理數據長度，要處理字體渲染，要處理不同屏幕，要處理 loading、empty、error 狀態。所以我會讓 AI 或自己對比：佈局結構是否一致？模塊順序是否正確？主次信息是否清楚？卡片間距是否過鬆或過緊？表格密度是否合適？風險預警是否突出？移動端是否跑版？然後一次只修 3 到 5 個問題。我不建議直接說：這個頁面不像，重新寫。這樣 AI 很容易把已經正確的部分也改壞。更好的方式是：請不要重寫整個頁面，只修正以下 3 個問題：風險預警權重不夠、持倉表格信息過擠、移動端卡片間距過大。修改後說明涉及哪些組件和樣式。AI 頁面不是一次生成出來的，而是一輪一輪收斂出來的。07-MaxKing.cc-第六步：交付與沉澱很多人做到頁面能用就結束了。但我現在更關注收尾一步：沉澱。因為真正有價值的不是這一次頁面生成成功，而是下一次能不能更快。一個頁面做完以後，我會盡量沉澱這些東西：頁面需求拆解。 UI Spec。視覺生成 Prompt。代碼實現 Prompt。組件拆分方式。 mock 數據。截圖修正清單。驗收標準。比如交易儀表盤這次做完以後，後面它就可以複用到：賬户首頁。數據看板。風控頁面。策略監控頁面。後台管理首頁。只需要替換業務字段、模塊優先級和視覺風格，就可以快速生成下一版。不是每次從零開始問 AI，而是把每次成功經驗變成模板。這就是 AI 工作流真正的複利。我把這套流程整理成了一份《AI UI 落地工作流資料包》。下一步可以這樣做收藏這篇，後面你做 AI 頁面時，先對照工作流順序再開工具。如果你也在做頁面落地，評論區說出你最卡的一步：需求、UI Spec、視覺、代碼還是修正。想看下一篇就關注，我會繼續把 AI 頁面前置判斷拆開。- END -關於 MaxKing寶藏我是 MaxKing，全棧開發者、量化交易實踐者，也是 AI 重度用戶。這裏分享的不是遙遠概念，而是我在真實使用、搭建和踩坑後留下的判斷。如果這篇文章對你有啓發，歡迎點贊、在看、轉發，也歡迎加我好友交流 AI 工具和自動化實踐。

完成