指南 · 8pt 与 21st.dev 对比
指南
8pt 与 21st.dev 对比
作者 8pt · 更新于
两者都是给 AI 编程工具用的 UI 资源库，都提供实时预览、复制提示词、CLI 和 MCP。主要区别在于：21st.dev 是英文社区市场，收录大量 React + Tailwind 组件，按美元订阅；8pt 是中文界面，组件、整页模板、主题、图标和 Skill 由 8pt 统一出品，组件为原生 HTML/CSS/JS，按人民币订阅。
#一张表看区别
| 8pt | 21st.dev | |
|---|---|---|
| 界面语言 | 中文 | 英文 |
| 内容来源 | 8pt 统一出品（组件、模板、主题、图标、Skill 出自同一套设计规范） | 社区设计工程师发布，每个组件署作者名 |
| 组件技术 | 原生 HTML、CSS、少量 JS；提示词让模型改写成你项目的框架 | React + Tailwind CSS，沿用 shadcn/ui 的约定 |
| 收录规模 | 组件 137、整页模板 14、主题 17、图标 187、Skill 6（截至 2026-11-14） | 官网写明 12,000+ 组件、362 套模板、991 套主题（2026-11-14 查看定价页） |
| Skill | Skill 库：落地页、包装设计、演示文稿、短视频脚本等专业工作流 | 提供给智能体用的 21st skills（npx @21st-dev/cli install-skill） |
| CLI | npm i -g @8pt-dev/cli，命令 8pt | npm i -g @21st-dev/cli，命令 21st |
| MCP | https://8pt.dev/api/mcp | https://21st.dev/api/mcp |
| 不付费时 | 登录后浏览全部内容和实时预览；复制与安装需要 Builder | 未订阅的账户每天可复制 2 个组件 |
| 个人方案价格 | Builder ¥45/月、¥128/季、¥379/年；创始终身版 ¥899（限 100 席） | Builder 按年付折合 $6/月（$72/年）；另有 Builder + AI、Team |
| AI 生成 | 8pt AI 即将推出 | 21st AI 已提供，消耗 AI 额度 |
21st.dev 的数据来自其官网定价页和CLI 与 MCP 页，以对方官网的最新信息为准。
#什么时候选 21st.dev
你的项目是 React + Tailwind、已经在用 shadcn/ui，想从大量社区作者的作品里挑选，或者需要它的 AI 生成和设计审查功能。
#什么时候选 8pt
你习惯中文界面和人民币付款；项目不一定是 React（Vue、Svelte、纯 HTML 都行）；希望组件、模板、主题和图标风格统一，并且想用 Skill 让模型按专业流程交付整页、包装、演示文稿等。
#能一起用吗
可以。两边都是把源码交给你的项目，不会互相锁定。需要注意的是同一个页面里混用多种风格容易不协调，建议先用一套主题固定变量，再让模型把组件统一接到这套变量上。
#常见问题
21st.dev 有中文替代吗？
8pt 是一个中文界面的选择：同样提供实时预览、复制提示词、CLI 和 MCP，组件为原生 HTML/CSS/JS，按人民币订阅。
8pt 和 21st.dev 的 MCP 能同时接入吗？
可以。两者是独立的 MCP 服务器，在客户端配置里各加一个名字即可，模型会按你的需求调用对应的工具。
8pt 的组件能用在 React 项目里吗？
能。复制提示词交给模型后，它会按项目改写成 TypeScript 函数组件，并把颜色接到你的设计变量。