我让AI做后台页面，结果第一版UI翻车了

OKOK大家好欢迎大家来到大鹏 AI 教育我是张大鹏。今天这篇我想讲一次非常真实的项目复盘。前面我用 AI 把RuyiLibraryAdmin图书管理系统的基础页面搭起来了。登录页、仪表盘、图书管理、借阅管理、读者管理、分类管理、联系作者页全部能打开Playwright 自动截图也跑通了第二篇博客还能直接引用这些截图。从工程角度看第一版是成功的。但从 UI 角度看它翻车了。这个“翻车”不是说页面完全不能看而是它只有后台系统的形状没有成熟产品的质感。它像一个能跑的 demo但不像一个可以拿出去讲课、发博客、做演示、甚至后续商品化的项目。这篇文章就记录我怎么把它从“能用但不好看”一步一步改成更像成熟 SaaS 后台的过程。这次覆盖的不是一个单点改色而是一整套 UI 规范升级页面布局、头部结构、侧栏和顶部一体化、动态背景、流线光带、滚动条、截图策略、引流入口和后续部署路线都会在这篇里讲清楚。第一版到底哪里不好看第一版最大的问题不是某一个颜色选错了而是几个基础设计问题叠在一起。第一视觉语言不统一。侧栏、顶部、卡片、图表都像是各自独立生成出来的能用但没有形成一个整体。第二层级不清楚。顶部标题太重卡片比较平内容区和导航框架的边界不够明确。第三截图方式不合理。最早我用了整页截图内容一长左侧菜单栏底部就空出来看起来像布局断了。第四图表截图没有等渲染完成。Recharts 的动画还没跑完截图已经拍了结果趋势线像只画到 2 月。第五默认滚动条也很突兀。后台系统是高频滚动的产品滚动条如果不好看会在截图里暴露出“半成品感”。这些问题放在一起就会让读者产生一种感觉这个项目确实是 AI 写出来的但还没有经过产品设计师把关。这正是我想复盘的地方。AI 能快速生成页面但页面是不是成熟产品还得靠人来判断。我选的整体方向科技蓝玻璃 SaaS 后台我没有把它改成大屏驾驶舱也没有全站堆玻璃拟态。这次我选的是科技蓝玻璃 SaaS 后台。为什么因为图书管理系统本质上是后台工具。管理员要看图书、看借阅、看读者、看逾期不是来看动画表演的。所以这个 UI 需要高级但不能吵需要有科技感但不能影响表格阅读需要有动态背景但不能抢走业务内容。最后我定了几个原则左侧固定宽度保持导航稳定。顶部固定高度采用经典后台通用头部。内容区自适应内部垂直滚动。整个页面本身不溢出屏幕。侧栏和顶部统一深色背景形成完整框架。内容区使用浅色玻璃卡片保证图表和表格可读。动态背景只做氛围不做主角。所有截图都不能覆盖旧截图要保留项目演进过程。这套原则听起来不炫但它是后台系统变高级的基础。升级后的仪表盘先看升级后的仪表盘。这张截图里核心变化有几处。左侧菜单变成固定深色侧栏宽度稳定底部引流卡片不会再因为截图高度问题断掉。顶部也改成和左侧一致的深色背景。这样头部和侧栏形成一个完整的“后台框架”内容区被明显切出来。内容区继续保持浅色但不是纯白平铺而是加了淡蓝灰背景、轻玻璃卡片、细边框和柔和阴影。这样做的好处是第一眼有科技感第二眼能读清数据第三眼还能看出它是一个管理系统而不是宣传海报。头部改成经典通用头部我一开始的头部做得太高而且左侧还放了页面标题。后来我把它改成更经典的后台结构左侧暂时留空只保留结构。右侧放全局搜索框。右侧放用户头像、用户名和角色。点击头像出现下拉菜单。下拉菜单包含“个人中心”和“退出登录”暂时作为占位。这一步看起来很小但对后台产品很重要。后台系统的顶部栏不应该抢戏它应该稳定、克制、可预期。用户每天进来看到的是同一个框架真正变化的是内容区。头像下拉还有一个细节最开始下拉框被内容区遮住了。这个问题不是功能问题而是层级和溢出的布局问题。后来我把头部高度压到56px把下拉层级提高同时保证头部overflow: visible。这样下拉菜单可以正常浮在内容卡片上方。这类细节做项目的时候很容易被忽略但截图一出来就很明显。让左侧和顶部成为一个整体我后来又把顶部背景改成和左侧一样的深色。这个调整很关键。如果左侧是深色顶部是浅色整个页面会被切成三块侧栏、头部、内容区。看起来像拼接。现在顶部和左侧统一成深色框架内容区单独是浅色业务区域用户一眼就知道左侧和顶部是导航框架下面浅色区域是工作内容。这就是后台系统里很经典的一种结构。它不一定最炫但非常稳。动态背景有氛围但不能抢内容你说你喜欢动态背景所以我专门研究了几种实现方案。最后我没有上 Three.js也没有做很重的 Canvas 特效而是用了两层比较稳的方案。第一层是 CSS 慢速动态科技蓝渐变。它负责全站底层氛围背景会很慢地移动像轻微呼吸一样不会让人分心。第二层是低密度tsParticles粒子背景。登录页粒子稍明显一点因为登录页承担宣传和第一印象的作用。后台内容区粒子非常淡只保留一点空气感。我还加了prefers-reduced-motion: reduce适配如果用户系统设置了减少动画CSS 背景动画会停掉。这就是我对动态背景的判断可以有但要克制。后台系统不是游戏界面所有动态效果都必须为产品质感服务。左侧和顶部加流线光带动态背景之后我又加了一层“流线光带”。这个效果不是用 Canvas 做的而是用 CSS 伪元素、渐变和动画实现。左侧栏右边缘有一条蓝青色光带缓慢上下流动。Logo 附近有很淡的横向扫光。顶部底边有一条横向流光。这些光带都在边缘层不压住菜单、不影响搜索框、不挡用户头像。我比较喜欢这种做法因为它很像科技 SaaS 产品里的“能量边框”有动感但不浮夸。如果用 Canvas 做当然可以更炫但维护成本和截图稳定性都会上升。这个项目目前是图书管理后台CSS 光带已经足够。滚动条也要设计很多人做 UI 会忽略滚动条。但后台系统不一样。后台页面经常滚动表格也可能横向滚动。滚动条如果还是浏览器默认样式截图里会显得很粗糙。这次我给内容区和表格区都做了统一的细滚动条宽度控制在8px。轨道保持透明。滑块用科技蓝到青绿色渐变。滑块圆角拉满。hover 时颜色更亮。内容区使用scrollbar-gutter: stable减少滚动条出现时的布局抖动。这个效果不抢眼但能让页面更完整。UI 设计很多时候就是这样真正让页面变高级的不是一个大特效而是一堆小地方不再粗糙。自动截图也重新规范这次不是简单改 CSS还顺手把截图策略也规范了。第二篇博客已经用了旧截图比如docs/screenshots/01-login.png docs/screenshots/02-dashboard.png如果这次升级直接覆盖旧图前面的文章就失去了当时的现场感。所以第三篇博客单独生成一套003-前缀截图docs/screenshots/003-01-login.png docs/screenshots/003-02-dashboard.png docs/screenshots/003-03-books.png docs/screenshots/003-04-loans.png docs/screenshots/003-05-readers.png docs/screenshots/003-06-categories.png docs/screenshots/003-07-about-contact.png对应命令是pnpmscreenshots:003这对项目复盘很重要。因为我们不是只要一个最终结果而是要保留每一次迭代的证据。以后讲课的时候可以直接拿第一版和第三版截图对比学生会更容易理解“为什么要做 UI 复盘”。登录页宣传感可以更强一点登录页和后台内容页的定位不一样。登录页是第一印象可以稍微有一点宣传感。所以我在登录页右侧用了更明显的动态蓝色背景、粒子网络和玻璃卡片。但左侧登录表单仍然保持白底和清晰输入框。也就是说视觉冲击放在右侧实际操作放在左侧。这个分工比较稳。图书管理页表格必须清楚图书管理页是这个系统最核心的页面之一。这里我没有为了炫而把表格做复杂。图书系统的高频字段包括书名、作者、ISBN、分类、馆藏位置、库存、状态。管理员要快速扫读这些信息所以表格必须清晰。我只做了轻玻璃卡片、细边框、统一状态标签和更稳定的间距。后台系统的美化边界就是这样可以高级但不能影响扫读。借阅管理页状态要一眼看清借阅管理页是业务味最强的页面。这里最重要的是状态。借阅中、已归还、已逾期这些状态必须一眼能看出来。后面我会在这个页面继续加还书按钮续借按钮逾期天数读者借阅详情借阅规则提示但第一阶段不要贪多先把基础结构和视觉语言做稳。读者管理和分类管理保持统一读者管理页现在也统一到了这套视觉语言里。分类管理页也保持同样的结构。这两个页面没有做太多额外特效因为它们本质是管理页。页面之间最重要的是一致性。一个系统如果每个页面都像不同的人做的那就算单张图还可以整体产品感也会很弱。这次用了哪些技术这次 UI 升级里我保留了原来的lucide-react图标库。它的风格干净、一致适合后台系统。新增了几个能力第一是motion。它用于页面切换和卡片进入动画。动画很轻只是让页面不那么生硬。第二是tsParticles。它用于登录页和后台背景的低密度粒子氛围。第三是纯 CSS 动态渐变。它负责全站底层的科技蓝动态背景性能轻截图稳定。第四是 CSS 流线光带。它负责左侧和顶部的边缘动效营造一点科技 SaaS 的质感。第五是原生 CSS 滚动条美化。它不需要 JS不增加库但能把页面的细节补齐。这些技术都不复杂但组合起来页面就会从“能用的 demo”往“可展示的产品”靠近一大步。这次我学到什么这次最重要的收获是AI 能很快把页面做出来但“做出来”和“做得像产品”之间还有一段距离。这个距离需要人来判断。AI 可以生成代码可以写 CSS可以接动画库可以跑截图。但页面哪里丑哪里层级不对哪里截图方式不合理哪里不符合后台系统使用习惯还是需要我们像产品经理和 UI 设计师一样去把关。纯 AI 开发不是把审美和判断交出去。恰恰相反AI 越能写我们越要会判断。这也是我做这个项目想传达的核心AI 是执行力人负责方向感。下一步下一步我会继续沿着这个方向推进。第一继续打磨图书管理和借阅管理这些核心业务页。第二补真实操作比如新增图书、登记借阅、还书、续借。第三准备 Cloudflare Pages 部署把这个系统变成可公开访问的在线演示。第四再考虑 Workers D1把 Mock 数据替换成真实数据。这篇文章记录的是 UI 升级这一阶段。从第一版翻车到现在更像成熟后台这个过程本身就很有价值。真实项目开发就是这样不是一次就完美而是一轮一轮看见问题、修正问题、把系统做得更像产品。