5个vibecoding宝藏网站｜提升网页质感

5 个提升网页质感的 vibe coding 宝藏网站

拆解与复刻教程

来源：小红书 @阿恒Kaihori 视频笔记　|　创作者本地视频 103.7 秒　|　整理与核验日期 2026-09-26

来源元信息

· 笔记标题：5个vibecoding宝藏网站｜提升网页质感

· 作者 / 账号：@阿恒Kaihori（小红书），据页面「@阿恒Kaihori的热门笔记」区块识别

· 视频素材：创作者提供的本地视频，1284 × 720，29.98 fps，103.7 秒（3111 帧）

· 页面互动（公开页读取，以后台为准）：点赞 71 · 收藏 91 · 评论 2

来源链接： 小红书原笔记

· 涉及工具：MotionSites、React Bits、Uiverse、Aceternity UI、21st（官网见文末第九节）

证据与复刻声明

本文把信息分成四层，避免把推断写成事实：

· 来源画面事实：视频画面、烧录字幕、页面自身文字里能直接看到的内容。

· 创作者披露：作者在视频中明确说出的判断，例如「免费开源」「专为 AI 开发打造」。

· 官方资料：五个网站当前的官网页面与公开文档，核验日期见文末。

· 复刻方案：为了让读者照着做出同类型效果，由我们补写的步骤与提示词。

重要边界：复刻方案不等于创作者完整的原始流程。视频只展示了「打开网站、逛一圈、点出用途」，作者实际用了哪个模板、哪些组件、写了什么提示词，视频并未披露，本文也不会替作者编造。所有图片均为原视频整帧画面，未做裁剪或遮挡。

一、先给结论：这条视频能不能复刻？

结论：可复刻度高。五个网站全部是公开可访问的现成资源站，不涉及付费墙后的私有工具，也不需要内部权限或特殊账号。

但「复刻」要理解准确——你能复刻的是「用这五个站把网页质感提上去」的方法；你复刻不出的是「作者那条作品的确切参数」，因为视频里只做了展示，没有逐步披露操作过程。

免费程度（官方口径，2026-09-26 核验）：React Bits 官网写 Free forever；Uiverse 写 100% 免费（个人与商用）；21st 浏览免费、每日送 2 次组件复制；MotionSites 有免费复制额度，超出需注册或升级；Aceternity UI 走 All-Access 付费，另有免费组件可看。

表 1：五个网站速览（信息核对日期 2026-09-26）

二、视频内容类型与时间线

内容类型：工具披露类为主、带轻教程元素。判断依据是标题「5个vibecoding宝藏网站｜提升网页质感」，以及视频的实际结构——开头用两套高质感成品页点题，接着逐个打开五个网站，最后给一张汇总清单。

时间线（来源画面事实）：

· 0:00–0:09　用两套高质感网站样例点题，字幕「帮你快速提升网页质感」

· 0:12–0:27　第 1 个：MotionSites

· 0:30–0:45　第 2 个：React Bits

· 0:48–1:04　第 3 个：Uiverse

· 1:06–1:18　第 4 个：Aceternity UI

· 1:21–1:33　第 5 个：21st

· 1:36–1:43　汇总清单：1.MOTIONSITES　2.REACT BITS　3.UIVERSE　4.ACETERNITY UI　5.21ST

图 1：视频开头用两套高质感网站样例点题，全片主题是「帮你快速提升网页质感」（来源：原视频画面）

三、五个网站逐个拆解

3.1　第 1 个 · MotionSites——现成的 AI 网页提示词与模板库

来源画面事实：

· 首屏按场景陈列模板：Hero Section、Landing Page、Footer Section、Agency、Social Media、SaaS、Pricing、CTA Section。

· 模板库里每张卡都是成套成品页，如 OYLA（电商）、Anchor AI（作品集）、Agent Wave、Bespoke Architecture Studio、Golden Portal、3D Character Studio、Future-State。

· 复制到额度上限时会弹出 Copy without limits 面板，写明已到免费复制上限，需注册或升级才能继续下载，并列出 30+ AI Ready Templates 等权益。

· 画面字幕（创作者口述）：「还有 100 多个现成的 AI 提示词」「这些效果上面全都有」「很多人的参考就是从这里来的」。

图 2：MotionSites 首页，按 Hero / Landing Page / Footer / SaaS 等场景陈列现成网页模板

图 3：模板库一屏展开，OYLA、Anchor AI、Agent Wave、Golden Portal 等成套视觉可直接套用

图 4：免费复制额度提示——超出后需注册或升级到 Go Unlimited 才能继续下载

官方资料（motionsites.ai，2026-09-26 核验）：

· 官网自称 Official Premium AI Website Prompts。

· 主打文案：Fresh Drops Everyday / Build beautiful landing pages in minutes with our ready-to-use prompts. Just copy, paste, and launch.

· 另有 Animated Backgrounds 子页（motionsites.ai/backgrounds）。

· 站内引导到 designrocket.io 学习用 AI 工具做设计。

口径差异：官网权益写的是 30+ AI Ready Templates，视频字幕说「100 多个提示词」，两者含义不同，以官网为准。

怎么用（复刻方案）：

1. 打开 motionsites.ai，先在场景分类里挑一套和你项目同类的版式，例如 SaaS 或 Landing Page。

2. 进模板详情，先看它的整体结构，再决定要不要整套用。

3. 点复制拿提示词，粘进你的 AI 编程工具（Cursor / Claude Code / v0 等），让它按你的文案改。

4. 免费额度用完后会提示注册或升级；只想试水就注册账号拿免费额度，不必一上来就买。

预期结果：几分钟内得到一个有设计感的落地页骨架。

失败排查：复制被拦多为额度用尽；若粘进 AI 后生成的视觉和预览差很多，多半是提示词里缺少尺寸、配色、动效描述，补上再试。

3.2　第 2 个 · React Bits——开源动效 React 组件库

来源画面事实：

· 首页定位文案指向给创作者用的 React 组件；导航是 Docs / Tools / Pro / Sponsors，右上角是紫色 Get React Bits Pro。

· 组件库一屏按背景、动效、文字动画分类，卡片包括 CRT Warp、Depth Carousel、Depth Text、Dodge Field、Drift Wall、Folder Float，多张标着 NEW。

· 同屏右侧 Pro 面板写：160 Components · 280 Blocks · 300 App UI · 15 Templates · 20 Agent Skills。

· 单个组件详情页有 Preview / Code 切换和 Copy for AI 按钮，并带实时参数面板。

· 画面字幕（创作者口述）：「它是一个免费开源的动效组件库」「轮播画廊鼠标跟随卡片动效等等」「每个组件还能实时预览」「代码或者提示词就能用了」。

图 5：React Bits 首页，定位是给创作者用的 React 动效组件库

图 6：组件库与 Pro 权益面板——160 Components / 280 Blocks / 300 App UI / 15 Templates / 20 Agent Skills

图 7：组件 Split Flap Text 详情页，带 Preview / Code 切换与 Copy for AI

官方资料（reactbits.dev，2026-09-26 核验）：

· 官网标题：React Bits — Animated UI Components For React。

· 组件数 205+，Free forever。

· 五个分类：Backgrounds、Text Animations、Animations、Components、Micro-interactions。

· 四种写法：JS + CSS、TS + CSS、JS + Tailwind、TS + Tailwind。

· 安装方式为一条命令把组件源码拉进项目，例如 npx shadcn@latest add @react-bits/Aurora-TS-TW。

· 文档自带可直接用的提示词，官方称适配 Cursor、Copilot、v0。

· 代码归属读者自己：组件以源码形式落地，不依赖 react-bits 包，也不锁定版本。

· 官网标注 GitHub 星标 48.1K。

注意：视频画面里的星标计数与我们核验时的官网数值可能不同，以官网为准。

怎么用（复刻方案）：

1. 打开 reactbits.dev，按 Backgrounds / Animations / Text Animations 挑一个效果。

2. 进详情页先点 Preview 看效果，再切 Code 看源码和你需要的 props。

3. 点 Copy for AI 复制提示词，或直接用安装命令把组件源码加进项目。

4. 在你的页面里替换文案与配色，只保留你要的动效参数，多余参数删掉更干净。

预期结果：页面里出现一个可自定义的动效组件。

失败排查：若安装了没反应，先确认项目是 React + Vite / Next.js / Astro / Remix 之一，且已按官方安装文档配好依赖。

3.3　第 3 个 · Uiverse——最大的开源 UI 元素库

来源画面事实：

· 站点数据条：7,440 个社区自制 UI 元素、100% 个人与商用免费、375,596 位社区贡献者。

· Browse all 页写明是 CSS 或 Tailwind 写的开源 UI 元素；左栏按 Buttons、Checkboxes、Toggle switches、Cards、Loaders、Inputs、Radio buttons、Forms 分类。

· 元素画廊一屏可直接取用：Shop now、HOVER ME、Send Message、Save、CLICK ME、Subscribe 等按钮与加载动画，每张都能查看与复制。

· 画面字幕（创作者口述）：「按钮加载动画」「输入框等等日常会用到」「页面高级感直接拉满」。

图 8：Uiverse 社区数据条——7,440 个社区 UI 元素、100% 个人与商用免费、375,596 位贡献者

图 9：Browse all 页，开源元素支持 CSS 或 Tailwind 两种写法

图 10：元素画廊——按钮、加载动画、输入框等日常组件一屏可取

官方资料（uiverse.io，2026-09-26 核验）：

· 官网标题：Uiverse | The Largest Library of Open-Source UI elements。

· 定位：Community-built library of UI elements. Copy as HTML/CSS, Tailwind, React and Figma.

· 可直接复制到 Figma；GitHub 组织为 uiverse-io/galaxy。

· 有 Elements、Challenges、Blog、AI Design Systems 等板块。

· 创作者生态较大，例如 vinodjangid07 有 157 条投稿、累计浏览量 895,450。

怎么用（复刻方案）：

1. 打开 uiverse.io，用左栏分类或搜索框定位你要的元素，比如按钮、加载、输入框。

2. 进元素页复制代码，按你项目的写法选 HTML/CSS、Tailwind、React 或 Figma。

3. 粘进项目后只改颜色、圆角、动效时长，保持结构不动，最快也最不容易出错。

预期结果：常用小控件瞬间补齐，界面细节质感明显提升。

失败排查：粘贴后样式错乱，多为项目未引入 Tailwind 或 CSS 作用域冲突；改用 HTML/CSS 版本即可绕开。

3.4　第 4 个 · Aceternity UI——做漂亮落地页的 React 组件库

来源画面事实：

· 首页主标题：The React component library for beautiful landing pages.

· 副文案：200+ production-ready components, blocks and templates built with React, Tailwind CSS and Motion.

· 导航为 Components / Blocks / Templates / Pricing，右上角 Get All-Access；页面标注被 120,000+ 创始人、开发者与创作者使用。

· 组件列表包含 Terminal、3D Card Effect、Backgrounds、ASCII Art、Canvas Text、Bento Grids、Background Ripple Effect、Card Spotlight、CTA Sections、Layout Text Flip、Lens、Loaders。

· 画面字幕（创作者口述）：直接念出站名「Aceternity UI」，并说「炫酷的开场页」「滚动特效都有」「就能放进自己的网站里面了」。

图 11：Aceternity UI 首页，主打做漂亮落地页的 React 组件库

图 12：Aceternity UI 组件列表——Terminal、3D Card、ASCII Art、Canvas Text、Bento Grids 等

官方资料（ui.aceternity.com，2026-09-26 核验）：

· 官网标题：Aceternity UI — React & Tailwind CSS Component Library。

· 提供 Blocks（Hero Sections 24+、Shaders 3+、Logo Clouds、Feature Sections）与 Templates（Design & Development Studio、Productized Agency、Simplistic SaaS）。

· 付费方式为 All-Access Pass；官网 FAQ 覆盖是否免费、终身访问、可否商用、支持哪些框架。

· 支持接入其 MCP server，让 AI 代理直接调用组件。

注意：Aceternity UI 的高阶 Blocks 与 Templates 走付费，免费能看到的以组件为主，购买前先确认你的使用场景再决定。

怎么用（复刻方案）：

1. 打开 ui.aceternity.com，先看 Components 里有没有你要的效果，能免费商用就先用组件。

2. 需要成套页面时再看 Templates 与 Blocks，确认包不包含你要的模板，再决定是否购买。

3. 复制源码，或让 AI 代理按 MCP 接入，替换成你的品牌文案与配色。

预期结果：落地页拥有专业级动效与光效，观感接近大厂官网。

失败排查：动效不生效多为没有装 Motion（framer-motion）或 Tailwind 版本不匹配；按官网安装页逐项对齐。

3.5　第 5 个 · 21st——活的界面图书馆，专为 AI 开发准备

来源画面事实：

· 首页双分区：2,000+ Marketing blocks（Animated heroes、Hero sections、Shaders、Liquid & metal、Backgrounds、Gradients、Footers）与 2,100+ UI components（Buttons、AI chats、Cards & grids、Galleries & 3D、Navigation、Sign ins & widgets、Sections）。

· AI chats 分类里能直接看到 AI 输入框、对话气泡一类组件。

· 页面标语：Used by 3,759,388 builders. From indie makers to the world's largest product teams.（视频录制时数值）

· 组件浏览页左栏带分类计数，如 Backgrounds 360、Calls to Action 501、Borders 71、Announcements 71。

· 画面字幕（创作者口述）：「它是一个专为 AI 开发打造的组件库」。

图 13：21st 首页，2,000+ Marketing blocks 与 2,100+ UI components 双分区

图 14：AI chats 分类，页面标注已被 3,759,388 位 builders 使用（视频录制时）

图 15：组件浏览页左栏分类计数，如 Backgrounds 360、Calls to Action 501、Borders 71

官方资料（21st.dev，2026-09-26 核验）：

· 官网标题：React Components, Templates & Themes — 12,000+ Crafted UI | 21st。

· 定位：The living library of interfaces. 12,000+ crafted React components, templates, and shadcn themes.

· 使用人数官网当前标注 3,849,447（视频录制时是 3,759,388，说明这个数字在增长）。

· 免费政策：浏览全站免费，每天送 2 次组件复制；会员解锁无限复制与高级模板；21st AI 为按月计费的加购项。

· 每个组件都附一段提示词，可粘到 Claude Code、Codex、Cursor、v0、Lovable 等工具里自动生成。

· 兼容 shadcn/ui，按 shadcn registry 格式发布，也支持 shadcn CLI 安装。

注意：视频里作者用的 AI 工具是哪个并未说明；画面中出现过一个带代码块的窗口，但无法确认它与 21st 的配套关系，此处不下结论。

怎么用（复刻方案）：

1. 打开 21st.dev，按 Marketing blocks 或 UI components 分类找到目标组件。

2. 点 Copy prompt 复制组件提示词，粘进你常用的 AI 编程工具。

3. 让 AI 按你的主题改文案与配色，生成后先 review 再合并。

4. 免费额度每日 2 次，需要高频取用再考虑会员。

预期结果：AI 直接在你的代码库里复现该组件，而不是给你一个外部依赖。

失败排查：AI 生成结果与预览不符，多为提示词被截断或项目未沿用 shadcn/ui 约定；补全提示词，或先接入 shadcn 再试。

图 16：视频结尾的汇总清单——MotionSites、React Bits、Uiverse、Aceternity UI、21st

四、五个网站横向对比

用同一组维度横评，方便按需挑选。

表 2：横向对比（信息核对日期 2026-09-26）

五、把网页质感提上去的最小可行路线（七步）

1. 先定版式：上 MotionSites 找一套和你项目同类的版式，拿走整体结构。

2. 再定骨架：在 21st 或 Aceternity UI 找 Hero、Features、Footer 的成套区块，拼出页面骨架。

3. 补动效：在 React Bits 挑 1 到 2 个动效（背景或文字），别贪多，页面动效越少越显高级。

4. 补细节：在 Uiverse 取按钮、加载、输入框，统一圆角与配色。

5. 统一视觉：把上面几步的配色收敛到 2 个主色加 1 个强调色，字体控制在 1 到 2 种。

6. 交给 AI 落地：把选好的提示词粘进你的 AI 编程工具，让它按你的文案生成代码。

7. 人工验收：检查移动端断点、加载性能与无障碍对比度，再上线。

六、可复刻度评测

表 3：可复刻度评测（信息核对日期 2026-09-26）

七、已知限制、风险与注意

· 作者披露有限：视频只做展示，未公开所用模板、组件与提示词；任何「作者用了某项」的说法都属于推断，本文不写。

· 数值会变：GitHub 星标、组件数、使用人数每天都在变。本文数值为 2026-09-26 核验值，视频画面里的数字是录制时的。

· 免费额度有门槛：MotionSites 免费复制有上限，21st 每日 2 次，超出需注册或付费。

· 中文支持一般：这些站以英文界面与英文文档为主，中文用户需要一点英文阅读能力（代码注释也多为英文）。

· 商用授权要看清：Uiverse 明确 100% 免费（个人与商用）；Aceternity UI 商用需按其许可；其余以各站最新条款为准。

· 版权与署名：把别人的模板或组件直接当自己作品发布有风险，建议改造后再用，并保留原站署名。

八、动手前检查清单

· 已确认项目技术栈（是否 React / Tailwind / Next.js）。

· 已选定 1 套版式来源与 1 到 2 个动效来源，风格没有超过 3 种。

· 已拿到可复制的提示词（React Bits 的 Copy for AI、21st 的 Copy prompt）。

· 已把配色收敛到 2 主色加 1 强调色。

· 已确认商用授权与署名要求。

· 已准备一个 AI 编程工具（Cursor / Claude Code / v0 / Lovable 任一）。

· 已计划移动端与性能验收。

九、来源与官方链接（核验日期 2026-09-26）

来源笔记： 小红书 5个vibecoding宝藏网站｜提升网页质感

· 视频素材：创作者提供的本地视频，时长 103.7 秒，1284 × 720。

MotionSites： https://motionsites.ai

React Bits： https://reactbits.dev

Uiverse： https://uiverse.io

Aceternity UI： https://ui.aceternity.com

21st： https://21st.dev

免责声明

本文基于公开笔记页面、创作者提供的视频画面与五个网站的公开页面整理，仅用于学习与评测。画面中的创作者形象、烧录字幕与界面元素均来自原视频，版权归原作者所有。文中「复刻方案」部分为编者补充，不代表创作者真实操作。若官网规则、价格或功能发生变动，请以各站最新页面为准。

发布于 2026-09-19

原帖地址：https://www.xiaohongshu.com/explore/6aae83c3000000002b01c999?xsec_token=ABk2oL7bW8gGXhWr1sCswcs9lXcBvygxyEHULC2kH-MBw%3D&xsec_source=pc_user

关于作者：阿恒Kaihori

作者主页：https://www.xiaohongshu.com/user/profile/688ca7be0000000029009822?xsec_token=ABPqmRuJ8DdBFL_6ED17oNFXnKBgH3_r4qagNXSTWI9Vw%3D&xsec_source=pc_user