Tele UX-UI-Motion Skill MCP

一个基于 Model Context Protocol 的 MCP 服务，为 AI 智能体提供 UI/UX/动画设计技能库的浏览、检索和阅读能力。

内置 198 个设计技能，覆盖 17 个领域，蒸馏自 10 个开源设计项目。

蒸馏项目：

快速开始 · 技能库类别 · 工作流程 · 致谢

简介

做前端界面时，AI 智能体往往缺乏系统性的设计知识——不知道什么是玻璃拟态、不了解 WCAG 对比度要求、不会用 GSAP 写动画。本项目的解决思路是：把优质开源设计知识整理成结构化的技能文件，通过 MCP 协议暴露给智能体，让它能像查字典一样按需查阅。

智能体不需要在设计知识和项目代码之间反复切换，而是通过渐进式工作流逐步检索、阅读、应用技能，最终产出符合专业设计标准的界面。

核心能力

• 浏览 — 从 17 个顶级类别逐层下钻，探索技能库结构

• 检索 — 按关键词全局或类别内检索，快速定位所需技能

• 阅读 — 获取技能的完整设计指南，包含原则、模式、代码示例

• 关键词查询 — 查看某个技能覆盖的全部关键词，辅助精准检索

• 渐进式引导 — 分 5 个步骤的智能体工作流，从发现到交付全程指导

Related MCP server: AceternityUI_MCP_Server

快速开始

通过 npx 使用（推荐）

无需安装，直接在 MCP 客户端中配置：

{
  "mcpServers": {
    "tele-ux-ui-motion-skill-mcp": {
      "command": "npx",
      "args": ["-y", "tele-ux-ui-motion-skill-mcp"]
    }
  }
}

如果从源码开发，需先全局安装本地包：npm install -g .，之后 npx 配置与正式发布后完全一致。

本地开发

git clone <repo-url>
cd tele-ux-ui-motion-skill-mcp
npm install
npm run build
npm start

环境变量

技能库类别

工作流程

智能体使用本服务时遵循渐进式 5 步工作流，每一步通过 help(step=N) 获取对应阶段的详细指导：

Step 1  发现与探索    → 列出所有类别，建立全局认知
Step 2  需求分析      → 分析用户需求，用专业词汇描述方案，与用户确认
Step 3  技能检索      → 提取关键词，全局 + 迭代检索，建立技能清单
Step 4  开发执行      → 制定计划表，按序读取技能并开发
Step 5  测试与交付    → 检查测试工具，验证产出，交付结果

技术栈

• 语言：TypeScript

• 运行时：Node.js >= 18

• MCP SDK：@modelcontextprotocol/sdk

• 传输方式：stdio

开发

npm run build    # 编译 TypeScript 并拷贝静态文件到 dist/
npm run dev      # 监听模式编译
npm start        # 启动服务

致谢

本项目的技能内容蒸馏自以下 10 个开源项目，感谢原作者的无私分享：

开源协议

本项目基于 MIT 协议开源。技能内容遵循各原始项目的开源协议（MIT / CC0 1.0）。