上一篇文章我用 Augment code Figma MCP 生成前端代码还原度不错但速度偏慢而且对话中会不断询问确认。这次换成 Axure 设计文档我把同样的流程跑了一遍Axure 导出的 HTML 放进来由 Augment code 一次性生成 Vue3 页面。为了让这类长任务不因为模型接入点问题断掉我先把 Augment code 的模型供应商切到 TaoToken去 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 创建 API Key再继续后面的操作。1. 从 Figma 换到 AxureAugment code 的模型接入也跟着换1.1 为什么是 AxureHTML 比 Figma 图层更接近组件树Figma 的设计稿里一个按钮可能被拆成多个图层分组和蒙版混杂在一起Augment code 需要花不少时间推断哪些图层是一个完整组件。Axure 原型导出的 HTML 不一样页面结构、表单、表格、弹窗、跳转关系都已经按信息架构组织好了。Augment code 读 HTML 时能看到明确的元素层级和文本内容比从 Figma 图层反推组件树要直接得多。所以这次的任务链路是Axure 导出本地 HTML把 HTML 放进 Vue3 项目让 Augment code 读取这些 HTML 并生成 ElementPlus Scss 页面。整个链路比 Figma MCP 那套更长中途涉及多个 HTML 文件、路由配置、公共组件抽离、iconfont 替换。链条越长越怕单个 API 请求出问题导致任务停在半路。1.2 先说结论TaoToken 只换接入点Augment code 的玩法和提示词都不用大改TaoToken 在这里的角色是统一 API 兼容通道。把 Augment code 的模型请求指向 https://taotoken.net/api 之后它读文件、生成代码、改样式的能力不变只是请求走的接入点更稳定。它不是破解官方额度也不是什么灰色中转就是一个让 Augment code 能稳定跑长任务的兼容接入点。如果你的任务只是让 Augment code 改一个按钮颜色不换也没关系。但像「读取 src/html 下所有 HTML 并生成一整套 Vue3 页面」这种连续几十轮的长任务接入点的稳定性会直接影响体验。我这次把模型供应商切到 TaoToken就是要让 Augment code 把精力花在生成代码上而不是花在处理连接中断上。2. Axure 导出 HTML删掉多余文件只留页面骨架2.1 导出并清掉与本次需求无关的页面打开 Axure在菜单栏找到「发布」选择「生成 HTML 文件」指定一个本地目录导出。导出完成后目录里会有多个 HTML 文件对应原型里的各个页面另外还有 resources、data.js、styles 等资源文件。这里有一个关键动作删掉与本次需求无关的 HTML 文件。如果原型里有十几个页面而你只想生成登录、首页、列表页三个页面就把其他页面的 HTML 删掉。不要试图让 Augment code 一次性处理全部页面文件太多时模型在长上下文里容易丢失前面页面的细节生成质量会明显下降。删除时保留一个入口页面比如 index.html 或 home.html。删完后先用浏览器打开这个 HTML确认图片能显示、样式没有完全错乱。Axure 导出的 HTML 对相对路径很敏感如果换目录后资源加载不出来后续 Augment code 生成页面时也会跟着报一堆缺图错误。2.2 目录结构调整HTML 放 src/html资源放 src/html/resources处理好之后把选中的 HTML 文件放到 Vue3 项目的src/html目录下。注意HTML 文件本身直接放在src/html根目录不要放进子目录。因为后面给 Augment code 的提示词会写「读取 src/html 文件夹里面的所有 html 文件不包含子目录」HTML 放子目录的话这一条指令就失效了。资源文件的处理方式更灵活一些。Axure 导出的 HTML 通常外链 resources 下的 CSS 和 JS保持原有的引用路径最省事。目录结构可以是这样src/html/ ├── index.html ├── login.html ├── dashboard.html └── resources/ ├── css/ ├── js/ └── images/这样 HTML 都在src/html根目录下资源则在resources子目录里。Augment code 读取 HTML 时不会把 resources 当作页面去转换同时 HTML 里的相对引用仍然能指到对应资源。3. src/html 就位初始化 Vue3 ElementPlus Scss 项目3.1 用 Vite 初始化并预装依赖原文里提到「这些都可以交给 Augment 来做但是有点慢我就顺手配置了」。我也采用同样的策略自己先把项目基础搭好让 Augment code 专注于 HTML 转 Vue3 页面。npm create vitelatest axure-demo -- --template vue cd axure-demo npm install npm install element-plus sass装完后在main.js里全局引入 ElementPlusimport { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css createApp(App).use(ElementPlus).mount(#app)如果项目之前没有用过 ElementPlus这样全局引入最快。后面 Augment code 生成的页面里用到el-table、el-dialog、el-form等组件时不需要每个文件都手动 import。3.2 让 Augment code 能读到项目依赖状态Augment code 的其中一个特点是会检测整个项目结构。它能看到package.json里是否已经有 element-plus 和 sass能看到main.js里是否已经全局注册了 ElementPlus。检测到依赖已经就绪它就不会再重复安装而是直接生成使用这些组件库的页面代码。这一点在长任务里很省时间。如果项目是空的Augment code 可能会先花几轮装依赖、建配置文件再开始正式生成页面。现在这些前置工作已经做完它能直接进入「读 HTML → 写 Vue 组件 → 配路由 → 封装公共组件」的正轨。4. 在 Augment code 里把模型供应商指向 TaoToken4.1 去官网拿 Key模型 ID 以模型广场为准打开 TaoToken 注册账号进入控制台创建 API Key。创建后复制下来保存为占位符YOUR_API_KEY。注意API Key 只会完整显示一次创建后要立刻复制。模型 ID 不要凭印象填。登录 TaoToken 后在模型广场页面查看当前可用的模型 ID复制你要用的那个。不同时期模型广场的模型列表会变动以页面展示为准不要照搬网上教程里的旧模型名。4.2 把 Base URL 和 Key 填进 Augment code在 Augment code 的模型设置里找到自定义供应商或兼容接口入口不同版本的按钮位置可能不同但通常都在模型选择下拉框的底部区域。新增一个自定义供应商填写供应商名称TaoToken Base URLhttps://taotoken.net/api API KeyYOUR_API_KEY 模型 IDYOUR_MODEL_ID注意Base URL 填 https://taotoken.net/api末尾不要加 /v1也不要带任何 UTM 参数。官网链接用于注册、创建 Key、看模型广场接口地址用于填入工具。这两个地址不能混用。保存配置后在 Augment code 的模型选择里切到刚添加的 TaoToken 供应商。如果你的 Augment code 版本支持「检查连接」之类的按钮先点一下确认连通。4.3 用 curl 先验证连通性在命令行里跑一次请求确认 API Key 和 Base URL 都没有问题curl https://taotoken.net/api/chat/completions \ -H Authorization: Bearer YOUR_API_KEY \ -H Content-Type: application/json \ -d { model: YOUR_MODEL_ID, messages: [ {role: user, content: 只回复两个字正常} ] }返回结果里包含choices数组和正常文本回复就说明通道已经通了。这一步能提前暴露 Key 复制多了空格、模型 ID 填错等低级问题不用等到 Augment code 生成到一半才报错。5. 发布指令让 Augment 从 HTML 生成 Vue3 页面5.1 五条指令的逐条拆解配置好模型接入后给 Augment code 发布下面的指令内容和原文保持同一个目标读取 src/html 文件夹里所有直接位于该目录的 html 文件不包含子目录。根据这些 html 文件生成 Vue3 ElementPlus Scss 页面。为生成的页面配置路由跳转。封装公共组件表单、弹窗、表格这类重复结构收敛成可复用组件。图标统一使用 iconfont保持整体视觉风格一致。第一条限定文件范围避免 Augment code 把 resources 子目录里的文件也当作页面处理。第二条锁定技术栈ElementPlus 和 Scss 已经是项目的既有依赖它不会换赛道。第三条保证生成的不是一堆孤立页面而是能通过路由串联起来的完整模块。第四条和第五条决定工程质量跳过这两条的话最终代码会充满重复的弹窗和散落各地的 icon 引用。5.2 长任务中断时怎么续跑指令发布后Augment code 会开始连续读取 HTML、生成 Vue 文件、修改路由配置。这个过程耗时比较长期间不需要对话干预。如果中途因为网络波动或其他原因停了直接把控制台里的报错信息复制粘贴回对话框让它从报错位置继续处理。尽量不要在它生成过程中频繁插入新的需求。因为 Augment code 对项目整体性检测很好你在半路说「顺便把某个页面改成暗色」它可能会重新审视全局导致前面的生成节奏被打乱。让这一轮任务完整跑完再开新对话处理后续调整效率更高。6. 验证、排障和与 cursor 的差异6.1 生成结果验证清单Augment code 跑完之后先不要急着开新任务对照下面的清单检查一遍npm run dev能不能正常启动浏览器打开路由是否白屏。页面里的表格、表单、弹窗是否真的用了 ElementPlus 组件还是生成成了原生 HTML。路由跳转是否符合原型里的页面关系刷新当前路由会不会 404。图片是否来自src/html/resources有没有出现一堆莫名其妙的绝对路径。Scss 变量和嵌套是否生效有没有样式冲突。如果发现问题直接把现象描述贴给 Augment code它会在现有代码上做修复不需要重新生成整个项目。6.2 两个常见报错缺图片和 401/404这次跑下来最常遇到的报错是缺图片。Axure 导出的 HTML 里图片引用有时带绝对路径或特殊参数复制到 Vue3 项目后路径就失效了。遇到这种情况把报错信息原样贴给 Augment code它会检查资源引用并全局修正路径。另一个容易出问题的地方是接口返回 401 或 404。401 通常是 API Key 复制错了或者复制时多了看不见的空格回 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 重新创建 Key 再试。404 则要检查 Base URL 是否被工具自动补了/v1后缀。Augment code 个别版本在识别到自定义 Base URL 时会自动在末尾拼接标准路径如果因此报 404需要在供应商类型里改成 OpenAI 兼容模式或者找到「允许自定义路径」之类的开关保证实际请求走的是 https://taotoken.net/api 而不是 https://taotoken.net/api/v1。6.3 Augment TaoToken 与 cursor Axure 的取舍把两者放在一起对比的话cursor 的速度优势仍然明显但它需要不停对话确认细节而且更倾向于直接把 HTML 改写成 Vue 文件还原度一般。Augment code 则相反速度慢一些但全程基本不需要干预对项目的整体依赖检测更好。接入 TaoToken 之后Augment 速度慢的特性不会改变但至少不会因为模型接入点问题突然断掉长任务跑完的成功率提升了不少。如果只是改一个页面用 cursor 更顺手。如果是从 Axure 原型一次性生成整个前端模块我会选 Augment code TaoToken。任务发布后去模型广场看一眼调用记录确认这次生成过程确实完整跑通后面就可以放心把更大的设计稿交给它了。 Augment code 配 TaoToken：用 Axure 生成 Vue3 前端项目
上一篇文章我用 Augment code Figma MCP 生成前端代码还原度不错但速度偏慢而且对话中会不断询问确认。这次换成 Axure 设计文档我把同样的流程跑了一遍Axure 导出的 HTML 放进来由 Augment code 一次性生成 Vue3 页面。为了让这类长任务不因为模型接入点问题断掉我先把 Augment code 的模型供应商切到 TaoToken去 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 创建 API Key再继续后面的操作。1. 从 Figma 换到 AxureAugment code 的模型接入也跟着换1.1 为什么是 AxureHTML 比 Figma 图层更接近组件树Figma 的设计稿里一个按钮可能被拆成多个图层分组和蒙版混杂在一起Augment code 需要花不少时间推断哪些图层是一个完整组件。Axure 原型导出的 HTML 不一样页面结构、表单、表格、弹窗、跳转关系都已经按信息架构组织好了。Augment code 读 HTML 时能看到明确的元素层级和文本内容比从 Figma 图层反推组件树要直接得多。所以这次的任务链路是Axure 导出本地 HTML把 HTML 放进 Vue3 项目让 Augment code 读取这些 HTML 并生成 ElementPlus Scss 页面。整个链路比 Figma MCP 那套更长中途涉及多个 HTML 文件、路由配置、公共组件抽离、iconfont 替换。链条越长越怕单个 API 请求出问题导致任务停在半路。1.2 先说结论TaoToken 只换接入点Augment code 的玩法和提示词都不用大改TaoToken 在这里的角色是统一 API 兼容通道。把 Augment code 的模型请求指向 https://taotoken.net/api 之后它读文件、生成代码、改样式的能力不变只是请求走的接入点更稳定。它不是破解官方额度也不是什么灰色中转就是一个让 Augment code 能稳定跑长任务的兼容接入点。如果你的任务只是让 Augment code 改一个按钮颜色不换也没关系。但像「读取 src/html 下所有 HTML 并生成一整套 Vue3 页面」这种连续几十轮的长任务接入点的稳定性会直接影响体验。我这次把模型供应商切到 TaoToken就是要让 Augment code 把精力花在生成代码上而不是花在处理连接中断上。2. Axure 导出 HTML删掉多余文件只留页面骨架2.1 导出并清掉与本次需求无关的页面打开 Axure在菜单栏找到「发布」选择「生成 HTML 文件」指定一个本地目录导出。导出完成后目录里会有多个 HTML 文件对应原型里的各个页面另外还有 resources、data.js、styles 等资源文件。这里有一个关键动作删掉与本次需求无关的 HTML 文件。如果原型里有十几个页面而你只想生成登录、首页、列表页三个页面就把其他页面的 HTML 删掉。不要试图让 Augment code 一次性处理全部页面文件太多时模型在长上下文里容易丢失前面页面的细节生成质量会明显下降。删除时保留一个入口页面比如 index.html 或 home.html。删完后先用浏览器打开这个 HTML确认图片能显示、样式没有完全错乱。Axure 导出的 HTML 对相对路径很敏感如果换目录后资源加载不出来后续 Augment code 生成页面时也会跟着报一堆缺图错误。2.2 目录结构调整HTML 放 src/html资源放 src/html/resources处理好之后把选中的 HTML 文件放到 Vue3 项目的src/html目录下。注意HTML 文件本身直接放在src/html根目录不要放进子目录。因为后面给 Augment code 的提示词会写「读取 src/html 文件夹里面的所有 html 文件不包含子目录」HTML 放子目录的话这一条指令就失效了。资源文件的处理方式更灵活一些。Axure 导出的 HTML 通常外链 resources 下的 CSS 和 JS保持原有的引用路径最省事。目录结构可以是这样src/html/ ├── index.html ├── login.html ├── dashboard.html └── resources/ ├── css/ ├── js/ └── images/这样 HTML 都在src/html根目录下资源则在resources子目录里。Augment code 读取 HTML 时不会把 resources 当作页面去转换同时 HTML 里的相对引用仍然能指到对应资源。3. src/html 就位初始化 Vue3 ElementPlus Scss 项目3.1 用 Vite 初始化并预装依赖原文里提到「这些都可以交给 Augment 来做但是有点慢我就顺手配置了」。我也采用同样的策略自己先把项目基础搭好让 Augment code 专注于 HTML 转 Vue3 页面。npm create vitelatest axure-demo -- --template vue cd axure-demo npm install npm install element-plus sass装完后在main.js里全局引入 ElementPlusimport { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css createApp(App).use(ElementPlus).mount(#app)如果项目之前没有用过 ElementPlus这样全局引入最快。后面 Augment code 生成的页面里用到el-table、el-dialog、el-form等组件时不需要每个文件都手动 import。3.2 让 Augment code 能读到项目依赖状态Augment code 的其中一个特点是会检测整个项目结构。它能看到package.json里是否已经有 element-plus 和 sass能看到main.js里是否已经全局注册了 ElementPlus。检测到依赖已经就绪它就不会再重复安装而是直接生成使用这些组件库的页面代码。这一点在长任务里很省时间。如果项目是空的Augment code 可能会先花几轮装依赖、建配置文件再开始正式生成页面。现在这些前置工作已经做完它能直接进入「读 HTML → 写 Vue 组件 → 配路由 → 封装公共组件」的正轨。4. 在 Augment code 里把模型供应商指向 TaoToken4.1 去官网拿 Key模型 ID 以模型广场为准打开 TaoToken 注册账号进入控制台创建 API Key。创建后复制下来保存为占位符YOUR_API_KEY。注意API Key 只会完整显示一次创建后要立刻复制。模型 ID 不要凭印象填。登录 TaoToken 后在模型广场页面查看当前可用的模型 ID复制你要用的那个。不同时期模型广场的模型列表会变动以页面展示为准不要照搬网上教程里的旧模型名。4.2 把 Base URL 和 Key 填进 Augment code在 Augment code 的模型设置里找到自定义供应商或兼容接口入口不同版本的按钮位置可能不同但通常都在模型选择下拉框的底部区域。新增一个自定义供应商填写供应商名称TaoToken Base URLhttps://taotoken.net/api API KeyYOUR_API_KEY 模型 IDYOUR_MODEL_ID注意Base URL 填 https://taotoken.net/api末尾不要加 /v1也不要带任何 UTM 参数。官网链接用于注册、创建 Key、看模型广场接口地址用于填入工具。这两个地址不能混用。保存配置后在 Augment code 的模型选择里切到刚添加的 TaoToken 供应商。如果你的 Augment code 版本支持「检查连接」之类的按钮先点一下确认连通。4.3 用 curl 先验证连通性在命令行里跑一次请求确认 API Key 和 Base URL 都没有问题curl https://taotoken.net/api/chat/completions \ -H Authorization: Bearer YOUR_API_KEY \ -H Content-Type: application/json \ -d { model: YOUR_MODEL_ID, messages: [ {role: user, content: 只回复两个字正常} ] }返回结果里包含choices数组和正常文本回复就说明通道已经通了。这一步能提前暴露 Key 复制多了空格、模型 ID 填错等低级问题不用等到 Augment code 生成到一半才报错。5. 发布指令让 Augment 从 HTML 生成 Vue3 页面5.1 五条指令的逐条拆解配置好模型接入后给 Augment code 发布下面的指令内容和原文保持同一个目标读取 src/html 文件夹里所有直接位于该目录的 html 文件不包含子目录。根据这些 html 文件生成 Vue3 ElementPlus Scss 页面。为生成的页面配置路由跳转。封装公共组件表单、弹窗、表格这类重复结构收敛成可复用组件。图标统一使用 iconfont保持整体视觉风格一致。第一条限定文件范围避免 Augment code 把 resources 子目录里的文件也当作页面处理。第二条锁定技术栈ElementPlus 和 Scss 已经是项目的既有依赖它不会换赛道。第三条保证生成的不是一堆孤立页面而是能通过路由串联起来的完整模块。第四条和第五条决定工程质量跳过这两条的话最终代码会充满重复的弹窗和散落各地的 icon 引用。5.2 长任务中断时怎么续跑指令发布后Augment code 会开始连续读取 HTML、生成 Vue 文件、修改路由配置。这个过程耗时比较长期间不需要对话干预。如果中途因为网络波动或其他原因停了直接把控制台里的报错信息复制粘贴回对话框让它从报错位置继续处理。尽量不要在它生成过程中频繁插入新的需求。因为 Augment code 对项目整体性检测很好你在半路说「顺便把某个页面改成暗色」它可能会重新审视全局导致前面的生成节奏被打乱。让这一轮任务完整跑完再开新对话处理后续调整效率更高。6. 验证、排障和与 cursor 的差异6.1 生成结果验证清单Augment code 跑完之后先不要急着开新任务对照下面的清单检查一遍npm run dev能不能正常启动浏览器打开路由是否白屏。页面里的表格、表单、弹窗是否真的用了 ElementPlus 组件还是生成成了原生 HTML。路由跳转是否符合原型里的页面关系刷新当前路由会不会 404。图片是否来自src/html/resources有没有出现一堆莫名其妙的绝对路径。Scss 变量和嵌套是否生效有没有样式冲突。如果发现问题直接把现象描述贴给 Augment code它会在现有代码上做修复不需要重新生成整个项目。6.2 两个常见报错缺图片和 401/404这次跑下来最常遇到的报错是缺图片。Axure 导出的 HTML 里图片引用有时带绝对路径或特殊参数复制到 Vue3 项目后路径就失效了。遇到这种情况把报错信息原样贴给 Augment code它会检查资源引用并全局修正路径。另一个容易出问题的地方是接口返回 401 或 404。401 通常是 API Key 复制错了或者复制时多了看不见的空格回 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 重新创建 Key 再试。404 则要检查 Base URL 是否被工具自动补了/v1后缀。Augment code 个别版本在识别到自定义 Base URL 时会自动在末尾拼接标准路径如果因此报 404需要在供应商类型里改成 OpenAI 兼容模式或者找到「允许自定义路径」之类的开关保证实际请求走的是 https://taotoken.net/api 而不是 https://taotoken.net/api/v1。6.3 Augment TaoToken 与 cursor Axure 的取舍把两者放在一起对比的话cursor 的速度优势仍然明显但它需要不停对话确认细节而且更倾向于直接把 HTML 改写成 Vue 文件还原度一般。Augment code 则相反速度慢一些但全程基本不需要干预对项目的整体依赖检测更好。接入 TaoToken 之后Augment 速度慢的特性不会改变但至少不会因为模型接入点问题突然断掉长任务跑完的成功率提升了不少。如果只是改一个页面用 cursor 更顺手。如果是从 Axure 原型一次性生成整个前端模块我会选 Augment code TaoToken。任务发布后去模型广场看一眼调用记录确认这次生成过程确实完整跑通后面就可以放心把更大的设计稿交给它了。