资源

从找参考，到做出网页。
资源库界面构建

设计系统和组件

从一个好用的组件，到一套完整的界面。

28个精选资源
21st.dev浏览 React 组件与页面区块，复制代码或提示词接入项目。21st.dev 网站首页截图React 组件与页面区块查看详情
shadcn/ui复制可定制的组件与页面区块，搭建自己的 React 界面。shadcn/ui 网站首页截图基础组件与页面区块查看详情
coss ui原 Origin UI，使用基于 Base UI 的 React 组件与示例搭建界面。coss ui 网站首页截图基础组件与页面区块查看详情
Arc UI复用带动效的 React 组件与页面区块，搭建细腻的产品界面。Arc UI 官方 Button 组件页面截图：按钮样式、尺寸与状态预览React 动效组件与页面区块查看详情
Kobra给表单和 AI 对话界面补上细腻交互。Kobra Input OTP 组件页面截图React 交互与 AI 界面组件查看详情
Beautiful UI参考 AI 产品的思考、对话与任务状态组件。Beautiful UI 官网组件示例首屏截图AI 界面交互组件查看详情
affectUI复用 AI 对话、Agent 任务与完整应用界面，搭建自己的 React 产品。affectUI 官网页面截图AI 产品界面与 Agent 组件查看详情
AlignUI Pro复用 React 产品界面组件与页面区块，搭建风格统一的应用。AlignUI Pro 官网页面截图产品界面组件与页面区块查看详情
BoardUI使用数据表格、图表与应用区块，搭建仪表盘和 Agent 产品界面。BoardUI 官网页面截图仪表盘与产品界面组件查看详情
EvilCharts复用带动画与交互的 React 图表，为数据界面补充细腻的视觉表现。EvilCharts 官网页面截图React 图表与数据可视化查看详情
HeroUI使用带默认样式的 React 组件，搭建网页并定制主题。HeroUI 网站首页截图基础组件与页面区块查看详情
Mantine使用 React 组件与 Hooks，搭建表单、导航和应用界面。Mantine 网站首页截图基础组件与页面区块查看详情
Semi Design使用 React 组件、设计资源与主题工具，搭建风格统一的产品界面。Semi Design 网站首页截图React 组件与主题定制查看详情
TDesign使用腾讯的多端组件与设计资源，搭建网页、移动端和小程序界面。TDesign 网站首页截图多端组件与设计系统查看详情
Ant Design参考企业级设计规范与 React 组件，搭建表单、表格和管理界面。Ant Design 网站首页截图React 组件与设计规范查看详情
AstryxMeta 开源设计系统，提供可定制的 React 组件、主题与 AI 工作流。Astryx 官方网站首页截图React 设计系统与 AI 工作流查看详情
Base UI使用无预设样式的 React 组件，自定义按钮、菜单和弹窗。Base UI 网站首页截图基础组件与页面区块查看详情
Radix UI组合主题组件与无样式交互组件，搭建可定制的 React 界面。Radix UI 网站首页截图基础组件与页面区块查看详情
Fancy Components复用 React 文字、图片与交互动效组件，为页面添加细节。Fancy Components 网站首页截图React 交互动效组件查看详情
beUI复用 React 动效组件，为按钮、弹窗和界面交互添加细节。beUI 官网页面截图React 交互动效组件查看详情
Rare UI参考可复用的 React 交互组件，为界面加入细腻的动态反馈。Rare UI 官网页面截图React 交互动效组件查看详情
Cursify为 React 网页添加鼠标跟随、粒子拖尾与聚光灯效果。Cursify 网站首页截图鼠标交互组件查看详情
Opensource UI免费开源的 React 组件库，主打用代码写成的 iPhone、MacBook、Apple Watch、iPod 和浏览器样机。Opensource UI 官网首页截图设备样机与 React 组件查看详情
Framer University查找可复制到 Framer 的组件、交互动效与网站示例。Framer University 网站首页截图Framer 组件与资源查看详情
Component Gallery对照不同设计系统的组件实例，查找交互模式与设计规范。Component Gallery 网站首页截图组件模式参考查看详情
Vibe UI Design Guide参考 UI Kit、设计规范与提示词，梳理 AI 设计到开发的流程。Vibe UI Design Guide 网站首页截图设计规则与质量判断查看详情
Impeccable Slop通过界面反例检查字体、配色、布局等常见 AI 设计问题。Impeccable Slop 网站首页截图设计规则与质量判断查看详情
UI Design Course通过文字课程与交互示例，学习字体、间距、布局和配色基础。UI Design Course 网站首页截图外部学习入口与导航查看详情