内容
ui-mcp
> 一个本地的MCP服务器，为Claude Code（以及任何MCP客户端）提供了一个精选的**精美UI模式、组件和动画配置**的注册表 - 因此它在构建过程中会拉取真实的、可复制的实施，而不是默认使用通用布局。
磁性光标、滚动劫持的章节、反应性粒子网格、剪切路径页面过渡、文本混乱揭示、玻璃形态导航、弹簧模态窗口、贝托网格等 - 每个条目都附带**真实的、可用的React/TSX**、有效的Tailwind类和Framer Motion / GSAP / CSS动画值。
- **30** 个UI模式（简洁 · 提升 · 极端）
- **20** 个按类型分类的组件（英雄、导航、卡片、模态窗口、滚动章节、光标、覆盖层、加载器、文本揭示、背景）
- **15** 个可以直接粘贴的动画配置（Framer Motion，GSAP，CSS）
- 通过[Fuse.js](https://www.fusejs.io/)实现模糊的自然语言搜索
---
## 安装和设置
```bash
git clone https://github.com/maahigoel/ui-elite-patterns.git
cd ui-elite-patterns
npm install
npm run build
```
这会编译`src/` → `dist/`。服务器入口是`dist/server.js`。
### 添加到Claude Code
已包含一个可直接使用的[`.mcp.json`](./.mcp.json)：
```json
{
"mcpServers": {
"ui-mcp": {
"command": "node",
"args": ["dist/server.js"]
}
}
}
```
- **项目范围：** 将`.mcp.json`复制到项目根目录，并从那里运行Claude Code。（如果`args`是相对路径，请从`ui-mcp`目录运行Claude Code，或将其更改为`dist/server.js`的绝对路径。）
- **CLI：** `claude mcp add ui-mcp -- node /absolute/path/to/ui-mcp/dist/server.js`
重启Claude Code，然后要求它使用`ui-mcp`工具。验证服务器启动：
```bash
npm run smoke # 构建，在内存中启动服务器，并测试每个工具
```
---
## 现场演示网站
一个本地的展示网站，在[`demo/`](./demo)中渲染**每个模式和组件**。它使用代码生成脚本直接从注册表中提取每个组件，因此它始终反映MCP服务器提供给Claude Code的内容。
```bash
cd demo
npm install
npm run dev # 从注册表中生成组件，然后在http://localhost:5173启动Vite
```
- 浏览所有50种模式和组件，分类展示（搜索、复杂度、类型）。
- 点击任意卡片以全屏查看**实时运行**，并带有滑动的源面板和复制按钮。
- `npm run generate` 在您添加模式后重新同步演示与注册表。（`npm run dev`/`build`会自动运行它。）
使用Vite + React + Tailwind + Framer Motion构建。本地运行 - 无需托管。
---
## 工具
### 1. `get_ui_pattern`
通过自然语言模糊搜索注册表。
**输入**
| 字段 | 类型 | 必需 | 描述 |
| --- | --- | --- | --- |
| `query` | 字符串 | ✅ | 您想要的，例如 `"magnetic cursor"` |
| `framework` | `"react" \| "vue" \| "html"` | – | 按框架支持筛选 |
| `complexity` | `"clean" \| "elevated" \| "insane"` | – | 按复杂度筛选 |
**示例**
```jsonc
// 输入
{ "query": "scroll reveal headline", "complexity": "insane" }
```
```md
// 输出（截断）
找到3个匹配的模式，匹配 "scroll reveal headline"。显示前3个：
## 文本混乱揭示滚动
**复杂度：** 极端 • **框架：** react • **交互：** 滚动
**标签：** 文本，混乱，解码，滚动，揭示，单间距，RAF
...
### 代码
```tsx
import { useEffect, useRef, useState } from "react";
...
```
```
### 2. `get_component`
获取给定类型的组件。
**输入**
| 字段 | 类型 | 必需 | 描述 |
| --- | --- | --- | --- |
| `type` | `hero \| nav \| card \| modal \| scroll-section \| cursor \| overlay \| loader \| text-reveal \| background` | ✅ | 组件类型 |
| `interaction` | `scroll \| hover \| entrance \| ambient` | – | 首选交互 |
| `complexity` | `clean \| elevated \| insane` | – | 首选复杂度（如果缺少精确匹配，则返回最近的） |
**示例**
```jsonc
// 输入
{ "type": "modal", "complexity": "elevated" }
```
返回带有完整TSX和Framer Motion配置的**带有模糊背景的弹簧模态窗口**。省略`complexity`以获取该类型的每个变体（从简单到极端）。
### 3. `get_motion_config`
获取可以直接粘贴的动画配置。
**输入**
| 字段 | 类型 | 必需 | 描述 |
| --- | --- | --- | --- |
| `type` | `page-transition \| entrance \| scroll-reveal \| hover \| stagger \| magnetic` | ✅ | 动画类型 |
| `library` | `framer-motion \| gsap \| css` | – | 按库筛选 |
**示例**
```jsonc
// 输入
{ "type": "stagger", "library": "framer-motion" }
```
```md
// 输出（截断）
## Framer Motion 错位子元素（0.08s）
**类型：** 错位子元素 • **库：** framer-motion
### 配置
```json
{ "config": { "staggerChildren": 0.08, "delayChildren": 0.1 }, "variants": { ... } }
```
### 代码
```tsx
const container = { hidden: {}, visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } } };
...
```
**用法：** 将`container`放在父元素上，将`item`放在每个子元素上；父元素驱动时间。
---
## Claude Code内部的示例提示
- *"使用ui-mcp查找磁性光标模式并将其添加到我的登陆页面。*
- *"给我一个来自ui-mcp的`极端`复杂度的背景组件，用于英雄。*
- *"构建一个定价部分 - 先从ui-mcp获取定价卡模式。*
- *"我需要一个页面过渡。从ui-mcp拉取Framer Motion的`page-transition`配置。*
- *"在ui-mcp中找到一个滚动劫持的水平部分，并使用我的项目内容进行连接。*
- *"从ui-mcp获取`text-reveal`组件（增强型），并将其用于章节标题。*
---
## 贡献 - 添加模式
注册表位于`src/registry/`：
- `patterns.ts` - 由`get_ui_pattern`提供的模式
- `components.ts` - 由`get_component`提供的组件（必须设置``）
- `` - 由`get_motion_config配置
在相关数组中添加新条目`RegistryEntry`形状（`src/types.ts`）：
```ts
{
id: "my-pattern", 唯一的kebab-case id
name: "我的模式",
tags: ["..."], // 驱动模糊搜索 - 要慷慨
complexity: "elevated", clean" | "elevated" | "insane"
: ["react"],
componentType: "card", // 仅限组件 - 启用get_component
interaction: "hover", // 可选
description: "关于它的简要描述。",
implementation_notes: "它如何工作 / 注意事项。",
code: `/* 完整、独立、可复制的TSX */`,
tailwind: "使用的关键类",
motion: { // 可选，如果动画
library: "framer-motion",
config: { /* ... */ },
variants: { /* ... */ },
},
sources: ["aceternity", "godly"],
}
```
指南：
1. **代码必须实际运行。** 完整的组件，包含导入和默认导出，有效的Tailwind，正确的Framer Motion / GSAP API。没有`// 在此处添加动画位符。
2. **慷慨地标记 标记在搜索中权重很高。
3. 在打开运行`npm run smoke`（它构建 + 类型 测试工具）。
4. 保持代码片段自包含（SVG优于图标依赖；关键帧的范围`<style>`）。
---
## 鸣谢
模式是受设计工程社区技艺启发的原始
- [Acity UI](https://ui.aceternity.com/)
- [Godly](https://godly.website/)
- [](https://mobbin.com/)
- [Refero](https://refero.design/)
基于[Model Context Protocol](httpscontextprotocol.io/) TypeScript SDK构建。
## 许可证
[MIT](./LICENSE
