把这5个UI组件站丢给Agent

程序员做页面最容易卡住的地方，往往不是代码写不出来。按钮放哪、间距多大、卡片怎么排、弹窗怎样出现才舒服，这些问题每一个都能写代码，拼到一起却可能像十年前的后台管理系统。

现在有个省力得多的办法：把成熟的 UI 组件当成乐高，再让 Claude Code、Codex 这类编程 Agent 负责选型、取代码、改样式和接入现有项目。

下面这 5 个站点，刚好覆盖基础组件、AI 产品界面、稀有交互和页面动效。知道它们各自擅长什么，做页面时就不用再盯着空白画布硬憋。

Beautiful UI：AI 产品界面直接从这里找

Beautiful UI 的目标很明确：给 AI 原生产品准备一套精致的界面模式。它没有把精力花在普通按钮和输入框上，首页展示的是 Loading State、Thinking、Streaming Text、Approval Card、Tool Chips、Task Rows、Prompt Bar、Diff Table、Code Block 等组件。

这些正是 AI 应用最难凭空设计的部分。模型思考时怎样显示过程，工具调用怎样收进一枚小标签，Agent 执行动作前怎样向用户申请确认，流式回答结束后怎样放引用和后续操作，站内都给了可以现场体验的成品。

做聊天助手、知识库、数据分析 Agent 或带人工审批的自动化工具，可以让 Agent 先到 Beautiful UI 找相近的交互，再把颜色、圆角、文案和数据结构改成项目自己的样子。页面提供的是可复制、可修改的组件代码，当前使用这些公开组件不需要购买套餐。

适合项目：AI 聊天、Agent 工作台、审批流程、生成式数据界面。
访问地址：beautifului.dev

BeUI：给 React 页面补上高级动效

BeUI 是一套面向 React 和 Next.js 的动画组件，主要使用 Motion 与 Tailwind CSS，并通过兼容 shadcn 的 Registry 分发。组件不是只能看的演示，Agent 可以读取它的组件索引、依赖和源代码，再把文件放进项目。

它的免费目录已经很丰富。常用控件有 Tabs、Switch、Select、Combobox、Bottom Sheet、Drawer 和 Toast Stack；更醒目的组件有 3D Tilt Card、Morphing Modal、Cylinder Carousel、Shader Background；Agent 场景还有 Prompt Input、Todo List、File Diff、Tool Approval、Citations 和完整 Chat App。

BeUI 适合处理“功能已经能用，但页面缺少质感”的项目。比如把普通弹窗换成形态连续的 Morphing Modal，把静态数字换成滚动数字，把生硬的侧边栏折叠改成带弹性的图标轨道。公开组件免费、开源，可以用 shadcn 命令安装。Pro 版提供更多区块和整页模板，官方当前价格折合约 ¥867 / 年，终身版约 ¥1203，按查询当日汇率计算。

适合项目：React、Next.js 产品站、SaaS 后台、AI 工作台、强调动效的交互页面。
访问地址：beui.dev

Rare UI：常规组件库里找不到的效果

Rare UI 收集的是少见、有记忆点的 React 动画组件。它目前提供 14 个以上的独立组件，每个组件基本是一个文件，通过 shadcn CLI 加入项目。

这里能找到会在悬停时展开卡片的 Folder、带物理效果的 Gravity Letters、适合 AI 生图等待状态的 Grid Reveal、可播放和跳转的 Step Player、字符滚入并带成功或错误反馈的 OTP Input。它们很适合首页主视觉、产品演示、空状态和关键反馈，不必塞满整张页面。

Rare UI 公开 Registry 免费，采用 MIT 许可，可用于个人和商业项目。安装后代码会进入自己的项目，Agent 可以继续删动画、换配色、调整尺寸。接入前仍要让 Agent 检查依赖和移动端表现，尤其是物理动画、设备倾斜和持续粒子效果。

适合项目：产品官网、作品集、AI 生图、活动页面，以及需要一个视觉记忆点的关键区域。
访问地址：rareui.com

Transitions：页面不换组件，只把动作变顺

Transitions.dev 专门处理界面过渡。菜单展开、数字弹入、卡片改尺寸、错误提示抖动、骨架屏切换到内容、标签页滑动、图标切换、加载状态变成完成状态，这些很小的动作，正是页面“能用”和“精致”之间的差别。

站内的免费 Skill 可以直接装进 Claude Code、Codex、Cursor 等 Agent，包含 27 个以上可用于生产的过渡方案。装好后可以让 Agent 列出所有动画、扫描项目里零散的时长和关键帧，或者根据当前组件选择合适的过渡。

1

npx skills add Jakubantalik/transitions.dev

免费页面也能复制 CSS 和 React 方案。Pro 版增加 36 个以上的完整过渡、React 与 TypeScript 版本以及 Refine 工具，个人月付约 ¥60，终身版约 ¥1001。已有页面结构比较稳，只想统一动效节奏时，先用它扫描再局部替换最省事。

适合项目：已有 React 页面、交互动效审查、统一动画节奏、补足加载与状态切换。
访问地址：transitions.dev

shadcn/ui：先搭一套可靠的页面骨架

shadcn/ui 适合承担整个项目的基础层。它提供 Button、Dialog、Form、Table、Sidebar、Command、Calendar、Chart、Data Table 等常用组件，同时把真实源代码放进项目，开发者和 Agent 都能直接修改。

这种“开放代码”模式对编程 Agent 很友好。Agent 能读到组件实现和统一接口，组合页面时不用反复覆盖第三方包的样式。官方还提供 MCP Server，让 Agent 搜索 Registry、查看组件文档、安装组件，并支持第三方和团队私有 Registry。

shadcn/ui 本身免费、开源。做新项目时，可以先用它搭好表单、弹窗、侧边栏和数据表，再从前面几个站点挑一两个更有辨识度的组件。这样的页面有稳定骨架，也有自己的视觉重点。

适合项目：React 项目基础组件、后台系统、表单密集页面、团队设计系统。
访问地址：ui.shadcn.com

怎样让 Agent 真正把组件拼进项目

只发一句“帮我做得好看点”，Agent 很容易自由发挥。更稳定的做法，是把任务、参考站点和验收标准一起交代清楚。下面这段可以直接改项目名后使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

请先阅读现有项目的组件、主题变量和页面结构。

目标：优化「填写具体页面」的视觉与交互，不改变现有业务流程。

参考来源：
- 基础组件优先从 ui.shadcn.com 选择
- AI 交互参考 beautifului.dev
- 动画组件参考 beui.dev 和 rareui.com
- 状态切换参考 transitions.dev

执行要求：
1. 先列出准备采用的组件、选择理由和依赖，等我确认后再修改。
2. 保留项目现有主色、字体、圆角和间距体系。
3. 每个页面最多加入一个强视觉组件，避免堆叠动画。
4. 检查键盘操作、焦点状态、移动端布局和 prefers-reduced-motion。
5. 安装前审查第三方代码与许可证，不覆盖已有公共组件。
6. 完成后运行类型检查、测试和构建，并汇报修改文件。

如果项目页面很多，可以再拆成三次任务。第一轮让 Agent 盘点现有视觉规则；第二轮只做一个代表页面；确认方向后，再让它把相同组件和设计变量推广到其他页面。这样更容易保持一致，也方便在 Git 里查看和撤销改动。

前端审美很难靠一句提示词临时生成，成熟组件已经把间距、层级、状态和动效做成了可复用代码。下一次做页面时，先让 Agent 从 shadcn/ui 搭骨架，再按场景去 Beautiful UI、BeUI、Rare UI 和 Transitions 里挑一块合适的组件，通常比从零画一套界面更快，也更稳。