1. 通用大模型写 TinyVue 代码为什么总翻车用 AI Agent 写前端代码这件事我踩过的坑基本都集中在组件库上。你让一个通用大模型生成 TinyVue 的表格组件它大概率会给你一段看起来很像那么回事、但跑起来直接报错的代码。问题不在于模型不够聪明而在于它训练时见过的 TinyVue 样本太少脑子里装的更多是 Element Plus、Ant Design 甚至 Vue 2 时代的写法。具体翻车现场通常有三种。第一种是 API 幻觉比如它给你写一个tiny-grid :datatableData :columnscols但 TinyVue 的 Grid 实际用法是tiny-grid :datatableData配合tiny-grid-column fieldname title姓名子组件属性名和结构全对不上。第二种是版本混淆TinyVue 是 Vue 3 优先的组件库但模型可能给你混入 Vue 2 的slot-scope语法或者this.$refs的旧式调用。第三种是风格不符生成的代码能跑但不符合 TinyVue 的设计规范比如事件命名、插槽写法、主题变量使用都不对。这些问题的根源是上下文缺失。通用模型在回答时检索的是它训练语料里的模糊记忆而不是 TinyVue 官方文档里的精确 API。TinyVue Skill 要解决的就是这件事它把 TinyVue 所有组件的 API、Props、Slots、Events、Demo 示例打包成一份高精度知识包通过 MCP 协议或 Agent Skills 协议注入到 AI Agent 的上下文里。Agent 在回答 TinyVue 相关问题时会优先从这份专用说明书里查答案而不是凭记忆瞎编。你可以把它理解成给 AI 装了一本随身携带的 TinyVue 官方手册。它不是新模型不改变 Agent 的推理能力只是把记忆检索换成了查文档。效果上生成的代码 props 和 events 准确率大幅提升Token 消耗反而降低因为 Agent 不需要从海量通用文档里大海捞针。适合谁用正在用 TinyVue 做中后台项目、同时用 Cursor 或 Claude Code 辅助编码的前端同学收益最明显。2. TaoToken 前置准备给 Agent 配一个稳定的模型入口在配置 TinyVue Skill 之前得先确保你的 AI Agent 有一个能正常调用的模型后端。Skill 本身是知识包它需要挂在一个能跑 MCP 或 Skills 协议的 Agent 上而 Agent 背后得有模型 API。我实测下来用 TaoToken 作为模型入口比较省心它兼容 OpenAI 风格的接口配置简单Claude Code、Cline、Cursor 这些工具都能直接接。先拿 API Key。打开 https://taotoken.net/api-keys 登录后创建一个新的 Key复制保存好后面配置里要用。注意这个 Key 只在创建时完整显示一次丢了就得重新生成。然后确认你要用的模型 ID。TaoToken 支持多种模型做前端代码生成我一般用 claude-sonnet 系列代码理解能力强对组件库 API 的遵循度也高。你可以在模型对话页面 https://taotoken.net/chat 先试一下输入一段 TinyVue 的用法问题看看返回质量确认模型可用再往下配。Base URL 统一用https://taotoken.net/api不要加任何路径后缀。这一点很关键很多 401 报错就是因为 Base URL 写成了https://taotoken.net/api/v1或者带了多余斜杠。正确的三件套是配置项值Base URLhttps://taotoken.net/apiAPI Key你在 api-keys 页面创建的那串Model ID例如claude-sonnet-4-20250514以控制台实际可用为准如果你用的是 Claude Code它读的是~/.claude/settings.json或者项目级的.claude/settings.json。配置片段长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }如果你用的是 Cline 或 Cursor 的 OpenAI 兼容模式配置项名称不同但值一样{ openai_base_url: https://taotoken.net/api, openai_api_key: sk-你的Key, model: claude-sonnet-4-20250514 }配好之后先别急着装 Skill单独发一条消息测试模型通不通。在 Agent 对话框里输入你好请回复 ok如果能正常返回说明模型入口没问题。这一步能帮你把模型配置问题和 Skill 配置问题分开排查省得后面报错时不知道是哪一层出的问题。3. 可复制配置TinyVue Skill 安装与 MCP 接入TinyVue Skill 的安装分两条路一条是 Agent Skills 协议适合 Cursor、Claude Code 这类支持 Skills 的 IDE一条是 MCP 协议适合需要 AI 直接操作页面组件的场景。先讲 Skills 安装这是最常用的。打开终端在项目根目录或者全局执行npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor这条命令做了三件事从opentiny/agent-skills仓库拉取技能包-g表示全局安装--skill tiny-vue-skill指定只装 TinyVue 这一个技能--agent cursor表示目标 Agent 是 Cursor。如果你用的是 Claude Code把--agent cursor换成--agent claude-code。执行完你会看到类似Skill tiny-vue-skill installed to ~/.cursor/skills/的输出。装完之后需要在 IDE 里启用。以 Cursor 为例打开 Settings找到 AI 或 Skills 相关面板在列表里找到tiny-vue-skill把开关打开。Claude Code 的话Skill 会自动被识别你可以在对话里输入/skills查看已加载的技能列表确认tiny-vue-skill在列。接下来是 MCP 接入。MCP 的价值在于让 AI 不仅能写代码还能直接操作你页面上已经渲染出来的 TinyVue 组件比如点击按钮、填表单、读表格数据。配置 MCP Server 需要在 Agent 的 MCP 配置文件里加一段。以 Claude Code 为例编辑~/.claude/mcp.json{ mcpServers: { tiny-vue-mcp: { command: npx, args: [-y, opentiny/tiny-vue-mcplatest], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的Key } } } }注意这里的TAOTOKEN_BASE_URL和TAOTOKEN_API_KEY是给 MCP Server 内部调用模型用的和前面 Agent 的配置是两套但值可以一样。配好后重启 Agent输入/mcp查看连接状态看到tiny-vue-mcp显示 connected 就成功了。如果你用的是 ClineMCP 配置在 Cline 的设置面板里格式类似把command和args填进去即可。Cline 的 MCP 面板会实时显示连接状态和可用工具列表TinyVue MCP 通常会暴露get_component_api、list_components、operate_component这几个工具。配置完成后你的 Agent 就同时具备了查文档写代码和操作页面组件两种能力。前者靠 Skill后者靠 MCP。日常写代码用 Skill 就够了做自动化测试或低代码交互时再启用 MCP。4. 验证请求让 Agent 真正调用 TinyVue 组件库配置完不验证等于没配。下面这套验证动作能帮你确认 Skill 和 MCP 都真正生效了。第一步验证 Skill 是否被 Agent 识别。在对话框里输入请列出你当前可用的 TinyVue 相关技能并说明 tiny-vue-skill 能提供哪些组件知识。如果 Skill 生效Agent 会明确告诉你它加载了 tiny-vue-skill并且能说出这个技能覆盖了 TinyVue 的组件 API、Props、Slots 和 Demo。如果它一脸茫然说没有相关技能说明 Skill 没装好或者没启用回到第 3 节检查安装路径和 IDE 开关。第二步验证 API 准确性。输入一个具体的组件生成请求使用 TinyVue 的 Form 组件创建一个登录表单包含用户名和密码字段带表单校验。重点看返回的代码里tiny-form的model和rules属性是否正确tiny-form-item的prop和label是否规范校验规则用的是不是 TinyVue 支持的格式。对比一下官方文档 https://docs.opentiny.design 里的 Form 示例如果结构一致说明 Skill 的知识注入起作用了。如果 Agent 又给你编出不存在的属性检查一下是不是 Skill 没启用或者模型本身太弱。第三步验证 MCP 操作能力。这一步需要你有一个正在运行的 TinyVue 页面。在 Agent 里输入请通过 MCP 获取当前页面上所有 TinyVue 按钮的文本内容。如果 MCP 连接正常Agent 会调用list_components或类似工具返回页面上按钮的列表。再试一个操作类请求请通过 MCP 点击页面上文本为提交的按钮。观察页面是否真的触发了点击。这一步能跑通说明 MCP 的组件操作链路是通的。第四步验证 Token 消耗和响应速度。同样的 Form 生成请求分别在启用 Skill 和禁用 Skill 的情况下各发一次对比返回时间和输出长度。启用 Skill 后Agent 不需要在通用知识里反复检索响应通常更快输出也更聚焦。我实测下来启用 Skill 后生成一个中等复杂度表格组件的 Token 消耗能降三成左右。如果四步都通过你的 Agent 已经真正懂TinyVue 了。接下来就可以在日常开发里直接用它生成组件代码准确率比裸模型高一个档次。5. 本篇常见错排查401、local proxy failed 与 OAuth 报错配置过程中最容易撞上的几类报错我按出现频率排一下附上排查路径。401 Unauthorized。这个几乎都是 Key 或 Base URL 的问题。先检查ANTHROPIC_API_KEY或openai_api_key是不是复制完整了有没有多余空格。再检查 Base URL 是不是写成了https://taotoken.net/api/v1正确值就是https://taotoken.net/api不带/v1。如果 Key 是在 api-keys 页面刚创建的确认没有过期或被删除。还有一种情况是环境变量没生效比如你在 settings.json 里配了但 Agent 读的是系统环境变量两者冲突时以 Agent 配置文件为准。local proxy failed / connection refused。这个报错通常出现在 MCP Server 启动阶段。原因是npx拉取opentiny/tiny-vue-mcp时网络不通或者 Node 版本太低。先确认 Node 版本在 18 以上执行node -v看一下。然后手动跑一次npx -y opentiny/tiny-vue-mcplatest看能不能正常启动。如果卡在下载检查 npm 源配置。如果启动后立刻退出看终端输出的错误堆栈多半是 MCP 配置里的env字段格式不对JSON 里多了逗号或者引号不匹配。reading choices of undefined。这个报错说明模型返回的响应结构不符合 OpenAI 格式Agent 解析时拿不到choices字段。常见原因是 Base URL 指向了一个不兼容 OpenAI 格式的端点或者模型 ID 写错了导致返回了错误对象。检查model字段是不是控制台里实际可用的 ID别自己拼。另外确认 Base URL 没有多余路径TaoToken 的兼容端点就是https://taotoken.net/api。OAuth 相关报错。如果你用的是 Claude Code 并且之前登录过官方账号它可能优先走 OAuth 而不是 API Key。解决办法是在 settings.json 里显式配置ANTHROPIC_API_KEY和ANTHROPIC_BASE_URL并且在 Claude Code 里执行一次登出操作让它重新读取配置。如果报错里出现OAuth token expired说明它在尝试刷新官方 token这时候把ANTHROPIC_AUTH_TOKEN清空只保留ANTHROPIC_API_KEY。Skill 装了但 Agent 不调用。这个不是报错但很常见。检查三点Skill 是否在 IDE 的 Skills 面板里启用了Agent 的对话是否在正确的项目目录下有些 Skill 是项目级的模型是否支持工具调用function calling不支持工具调用的模型即使装了 Skill 也不会主动查。换一个支持工具调用的模型再试。排查顺序建议从模型层往 Skill 层查先确认单独发消息模型能回再确认 Skill 被识别最后确认 MCP 连接。这样每层的问题都能隔离出来不会混在一起。6. 把 TinyVue Skill 接进日常开发流配置和验证都跑通之后真正有价值的是把它变成日常习惯。我的做法是在项目里固定一套 Agent 使用规范生成任何 TinyVue 组件代码前先在对话里明确说使用 tiny-vue-skill 查询组件 API 后再生成这样能强制 Agent 走查文档的路径而不是凭记忆输出。对于复杂组件比如 Grid、Form、Tree这个习惯能把返工率降很多。另一个实用技巧是把常用的组件用法沉淀成项目内的 Skill 补充包。TinyVue Skill 覆盖的是官方组件 API但你的项目可能有自己的封装组件和业务规范。把这些也写成 Skill 片段和 tiny-vue-skill 一起加载Agent 生成代码时就能同时遵循官方 API 和你的项目约定。MCP 那条线适合做自动化。比如你有一个 TinyVue 的中后台页面需要批量测试表单提交可以让 Agent 通过 MCP 自动填表、点击、读结果省去手写测试脚本的时间。这块目前还在早期但方向很明确。如果你还没配模型入口先去 https://taotoken.net/api-keys 拿 Key再按第 2 节的配置片段接上。接入文档在 https://taotoken.net/doc 有更细的说明。长期做编码和 Agent 开发的话Coding Plan 页面 https://taotoken.net/coding-plan 有更划算的套餐适合高频使用。模型对话入口 https://taotoken.net/chat 可以随时验证模型可用性。Claude Code 用户看 https://taotoken.net/claude-code-anthropic 这份接入说明配置项和本文一致。最后说一个我自己的经验Skill 的效果和模型能力是乘法关系不是加法。模型本身代码能力越强Skill 带来的准确率提升越明显。所以别在弱模型上指望 Skill 能救场先把模型入口配好再叠 Skill顺序不能反。
TinyVue Skill 实战：让 AI Agent 真正懂你的组件库
1. 通用大模型写 TinyVue 代码为什么总翻车用 AI Agent 写前端代码这件事我踩过的坑基本都集中在组件库上。你让一个通用大模型生成 TinyVue 的表格组件它大概率会给你一段看起来很像那么回事、但跑起来直接报错的代码。问题不在于模型不够聪明而在于它训练时见过的 TinyVue 样本太少脑子里装的更多是 Element Plus、Ant Design 甚至 Vue 2 时代的写法。具体翻车现场通常有三种。第一种是 API 幻觉比如它给你写一个tiny-grid :datatableData :columnscols但 TinyVue 的 Grid 实际用法是tiny-grid :datatableData配合tiny-grid-column fieldname title姓名子组件属性名和结构全对不上。第二种是版本混淆TinyVue 是 Vue 3 优先的组件库但模型可能给你混入 Vue 2 的slot-scope语法或者this.$refs的旧式调用。第三种是风格不符生成的代码能跑但不符合 TinyVue 的设计规范比如事件命名、插槽写法、主题变量使用都不对。这些问题的根源是上下文缺失。通用模型在回答时检索的是它训练语料里的模糊记忆而不是 TinyVue 官方文档里的精确 API。TinyVue Skill 要解决的就是这件事它把 TinyVue 所有组件的 API、Props、Slots、Events、Demo 示例打包成一份高精度知识包通过 MCP 协议或 Agent Skills 协议注入到 AI Agent 的上下文里。Agent 在回答 TinyVue 相关问题时会优先从这份专用说明书里查答案而不是凭记忆瞎编。你可以把它理解成给 AI 装了一本随身携带的 TinyVue 官方手册。它不是新模型不改变 Agent 的推理能力只是把记忆检索换成了查文档。效果上生成的代码 props 和 events 准确率大幅提升Token 消耗反而降低因为 Agent 不需要从海量通用文档里大海捞针。适合谁用正在用 TinyVue 做中后台项目、同时用 Cursor 或 Claude Code 辅助编码的前端同学收益最明显。2. TaoToken 前置准备给 Agent 配一个稳定的模型入口在配置 TinyVue Skill 之前得先确保你的 AI Agent 有一个能正常调用的模型后端。Skill 本身是知识包它需要挂在一个能跑 MCP 或 Skills 协议的 Agent 上而 Agent 背后得有模型 API。我实测下来用 TaoToken 作为模型入口比较省心它兼容 OpenAI 风格的接口配置简单Claude Code、Cline、Cursor 这些工具都能直接接。先拿 API Key。打开 https://taotoken.net/api-keys 登录后创建一个新的 Key复制保存好后面配置里要用。注意这个 Key 只在创建时完整显示一次丢了就得重新生成。然后确认你要用的模型 ID。TaoToken 支持多种模型做前端代码生成我一般用 claude-sonnet 系列代码理解能力强对组件库 API 的遵循度也高。你可以在模型对话页面 https://taotoken.net/chat 先试一下输入一段 TinyVue 的用法问题看看返回质量确认模型可用再往下配。Base URL 统一用https://taotoken.net/api不要加任何路径后缀。这一点很关键很多 401 报错就是因为 Base URL 写成了https://taotoken.net/api/v1或者带了多余斜杠。正确的三件套是配置项值Base URLhttps://taotoken.net/apiAPI Key你在 api-keys 页面创建的那串Model ID例如claude-sonnet-4-20250514以控制台实际可用为准如果你用的是 Claude Code它读的是~/.claude/settings.json或者项目级的.claude/settings.json。配置片段长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }如果你用的是 Cline 或 Cursor 的 OpenAI 兼容模式配置项名称不同但值一样{ openai_base_url: https://taotoken.net/api, openai_api_key: sk-你的Key, model: claude-sonnet-4-20250514 }配好之后先别急着装 Skill单独发一条消息测试模型通不通。在 Agent 对话框里输入你好请回复 ok如果能正常返回说明模型入口没问题。这一步能帮你把模型配置问题和 Skill 配置问题分开排查省得后面报错时不知道是哪一层出的问题。3. 可复制配置TinyVue Skill 安装与 MCP 接入TinyVue Skill 的安装分两条路一条是 Agent Skills 协议适合 Cursor、Claude Code 这类支持 Skills 的 IDE一条是 MCP 协议适合需要 AI 直接操作页面组件的场景。先讲 Skills 安装这是最常用的。打开终端在项目根目录或者全局执行npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor这条命令做了三件事从opentiny/agent-skills仓库拉取技能包-g表示全局安装--skill tiny-vue-skill指定只装 TinyVue 这一个技能--agent cursor表示目标 Agent 是 Cursor。如果你用的是 Claude Code把--agent cursor换成--agent claude-code。执行完你会看到类似Skill tiny-vue-skill installed to ~/.cursor/skills/的输出。装完之后需要在 IDE 里启用。以 Cursor 为例打开 Settings找到 AI 或 Skills 相关面板在列表里找到tiny-vue-skill把开关打开。Claude Code 的话Skill 会自动被识别你可以在对话里输入/skills查看已加载的技能列表确认tiny-vue-skill在列。接下来是 MCP 接入。MCP 的价值在于让 AI 不仅能写代码还能直接操作你页面上已经渲染出来的 TinyVue 组件比如点击按钮、填表单、读表格数据。配置 MCP Server 需要在 Agent 的 MCP 配置文件里加一段。以 Claude Code 为例编辑~/.claude/mcp.json{ mcpServers: { tiny-vue-mcp: { command: npx, args: [-y, opentiny/tiny-vue-mcplatest], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的Key } } } }注意这里的TAOTOKEN_BASE_URL和TAOTOKEN_API_KEY是给 MCP Server 内部调用模型用的和前面 Agent 的配置是两套但值可以一样。配好后重启 Agent输入/mcp查看连接状态看到tiny-vue-mcp显示 connected 就成功了。如果你用的是 ClineMCP 配置在 Cline 的设置面板里格式类似把command和args填进去即可。Cline 的 MCP 面板会实时显示连接状态和可用工具列表TinyVue MCP 通常会暴露get_component_api、list_components、operate_component这几个工具。配置完成后你的 Agent 就同时具备了查文档写代码和操作页面组件两种能力。前者靠 Skill后者靠 MCP。日常写代码用 Skill 就够了做自动化测试或低代码交互时再启用 MCP。4. 验证请求让 Agent 真正调用 TinyVue 组件库配置完不验证等于没配。下面这套验证动作能帮你确认 Skill 和 MCP 都真正生效了。第一步验证 Skill 是否被 Agent 识别。在对话框里输入请列出你当前可用的 TinyVue 相关技能并说明 tiny-vue-skill 能提供哪些组件知识。如果 Skill 生效Agent 会明确告诉你它加载了 tiny-vue-skill并且能说出这个技能覆盖了 TinyVue 的组件 API、Props、Slots 和 Demo。如果它一脸茫然说没有相关技能说明 Skill 没装好或者没启用回到第 3 节检查安装路径和 IDE 开关。第二步验证 API 准确性。输入一个具体的组件生成请求使用 TinyVue 的 Form 组件创建一个登录表单包含用户名和密码字段带表单校验。重点看返回的代码里tiny-form的model和rules属性是否正确tiny-form-item的prop和label是否规范校验规则用的是不是 TinyVue 支持的格式。对比一下官方文档 https://docs.opentiny.design 里的 Form 示例如果结构一致说明 Skill 的知识注入起作用了。如果 Agent 又给你编出不存在的属性检查一下是不是 Skill 没启用或者模型本身太弱。第三步验证 MCP 操作能力。这一步需要你有一个正在运行的 TinyVue 页面。在 Agent 里输入请通过 MCP 获取当前页面上所有 TinyVue 按钮的文本内容。如果 MCP 连接正常Agent 会调用list_components或类似工具返回页面上按钮的列表。再试一个操作类请求请通过 MCP 点击页面上文本为提交的按钮。观察页面是否真的触发了点击。这一步能跑通说明 MCP 的组件操作链路是通的。第四步验证 Token 消耗和响应速度。同样的 Form 生成请求分别在启用 Skill 和禁用 Skill 的情况下各发一次对比返回时间和输出长度。启用 Skill 后Agent 不需要在通用知识里反复检索响应通常更快输出也更聚焦。我实测下来启用 Skill 后生成一个中等复杂度表格组件的 Token 消耗能降三成左右。如果四步都通过你的 Agent 已经真正懂TinyVue 了。接下来就可以在日常开发里直接用它生成组件代码准确率比裸模型高一个档次。5. 本篇常见错排查401、local proxy failed 与 OAuth 报错配置过程中最容易撞上的几类报错我按出现频率排一下附上排查路径。401 Unauthorized。这个几乎都是 Key 或 Base URL 的问题。先检查ANTHROPIC_API_KEY或openai_api_key是不是复制完整了有没有多余空格。再检查 Base URL 是不是写成了https://taotoken.net/api/v1正确值就是https://taotoken.net/api不带/v1。如果 Key 是在 api-keys 页面刚创建的确认没有过期或被删除。还有一种情况是环境变量没生效比如你在 settings.json 里配了但 Agent 读的是系统环境变量两者冲突时以 Agent 配置文件为准。local proxy failed / connection refused。这个报错通常出现在 MCP Server 启动阶段。原因是npx拉取opentiny/tiny-vue-mcp时网络不通或者 Node 版本太低。先确认 Node 版本在 18 以上执行node -v看一下。然后手动跑一次npx -y opentiny/tiny-vue-mcplatest看能不能正常启动。如果卡在下载检查 npm 源配置。如果启动后立刻退出看终端输出的错误堆栈多半是 MCP 配置里的env字段格式不对JSON 里多了逗号或者引号不匹配。reading choices of undefined。这个报错说明模型返回的响应结构不符合 OpenAI 格式Agent 解析时拿不到choices字段。常见原因是 Base URL 指向了一个不兼容 OpenAI 格式的端点或者模型 ID 写错了导致返回了错误对象。检查model字段是不是控制台里实际可用的 ID别自己拼。另外确认 Base URL 没有多余路径TaoToken 的兼容端点就是https://taotoken.net/api。OAuth 相关报错。如果你用的是 Claude Code 并且之前登录过官方账号它可能优先走 OAuth 而不是 API Key。解决办法是在 settings.json 里显式配置ANTHROPIC_API_KEY和ANTHROPIC_BASE_URL并且在 Claude Code 里执行一次登出操作让它重新读取配置。如果报错里出现OAuth token expired说明它在尝试刷新官方 token这时候把ANTHROPIC_AUTH_TOKEN清空只保留ANTHROPIC_API_KEY。Skill 装了但 Agent 不调用。这个不是报错但很常见。检查三点Skill 是否在 IDE 的 Skills 面板里启用了Agent 的对话是否在正确的项目目录下有些 Skill 是项目级的模型是否支持工具调用function calling不支持工具调用的模型即使装了 Skill 也不会主动查。换一个支持工具调用的模型再试。排查顺序建议从模型层往 Skill 层查先确认单独发消息模型能回再确认 Skill 被识别最后确认 MCP 连接。这样每层的问题都能隔离出来不会混在一起。6. 把 TinyVue Skill 接进日常开发流配置和验证都跑通之后真正有价值的是把它变成日常习惯。我的做法是在项目里固定一套 Agent 使用规范生成任何 TinyVue 组件代码前先在对话里明确说使用 tiny-vue-skill 查询组件 API 后再生成这样能强制 Agent 走查文档的路径而不是凭记忆输出。对于复杂组件比如 Grid、Form、Tree这个习惯能把返工率降很多。另一个实用技巧是把常用的组件用法沉淀成项目内的 Skill 补充包。TinyVue Skill 覆盖的是官方组件 API但你的项目可能有自己的封装组件和业务规范。把这些也写成 Skill 片段和 tiny-vue-skill 一起加载Agent 生成代码时就能同时遵循官方 API 和你的项目约定。MCP 那条线适合做自动化。比如你有一个 TinyVue 的中后台页面需要批量测试表单提交可以让 Agent 通过 MCP 自动填表、点击、读结果省去手写测试脚本的时间。这块目前还在早期但方向很明确。如果你还没配模型入口先去 https://taotoken.net/api-keys 拿 Key再按第 2 节的配置片段接上。接入文档在 https://taotoken.net/doc 有更细的说明。长期做编码和 Agent 开发的话Coding Plan 页面 https://taotoken.net/coding-plan 有更划算的套餐适合高频使用。模型对话入口 https://taotoken.net/chat 可以随时验证模型可用性。Claude Code 用户看 https://taotoken.net/claude-code-anthropic 这份接入说明配置项和本文一致。最后说一个我自己的经验Skill 的效果和模型能力是乘法关系不是加法。模型本身代码能力越强Skill 带来的准确率提升越明显。所以别在弱模型上指望 Skill 能救场先把模型入口配好再叠 Skill顺序不能反。