Augment code + axure 一键生成前端代码

上一篇文章我们讲了怎么通过Augment code + Figma MCP生成前端代码，同时我也用了cursor，做了简单对比，结果如下：
cursor + Figma MCP

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

Augment code + Figma MCP

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

今天我们同样使用Augment code + axure来演示，通过axure设计文档直接生成前端项目，同时和cursor + axure生成前端项目做个对比。

一、axure导出设计文件到本地。

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

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

我使用的vue3，我初始化了vue3项目，将刚才生成的html文件和一些css/js文件拖到了src目录下面，放在html文件夹中。配置了elementPlus+scss（这些都可以交给Agument来做，但是有点慢，我就顺手配置了，它会检测整个项目，如果做了配置就不会再重新配置了）

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

这是我简单些的指令

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

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