小編精選 - 技術文章翻譯 · 03月29日

鳌虾 AoCode：重新定義 AI 程式設計助理的下一代視覺化工具

鳌虾 AoCode：重新定義 AI 程式設計助手的下一代可視化工具

前言

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

鳌虾（AoCode）正是為了解決這些痛點而生。它透過可視化拖放的方式，讓開發者無需手打冗長的提示詞（Prompt），即可自動生成高品質的 AI 程式指令。更重要的是，它能與專案中的技能文件（skills）無縫結合，讓 AI 始終在統一的規範下生成程式碼，從根本上降低「幻覺」的產生。

GitHub： github.com/zy1992829/a…

一、工具使用：零門檻上手，三步生成 AI 指令

1.1 元件拖放，所見即所得

鳌虾提供了一個直觀的可視化頁面設計器。左側是豐富的元件庫，右側是線框圖骨架畫布。開發者只需從左側拖放元件到畫布中，即可快速搭建頁面結構。

支援的元件包括：

頁面佈局：單欄、雙欄、左側定寬、右側定寬等多種佈局容器
基礎元件：搜尋欄、資料表格、表單區塊、可編輯表格、詳情區塊
自訂模組：支援純文字自訂模組

每個元件都可以單獨設定其屬性與關聯的業務欄位，滿足不同的業務需求。

1.2 智能讀取專案技能文件

鳌虾支援自動掃描並讀取專案中的技能文件。它會依照優先順序自動偵測以下目錄：

.trae/skills
.trae/rules
.cursor/rules
.windsurf/rules
.aocode/rules
docs/rules

讀取邏輯採用三態模式：

狀態一：未找到任何技能文件 → 輸出「您沒有任何技能約束」
狀態二：找到檔案但檔案中沒有 <rules></rules> 或 [CODE_RULES_START] 標籤 → 靜默處理，不輸出任何內容
狀態三：找到檔案且檔案包含標籤內容 → 自動擷取並注入到 AI 指令中

這種設計確保了 AI 指令的精簡性——只傳遞必要資訊，避免雜訊干擾。

1.3 頁面級技能分配

在鳌虾中，每個頁面都可以獨立綁定不同的技能文件。比如：

index.vue（列表頁）綁定 page.md
edit.vue（編輯頁）綁定 edit.md
look.vue（詳細頁）綁定 look.md

如此一來，不同類型的頁面會自動帶上各自的規範約束，生成結果更為精準。

1.4 一鍵生成剪貼簿指令

設定完成後，點選 生成 AI 指令 按鈕，鳌虾會自動生成一份結構化的指令文本，包含：

功能目錄與路徑資訊
頁面模組及佈局順序
綁定的技能規範內容
API 基礎路徑

生成後可直接複製到剪貼簿，貼到 AI 對話窗即可使用。

二、工具對比：鳌虾 vs 傳統 AI 程式設計

對比維度	傳統 AI 程式設計	鳌虾 AoCode
提示詞輸入	每次都要手打完整描述	可視化配置，一鍵生成
技能規範傳遞	手動複製貼上或反覆提及	自動讀取並注入
多頁面一致性	每個頁面都要重複描述專案背景	頁面級技能分配，一勞永逸
資訊完整性	容易遺漏關鍵約束條件	結構化輸出，確保資訊無遺漏
技能檔案管理	依賴開發者自覺遵守	系統層面強制關聯
學習成本	需要學習提示詞撰寫技巧	無需任何提示詞經驗

2.1 傳統模式的痛點

傳統 AI 程式設計中，開發者常常面臨以下困境：

重複勞動：每次對話都要重新描述專案結構、技術棧、規範要求
資訊不對稱：AI 無法主動了解專案規範，容易產生「幻覺」
一致性差：不同對話生成的程式碼風格不統一，整合困難
維護成本高：專案規範變更後，需要手動更新所有歷史提示詞

2.2 鳌虾的解決方案

零提示詞撰寫：透過可視化配置替代手寫文本，降低使用門檻
技能即規範：將專案規範寫入技能文件（skills），AI 隨時可讀
上下文共享：一次配置，多頁面複用，確保輸出一致性
版本可控：技能文件可納入版本管理，規範變更有跡可循

三、快速上手：下載與安裝

3.1 環境需求

Node.js：>= 16.0.0
npm：>= 8.0.0

3.2 安裝步驟

使用 npm 全域安裝：

npm install -g aoxia-ui-generator

驗證安裝：

aocode --version

安裝完成後，在任意專案目錄下執行即可啟動鳌虾：

aocode

服務啟動後會自動開啟瀏覽器並訪問 http://localhost:3000/ ，即可開始使用。

3.3 專案初始化

首次使用時，建議在專案根目錄建立 .trae/skills 資料夾，並放置你的技能規範檔案：

my-project/
├── .trae/
│   └── skills/
│       ├── page.md      # 列表頁規範
│       ├── edit.md      # 編輯頁規範
│       └── look.md      # 詳細頁規範
└── src/
    └── views/
        └── ...

鳌虾會自動掃描並讀取這些檔案，讓你在頁面配置時自由綁定。