小編精選 - 技術文章翻譯 · 04月05日

別再像個傻瓜一樣每天手動輸入提示詞了！我用「拖放連線」把 AI 馴服成了無情的 CRUD 機器（鳌虾 2.0 震撼發佈）

別再像個傻瓜一樣天天手敲 Prompt 了！我用「拖放連線」把 AI 馴服成無情的 CRUD 機器（鳌蝦 2.0 震撼發布）

前言

在 AI 程式碼生成工具層出不窮的今天，程式設計師面臨著一個核心問題：如何更高效、更精準地讓 AI 理解我們的需求？傳統的 AI 對話模式需要我們反覆描述專案背景、手動關聯各種文件與技能規範。這種模式不僅效率低下，還容易因為資訊不完整導致 AI 產生「幻覺」，生成結果與預期相差甚遠。

鳌蝦（Aoxia-code） 正是為解決這些痛點而生。

在 1.0 版本中，鳌蝦作為一個 npm 全域工具，首創了「可視化拖放生成 AI 指令」的工作流程，廣受好評（詳見1.0版本介紹）。今天，我們正式推出 鳌蝦 Aoxia-code 2.0！這一次，鳌蝦完成了架構級的蛻變：從獨立的 npm 工具，全面進化為沉浸式的 VS Code 外掛，並重磅推出了基於流程圖的複雜邏輯編排功能，讓單頁面真正串連成完整的業務流！

🌟 什麼是鳌蝦 2.0？

傳統程式碼生成器通常依賴「硬編碼模板（EJS/FreeMarker）」，一旦業務邏輯發生變化，模板就變得極難維護。而鳌蝦走的是另一條路： 元資料編排 + 技能規範約束 + AI 生成 。

在鳌蝦 2.0 中，你不再需要手敲冗長的 Prompt。你只需在 VS Code 內部透過拖放元件搭建頁面骨架，再透過連線配置頁面間的跳轉邏輯。鳌蝦會自動把這些視覺化的設計意圖，結合專案中的技能規範檔案，編譯成一段高度結構化的 AI 指令。把這段指令發給 Trae/Cursor，完美契合你期望的原始碼瞬間生成！

🚀 鳌蝦 2.0 核心演進與全景功能

一、 🔌 沉浸式 VS Code 外掛體驗與全域快捷鍵

鳌蝦 2.0 告別了過去 npm install -g 啟動本地服務的繁瑣流程。現在，你只需在 VS Code 外掛市集搜尋並安裝 Aoxia-code Extension tool。按下 Ctrl+Alt+X（Mac 為 Cmd+Option+X）即可在編輯器內瞬間喚出可視化工作台。它能原生讀取你當前工作區的目錄結構和規範檔案，體驗如絲般順滑。

二、 📂 極其強大的實體/虛擬混合目錄樹

在前端開發中，對專案目錄的掌握至關重要。鳌蝦 2.0 徹底重構了左側欄目錄樹：

掛載任意目錄：在歡迎頁或側邊欄，你可以透過一個精美的輸入框直接指定想要讀取的專案路徑（如 src/views），留空則預設載入整個專案。
深層智慧讀取與過濾：最高支援 8 級深度的檔案樹探測！同時內建了極其嚴格的黑名單規則（自動過濾 node_modules、.git、.husky 等無關產物），保證樹狀結構清爽無比，甚至能精準顯示目錄下的 .vue、.ts 等業務程式檔案。
無感內聯新建與 AI 翻譯：想新建目錄？點擊加號，直接在樹節點上內聯輸入（類似作業系統重命名）。你可以隨意輸入中文（如「測試業務」），鳌蝦會自動在發給 AI 的指令中注入要求，讓大型模型在寫程式時為你自動翻譯成規範的 kebab-case 資料夾名稱，絲滑無比！

三、 🕸️ 獨創的全域與頁面級流轉拓撲圖 (Flow Designer)

在 1.0 版本中，我們解決了「如何快速生成單一頁面」的問題。但真實的業務往往是多頁面聯動的。鳌蝦 2.0 引入了基於流程圖的可視化拓撲連線引擎，分為兩個維度：

(這裡非常適合放一張截圖：Flow Designer 的流程拓撲連線介面，展示模組之間或頁面之間帶有箭頭和路由說明的連線)

系統級拓撲：宏觀編排不同業務模組（Feature）之間的流轉關係，系統架構一目了然。
頁面級拓撲（模組內）：雙擊進入模組後，你可以透過拖放連線，配置列表頁到詳細頁的互動邏輯。
- 支援多種互動類型：路由跳轉（Route）、彈窗開啟（Dialog）、抽屜滑出（Drawer）。
- 精準的 AI 翻譯：這些連線資料最終會被鳌蝦編譯成明確的 AI 指令。例如連線後會生成：「當觸發【查看詳細】時，請使用【抽屜 (Drawer)】方式開啟【詳細頁】」。AI 接收後，會自動為你寫好 Drawer 元件引入與 v-model 狀態控制邏輯！

四、 ⚡ 四大智慧資料模型匯入（告別手抄欄位）

前端開發的第一步往往是看 API 文件寫欄位。鳌蝦內建了強大的解析引擎，支援四種零成本匯入方式：

API 直連 (Apifox)：只需輸入 Access Token 與專案 ID，鳌蝦能直接拉取專案內的介面與資料模型，實現真正的無縫對接。
JSON 解析：支援解析標準的 OpenAPI 3.0 JSON 格式。
SQL 智慧解析：直接把後端的 CREATE TABLE 語句貼進來！鳌蝦會自動擷取欄位名、註解作為 Label，甚至能根據欄位型別自動推導前端元件（比如 datetime 變成日期選擇器，varchar 變成輸入框，註解裡帶「狀態」自動推導為下拉選單）。
Java 實體類解析：複製後端的 Entity/DTO 程式碼，鳌蝦能識別 @ApiModelProperty 等註解，秒變前端結構字典。

五、 🎨 所見即所得的頁面設計器 (Page Designer)

解析完欄位後，進入可視化拼裝環節：

豐富的基礎物料：支援表單、表格、搜尋欄、格柵佈局（Grid-1, Grid-2）等多種元件。
彈性的巢狀拖放：基於 vuedraggable 實作。你可以在 Tabs 標籤頁中巢狀佈局容器，在佈局容器中放置表格或表單，極其自由。
多端響應式預覽：支援一鍵切換 PC 與行動裝置檢視，確保元件佈局在不同裝置下都合理。

六、 📋 智慧讀取與增強正則的技能體系 (Skill Config)

如何讓 AI 生成的程式碼符合團隊規範？

鳌蝦 2.0 繼承並強化了 1.0 的規範讀取能力。它會自動掃描並讀取當前 VS Code 工作區下的技能檔案，優先順序為： .trae/skills > .trae/rules > .cursor/rules > .windsurf/rules > .aocode/rules > docs/rules

無遺漏的 <rules></rules> 提取：只要在技能檔案中標注了 <rules>...</rules> 或 [CODE_RULES_START]...[CODE_RULES_END] 標籤，鳌蝦 2.0 會透過強大的正則比對（支援多塊掃描），完整提取並編號所有規則片段，精準輸送給大型模型。
頁面級技能分配：你可以為不同頁面動態綁定沒有任何預設干擾的規範。生成程式碼前，這些規範會被強制注入到最終的 Prompt 中，讓 AI 始終在統一的框架下生成程式碼，從根本上減少「幻覺」。

📊 工具對比：鳌蝦 vs 傳統 AI 編程

對比維度	傳統 AI 編程	鳌蝦 AoCode 2.0
Prompt 輸入	每次都要手敲完整描述	可視化配置，一鍵生成結構化指令
技能規範傳遞	手動複製貼上或反覆提及	自動讀取並按需注入
多頁面互動	AI 難以理解頁面間的跳轉與狀態共享	流程圖編排，清晰定義彈窗/抽屜/路由邏輯
資訊完整性	容易遺漏關鍵約束條件	結構化輸出，確保資訊無遺漏
學習成本	需要學習複雜的 Prompt 撰寫技巧	零門檻，所見即所得

💡 鳌蝦 2.0 的終極工作流程體驗

(這裡可以作為總結，放一張最終生成 AI 指令後，程式碼在 VS Code 中自動寫入過程的錄屏動圖)

喚出面板：在 VS Code 中 Ctrl+Shift+P 執行 Aoxia: Open Aoxia。
一鍵導模型：貼入 SQL，生成帶中文名稱的資料字典。
拖放組裝：左側拖出格柵，右側配好搜尋欄和表格。
連線畫邏輯：切換到「流程拓撲」，把列表頁連向新增頁，設定互動為「抽屜」。
綁定技能：為頁面勾選 .trae/skills/table-spec.md 規範。
生成並傳送：點擊生成指令，直接傳送給右側的 Trae/Cursor 對話框。
收工：看著 AI 在你的編輯器裡「唰唰唰」把包含彈窗、表格、表單且完全符合團隊規範的完美程式碼寫完。

🎉 立即體驗

鳌蝦 2.0 外掛現已正式上架 VS Code 官方外掛市集！打開 VS Code 擴充面板，搜尋 Aoxia-code Extension tool 即可安裝體驗！（開發者：Zhang-Lab）

⚠️ 特別提示（針對 Trae 使用者）：由於 Trae 預設使用的是其內部審核的外掛市集，如果在 Trae 的外掛面板中搜尋不到 Aoxia-code Extension tool，直接用瀏覽器造訪：marketplace.visualstudio.com/_apis/publi… 它會把 .vsix 檔案下載下來。只需要打開 Trae，從 VSIX 安裝即可。