VTJ.PRO Agent + Skills 架构重构 Vue 开发工作流解析
一、从'工具'到'智能体'：架构演进的分水岭
传统 AI 编程助手的工作方式通常为用户提问后 AI 返回代码，再由用户复制粘贴。
VTJ.PRO 2.0 之后彻底改变了这一模式：AI 智能体（Agent）不再是侧边栏里的'聊天机器人'，而是能直接操控设计器、调用工具、修改代码的'开发副驾驶'。
1.1 四层架构模型
这套架构的核心是 Agent + Skills 模式，分为四个层次：
| 层级 | 核心职责 | 关键组件 |
|---|---|---|
| 接口层 | 收集多模态输入 | ChatInput、ImageInput、JsonInput |
| 逻辑控制层 | 对话管理、状态控制 | useAI hook、状态机、SSE 客户端 |
| AI 处理层 | 理解意图、拆解任务、调用工具 | 多模型网关、工具注册表、上下文缓存 |
| 引擎集成层 | 将 AI 输出转化为代码变更 | 增量更新引擎、渲染同步 |
这套架构的精髓在于：AI 不仅能'想'，还能'做'。
二、Skills：AI 能调用的 40+ 专业工具
AI 智能体之所以能'动手'，靠的是 工具注册表（Tool Registry）。
每一个 Skill 都对应一个真实开发场景的操作：
// 工具注册表示例
{
name: "addComponent",
description: "向画布添加组件",
params: ["componentName", "position"],
handler: (args) => {
/* 执行添加操作 */
}
}
目前 VTJ.PRO 已内置 40+ 专业工具，覆盖：
