起新项目或接外包，最烦的就是重复搭那些后台页面，长得都差不多。特别是B端需求，侧边栏、顶栏、看板、带增删改查的表格。没什么技术难度，但手写样式就是耗时间。
最近看群里老有人推"一键生成UI "的工具，说是能直接生成React/Vue代码，还带Ant Design或Shadcn UI规范。如果真能按组件库规范生成代码，省掉搭骨架的功夫，那倒确实值了。
看到群里有人推Paico这个工具，我挑了个B端后台需求，花时间测了一下，主要看它生成的UI和代码到底能不能用。
一、AI UI工具已经开始卷前端代码了
去年我也试过几款AI UI工具，大多只能画个漂亮界面，导出静态HTML或者零散的JSX，离工程化差得远。
但最近像Paico这类工具，明显是奔着前端工程来的。我试下来，它有几个变化：
- 能理解页面结构：它不光是画个界面，能识别出"这是个后台系统"，自动拆出侧边栏、表格、筛选区、弹窗这些模块。
- 有设计规范意识：按钮层级、间距、卡片布局，基本是按Ant Design那套体系走的，不会乱来。
- 直接面向代码：输出的是组件级代码，不是一坨HTML。重点已经不是看效果图，是看代码能不能直接用。
现在这类工具，离画图越来越远，离代码生成越来越近。
二、实测Paico生成Ant Design规范的后台
打开 Paico 的界面，就是个对话框，类似GPT。我输入的需求是："做一个B端SaaS的用户管理后台，左边导航，中间带折线图的数据看板，底部是带权限分配的用户列表。"
在输入框下方能选择技术栈，我选择了React 框架，UI 组件库挑了国内常用的Ant Design，顺便点了深色主题。等了不到两分钟，页面直接在右侧窗口出来了。
界面完成度很高，左侧深色导航带多级菜单，中间统计卡片、折线图（鼠标移上去还有Tooltip），底部用户列表有Switch开关、彩色Tag标签，顶部带搜索框和下拉筛选。但光看页面不行，得看它代码是乱画的还是真用组件搭的。
让我比较意外的是，它不是生成一个巨大的HTML文件，而是给了一个完整的Vite+React项目结构：
- src/components/Sidebar.tsx 导航
- src/components/StatCards.tsx 数据卡片
- src/components/ChartPanel.tsx 图表
- src/components/UserTable.tsx 表格
更让我意外的是它对Ant Design的调用方式。Index.tsx里用了ConfigProvider和theme.darkAlgorithm开启暗黑模式，还通过token改了colorPrimary、colorBgContainer、colorBorder这些设计变量。这套代码下载下来，我只要改一下Token配置，就能直接适配公司品牌色，不用满项目找CSS类名去改。这个写法确实懂现代前端工程。
三、深度体验Paico后的真实感受
测试完这一套完整的界面和代码生成，我来客观说几点真实的体验感受。
先说优点，当个高级点的脚手架绰绰有余。对于独立开发者、接私活，或者需要在极短时间内为产品经理、老板搭建出一个高保真交互的MVP演示项目来说，它是完全够用的。你只要把需求描述清楚，它几分钟就能把路由、组件拆分、基础交互都搭好。尤其对Ant Design和Shadcn UI的生态支持，生成的代码二次开发起来不费劲，把前期写模板的脏活包了。
再说缺点和局限性。第一，它目前解决的还是"视图层"的问题。数据全是Mock的，交互也局限于前端组件自己的状态切换。拿到代码后，接口请求、鉴权、全局状态管理还得自己写。第二，用自然语言调整UI其实挺考验人的，指令给不准，来回改的效率还不如直接去VS Code里手动改两行。
总结
别指望Paico帮你写完整个业务系统，但当一个辅助工具完全合格。传统AI给图不给能跑的代码，它补上了这一环，让生成的代码真正能直接用进项目里。新项目冷启动，或者CRUD页面，用它搭个底座，再往里填业务逻辑，确实能省不少事。