本文内容已让 AI 脱敏处理。
先上结果
混合自动化方案后：
- 大幅降低成本：Token 消耗降低 74%
- 提升执行速度：执行时间缩短 6 倍
- 提高可靠性：步骤跳过率从 20% 降至 0%
- 结果更符合预期了
混合自动化方案前
这是我们项目中得一个 CRUD 的 SKIL 执行一次的部分过程（开头跟结尾，中间省略了4张同等长度的图）
混合自动化方案后
可以看出，这时很多操作已经交给脚本来处理了，生成的结果会更符合预期
，这是因为
脚本：输入固定 --> 输出唯一 【Pass / Fail（二元判定）】
Agent：概率性输出/多样化路径 【分布评估 + 轨迹监控（Trace）】
背景与问题
当前现状
在我们的 Vue3 项目中，generator skills （创建新的 CRUD 页面）需要执行以下步骤：
- 复制模板文件（columns.js、Vue 组件）
- 修改文件内容（路径、名称、API 等）
- 配置路由（添加路由配置）
- 注册 Mock 数据（导入和注册）
- 验证结果
- 检查是否需要回滚
痛点分析
问题 1：Token 消耗过高
使用 Claude Code 纯 AI 方式生成页面时，消耗 tokens 过高，带来成本压力
问题 2：执行不稳定
- AI 可能跳过某些步骤
- 需要再次对话提醒才能完成
- 降低了开发效率
核心问题
如何在保证开发效率的同时，大幅降低 AI Token 消耗？
解决方案
核心思路
采用混合自动化策略，将流程拆分为两部分：
- 脚本化部分：高度重复、指令明确的步骤
- AI 部分：需要理解用户意图、智能推断的步骤
判断标准
对于每个步骤，根据以下两个标准判断是否应该脚本化：
✅ 标准 1：步骤具备重复性
- 是否每次执行都遵循相同的逻辑？
- 是否有固定的输入输出格式？
- 是否可以通过代码实现？
✅ 标准 2：指令是明确的
- 是否有明确的操作步骤？
- 是否有固定的验证规则？
- 是否可以通过条件判断实现？
流程拆分
| 步骤 | 当前方式 | 优化后 | 判断依据 |
|---|---|---|---|
| 前置验证 | AI 使用 LS 工具 | 脚本自动检查 | ✅ 重复性 + ✅ 明确指令 |
| 收集信息 | AI 对话询问 | AI 对话询问 | ❌ 需要理解用户意图 |
| 输入验证 | AI 使用正则验证 | 脚本自动验证 | ✅ 重复性 + ✅ 明确指令 |
| 文件操作 | AI 使用 Read/Write | 脚本自动执行 | ✅ 重复性 + ✅ 明确指令 |
| 路由配置 | AI 使用 Grep/SearchReplace | 脚本自动执行 | ✅ 重复性 + ✅ 明确指令 |
| Mock 注册 | AI 使用 Grep/SearchReplace | 脚本自动执行 | ✅ 重复性 + ✅ 明确指令 |
| 结果验证 | AI 使用 LS/Read | 脚本自动验证 | ✅ 重复性 + ✅ 明确指令 |
| 操作总结 | AI 生成报告 | 脚本自动输出 | ✅ 重复性 + ✅ 明确指令 |
技术架构
整体架构
┌─────────────────────────────────────────────────────────┐
│ 用户需求输入 │
│ "创建一个用户管理页面" │
└────────────────────┬────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ AI 部分（Claude Code Skill） │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 1. 理解用户意图（自然语言理解） │ │
│ │ 2. 收集必要信息（交互式对话） │ │
│ │ 3. 智能推断参数（默认值、最佳实践） │ │
│ │ 4. 调用脚本执行（RunCommand） │ │
│ │ 5. 验证结果并反馈（质量检查） │ │
│ └─────────────────────────────────────────────────┘ │
└────────────────────┬────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 脚本部分（本地 Node.js 脚本） │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 1. 前置验证（检查模板、目录） │ │
│ │ 2. 输入验证（参数格式检查） │ │
│ │ 3. 文件操作（创建目录、复制文件） │ │
│ │ 4. 路由配置（检查、添加路由） │ │
│ │ 5. Mock 注册（导入、注册数据） │ │
│ │ 6. 结果验证（文件存在性、内容检查） │ │
│ │ 7. 错误处理（回滚机制） │ │
│ │ 8. 生成报告（输出创建的文件） │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
AI Skill 设计
这部分已脱敏处理，仅当参考
职责范围
AI Skill 专注于需要智能判断的部分：
name: 'Vue3 CRUD 页面生成器（混合模式）'
description: '通过理解用户意图，调用本地脚本快速生成 CRUD 页面'
instructions: |
你是一个 Vue3 CRUD 页面生成助手，负责理解用户需求并调用脚本执行。
## 核心职责
1. **理解用户意图**：从自然语言中提取关键信息
2. **收集必要信息**：通过对话确认缺失的参数
3. **智能推断参数**：根据最佳实践设置默认值
4. **调用脚本执行**：使用 RunCommand 调用本地脚本
5. **验证结果并反馈**：检查脚本输出，确认执行成功
## 工作流程
### 1. 理解用户意图
用户可能输入：
- "创建一个用户管理页面"
- "生成订单管理页面，路由是 /order/order-manage"
- "我要创建一个系统日志页面"
提取关键信息：
- 页面名称（pageName）
- 路由路径（routePath）
- 页面标题（pageTitle）
### 2. 收集必要信息
如果用户未提供完整信息，通过对话确认：
- "请提供路由路径（如 /accessibility/user-manage）"
- "请提供页面显示名称（如 用户管理）"
### 3. 智能推断参数
根据最佳实践设置默认值：
- **icon**：根据页面名称推断（如 userManage → user-outlined）
- **moduleName**：从路由路径提取第一部分
- **apiPrefix**：默认与路由路径相同
### 4. 调用脚本执行
使用 RunCommand 调用本地脚本：
```bash
npm run create-page -- --path=[routePath] --title=[pageTitle] --icon=[icon]
```
示例：
```bash
npm run create-page -- --path=/accessibility/userManage --title="用户管理" --icon=user-outlined
```
### 5. 验证结果并反馈
检查脚本输出：
- 如果看到 "✅ 页面创建成功"，确认执行成功
- 如果看到 "❌"，分析错误原因并提供解决建议
- 向用户报告创建的文件和访问链接
## 使用示例
用户输入：`创建一个用户管理页面`
你的响应：
1. 询问路由路径和页面标题
2. 收集完整信息后，调用脚本
3. 验证脚本输出
4. 向用户报告结果
## 注意事项
- 始终使用 npm run create-page 调用脚本
- 不要手动执行文件操作
- 脚本会自动处理所有验证和错误处理
- 只在脚本执行失败时才需要人工介入
脚本设计
职责范围
脚本专注于高度重复、指令明确的部分：
// scripts/create-page.js
async function createPage(args) {
// 1. 前置验证
// - 检查模板文件是否存在
// - 检查目标目录是否已存在
// 2. 输入验证
// - 验证页面名称格式
// - 验证路由路径格式
// - 验证页面标题格式
// 3. 文件操作
// - 创建目标目录
// - 复制并修改 columns.js
// - 复制并修改 Vue 组件
// 4. 路由配置
// - 检查路由文件是否存在
// - 创建或更新路由配置
// 5. Mock 注册
// - 添加导入语句
// - 添加注册语句
// 6. 结果验证
// - 验证文件存在性
// - 验证内容正确性
// 7. 错误处理
// - 失败时自动回滚
// - 恢复备份文件
// 8. 生成报告
// - 输出创建的文件
// - 输出修改的文件
// - 输出访问链接
}
优势
- ✅ 执行速度快：本地运行，无需网络请求
- ✅ 可靠性高：逻辑固定，不会跳过步骤
- ✅ 易于维护：代码清晰，便于调试和扩展
- ✅ 零 Token 消耗：完全本地执行
实施效果
用户体验
- ✅ 保持交互式体验：用户仍然可以通过自然语言描述需求
- ✅ 响应速度更快：脚本执行速度快，用户等待时间短
- ✅ 结果更可靠：不会出现跳过步骤的情况
最佳实践
1. 如何判断步骤是否应该脚本化
使用以下决策树：
步骤是否需要重复执行？
├─ 否 → 保留在 AI 部分
└─ 是 → 步骤指令是否明确？
├─ 否 → 保留在 AI 部分
└─ 是 → 可以脚本化
2. 脚本设计原则
原则 1：单一职责
每个脚本只负责一个明确的任务。
原则 2：输入验证
脚本必须验证所有输入参数。
原则 3：错误处理
脚本必须有完善的错误处理和回滚机制。
原则 4：进度反馈
脚本必须输出清晰的进度信息。
原则 5：可测试性
脚本应该易于测试和调试。
3. AI Skill 设计原则
原则 1：专注于智能判断
AI Skill 只负责需要理解用户意图的部分。
原则 2：避免重复逻辑
不要在 AI Skill 中重复脚本已经实现的逻辑。
原则 3：明确的调用方式
明确说明如何调用脚本，以及脚本的输出格式。
原则 4：结果验证
AI Skill 必须验证脚本的执行结果。
4. 实施步骤
步骤 1：分析现有流程
列出所有步骤，评估每个步骤的重复性和明确性。
步骤 2：设计脚本
为符合脚本化标准的步骤编写脚本。
步骤 3：简化 AI Skill
移除 AI Skill 中已经脚本化的部分，只保留智能判断部分。
步骤 4：测试验证
测试整个流程，确保功能正常。
步骤 5：持续优化
根据实际使用情况，持续优化脚本和 AI Skill。
5. 常见问题
Q1：如果脚本执行失败怎么办？
A：AI Skill 应该分析脚本输出的错误信息，并提供解决建议。如果无法自动解决，提示用户手动处理。
Q2：如何处理复杂的业务逻辑？
A：将复杂的业务逻辑拆分为多个小步骤，每个步骤都可以独立脚本化。AI Skill 负责协调这些步骤的执行顺序。
Q3：如何保证脚本和 AI Skill 的一致性？
A：建立清晰的接口文档，定义脚本的输入输出格式。AI Skill 严格按照接口文档调用脚本。
Q4：如何扩展到其他场景？
A：总结本次经验，形成可复用的方法论。对于其他重复性任务，应用相同的判断标准和设计原则。
总结
核心价值
这里的数据是由 AI 自己统计，跟实际情况有点出入，但整体可信，且每个人项目的 SKILL 及脚本做的事不一样，是足够支撑仅当参考
通过混合自动化方案，我们实现了：
- 大幅降低成本：Token 消耗降低 74%
- 提升执行速度：执行时间缩短 6 倍
- 提高可靠性：步骤跳过率从 20% 降至 0%
- 保持用户体验：仍然支持自然语言交互
关键成功因素
- 明确的判断标准：重复性 + 明确指令
- 合理的职责划分：AI 负责智能判断，脚本负责重复执行
- 完善的设计原则：单一职责、输入验证、错误处理
- 持续的优化迭代：根据实际使用情况持续改进
结语
混合自动化方案的核心思想是：让 AI 做它擅长的事情（智能判断），让脚本做它擅长的事情（重复执行） 。
通过合理的职责划分，我们既保留了 AI 的智能交互能力，又大幅降低了 Token 消耗，实现了成本和效率的双赢。
