上一篇文章我们讲了怎么通过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文件。
 

image.png

image.png

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

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

image.png

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

这是我简单些的指令

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

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

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐