Augment code + axure 一键生成前端代码
上一篇文章我们讲了怎么通过Augment code + Figma MCP生成前端代码,同时我也用了cursor,做了简单对比,结果如下:今天我们同样使用Augment code + axure来演示,通过axure设计文档直接生成前端项目,同时和cursor + axure生成前端项目做个对比。
·
上一篇文章我们讲了怎么通过Augment code + Figma MCP生成前端代码,同时我也用了cursor,做了简单对比,结果如下:
cursor + Figma MCP
- 速度快。
- 可以导出Figma文件中的图标到项目中。
- 整体还原度不咋地。
- 对话式,会不断询问。
Augment code + Figma MCP
- 速度慢。
- 还原度高。
- 基本不需要手动干预。
- 访问项目整体性好,能检测到项目是否已经配置依赖等等。
今天我们同样使用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吭哧吭哧写代的过程了,全程基本不需要干预,写完可能有一些错误,缺少图片的错误很常见,我们可以直接复制错误信息给我它,它会全局处理。
更多推荐
所有评论(0)