Originkit

Originkit 是一个面向现代网站的免费动画组件库，官方把它定位为「最大的免费动画组件库」。它把粒子效果、文字变形、图片画廊、背景动画这类动效做成可直接复用的成品组件，每个组件都带实时预览和可视化调节项，并给出复制即用的源码。目标用户是做落地页、SaaS 官网和作品集的前端开发者与设计师，核心价值是把高阶交互动效的实现门槛从「自己写一遍」降到「挑一个、调参数、贴进去」。

核心功能

Originkit 的组件按用途分成六个大类，覆盖从入口按钮到整页背景的动效需求。目录里既有偏视觉的装饰型组件，也有真正承载交互的元素，都可以在站内直接预览效果后再决定是否使用。

除了组件本身，它提供了三条差异明显的交付路径：

• 复制源码：选择目标框架与样式方案后直接复制，粘贴进项目即可运行，不需要额外的构建步骤或私有依赖。
• Framer 集成：在 Framer 中粘贴组件，随后通过属性面板调节参数，适合设计与开发同一人完成的场景。
• MCP 接入：官方提供 MCP 服务端 mcp.originkit.dev，Claude、Cursor 等 AI 编程助手可以直接检索并拉取组件源码，写进当前项目。

取源码时可以选择技术栈（react、nextjs、vite、framer）、样式方案（css、tailwind、cssmodules）以及是否使用 TypeScript，默认组合为 React + CSS + TypeScript。

界面与体验

Originkit 是一条从「看效果」到「拿到代码」的直线流程：先在目录里筛选，再进详情页反复调参确认，最后取代码或让 AI 助手取代码。整个站点是网页应用，无需安装。

组件目录

首页即入口，承担发现和筛选的职责。组件以卡片形式按分类铺开，可以直接看到动效效果，不需要逐个点开。对第一次使用的人而言，这一屏决定了「这里面有没有我想要的效果」。

组件详情与实时预览

每个组件详情页提供实时预览和易于上手的自定义控制项，改完参数立刻能看到动效变化。确认满意后，可在这里复制代码或获取接入说明。这是整个产品最核心的页面，也是它相对纯代码仓库的主要优势。

[[SCREENSHOT_2]]

Framer 中的使用

对 Framer 用户，流程被压缩成「复制组件 → 粘贴进项目 → 在属性面板里改参数」，不需要写代码。对以设计产出为主、不想碰构建配置的人来说，这是最省事的一条路径。

[[SCREENSHOT_3]]

账户与 API 集成

要让 AI 助手自动取组件，需要先在站内注册或登录，进入 Settings → API Integration 复制 API Key（形如 cmp_live_...）。这一页是 MCP 工作流的前置入口，取 Key 本身免费。

[[SCREENSHOT_4]]

完整使用流程

以下以最常见的一条路径为例：把 Originkit 的动效组件接进一个已有的 React 项目。

前置条件：一个可运行的 React 或 Next.js 项目；如需使用 MCP 自动取码，还需要一个支持 MCP 的 AI 编程助手（如 Claude、Cursor）。

1. 打开 originkit.dev，在目录中按分类或关键词找到目标效果。
2. 进入组件详情页，查看实时预览，调整参数直到效果符合需求。
3. 选择目标技术栈与样式方案，例如 React + Tailwind + TypeScript。
4. 复制生成的源码，粘贴到项目的组件文件中，按需引入样式。
5. 启动本地开发服务，在浏览器中验证动效与交互是否符合预览。
6. 如需让 AI 助手代劳：登录后在 Settings → API Integration 复制 API Key，把 MCP 服务端 mcp.originkit.dev 配置到助手中，再直接要求它「取某个组件」。

使用 MCP 时，可以让助手把 Key 写入插件配置以便跨会话保留：

{ "apiKey": "cmp_live_..." }

浏览组件目录不需要 API Key，也不计入额度；只有「取源码」这一步需要 Key，并且每天上限为 10 次，UTC 零点重置。

亮点与差异

相比传统 UI 组件库，Originkit 的差异化不在组件数量，而在「动效成品 + 多通道交付」的组合：动效是打包好的结果，而不是需要自己拼的动画原语。

• AI 友好：带官方 MCP 服务端，AI 编程助手能直接取源码进项目，而不是让模型凭描述猜动画怎么写。
• 零构建负担：复制粘贴即用，不引入额外的运行时依赖或私有打包链路。
• 设计到开发同源：同一套组件既能在 Framer 里当素材用，也能以代码形式落到 React 项目。
• 所见即所得：先调参看效果再取码，减少「写出来和想象不一样」的返工。

典型使用场景

它主要被用在视觉表现力直接影响转化或印象的页面上，而不是后台系统这类以功能密度为先的界面。

• 产品落地页与 SaaS 官网：用背景动画、粒子效果和文字动效撑起首屏观感。
• 作品集与个人站点：用图片画廊类组件做项目展示，快速抬高完成度。
• AI 辅助开发流程：在 Claude、Cursor 中通过 MCP 直接取组件，让助手一次生成可运行的动效代码。
• Framer 建站：设计师在 Framer 里拼装动效，不依赖前端实现。

定价

组件库整体免费开放，官方资料同时提到存在 premium 组件，因此可以理解为免费为主、部分内容需付费或更高权限。免费额度对大多少数个人项目足够使用。

免费 API Key 每日 10 次组件获取额度，与网站端复制共享，浏览目录不消耗额度。

版本与维护状态

Originkit 是持续更新的在线服务，官方未公开明确的版本号与发布时间线，因此无法给出稳定的版本信息。可以确认的是组件库仍在扩充，官方宣传的目标规模在 250 个组件以上，其 MCP 接入也已在第三方 AI 助手插件中被实际使用。第三方目录提到的宣传口径存在 45+、50、60+、250+ 等不同数字，如需确认实际可用数量，建议直接以站内目录为准。

局限与注意

它的收益和限制都来自「成品动效」这一定位，接入前值得先确认匹配度。

• 技术栈依赖：主要面向 React 与 Framer，纯静态站点或 Vue 等生态无法直接使用。
• 取码限流：免费 Key 每天 10 次获取，高强度批量取组件会很快触顶。
• 目录规模有限：相比成熟的大型 UI 组件库，覆盖面和场景广度仍有差距。
• 动效优先：偏视觉表现，无障碍支持、主题切换等工程细节需要自行补齐并做性能验证。
• 商业授权需自行核对：免费使用的前提与 premium 组件的授权范围，应在站内条款中确认。

常见问题

需要 API Key 才能使用吗？

不需要。浏览目录和复制网站上展示的代码即可完成大部分使用，API Key 只在通过 MCP 让 AI 助手取源码时才需要。

免费 Key 有什么限制？

每个 Key 每天允许 10 次组件获取，与网站端复制共享同一额度，UTC 零点重置；浏览不限次、不消耗额度。

在 Framer 里怎么用？

复制组件并粘贴到 Framer 项目中，之后在属性面板里调节参数，全程无需编写代码。

支持哪些技术栈？

取码时可选择 React、Next.js、Vite 或 Framer，样式可选 CSS、Tailwind 或 CSS Modules，并可选择是否使用 TypeScript。

产品主页与下载

Originkit 是在线网页服务，没有客户端下载，直接通过浏览器访问即可使用；官方没有独立仓库，产品主页即官方网站。

• 产品主页：https://www.originkit.dev
• 定价说明：https://www.originkit.dev/pricing
• MCP 服务端地址：mcp.originkit.dev（需在站内 Settings → API Integration 获取 Key）