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

作者：唐叔在学习
专栏：唐叔学AI
技术标签：#AI编程 #前端开发 #效率工具 #管理系统 #Doubao #DeepSeek

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

前言

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

这是页面演示效果图：

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

一、开发过程

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

1. 让ai分析开发思路

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

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

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

2. 让ai根据思路写代码

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

3. 让ai优化代码目录

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

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

4. 让ai分析定位问题

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

二、开发事项

1. IDE选择

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

2. 模型选择

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

3. 开发框架选择

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

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

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

三、思考感悟

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

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

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

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