基于 Augment Code 与 Axure 自动生成前端代码实践

此前曾对比过 Augment Code 与 Cursor 结合 Figma MCP 生成前端代码的效果，主要差异如下：

Cursor + Figma MCP

1. 速度快。
2. 可以导出 Figma 文件中的图标到项目中。
3. 整体还原度不咋地。
4. 对话式，会不断询问。

Augment Code + Figma MCP

1. 速度慢。
2. 还原度高。
3. 基本不需要手动干预。
4. 访问项目整体性好，能检测到项目是否已经配置依赖等等。

本文将演示使用 Augment Code 结合 Axure 生成前端项目的流程，并与 Cursor + Axure 的方案进行对比。

一、Axure 导出设计文件到本地

打开 Axure -> 发布 -> 生成 HTML 文件 -> 选择本地文件 -> 导出到本地，删除多余的 HTML 文件。

二、将文件放在初始化的项目中

以 Vue3 为例，初始化 Vue3 项目，将刚才生成的 HTML 文件和一些 CSS/JS 文件拖到了 src 目录下面，放在 html 文件夹中。配置了 elementPlus+scss（这些都可以交给 Augment 来做，但速度较慢，建议预先配置，它会检测整个项目，如果已做配置就不会再重复配置）。

三、发布指令，让 Augment 为我们生成页面

以下是简单的指令示例：

1. 读取 src/html 文件夹里面的所有 html 文件，不包含子目录。
2. 根据 html 文件生成 vue3+elementplus+scss 的页面。
3. 配置路由跳转。
4. 封装公共组件。
5. icon 使用 iconfont，统一风格。

接下来是 Augment Code 生成代码的过程，全程基本不需要干预。写完可能有一些错误，缺少图片的错误很常见，我们可以直接复制错误信息给它，它会全局处理。