内容
# 设计师 MCP
[](https://choosealicense.com/licenses/mit/)
[](https://www.typescriptlang.org/)
用于生产级 UI 设计的模型上下文协议（MCP）服务器 - 设计规则、反敷衍质量门控、OKLCH令牌生成、颜色调色板、328+ 品牌参考、**anime.js v4 动作集成**、**WCAG 2.1 无障碍审计**、**React/Vue 组件输出** 和 **框架无关的 CSS 生成**。
## 功能
- **反敷衍质量门控** - 31 项敷衍测试 + 6 轴自我批评（P-H-E-S-R-V）。拒绝任何评分低于 3 的结果。
- **OKLCH 令牌系统** - 16 个精选主题，自动衍生暗黑模式（`full_css` 字段同时提供 `:root` 和 `@media (prefers-color-scheme: dark)` + `[data-theme="dark"]` 覆盖）。
- **设计规则生成器** - 17 个设计系统 + 4 个调色板 + 5 个原型 + 混合组合。
- **预飞行扫描** - 检测现有项目上下文：框架、字体堆栈、调色板令牌、动作库。
- **框架原生组件** - 每个组件（`button`、`card`、`navbar`、`hero` 等）通过 `framework` 参数输出 HTML/Tailwind、React TSX（类型化 FC，带属性接口）或 Vue 3 SFC（脚本设置）。
- **CSS 输出引擎** - 生成纯 CSS、CSS 模块（Button/Card/Input，带所有 8 种状态）、SCSS（变量 + 混合 + BEM）或单个 `tokens.css`，带自动暗黑模式覆盖。
- **WCAG 2.1 无障碍审计** - 25 项检查静态审计器：替代文本、无标签输入、空按钮/链接、标题顺序、焦点可见性移除、跳过链接、地标区域、视口缩放锁定等。返回 0-100 分数 + A-F 等级 + 可行修复。
- **anime.js v4 动作系统** - 样式感知动画预设内置于每个模板中。`generate_motion_snippet` 用于按需片段（8 个类别，均有减少动作保护）。
- **颜色调色板猎人** - 来自 Color Hunt 的实时调色板，支持格式转换。
- **品牌设计参考** - 328+ 个现实世界的品牌（Stripe、Vercel、Notion、Claude、Tesla 等）。
## 工具
### 核心设计流程
| 工具 | 描述 |
|------|-------------|
| `evaluate_style` | 针对产品上下文评估 17 个设计系统 |
| `detect_genre` | 将简报分类为编辑 / 现代极简 / 大气 / 活泼 |
| `pre_flight_scan` | 扫描现有项目以获取框架、字体、调色板、动作库 |
| `generate_rules` | 为样式 + 调色板 + 原型/混合生成设计规则 |
| `generate_tailwind_config` | 生成可立即使用的 tailwind.config.js |
| `get_cross_cutting_rules` | 获取独立规则（无障碍、动作、图标、令牌、响应式） |
### 主题和令牌系统
| 工具 | 描述 |
|------|-------------|
| `generate_tokens` | 生成完整的 OKLCH 令牌系统。返回 `css`（浅色 `:root`）、**`full_css`**（浅色 + 暗色 `@media` + `[data-theme="dark"]` 覆盖）、`dark_css`、`dark_tokens` |
| `list_themes` | 列出所有 16 个主题及其 OKLCH 值、字体、轴元数据 |
| `build_custom_tokens` | 从纸张/强调色/字体值构建自定义 OKLCH 令牌系统 - 同时发出暗黑模式衍生 |
### 质量门控
| 工具 | 描述 |
|------|-------------|
| `anti_pattern_check` | 对 HTML/CSS 运行 31 项敷衍测试 |
| `self_critique` | 在 6 个质量轴（P-H-E-S-R-V）上评估输出 - 任何低于 3 的分数都会触发修订 |
| **`audit_accessibility`** | **25 项检查 WCAG 2.1 静态审计器** - 替代文本、无标签输入/选择器/文本区域、空按钮/链接、标题顺序、焦点可见性移除、跳过链接、地标区域、视口缩放锁定等。返回 0-100 分数、A-F 等级、按严重性计数的修复指令和已通过检查的列表 |
### 组件和模板
| 工具 | 描述 |
|------|-------------|
| `generate_template` | 完整的 HTML 启动页面 - **附带 anime.js v4 动画** |
| **`get_component`** | 生产就绪的组件（按钮、卡片、导航栏、英雄、表单输入、徽章、模态框、侧边栏、表格、页脚、图表）。**新 `framework` 参数**：`html`（默认）\| `react`（TypeScript FC + 类型化属性）\| `vue`（SFC + 脚本设置） |
| `generate_8state_component` | 带有所有 8 种交互状态的独立 HTML 预览 - 由 anime.js 弹簧物理动画 |
| `generate_palette_variants` | 从十六进制颜色生成浅色/深色/高对比度变体 |
| `export_project` | 完整的项目脚手架（配置 + HTML + 组件） |
### CSS 输出
| 工具 | 描述 |
|------|-------------|
| **`generate_css_output`** | **框架无关的 CSS 生成**，基于样式 + 调色板。格式：`vanilla`（tokens.css + base.css + components.css）\| `css-modules`（Button/Card/Input.module.css，带所有 8 种状态）\| `scss`（_tokens + _mixins + _components + main.scss）\| `css-variables-only`（tokens.css，带自动暗黑模式）。返回已命名的文件数组以供保存。 |
### 动作（anime.js v4）
| 工具 | 描述 |
|------|-------------|
| `generate_motion_snippet` | 生成一个可粘贴的 **anime.js v4** 片段，匹配当前设计样式的缓动和持续时间特性。支持 8 个类别：`entrance`、`micro`、`stagger`、`scroll`、`loader`、`transition`、`counter`、`typewriter`。每个片段都包含一个 `prefers-reduced-motion` 保护。 |
### 颜色和调色板
| 工具 | 描述 |
|------|-------------|
| `palette_fetch` | 从 Color Hunt 获取实时调色板 |
| `palette_convert` | 将调色板 JSON 转换为 CSS / Tailwind / SCSS / Figma / Android / Swift |
### 品牌参考
| 工具 | 描述 |
|------|-------------|
| `brand_fetch_design_md` | 下载品牌的 DESIGN.md |
| `brand_list` | 按类别列出所有 328+ 个品牌 |
### 实用工具
| 工具 | 描述 |
|------|-------------|
| `list_options` | 列出所有可用的系统、调色板、原型、混合 |
| `validate_combo` | 验证样式 + 调色板 + 混合组合 |
| `get_reference` | 拉取任何参考文档的完整内容 |
| `list_installed_skills` | 检测已安装的技能子模块 |
## 动作设计
`generate_template` 生成的每个模板都附带 **anime.js v4**，从 CDN 加载，并具有样式感知的内联脚本，处理：
- 英雄部分入口（交错子项，`translateY` + `opacity`）
- KPI 卡片交错显示
- 侧边栏导航链接显示（`translateX`）
- 按钮/芯片按压微交互（弹簧物理）
- 表格行交错（`translateX`）
缓动和持续时间根据设计系统进行校准:
| 系统 | 缓动 | 持续时间 |
|--------|--------|----------|
| `glass` | `easeOutQuart` | 700ms |
| `claymorphism` | `spring(1, 80, 10, 0)` | 600ms |
| `neo-brutalism` | `easeInOutExpo` | 400ms |
| `material` | `cubicBezier(0.4, 0, 0.2, 1)` | 300ms |
| `apple-hig` | `spring(1, 100, 18, 0)` | 550ms |
| `swiss` | `linear` | 200ms |
| `m3-pastel` | `spring(1, 80, 12, 0)` | 450ms |
使用 `generate_motion_snippet` 获取针对特定用例的独立片段：
```json
{
"tool": "generate_motion_snippet",
"arguments": {
"category": "scroll",
"style": "glass"
}
}
```
返回 `{ cdn, snippet, easing, duration, usage_hint, reduced_motion_note }`。
所有片段都尊重 `prefers-reduced-motion` - 当用户启用减少动作时，动画完全跳过。
## 示例
**Ellis UI (`examples/ellis-ui`)**
一个全面的、反敷衍的组件库，展示了 `the-designer` 规则集的极端多功能性。该项目采用一封浪漫的信件，并将其渲染到 **24 个极其不同的、严格执行的美学系统**（例如，瑞士档案、复古航空邮件、野兽主义、UNIX 磷光、8 位游戏机）。
每个设计都作为一个完全独立的、可重用的 UI 工具包使用，依赖于零 JS 依赖项 - 完全依赖于严格的结构化排版、CSS 几何形状和高级 CSS 渲染技术（剪切路径、自定义过滤器、OKLCH 渐变）。每个文件夹都包含一个 `design.md`，详细说明令牌和布局策略，作为 `the-designer` 的高级模板参考。
## 安装
```bash
git clone https://github.com/1999AZZAR/the-designer.git
cd the-designer
npm install
npm run build
```
**要求**：Node.js >= 18
## 使用
```bash
npm start
```
```bash
npx @modelcontextprotocol/inspector node dist/index.js
```
## 架构
```
src/
index.ts # MCP 服务器入口，工具路由（27 个工具）
rules.ts # 17 个设计系统，调色板，原型，混合
anti-patterns.ts # 31 项敷衍测试 + 6 轴自我批评
a11y-audit.ts # 25 项检查 WCAG 2.1 无障碍审计器（无依赖，仅限正则表达式）
tokens.ts # 16 个精选主题，OKLCH 令牌生成，暗黑模式衍生
css-output.ts # 纯 CSS / CSS 模块 / SCSS / css-variables-only 生成器
anime-motion.ts # anime.js v4 集成 - 样式感知预设，CDN 助手，片段生成器
components.ts # 组件库 - HTML/React TSX/Vue 3 SFC 输出
components-8state.ts # 8 状态组件演示生成器（anime.js 微交互）
preflight.ts # 项目上下文扫描器（框架，字体，调色板，动作）
evaluate.ts # 样式评分引擎
palette.ts # Color Hunt 调色板获取器
palette-convert.ts # 格式转换器
palette-variants.ts # 浅色/深色/高对比度变体生成器
templates.ts # HTML 模板生成器（anime.js 内置）
tailwind-config.ts # Tailwind 配置生成器
export.ts # 项目脚手架导出器
技能/
ui-designer/ # 参考文档 + 类型文件（git 子模块）
color-palette-hunter/ # 调色板 CLI 脚本（git 子模块）
```
## 反敷衍设计哲学
- **锁定令牌** - 每个颜色/字体都引用命名 CSS 变量，从不内联值
- **无虚构内容** - 仅使用真实指标或带标签的占位符
- **无重绘 Chrome** - 无假浏览器栏、手机框架或代码窗口 Chrome
- **排版纯度** - 标题始终为罗马字体，无斜体显示面
- **结构多样性** - 不同的简报生成结构不同的页面
- **移动响应硬底线** - 320/375/414/768px，`overflow-x: clip`，`minmax(0, 1fr)`，无两行可点击文本
- **OKLCH 优先** - 所有新令牌均在 OKLCH 中定义，以实现感知统一
- **有节制的动作** - 动画按样式校准，以弹簧物理为基础，并始终在 `prefers-reduced-motion` 上受控
## 配置
| 变量 | 默认值 | 描述 |
|----------|---------|-------------|
| `UI_DESIGNER_SKILL_PATH` | `skills/ui-designer` | 到 ui-designer 技能引用的路径 |
| `COLOR_PALETTE_HUNTER_PATH` | `skills/color-palette-hunter` | 到颜色调色板猎人技能的路径 |
## 使用 AI 助手配置
```json
{
"mcpServers": {
"the-designer": {
"command": "node",
"args": ["/path/to/the-designer/dist/index.js"],
"env": {}
}
}
}
```
## 许可证
[MIT](LICENSE)
