30min用AI完成后台管理系统页面开发:从思路到实现的全过程

1 阅读4分钟

作者:唐叔在学习

技术标签:#AI编程 #前端开发 #效率工具 #管理系统 #Doubao #DeepSeek #Trae

大家好,我是唐叔。今天想和大家分享一个近期让我惊喜的AI开发体验——仅用30min就完成了一个后台管理系统的基本页面开发。作为经历过年初AI开发"翻车"的老用户,这次体验让我对国产AI的发展有了新的认识。

前言

年初尝试AI开发时,国产AI的表现确实不尽如人意(懂的都懂),导致我一度搁置了这个想法。但最近重新尝试后,发现进步显著,特别是在前端页面生成方面,已经能够产出可直接使用的静态页面。

这是页面演示效果图:

页面效果图.gif

虽然只是一些静态页面,但是很显然,已经基本可以满足大部分人的审美要求了,再修修补补,已经基本能用啦。

92f14a41-4358-4dba-bafd-73f77f566270.jpg

一、开发过程

接下来说下唐叔的开发思路吧,希望对你有帮助。

1. 让ai分析开发思路

想不到吧,第一步竟然是撰写 readme.md,主要是为了使 ai 更能读懂上下文。

  • 步骤1:让 ai 分析系统核心功能,prompt:当前要构建一个图书管理后台系统,请分析会存在哪些核心功能。

    c356595d-8040-4470-8b08-4ac6970f3bc3.png

  • 步骤2:让 ai 生成页面设计思路,prompt:#readme.md 请帮忙在当前readme文档中补充一些最关键的页面信息,每个页面需要包含主要的元素,还有整体的设计风格,背景颜色等。

    7286310a-e16a-4018-af28-c47f20a2b7fd.png

2. 让ai根据思路写代码

prompt:请基于 readme.md 进行页面实现,要求使用JavaScript+CSS+html,然后剩下的事情,就是耐心等待 ai 自行开发代码了。

854e629d-77e2-4de9-b10d-6a3cb0b87098.png

3. 让ai优化代码目录

上述步骤完成后,其实功能就开发完了,真的很快。最开始的目录结构很混乱,就顺道让 ai 调整目录结构了。

prompt:代码目录有点混乱,请对代码目录进行优化,要求保持原页面功能可用

19a8b33b-49fb-487a-9880-4c5a6f9768fe.png

4. 让ai分析定位问题

ai 问题内容,如图片或报错代码,接着就 ai 自行分析修复了。

65b3bb11-5d9c-423f-b690-d829dd507db5.png

二、开发事项

1. IDE选择

这里,我用的是国产的 Trae,当然不是广子哈,只是纯粹用国外的好像有点麻烦,想着基本都是基于 VS-CODE 进行二开的,使用上也大差不差吧。当然你可以使用其他国外或其他国产厂家的。

1a5b664c-8817-45e4-9303-e8c6abd8467d.png

2. 模型选择

这里,我选择的是 Doubao Seed 1.6,虽然可以选择 DeepSeek-V3-0324,不过从适配性角度,Trae 是字节家的,那么自家的大模型理论上适配性会好很多,就这里 Doubao Seed 1.6 在使用时,就支持上传图片,而 DeepSeek-V3-0324 就不支持了。

0a5ed8f1-9d46-4ade-a9ad-73b9568ad1f4.png

3. 开发框架选择

这里我直接使用的是 HTML+CSS+JavaScript,并没有使用上档次的前端框架 Vue/React 啥的。

主要是如果只是基础页面开发,没必要啥都整的太复杂。

另外,也是使用前端框架开发,感觉 Trae 不好定位报错,使用体验上不是特别好。

三、思考感悟

ai 开发到底是噱头,还是长远发展方向呢。这个在这几年的 ai 洪流中,我想大多数人都思考过这个问题吧,甚至会焦虑会不会将来被 ai 替代?

ai 是否是长远发展方向,唐叔的见解是 ai 开发值得学习,就上述的前端页面开发,如果是纯人工,起码也得半天吧,但是在不考虑各种定制、各种细节啥的,别说前端半吊子的唐叔,哪怕是对完全不懂前端的同学,用 ai 真就30分钟的事情。

但是 ai 是否会替代开发呢?就目前的成熟度来看,个人感觉还远着呢,那么能替代,也是80%的基础功能开发,而剩余的20%复杂逻辑、细节优化还是需要人工去处理的。当然,也有说法:未来的 ai 替代的不是开发,而是不会合理使用 ai 的开发。

好啦,上述就是唐叔今天的分享啦,感谢阅读。