夜雨聆风
AI Coding 做后台页面,别再只会 antd 了,需要拉升下品味
AI Coding 做后台页面，别再只会 antd 了。
AI 写得快了，但页面变普通了
这两天我又用 AI Coding 搭了几个后台管理页面。
用户列表、订单管理、数据看板、权限配置、日志审计，功能都不复杂，基本都是后台系统里最常见的东西。
但有一个问题越来越明显。
AI 写代码的速度确实快了，页面也能跑起来，但是很多后台一眼看过去，还是那股很熟悉的味道。
左边一个菜单，右边一排卡片，中间一个表格，上面几个筛选框。
功能没问题。
就是看起来有点平。
更准确地说，是太像“默认答案”了。
这不是 antd 的问题。antd 是一个非常成熟、非常稳的组件库，企业后台、内部系统、B 端产品里用了很多年，生态也足够完整。
问题在于，当你把 antd 交给 AI Coding 的时候，AI 很容易直接生成最标准、最常见、最没有脾气的那一版。
默认 Button，默认 Table，默认 Form，默认 Card。
几分钟之后，一个后台就出来了。
但再看两眼，你会发现它像很多年前的中台模板，也像隔壁项目的管理系统，还像某个脚手架里跑出来的 demo。
如果只是公司内部临时用一下，这当然没问题。
但如果你要做的是一个给客户看的 SaaS 后台，一个数据驾驶舱，一个运营控制台，一个 AI 产品的管理端，或者一个你希望长期维护的业务系统，那这个“默认感”就会变成问题。
因为今天用户对后台页面的审美已经变了。
大家每天看的不是十年前那种灰白蓝表格系统，而是 Linear、Vercel、Supabase、Resend、Dub、Cal.com 这一类产品。
它们也是后台，也是表格，也是设置页，也是数据面板。
但它们看起来就是更现代。
不是花哨，而是干净、有秩序、有细节，信息密度高，但不压迫。
我最近越来越建议大家，在用 AI Coding 搭后台管理系统、看板页面的时候，可以优先试试这套组合：
shadcn/ui + Tailwind CSS + Radix UI + TanStack Table
这套组合现在基本成了现代 React 后台页面的一个高频选择。
它不是简单换一个 UI 库，而是换了一种搭页面的思路。
antd 的问题，不是不好，而是太熟了
先说 antd 为什么容易显得普通。
antd 的优势是完整。
你要按钮，有。你要表单，有。你要表格，有。你要弹窗、上传、日期选择器、分页、树形控件，也都有。
它像一个装修好的精装房，你直接拎包入住。
这在传统后台开发里非常香。
但问题也在这里。
精装房住的人太多了，大家最后都长得差不多。
尤其是 AI Coding 生成页面的时候，它最喜欢走“确定性最高”的路线。
比如你说：
“帮我做一个用户管理页面，包含筛选、表格、分页、编辑弹窗。”
如果不额外约束风格，AI 很大概率会给你一个非常标准的 antd 页面。
顶部一个 Form，下面一个 Table，右上角一个新增按钮，弹窗里再塞一个 Form。
这套东西当然能用。
但视觉上很难给人惊喜。
它的问题通常不是丑，而是没有记忆点。
按钮像按钮，表格像表格，卡片像卡片，所有东西都对，但所有东西都没有被“设计过”。
这也是为什么很多团队用 AI 很快做出第一版后台后，过两天又会开始纠结：
“这个页面是不是太像模板了？”
“能不能更像一个真正的产品？”
“能不能别那么中台？”
这时候，shadcn/ui 这套组合的优势就出来了。
shadcn/ui 这套组合，为什么更像现代产品
shadcn/ui 做出来的页面，第一眼通常会更像“产品”，而不是“组件库 demo”。
它默认就有更好的留白、更克制的边框、更轻的阴影、更现代的圆角和状态处理。
但它真正厉害的地方，不只是默认样式好看。
而是它的组件代码会直接进你的项目。
这点很关键。
传统组件库通常是这样的：你安装一个包，然后通过 props 去调它。
你可以改主题，可以覆盖 CSS，可以传参数，但组件的核心结构不在你手里。
shadcn/ui 的思路完全不同。
它更像是把一套设计得不错的组件源码复制到你的项目里。
Button、Dialog、Dropdown、Table、Form、Command、Popover，这些组件都变成你项目的一部分。
你想改边距，直接改。
你想改状态，直接改。
你想把它改成你自己的设计系统，也可以。
这对 AI Coding 特别友好。
因为 AI 不再只是“调用一个黑盒组件”，而是在你项目里的真实组件上继续加工。
你可以让它说：
“把这个表格页做得更像 Linear，信息密度高一点，但不要拥挤。”
“把筛选区做成紧凑工具栏，不要大表单。”
“把订单状态做成更轻的 Badge，颜色别太艳。”
“把详情页改成左侧摘要、右侧时间线。”
这些修改在 antd 里也能做，但经常会进入覆盖样式、找 DOM 结构、和组件默认行为较劲的状态。
在 shadcn/ui 里，它就是你的代码。
这个差别很大。
先看几个真实案例
给大家看几个公开项目。
Shadcn Admin Kit：更像产品的后台框架
先看 Shadcn Admin Kit。
这是 marmelab 做的一个开源后台框架，定位就是 B2B/Admin 应用。它用的是 shadcn/ui、Radix UI 和 Tailwind CSS 这一套，里面有典型的列表页、编辑页、数据表格和后台管理结构。
项目地址：github.com/marmelab/shadcn-admin-kit
你看它的感觉，就不是那种“默认后台模板”。
它还是后台。
还是列表、筛选、表格、操作按钮。
但整个页面会更轻，元素之间的呼吸感更好，组件的状态也更像现代 SaaS 产品。
shadcn-admin：现代后台的参考样板
再看一个叫 shadcn-admin 的开源项目。
这个项目在 GitHub 上关注度很高，README 里明确写了使用 ShadcnUI，也就是 TailwindCSS + RadixUI 的组合。
项目地址：github.com/satnaing/shadcn-admin
它的价值不在于你要直接拿来用，而是它给了一个很好的参考：
今天一个“现代后台”应该长什么样？
不是大面积蓝色，不是厚重的表格线，不是到处都是大卡片。
而是更像一个工作台。
左侧导航安静地待着，主区域把信息分层，状态、操作、筛选、数据密度都控制得比较克制。
Shadcn Dashboard：后台和官网不再割裂
还有一个 Shadcn Dashboard + Landing Template。
这个项目把营销页和后台 Dashboard 放在同一套视觉语言里，使用 Tailwind CSS 和 shadcn/ui。
项目地址：github.com/shadcnstore/shadcn-dashboard-landing-template
这类模板有一个很现实的启发：
很多产品现在不是只有“官网”和“后台”两张皮。
用户从落地页注册，进入控制台，创建项目，配置 API Key，看用量，看账单，看日志，整个链路都应该是一个统一的产品体验。
如果官网很现代，后台一进去像 2018 年的中台系统，割裂感会非常明显。
这就是为什么我觉得 shadcn/ui + Tailwind 这套东西特别适合 AI 产品、开发者工具、SaaS 控制台、数据看板。
它能让后台不再只是“功能堆出来”，而是真的像一个产品。
四个技术分别负责什么
再拆开讲这四个东西分别负责什么。
shadcn/ui：负责组件的形
第一层，shadcn/ui。
它负责组件的“形”。
按钮、输入框、弹窗、下拉菜单、Tabs、Badge、Toast、Command 面板，这些你每天都会用到的东西，它都给你一个不错的起点。
但它不是传统意义上的组件库。
官方文档里也说得很直接，它是你可以复制粘贴到项目里的组件。
这句话听起来普通，但对工程维护非常重要。
你不是在等组件库作者给你暴露某个 props。
你也不是在写一堆覆盖样式。
你拿到的就是源码。
这让它非常适合用来搭自己的内部设计系统。
Tailwind CSS：负责样式的手感
第二层，Tailwind CSS。
它负责样式的“手感”。
我知道很多人第一次看 Tailwind 会觉得类名太长。
一堆 flex items-center gap-2 px-3 py-2 text-sm 看起来很吓人。
但你真的用它做后台页面，会发现它非常适合精修。
后台页面最难的地方，不是做一个很炫的视觉。
而是把密密麻麻的信息放得刚刚好。
筛选栏要紧凑，但不能挤。
表格行高要低，但不能难读。
卡片之间要有层级，但不能像海报。
状态标签要明显，但不能抢走主要信息。
这些细节，用 Tailwind 调起来非常快。
AI 也很擅长改 Tailwind。
你让它“把这个页面信息密度提高一点”，它往往知道去改 padding、gap、font-size、border、background。
这种颗粒度，特别适合 AI Coding 反复迭代。
Radix UI：负责交互的骨架
第三层，Radix UI。
它负责交互的“骨架”。
很多人只看到了 shadcn/ui 的外观，忽略了它底下大量组件其实是基于 Radix UI 做的。
Radix UI 解决的是那些你平时不想手写、但写错了会很烦的东西。
比如弹窗打开后焦点应该怎么走？
键盘 Tab 应该怎么跳？
Esc 关闭弹窗之后焦点回到哪里？
下拉菜单、Popover、Tooltip、Select 这些组件，在屏幕阅读器里应该是什么语义？
这些东西不性感，但非常重要。
后台系统里有大量复杂交互。
筛选器、批量操作、更多菜单、列设置、快捷搜索、命令面板、详情抽屉、确认弹窗。
如果每个都自己手搓，早晚会出奇怪的问题。
Radix UI 的价值就是把这些底层行为打好地基，你再用 Tailwind 和 shadcn/ui 去做外观。
TanStack Table：负责表格的逻辑
第四层，TanStack Table。
它负责后台里最硬的一块：数据表格。
很多人低估了表格。
一个简单表格很好做，五列十行，渲染出来就完了。
但真实后台里的表格不是这样。
用户要排序、要筛选、要分页、要多选、要隐藏列、要固定列、要行操作、要批量操作、要服务端查询、要记住用户上次选择的列。
数据量大了还要虚拟滚动。
这时候如果你只靠一个 UI 组件库里的 Table，很快就会碰到边界。
TanStack Table 的思路是：我不管你表格长什么样，我只负责表格逻辑。
列定义、排序状态、筛选状态、分页状态、行选择状态，这些都交给它。
至于你要把它渲染成 shadcn 风格、Linear 风格、Notion 风格，还是你自己的品牌风格，都可以。
这就是它和 shadcn/ui 很搭的原因。
一个负责表格逻辑，一个负责界面表达。
组合起来之后，后台表格既能专业，又不会被固定皮肤锁死。
为什么它特别适合 AI Coding
我觉得这套组合还有一个隐藏优势：它特别适合和 AI 一起工作。
因为 AI Coding 最怕两件事。
第一，组件太黑盒。
AI 不知道里面发生了什么，只能猜 props，猜错了就开始绕。
第二，样式太全局。
改一个地方，影响一大片，最后页面像被补丁糊过。
shadcn/ui + Tailwind 这套方式，刚好把这两个问题降了很多。
组件代码在项目里，AI 能读。
样式大多在元素附近，AI 能改。
Radix 负责复杂交互，AI 不用从零造。
TanStack Table 负责表格状态，AI 不用拿数组和 useState 硬拼。
这就像给 AI 准备了一套更顺手的工具台。
你不是让它从零做一个后台，而是让它站在一套现代组件和交互基础上继续搭。
效果通常会稳定很多。
它也不是银弹
当然，这套方案也不是没有成本。
antd 的优势是“一站式”。
你装完就有一大堆企业后台组件，很多复杂控件直接拿来用。
而 shadcn/ui 更像“半成品的高质量积木”。
它给你更高的自由度，但也要求你对前端结构、组件组合、样式约束有更多判断。
如果你的团队完全不想管设计，只想最快出一个内部系统，antd 依然是合理选择。
但如果你关心页面气质，关心长期可维护，关心后台和产品品牌的一致性，我会更倾向 shadcn/ui 这套。
我的建议
我的建议是这样：
如果是非常传统的内部 OA、审批、财务、ERP，antd 仍然很稳。
如果是 AI 产品后台、SaaS 控制台、数据分析看板、开发者平台、客户运营系统，优先试试：
shadcn/ui + Tailwind CSS + Radix UI + TanStack Table
尤其是在 AI Coding 场景下。
你会发现，同样是让 AI 做一个用户管理页，它给你的第一版就不太一样。
不是那种“能用但没灵魂”的后台。
而是更接近一个可以继续打磨的产品界面。
最后总结
最后总结一下。
antd 不是不好。
它的问题是太容易让页面长成大家都见过的样子。
shadcn/ui 也不是魔法。
它只是把组件源码、样式控制、交互基础、表格逻辑这几件事拆得更清楚。
但在 AI Coding 时代，这个差别会被放大。
因为 AI 最擅长的是快速生成结构，最需要的是一个好的起点。
如果起点是默认模板，它就很容易生成默认后台。
如果起点是 shadcn/ui 这一套现代组件体系，它就更容易生成一个看起来像产品的后台。
这件事听起来只是 UI 选择，实际上影响的是你用 AI 做产品的上限。
AI 可以很快把后台从 0 做到 60 分。
但想从 60 分做到 85 分，甚至 90 分，技术栈和设计基线就很重要。
我的建议很简单：
下次你再让 AI Coding 帮你做后台页面，别只说“用 React 做一个管理系统”。
可以直接把要求写清楚：
“使用 shadcn/ui + Tailwind CSS + Radix UI + TanStack Table，做一个现代 SaaS 风格的后台页面，信息密度高，视觉克制，表格支持筛选、排序、分页和列配置。”
你会发现，它生成出来的东西，会明显不一样。
以上，如果你最近也在用 AI 搭后台，不妨开一个分支试试这套组合。
很多时候，差别不在 AI 会不会写代码。
差别在于，你给它的起点是不是足够好。