Skill 开发指南

avue-design 是一套面向 Avue 的 AI Skill 集合，内置 avue-crud、avue-form、avue-tree、数据展示组件、全局 API 与代码风格规范，可以让 AI 更稳定地生成符合 Avue 习惯的页面代码。

Skill 下载：点击下载 avue-design.zip

适用场景

  • 需要快速生成后台 CRUD 页面
  • 需要批量配置表单字段、校验规则、字典联动和上传组件
  • 需要把普通 Vue 页面改造成 Avue 配置式写法
  • 需要统一团队输出，减少 AI 混写 Element Plus 和 Avue 的返工

Skill 包含什么

avue-design.zip 解压后会得到 avue-design/ 目录，核心结构如下：

avue-design/
├── SKILL.md
├── README.md
└── references/
    ├── crud-core.md
    ├── crud-column.md
    ├── crud-search.md
    ├── crud-form-dialog.md
    ├── crud-features.md
    ├── form-core.md
    ├── form-field-types.md
    ├── form-advanced.md
    ├── tree-component.md
    ├── data-display.md
    ├── utility-apis.md
    └── global-config.md

其中：

  • SKILL.md 是主入口，负责告诉 AI 什么时候使用 Avue Skill、生成代码时遵循什么规则
  • references/ 是按需加载的知识库，覆盖 CRUD、表单、树组件、数据展示和全局工具函数
  • Skill 当前基于 Avue v3.8.2、Vue 3、Element Plus 整理

如何使用 Skill 开发

1. 下载并解压

先下载 Skill 压缩包并解压，保留目录结构，不要删除根目录下的 SKILL.md 和 references/。

2. 导入到支持 Skill 的 AI 编码工具

将 avue-design/ 放到你所使用工具的 Skill 目录，或按该工具的自定义 Skill 方式导入。

使用时建议确认两点：

  • 工具可以读取 Skill 根目录下的 SKILL.md
  • 工具可以按需访问 references/ 中的参考文档

如果你使用的是基于 Skill 目录扫描的工具，通常只要保证 avue-design 目录完整可见即可。

3. 在会话里明确需求边界

为了让 AI 一次生成更可用的 Avue 代码，建议在提问时明确以下信息：

  • 使用 Composition API 还是 Options API
  • 页面类型是 avue-crud、avue-form、avue-tree 还是独立组件
  • 字段结构、字典来源、接口地址、权限规则
  • 是否需要搜索、弹窗、抽屉、上传、联动、导入导出等高级能力

推荐提问方式

生成 CRUD 页面

使用 avue-design skill，基于 Vue3 + Composition API 生成一个用户管理页面。
要求使用 avue-crud，包含搜索栏、分页、抽屉弹窗、新增编辑删除、状态字典、本地模拟接口，并输出完整 option 配置和页面代码。

生成动态表单

使用 avue-design skill，生成一个员工资料表单。
要求包含 input、select、date、upload、input-tag、dynamic 子表单，带校验规则和字段联动，使用 Options API。

改造现有页面

使用 avue-design skill，把下面这段 Element Plus 表单改写成 avue-form 的 option 配置方式。
保留现有字段、校验、提交逻辑，并补充缺失的默认值与字典映射。

排查问题

使用 avue-design skill，检查这段 avue-crud 配置为什么搜索项不显示。
请先说明原因，再给出最小修改方案。

Skill 是如何提升效率的

1. 减少重复查文档

Avue 的字段类型、列配置、事件名、插槽名、工具函数较多，手动翻文档成本高。Skill 把常用规则集中到同一套知识库中，AI 可以直接路由到对应参考文件，减少来回检索。

2. 提高首次生成质量

没有 Skill 时，AI 很容易：

  • 把 Avue 组件写成纯 Element Plus
  • 漏掉 option.column、dicData、rules、search 等关键配置
  • 混淆 Composition API 和 Options API 的写法

Skill 会先约束输出风格，再补足 Avue 组件的标准结构，降低返工次数。

3. 更适合复杂业务场景

当页面涉及以下能力时，Skill 的价值会更明显：

  • 多字段搜索和级联筛选
  • 弹窗表单、抽屉表单、分组标签页
  • 文件上传、云存储、水印
  • 行编辑、树表、虚拟滚动、导入导出
  • control 联动、bind 深层绑定、远程字典

4. 便于团队统一规范

团队成员可以围绕同一套 Skill 描述需求，让 AI 输出统一的 Avue 页面结构、命名方式和 API 风格，减少“每个人问出来的代码都不一样”的问题。

提效建议

先要结构，再要细节

复杂页面建议分两步：

  1. 先让 AI 输出 option 结构和字段设计
  2. 再让 AI 补齐接口、事件、插槽和样式细节

这样更容易校验字段是否合理，也更适合多人协作。

一次只解决一个目标

比起“帮我写个完整后台”，更推荐拆成：

  • 先生成列表页
  • 再补弹窗表单
  • 再加搜索和字典联动
  • 最后补权限、导入导出和优化项

这样能显著提高 AI 输出的稳定性。

提示词里直接写出关键配置

如果你已经知道页面要求，尽量把这些词直接写进需求：

  • search: true
  • dialogType: 'drawer'
  • dicUrl
  • rules
  • group
  • tabs: true
  • permission

AI 会更容易命中正确的 Avue 配置方式。

相关文档

最后更新:
贡献者: smallwei