零前端 & 零UI经验,用AI 48小时重构了我的网站

352 阅读2分钟

我是个纯后端出身,前端没学过框架,UI设计只会看不会做。这次花了48小时,靠着一堆AI工具,硬是从0把我的网站重构了出来。

接下来,我想和你们分享这次开发过程中遇到的问题、踩过的坑,以及一些自己的观察和思考。


我的AI开发流程

一开始,我的出发点其实是想探索 AI参与全流程开发的可行性:从 UI设计 → 前端实现 → 后端联调,全流程怎么借助AI来完成。

实际操作中,我尝试了不少工具和流程,最终总结出这样一套链路:

  1. 需求整理:用 AI(豆包、DeepSeek、ChatGPT等)帮忙梳理功能需求

  2. 基础原型设计:用 MasterGo 快速搭UI草图

  3. 自动生成前端界面:用 Same.dev、Loveable、V0.dev 生成基础页面

  4. 细节调整 & 接口联调:用 Trae.ai、Cursor 辅助修改代码、调接口

  5. 部署上线


开发过程中遇到的坑 & 解决方法

  1. 提示词难写,AI理解偏差

很多时候我说的需求,AI理解的方向完全不对。这时候我的做法是:

让AI自己优化提示词

换多个AI对比生成效果

  1. UI设计想不到好方案

我没设计经验,很多页面不知道该怎么摆。一开始就直接让AI根据需求生成完整页面,再导入 MasterGo 做细节调整。

  1. 细节调整带来连锁反应

最痛苦的是,改了一个小东西,结果报错一堆、页面跑不起来。

→ 我会先让 AI编辑器(Cursor、Trae)帮忙修复

→ 如果反复修不好,就撤回上一步,换个提示词再走一次

  1. Trae任务需要排队

免费版要排队,其实也能接受。我通常会趁这个空档搞点别的事,来回切换多个任务,效率反而更高。


我用到的工具(推荐)

MasterGo - UI协作设计

V0.dev - React组件生成

Same.dev - 低代码前端

Trae.ai - AI代码编辑器

Cursor - AI辅助开发


最后的总结

这次实践下来,我的最大感受是:

就算在自己完全不擅长的领域,借助AI,也已经能完成80%-90%的开发工作。

剩下的,只需要你不断试错 + 优化提示词 + 整合结果。

如果你也想看这个AI重构的小站,欢迎来看看 👉 yysv.cn