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 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技能库类别
类别 | 领域 |
| UI 视觉风格(玻璃拟态、新拟态、野兽派等) |
| 品牌级设计系统参考(Stripe、Linear、Apple 等) |
| 动画与动效设计, 含 GSAP |
| 色彩系统、调色板、对比度、暗色模式 |
| 字体配对、字号比例、文本排版 |
| 布局结构、间距、网格、组合 |
| 组件设计模式与解剖 |
| WCAG、ARIA、键盘操作、包容性设计 |
| 设计令牌架构(基础→语义→组件) |
| Three.js、WebGL、着色器、3D 特效 |
| 语气语调、微文案、内容设计 |
| UX 启发式评估、设计审查、反 slop |
| 框架特定实现模式 |
| 页面级设计方案(落地页、仪表盘、登录) |
| CSS 视觉效果(模糊、渐变、遮罩、阴影) |
| 图标系统、SVG、图标选择 |
| 微交互、悬停状态、反馈 |
工作流程
智能体使用本服务时遵循渐进式 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 # 启动服务致谢
该项目通过中国电信 TeleAgent 软件进行开发.
本项目的技能内容蒸馏自以下 10 个开源项目, 感谢原作者的无私分享:
项目 | 协议 |
MIT | |
CC0 1.0 | |
MIT | |
MIT | |
MIT | |
MIT | |
MIT | |
MIT | |
MIT | |
MIT |
开源协议
本项目基于 MIT 协议开源. 技能内容遵循各原始项目的开源协议(MIT / CC0 1.0).
Available Tools
5 toolshelpA
Get usage instructions and recommended workflow. IMPORTANT: This MCP server MUST be used for ANY task involving interface development, UI/UX design, animation, visual styling, motion design, page layout, color, typography, or any frontend visual work. Always start by calling help with step=1 to get the progressive workflow guide. Pass step=1 on first use; subsequent calls with step=2 through 5 return stage-specific guidance. Without a step, returns the full overview document.
| Name | Required | Description | Default |
|---|---|---|---|
| step | No | Optional. Step number 1-5 for progressive workflow guidance. step=1: discovery, step=2: requirements, step=3: skill search, step=4: development, step=5: testing & delivery. Omit to get the full overview. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations supplied, the description carries the full behavioral burden and does disclose the progressive step behavior and the full-overview fallback. It could explicitly state that this is a read-only informational tool, but the described act of returning documents makes side effects highly unlikely.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Every sentence earns its place and the core purpose is front-loaded. The long list of frontend-related task types in the IMPORTANT sentence is somewhat dense, but it is necessary to define the mandatory scope of the tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one optional parameter, no annotations, and no output schema, the description covers purpose, mandatory usage context, parameter semantics, and return behavior completely. An agent has everything needed to correctly invoke this tool on the first call.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already documents the step parameter with 100% coverage, so the baseline is 3. The description adds usage guidance beyond the schema by prescribing step=1 as the required first call and framing steps 2-5 as subsequent stages in a progressive guide. This is meaningful added context.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb-resource pair ('Get usage instructions and recommended workflow') and further establishes it as the mandatory entry point for interface/frontend work. This clearly distinguishes it from sibling tools like list, search, read, and keywords, which obviously handle different resources.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly states when this tool MUST be used (any task involving interface development, UI/UX, animation, visual styling, etc.) and prescribes a concrete workflow: always start with step=1, then proceed through steps 2-5. It also documents the behavior when step is omitted, leaving no doubt about how to invoke it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
keywordsA
Retrieve the full keywords array for a specific category or skill. For a category path (e.g. 'color'), returns keywords from its SKILL.md. For a skill path (e.g. 'color.color-blind'), returns keywords from that skill file. Useful for understanding what terms a skill covers without reading the full content.
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Dot-separated path to a category or skill. Examples: 'color' (category), 'color.color-blind' (skill), 'motion.gsap' (subcategory). Do not include the .md extension. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations exist, so the description carries the full burden — and it delivers: it discloses the return value (full keywords array), the source resolution (SKILL.md vs. skill file), and the two accepted path shapes. It doesn't cover error/empty-path behavior, but for a simple read-only lookup that is a minor gap rather than a serious one.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences with zero filler: the verb+resource statement is front-loaded, the second sentence explains resolution behavior, and the third gives the practical use case. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter lookup with no output schema, the description covers the return value, the two input path semantics, and the intended use case. The only real omission is the shape of the returned array, but the description's 'full keywords array' phrasing plus a low-complexity surface makes this adequately complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% — the schema already documents the dot-separated format with concrete examples and the no-.md-extension rule. The description reinforces the same examples but adds no meaning beyond the schema, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Starts with a specific verb+resource pair ('Retrieve the full keywords array for a specific category or skill') and immediately clarifies the two path types. The closing phrase 'without reading the full content' explicitly differentiates it from the sibling `read` tool, so an agent can tell them apart without opening any schemas.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives clear context: use this to understand what terms a skill covers without loading full content, and it explains how category vs. skill paths resolve. It does not explicitly name alternatives or state when NOT to use it, but the contrast with `read` is implied strongly enough for a 1-parameter lookup tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
listA
List all top-level categories, or list subcategories and skills within a specific category. Use this to explore the skill library structure. Call without arguments to see all categories; pass a dot-separated path (e.g. 'color' or 'motion.gsap') to drill into a category.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Dot-separated category path (e.g. 'color', 'motion.gsap'). Omit or leave empty to list all top-level categories. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It clearly indicates a read-only listing behavior and explains the drill-down mechanism, but it does not mention the return format, what happens if an invalid path is passed, or any side-effect guarantees. 'List' implies no mutation, but more detail on output or error behavior would strengthen transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences carry the entire definition with zero filler. The main purpose is front-loaded, and the optional-argument behavior is explained efficiently with concrete examples.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one optional parameter and no output schema, the description covers the core use cases: top-level listing and category drill-down. It gives examples and the dot-separated path convention. The only notable gap is specifying the output shape or behavior for an invalid category path, but that's minor for a simple read-only list tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already fully documents the category parameter: dot-separated path, examples, and 'omit or leave empty' behavior. The description largely restates this same information and only adds the context of 'subcategories and skills', so it adds minimal value beyond the schema. Baseline 3 applies given 100% schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('List') and a clear resource ('top-level categories', 'subcategories and skills'), and explains the optional drill-down behavior. It doesn't explicitly name sibling tools to distinguish itself, but 'Use this to explore the skill library structure' provides enough context to separate it from search/read/keywords/help.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives a clear usage cue ('Use this to explore the skill library structure') and explicit invocation patterns: call without arguments for top-level categories, or pass a dot-separated path to drill in. It stops short of a 5 because it doesn't explicitly say when to use a sibling tool like search instead.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
readA
Read the full content of a specific skill or category. For a category path, returns the SKILL.md body text plus a list of its children. For a skill path, returns the skill's Markdown body text. Frontmatter metadata is stripped. IMPORTANT: Always call help first if unsure how to use the library.
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Dot-separated path to a category or skill. Examples: 'color' (category), 'color.color-tokens' (skill), 'motion.gsap.gsap-core' (nested skill). Do not include the .md extension. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It discloses that frontmatter metadata is stripped, that category paths return SKILL.md body plus children, and that skill paths return Markdown body. It does not cover error behavior or explicitly confirm non-mutating behavior, but the read action and output details make the tool's behavior reasonably transparent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and front-loaded with the core purpose, followed by path-type behavior and the important help-first warning. Every sentence contributes useful information with no repetition or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite having no output schema, the description explains the return behavior for both category and skill paths and notes frontmatter stripping. Minor gaps such as invalid-path behavior and the exact shape of the children list keep it from being fully complete, but it is sufficient for a simple single-parameter read tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides 100% coverage for the single path parameter, including dot-separated path examples and the instruction not to include the .md extension. The description reinforces the path-type distinction but does not add substantial parameter semantics beyond what the schema already documents, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action and resource: 'Read the full content of a specific skill or category.' It also distinguishes behavior for category paths versus skill paths, making the tool's purpose unambiguous and separable from sibling tools like list, search, and keywords.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for how to use the tool based on path type, and it includes an explicit usage prerequisite: 'Always call help first if unsure how to use the library.' It does not explicitly name alternatives or say when not to use this tool, but the guidance is still strong.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
searchA
Search for categories or skills by keywords. Each keyword is matched exactly (case-insensitive) against the keywords array in each file. Any keyword match returns the item (OR logic). Without a category, searches globally across all category SKILL.md files. With a category, searches within that category's skills and subcategories.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Optional. Dot-separated category path to scope the search (e.g. 'color'). Omit to search globally across all categories. | |
| keywords | Yes | Space-separated keywords. Each word is matched exactly against file keywords. Example: 'dark mode' searches for the single keyword 'dark' and the single keyword 'mode' separately. For multi-word keyword phrases, the full phrase must be a single term in the file's keywords array. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden, and it delivers: it discloses exact case-insensitive matching, OR logic across keywords, and scope behavior across SKILL.md files and subcategories. These are non-obvious behavioral details that an agent needs to predict results correctly.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core purpose, then moves efficiently through matching behavior and scoping rules. Every sentence adds distinct information, and there is no filler or redundant restating of the tool name.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a two-parameter search tool, the description covers selection and invocation well, including matching semantics and category scoping. It would be slightly stronger if it specified the return format more concretely, but 'Any keyword match returns the item' gives a reasonable expectation in the absence of an output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is already 100%, so the baseline is 3. The description adds value by explaining how keyword matching behaves ('any keyword match returns the item') and how the category parameter changes search scope. This meaningfully supplements the schema without repeating it.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: 'Search for categories or skills by keywords.' It goes beyond a generic statement by detailing exact matching, case-insensitivity, OR logic, and global vs. category-scoped behavior, which makes its purpose easy to distinguish from sibling tools like list, read, and help.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives clear context for when to include or omit the category parameter: 'Without a category, searches globally... With a category, searches within that category's skills and subcategories.' It does not explicitly name alternatives or say when not to use this tool, but the scoping guidance is direct and actionable.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
5 tool updates
v1.0.0- First observed
help - First observed
keywords - First observed
list - First observed
read - First observed
search
TDQS
Scored across 5 tools
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.
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.
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.
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
Related MCP Connectors
Search 1,700+ agent skills for Claude, Codex and Cursor, each safety-scanned, with proofs.
Find AI agent skills: public previews and source links. Read-only discovery; no account required.
Search and load AI agent skills. Free metadata; full content requires a Pro or Studio account.
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceExposes The Vibe Coder's Web Design Guide as tools for AI agents, enabling lookups of UI design patterns, CSS/JS snippets, and composition of optimized front-end prompts.-
- AlicenseAqualityDmaintenanceProvides access to Aceternity UI component library documentation, enabling AI assistants to browse, search, and retrieve detailed information about components.320 npmMIT
- AlicenseAqualityDmaintenanceProvides 634+ curated production-ready AI skills for any MCP-compatible client, covering areas like security, frontend, backend, infrastructure, AI/ML, and architecture. Enables AI agents to access best practices, patterns, and solutions across multiple domains.68 npm1MIT
- AlicenseNot gradedqualityBmaintenanceEnables AI coding assistants to search, retrieve, and reuse validated Flutter animations with documented pitfalls, directly integrable into Claude Code or Cursor.MIT