tele-ux-ui-motion-skill-mcp
by DearXuan7392
README.md
<div align="center">
<p align="center">
<img src="https://cdn.dearxuan.com/project/teleuxuimotionskillmcp/title.png" alt="Tele UX-UI-Motion Skill MCP" width="600">
</p>
[](https://github.com/MengTo/Skills) [](https://github.com/sergey-pimenov/awesome-web-animation) [](https://github.com/freshtechbro/claudedesignskills) [](https://github.com/greensock/gsap-skills) [](https://github.com/jakubkrehel/skills) [](https://github.com/bitjaru/styleseed) [](https://github.com/educlopez/ui-craft) [](https://github.com/Levelup-JC/UI-design-skill) [](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) [](https://github.com/plugin87/ux-ui-agent-skills)
[](https://www.teleai.com.cn/product/teleagent)
[](https://www.npmjs.com/package/tele-ux-ui-motion-skill-mcp)
[](LICENSE)
[](https://nodejs.org/)
[](https://www.typescriptlang.org/)
一个基于 [Model Context Protocol](https://modelcontextprotocol.io/) 的 MCP 服务, 为 AI 智能体提供 UI/UX/动画设计技能库的浏览、检索和阅读能力.
内置 **198 个设计技能**, 覆盖 **17 个领域**, 蒸馏自 10 个开源设计项目.
[快速开始](#快速开始) · [技能库类别](#技能库类别) · [工作流程](#工作流程) · [致谢](#致谢)
</div>
## 简介
做前端界面时, AI 智能体往往缺乏系统性的设计知识——不知道什么是玻璃拟态、不了解 WCAG 对比度要求、不会用 GSAP 写动画. 本项目的解决思路是：把优质开源设计知识整理成结构化的技能文件, 通过 MCP 协议暴露给智能体, 让它能像查字典一样按需查阅.
智能体不需要在设计知识和项目代码之间反复切换, 而是通过渐进式工作流逐步检索、阅读、应用技能, 最终产出符合专业设计标准的界面.
### 核心能力
- **浏览** — 从 17 个顶级类别逐层下钻, 探索技能库结构
- **检索** — 按关键词全局或类别内检索, 快速定位所需技能
- **阅读** — 获取技能的完整设计指南, 包含原则、模式、代码示例
- **关键词查询** — 查看某个技能覆盖的全部关键词, 辅助精准检索
- **渐进式引导** — 分 5 个步骤的智能体工作流, 从发现到交付全程指导
## 快速开始
### 通过 npx 使用（推荐）
无需安装, 直接在 MCP 客户端中配置：
```json
{
"mcpServers": {
"tele-ux-ui-motion-skill-mcp": {
"command": "npx",
"args": ["-y", "tele-ux-ui-motion-skill-mcp"]
}
}
}
```
> 如果从源码开发, 需先全局安装本地包：`npm install -g .`, 之后 `npx` 配置与正式发布后完全一致.
### 本地开发
```bash
git clone https://github.com/DearXuan7392/Tele-UX-UI-Motion-Skill-MCP.git
cd tele-ux-ui-motion-skill-mcp
npm install
npm run build
npm start
```
## 技能库类别
| 类别 | 领域 |
|------|------|
| `visual-styles` | UI 视觉风格（玻璃拟态、新拟态、野兽派等） |
| `brand-systems` | 品牌级设计系统参考（Stripe、Linear、Apple 等） |
| `motion` | 动画与动效设计, 含 GSAP |
| `color` | 色彩系统、调色板、对比度、暗色模式 |
| `typography` | 字体配对、字号比例、文本排版 |
| `layout` | 布局结构、间距、网格、组合 |
| `components` | 组件设计模式与解剖 |
| `accessibility` | WCAG、ARIA、键盘操作、包容性设计 |
| `design-tokens` | 设计令牌架构（基础→语义→组件） |
| `3d-webgl` | Three.js、WebGL、着色器、3D 特效 |
| `ux-writing` | 语气语调、微文案、内容设计 |
| `ux-principles` | UX 启发式评估、设计审查、反 slop |
| `frameworks` | 框架特定实现模式 |
| `page-recipes` | 页面级设计方案（落地页、仪表盘、登录） |
| `css-effects` | CSS 视觉效果（模糊、渐变、遮罩、阴影） |
| `icons` | 图标系统、SVG、图标选择 |
| `interaction` | 微交互、悬停状态、反馈 |
## 工作流程
智能体使用本服务时遵循渐进式 5 步工作流, 每一步通过 `help(step=N)` 获取对应阶段的详细指导：
```
Step 1 发现与探索 → 列出所有类别, 建立全局认知
Step 2 需求分析 → 分析用户需求, 用专业词汇描述方案, 与用户确认
Step 3 技能检索 → 提取关键词, 全局 + 迭代检索, 建立技能清单
Step 4 开发执行 → 制定计划表, 按序读取技能并开发
Step 5 测试与交付 → 检查测试工具, 验证产出, 交付结果
```
## 技术栈
- **语言**：TypeScript
- **运行时**：Node.js >= 18
- **MCP SDK**：[`@modelcontextprotocol/sdk`](https://github.com/modelcontextprotocol/python-sdk)
- **传输方式**：stdio
## 开发
```bash
npm run build # 编译 TypeScript 并拷贝静态文件到 dist/
npm run dev # 监听模式编译
npm start # 启动服务
```
## 致谢
该项目通过中国电信 [TeleAgent](https://www.teleai.com.cn/product/teleagent) 软件进行开发.
本项目的技能内容蒸馏自以下 10 个开源项目, 感谢原作者的无私分享：
| 项目 | 协议 |
|------|------|
| [Agent Skills](https://github.com/MengTo/Skills) | MIT |
| [Awesome Web Animation](https://github.com/sergey-pimenov/awesome-web-animation) | CC0 1.0 |
| [Claude Design Skillstack](https://github.com/freshtechbro/claudedesignskills) | MIT |
| [GSAP AI Skills](https://github.com/greensock/gsap-skills) | MIT |
| [skills (interfaces.dev)](https://github.com/jakubkrehel/skills) | MIT |
| [StyleSeed](https://github.com/bitjaru/styleseed) | MIT |
| [UI Craft](https://github.com/educlopez/ui-craft) | MIT |
| [UI Design Skill](https://github.com/Levelup-JC/UI-design-skill) | MIT |
| [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) | MIT |
| [UX/UI Agent Skills](https://github.com/plugin87/ux-ui-agent-skills) | MIT |
## 开源协议
本项目基于 [MIT](LICENSE) 协议开源. 技能内容遵循各原始项目的开源协议（MIT / CC0 1.0）.TDQS
A4.3/5.0
Scored across 5 tools
Disambiguation5/5
Each tool has a distinct role: list browses the category tree, search finds by keyword, read retrieves full content, keywords returns metadata, and help provides usage guidance. There is minimal overlap, and descriptions clearly differentiate the discovery tools from the retrieval tools.
Naming Consistency4/5
Most tools use simple, single-word verb names: list, search, read, and help. The noun-form 'keywords' breaks the pattern slightly, but the naming is still simple, predictable, and not confusing.
Tool Count5/5
Five tools is well-scoped for a skill-library browser: discovery, search, retrieval, metadata access, and help. Each tool serves a clear purpose without redundancy or unnecessary surface area.
Completeness5/5
For a read-only skill library, the surface is complete: agents can navigate, search, read, inspect keywords, and get workflow guidance. There are no obvious missing operations because the server is not expected to modify or create skills.
Maintenance
ActivityMaintained
ResponsivenessSyncing