前言

在 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 引入了基于流程图的可视化拓扑连线引擎，分为两个维度：

(这里非常适合放一张截图：FlowDesigner 的流程拓扑连线界面，展示模块之间或页面之间带有箭头和路由说明的连线)

1. 系统级拓扑：宏观编排不同业务模块（Feature）之间的流转关系，系统架构一目了然。
2. 页面级拓扑（模块内）：双击进入模块后，你可以通过拖拽连线，配置列表页到详情页的交互逻辑。
   • 支持多种交互类型：路由跳转（Route）、弹窗打开（Dialog）、抽屉滑出（Drawer）。
   • 精准的 AI 翻译：这些连线数据最终会被鳌虾编译成明确的 AI 指令。例如连线后会生成：“当触发【查看详情】时，请使用【抽屉 (Drawer)】方式打开【详情页】”。AI 接收后，会自动为你写好 Drawer 组件引入和 v-model 状态控制逻辑！

四、 ⚡ 四大智能数据模型导入（告别手抄字段）

前端开发的第一步往往是看接口文档写字段。鳌虾内置了强大的解析引擎，支持四种零成本导入方式：

• 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> 或 [CODE_RULES_START]...[CODE_RULES_END] 标签，鳌虾 2.0 会通过强大的正则匹配（支持多块扫描），完整提取并编号所有规则片段，精准输送给大模型。
• 页面级技能分配：你可以为不同页面动态绑定没有任何默认干扰的规范。生成代码前，这些规范会被强制注入到最终的 Prompt 中，让 AI 始终在统一的框架下生成代码，从根本上减少“幻觉”。

📊 工具对比：鳌虾 vs 传统 AI 编程

对比维度	传统 AI 编程	鳌虾 AoCode 2.0
Prompt 输入	每次都要手敲完整描述	可视化配置，一键生成结构化指令
技能规范传递	手动复制粘贴或反复提及	自动读取并按需注入
多页面交互	AI 难以理解页面间的跳转与状态共享	流程图编排，清晰定义弹窗/抽屉/路由逻辑
信息完整性	容易遗漏关键约束条件	结构化输出，确保信息无遗漏
学习成本	需要学习复杂的 Prompt 编写技巧	零门槛，所见即所得

---

💡 鳌虾 2.0 的终极工作流体验

(这里可以作为总结，放一张最终生成 AI 指令后，代码在 VS Code 中自动写入过程的录屏动图)

1. 唤出面板 ：在 VS Code 中 Ctrl+Shift+P 执行 Aoxia: Open Aoxia。
2. 一键导模型 ：贴入 SQL，生成带中文名称的数据字典。
3. 拖拽组装 ：左侧拖出栅格，右侧配好搜索栏和表格。
4. 连线画逻辑 ：切换到“流程拓扑”，把列表页连向新增页，设置交互为“抽屉”。
5. 绑定技能 ：为页面勾选 .trae/skills/table-spec.md 规范。
6. 生成并发送 ：点击生成指令，直接发送给右侧的 Trae/Cursor 对话框。
7. 收工 ：看着 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安装。

我们不是要用低代码取代程序员，而是用**“可视化编排 + 流程定义 + AI”**把程序员从最无聊的增删改查和写 Prompt 的泥潭中解放出来，去思考更有价值的系统架构。

欢迎大家下载体验！如果有任何建议或发现了 Bug，欢迎在评论区留言交流！如果觉得好用，别忘了在插件市场留下一个五星好评哦~ ⭐️⭐️⭐️⭐️⭐️

前言

在 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> 或 [CODE_RULES_START] 标签 → 静默处理，不输出任何内容
• 状态三：找到文件且文件包含标签内容 → 自动提取并注入到 AI 指令中

这种设计确保了 AI 指令的精简性——只传递必要的信息，避免噪声干扰。

1.3 页面级技能分配

在鳌虾中，每个页面都可以独立绑定不同的技能文件。比如：

• index.vue（列表页）绑定 page.md
• edit.vue（编辑页）绑定 edit.md
• look.vue（详情页）绑定 look.md

这样，不同类型的页面会自动带上各自的规范约束，生成结果更加精准。

1.4 一键生成 Clipboard 指令

配置完成后，点击**"生成 AI 指令"**按钮，鳌虾会自动生成一份结构化的指令文本，包含：

• 功能目录和路径信息
• 页面模块及布局顺序
• 绑定的技能规范内容
• API 基础路径

生成后直接复制到剪贴板，粘贴到 AI 对话窗口即可。

---

二、工具对比：鳌虾 vs 传统 AI 编程

对比维度	传统 AI 编程	鳌虾 AoCode
Prompt 输入	每次都要手敲完整描述	可视化配置，一键生成
技能规范传递	手动复制粘贴或反复提及	自动读取并注入
多页面一致性	每个页面都要重复描述项目背景	页面级技能分配，一劳永逸
信息完整性	容易遗漏关键约束条件	结构化输出，确保信息无遗漏
技能文件管理	依赖开发者自觉遵守	系统层面强制关联
学习成本	需要学习 Prompt 编写技巧	无需任何 Prompt 经验

2.1 传统模式的痛点

传统 AI 编程中，开发者常常面临这样的困境：

1. 重复劳动：每次对话都要重新描述项目结构、技术栈、规范要求
2. 信息不对称：AI 无法主动了解项目规范，容易产生"幻觉"
3. 一致性差：不同对话生成的代码风格不统一，集成困难
4. 维护成本高：项目规范变更后，需要手动更新所有历史 Prompt

2.2 鳌虾的解决方案

1. 零 Prompt 编写：通过可视化配置替代手写文本，降低使用门槛
2. 技能即规范：将项目规范写入技能文件（skills），AI 随时可读
3. 上下文共享：一次配置，多页面复用，确保输出一致性
4. 版本可控：技能文件可纳入版本管理，规范变更有迹可循

---

三、快速上手：下载与安装

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/
        └── ...

鳌虾会自动扫描并读取这些文件，让你在页面配置时自由绑定。

---

四、未来展望：AI 编程的下一个十年

4.1 从"工具"到"助手"的进化

当前的 AI 编程工具大多停留在"响应指令"的层面。鳌虾的愿景是成为主动协作的助手——它不仅被动响应开发者的配置，还会主动建议最优的页面结构、规范的代码组织方式。

4.2 技能生态的构建

未来，鳌虾计划构建一个开放的技能市场（Skills Market）：

• 开发者可以发布自己编写的技能文件
• 项目可订阅行业最佳实践技能
• 支持技能的版本管理和更新通知

4.3 多模态融合

未来的 AI 编程将不局限于文本。鳌虾计划引入：

• 设计稿导入：直接解析 Figma、Sketch 等设计文件
• API 文档解析：自动理解接口定义并生成对应页面
• 代码审查集成：生成后自动检查是否符合规范

4.4 对标 OpenClaw，走向国际

鳌虾的愿景不止于国内市场。它以 OpenClaw（开源龙虾）为对标目标，致力于成为全球开发者喜爱的 AI 编程工具。开源、生态、国际化的道路，将是鳌虾下一阶段的核心方向。

---

结语

AI 编程的时代已经到来，但"幻觉"问题始终困扰着开发者。鳌虾通过可视化配置 + 技能文件 + 智能注入的创新模式，让 AI 始终在规范的框架内生成代码，从根本上减少了不确定性。

这不是一个简单的 Prompt 生成器，而是一套完整的AI 编程工作流解决方案。它让开发者从繁琐的文本工作中解放出来，专注于真正的业务逻辑。

当别人还在手敲 Prompt 的时候，你已经在用鳌虾生成代码了。

---

鳌虾 AoCode，下一代 AI 编程助手，让代码生成更精准、更高效、更可控。

---