使用 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 工具辅助开发？具体流程是怎样的？