Augment 进行前端页面开发体验！

[hmxxmh]

使用 AI 辅助开发前端界面的体验分享

✅ 先说结论：非常棒！

🧑‍💻 背景介绍

本人是一名后端开发者，最近接到一个任务：开发一个 AI 模型，并提供一个效果演示界面。

对于前端部分，虽然几年前曾使用 Vue 开发过后台管理系统，但现在已经完全忘记了相关语法，因此对界面开发感到比较头疼。

🔍 工具调研

为了快速完成界面开发，我尝试了多个 AI 工具，包括：

• Qwen
• Cursor
• Trae
• Augment

在使用相同提示词（未做复杂优化）的情况下，发现：

Qwen 生成的界面最漂亮！

不过也存在一些问题：

• Qwen 网页版每次修改哪怕是一行代码都会重新输出，无法像 Cursor 或 Trae 那样进行局部修改。
• 另外，Qwen 的部署只能发布到其自有服务器上，不够灵活。

💡 最终开发流程

结合各工具的优点，我的最终开发流程如下：

1. 使用 Qwen 生成初始界面（基于 React + Tailwind ）
2. 将代码复制到 VSCode
3. 使用 Augment 插件 进行迭代修改和优化
4. 最后打包并部署到自己的服务器

整个过程耗时不到 一天！

⏳ 效率对比

如果没有 AI 的帮助：

• 我需要先重新熟悉前端语法
• 再设计页面布局
• 最后动手开发

估计至少需要 一周时间，而且最终效果可能还不如 AI 生成的好看。

🚀 下一步计划

接下来我想尝试这样的流程来进一步提升效率：

1. 使用原型图工具（如 Figma 、墨刀等）先画出界面原型
2. 将原型交给 AI 来生成代码
3. 相信这样产出的效果会更好！

🤔 想了解大家的做法

想请教下：

• 大家平时是怎么处理这类“临时前端需求”？
• 是否也在使用 AI 工具辅助开发？具体流程是怎样的？

[Archeb]

你这个贴子也是 AI 重新排版润色的吗，AI 味有点明显

[aqtata]

一股公众号的味道

[hmxxmh]

@Archeb 我自己写完以后，让 AI 帮我用 markdown 格式改了下排版，内容是自己填的，部分语法 ai 给我修改了

[hmxxmh]

@aqtata 可能是用了 AI 排版的原因吧

[huluhulu]

v0.dev

[512357301]

你要是会 Python 的话，可以用 higgingface 平台推出的框架 Gradio ，或者用 streamlit 开发

[hmxxmh]

@huluhulu 这个之前体验过，感觉有点卡，看代码也是 react,为啥 ai 都喜欢用这个，不用 vue

[hmxxmh]

@512357301 后端就是用 python 的，这俩个我都用过，挺方便的，如果不考虑颜值，确实是最快出效果的

[hmxxmh]

@huluhulu 刚试了一下，给了个图片给他，完美复刻了...有点牛

[JoeDH]

tailwind 那一大串的 css 类改如何解决，看着好累，最近我也在用 AI 出前端稿子

[Leeeeex]

价格太贵了，之前有 roocode ，现在有 claude4 ，我不觉得 augement 值这个钱

[mogutouer]

Augment 前端能力差的离谱，无论是用户交互还是 UI 设计，跟 Claude 差不是一个级别，Augment 做后端还可以