代码能写,UI 总差点意思?这 5 个网站值得收藏

独立开发者一大痛点：代码能写，审美欠费。

按钮换了颜色，卡片加了阴影，标题再放大一点。改来改去，页面仍然像个临时拼出来的后台。

这时候，只给 AI 一句“帮我做得高级一点”，它其实很难知道你想要什么。“高级”到底是更克制的留白，还是更强的视觉冲击？两种方向，做出来完全不同。

我更推荐一种省力的做法：先找到合适的 UI 参考，把具体页面和项目要求一起交给 Agent，让它挑选、适配，再放进项目。

你不必一上来就会从零设计，但得给它一个看得见的方向。

下面这 5 个站，可以先收进你的参考库。

Beautiful UI：做 AI 产品时，先看界面如何交代状态

https://www.beautifului.dev/

如果你正在做 AI 助手、聊天工具或任务工作台，可以先逛 Beautiful UI。它展示了加载状态、流式文本、人工确认卡片、任务列表等面向 AI 产品的界面模式。

这类参考的价值，是帮你想清楚：用户等待时应该看到什么？任务执行到哪一步了？需要用户确认的操作，应该放在哪里？

比如做一个 AI 文件整理工具，除了输入框和聊天气泡，你还需要让用户看懂哪些文件正在处理、哪些已经完成、哪些需要自己决定。

可以让 Agent 参考它的信息层级和状态组织方式，再按自己的业务实现。先把它当作设计参考，具体源码能否复用，要看对应资源的开放方式。

beUI：给常用操作补上细腻的反馈

https://beui.dev/

beUI 提供面向 React 和 Next.js 的动效组件，包含按钮、抽屉、验证码输入等，并支持获取源码后修改。

我的建议是从高频操作入手：按钮按下去有没有反馈，侧边面板打开是否自然，输入完成后有没有清楚的状态变化。

这些细节值得打磨，因为用户真的会反复碰到它们。

接入前，让 Agent 先查项目依赖。beUI 当前页面列出的技术基础包括 React 19、Tailwind CSS 4 和 Motion；旧项目要先判断适配成本。具体要求以组件页面为准。

Rare UI：为一个关键位置挑点特色

https://www.rareui.com/

Rare UI 收集了有特色的动画 React 组件，包括文件夹、流体球、重力文字等，支持通过 shadcn CLI 添加组件。

如果你在做个人作品集或产品展示页，我会考虑从这里选一个视觉焦点。

但最好先问一句：这个效果要突出什么？

文件管理产品里的文件夹交互，有机会强化产品主题；如果页面的核心任务是让用户快速填完表单，大段抢眼的动效就未必合适。

挑一个能解释产品的细节，比把喜欢的效果全装进去更容易控制。

Transitions：页面已经成形，再来打磨变化过程

https://transitions.dev/

有时候，静态页面看着还行，一点起来就显得生硬。

弹窗突然出现，面板瞬间展开，加载结束后内容猛地跳出来。可以到 Transitions 看看：它整理了弹窗开合、面板展开、标签切换、骨架屏到内容等过渡示例，也提供了面向编程 Agent 的 skill 入口。

我建议在布局稳定后再用它。先选一条真实操作路径，比如“打开设置—修改内容—保存成功”，沿着这条路径补反馈。

别急着让每个元素都动起来。用户能顺畅地看懂变化，就已经很有价值。

shadcn/ui：先把基础组件统一起来

https://ui.shadcn.com/

如果你的页面连按钮、输入框、弹窗都各长各的样子，我会优先看 shadcn/ui。

它提供组件代码，让开发者按项目需要修改和扩展。源码可读、可改，也给 Agent 留出了适配空间。

适合的起步方式，是先用它建立一套一致的基础，再按需要补充少量特色组件。

已经有成熟设计系统的项目，则优先沿用现有规范。为了换一个漂亮按钮，把整套样式重新折腾一遍，往往不划算。

链接收藏完了，下一步怎么交给 Agent？

重点是把参考变成一项具体任务。使用 Claude Code、Codex 这类编程 Agent 时，可以把下面这段改成自己的需求：

请先检查项目的技术栈、现有组件和样式规范，再优化【页面名称】。

页面面向【目标用户】，主要任务是【核心操作】。我想参考【组件页面链接】，重点借鉴【布局／信息层级／交互反馈】，整体风格为【简洁、克制等具体要求】。

请选出适合当前项目的组件，简要说明用途和依赖，然后完成接入。优先复用现有组件，保留业务逻辑，统一字体、颜色、圆角和间距。

实现后检查手机端显示、键盘操作，以及加载、空数据和出错状态；能运行预览时，请实际打开页面检查。

如果无法读取链接，请明确告诉我需要补充的截图、代码或文档，不要猜测页面内容。

第一次最好只改一个页面。比如登录页、设置页，或者产品首页的首屏。

范围小，才容易判断这套风格是否适合你的产品，也方便发现组件接进去后有没有破坏原有行为。

验收时，记得把演示文案换成真实内容：很长的中文标题、没有数据的列表、提交失败的表单，都值得看一遍。漂亮的演示，只覆盖了界面的一部分状态。

使用源码前，也让 Agent 核对具体组件的许可和付费范围。能看到演示，不等于所有资源都能直接搬走。

不会设计，可以先练习选择：这个页面最重要的信息是什么，用户接下来要做什么，哪个参考能把这件事表达清楚。

下次被 UI 卡住时，就从项目里最想改的一页开始。找一个合适的参考，写清楚你喜欢它的哪里，再交给 Agent 动手。

先知道好东西去哪找，再学会把它用在合适的地方。