两天搭完一个复杂后台系统，我是怎么用 AI 工具链完成的？

干前端的兄弟都懂，中后台管理系统，大部分时间就是堆页面。各种表格、表单、看板、权限，来来去去就那么几个模式。现在开源Admin模板是不少，不过但凡业务有点自己的玩法，改模板的功夫，可能比自己重新写一套还费劲。改别人的代码，光是看懂他封装的组件就要半天。
最近大半年，AI大模型写代码的能力进步挺猛，尤其是Claude 3.5出来以后，好多人觉得后台系统可以一句话生成了。自己在项目里试了一轮下来，发现光靠跟AI“聊天”就想整出一个完整的项目，这事儿不太现实。
今天就拿我刚做完的一个带多页面交互的管理系统为例，聊聊在现在的技术条件下，怎么搭配AI工具才能真正提高交付速度。

一、为啥直接让大模型写后台总是跑偏？

不少人刚开始接触AI编程，喜欢直接打开对话框，甩一句：“帮我写一个管理系统仪表盘，React+Tailwind。”AI确实会给出一大段代码，但跑起来问题就来了。
首先是有些页面长得不像一套。大模型记不住你前面聊过的设计，今天生成的页面一个样，明天生成的又一个样。比如侧边栏的宽度，有的页面是w-64，有的变成w-56；卡片的圆角，一会儿rounded-md，一会儿rounded-2xl。为了把这些风格不一的组件拼到一起，光是调CSS统一风格，花的时间就够多了。
另外，AI大模型生成的是它“想象”中的界面，不是我们真正想要的。比如你需要一个带图表联动的数据对比页面，它可能只会给你扔两个干巴巴的表格。等跟后端联调、跟产品对需求的时候，发现字段对不上、布局得重做，基本就是原地返工。
在开始写复杂功能之前，必须得先定两样东西：一个是页面到底长啥样，另一个是代码结构得规整。这两样不敲定，后面跟大模型交互就是鸡同鸭讲。

二、先搞定视觉和骨架，再让AI动手

我这回换了个流程：不急着写业务逻辑，先把高保真原型和静态代码搞出来。我们团队没有专职UI，就找了一款国内的原型工具（墨刀AI），用它来打头阵。跟纯聊天的AI不一样，这种偏设计的AI能直接生出可视化界面，还附带前端代码。
拿这次系统的仪表盘来说，我输入了一段包含具体指标和布局需求的话，AI直接生成了下面这套界面：

左侧是深色导航，右侧主区域用Grid布局划好了统计卡片、图表和列表的占位，布局清晰，拿来就能对需求。更香的是，它能顺带生成一份能直接跑的React代码。

比如这段代码，虽然谈不上多惊艳，但至少规规矩矩，能直接用。它用的是Tailwind的标准类名，像flex justify-between、grid-cols-3这些，没什么花里胡哨的自定义样式。图标库（Lucide React）也是按需引入的。系统里另一个“API密钥设置”页面更省事，连Recharts图表库都帮你装好了，Mock数据也给你填上了。

到这一步，一行代码没写，一套多页面的React骨架就有了。风格是统一的，包也引好了，页面之间跳转也没啥大毛病。最耗人力的“搭架子”和“切图”环节，就这么省掉了。

三、把骨架喂给Claude，专注逻辑闭环

有了静态页面，接下来就是写交互、接接口。这时候把接力棒交给Claude。
前面的准备工作，让提示词的方式发生了质变。以前是让AI凭空给你编，现在变成给它一段现成的代码，让它在这上面改。这种带明确上下文的活，Claude干得很漂亮。
比如“多模型对比”这个页面，原型工具已经搭好了左右分栏的结构、输入框和按钮样式。我直接把这段静态.tsx文件复制给Claude，提示词大概是这样：

这段代码是多模型对比页面的静态UI。在这个基础上帮我加逻辑：

1. 用Zustand管理状态，存一个prompt字符串和三个模型的结果数组。
2. 点‘开始评测’按钮时，按钮变loading，模拟三个并行的请求。
3. 请求返回后，把左右中三块卡片的内容换成真实数据，响应时间也渲染上去。注意保持原有Tailwind样式。

大模型能读到我给的DOM结构和样式名，所以它改完的东西丢回项目里，样式基本不打架，也不会把布局搞乱。像API设置页的“复制密钥”、“显隐Token”这类小交互，直接让Claude在原型代码里加上useState和点击事件，基本一次过，很少需要二次调试。

总结

这套流程走下来，比之前只用一种AI工具顺手多了。设计类的活，交给擅长视觉生成的AI工具，先把界面和样式骨架定死。逻辑类的活，交给代码理解能力强的AI大模型，让它在一个既定的框架里填业务逻辑，咱们就变成了把控流程的人。

注：文中配图为AI生成示意图。