Tele UX-UI-Motion Skill MCP

Un servicio MCP basado en Model Context Protocol que ofrece a los agentes de IA la capacidad de explorar, buscar y leer una biblioteca de habilidades de diseño de UI/UX y animación.

Incluye 198 habilidades de diseño, que cubren 17 áreas, destiladas de 10 proyectos de diseño de código abierto.

Proyectos de destilación:

Inicio rápido · Categorías de la biblioteca de habilidades · Flujo de trabajo · Agradecimientos

Introducción

Cuando se desarrollan interfaces frontend, los agentes de IA a menudo carecen de conocimientos de diseño sistemáticos: no saben qué es el glassmorphism, no conocen los requisitos de contraste de WCAG ni saben usar GSAP para escribir animaciones. La solución de este proyecto es organizar el conocimiento de diseño de código abierto de alta calidad en archivos de habilidades estructurados y exponerlos al agente a través del protocolo MCP, para que pueda consultarlos bajo demanda, como si buscara en un diccionario.

El agente no necesita alternar constantemente entre el conocimiento de diseño y el código del proyecto; en su lugar, mediante un flujo de trabajo progresivo recupera, lee y aplica las habilidades paso a paso, y finalmente produce interfaces que cumplen con los estándares de diseño profesional.

Capacidades principales

• Explorar — Profundiza en las 17 categorías de nivel superior para descubrir la estructura de la biblioteca de habilidades.

• Buscar — Busca por palabra clave de forma global o dentro de una categoría para localizar rápidamente la habilidad deseada.

• Leer — Obtén la guía de diseño completa de la habilidad, incluidos principios, patrones y ejemplos de código.

• Consulta de palabras clave — Revisa todas las palabras clave que cubre una habilidad para ayudar a una búsqueda precisa.

• Guía progresiva — Un flujo de trabajo de agente en 5 pasos que guía todo el proceso, desde el descubrimiento hasta la entrega.

Related MCP server: AceternityUI_MCP_Server

Inicio rápido

Uso con npx (recomendado)

Sin necesidad de instalación, configúralo directamente en el cliente MCP:

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

Si se desarrolla desde el código fuente, primero hay que instalar el paquete local de forma global: npm install -g .; después, la configuración de npx es exactamente la misma que tras la publicación oficial.

Desarrollo local

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

Variables de entorno

Categorías de la biblioteca de habilidades

Flujo de trabajo

Cuando el agente utiliza este servicio, sigue un flujo de trabajo progresivo de 5 pasos. En cada paso, usa help(step=N) para obtener la guía detallada de la fase correspondiente:

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

Stack tecnológico

• Lenguaje: TypeScript

• Runtime: Node.js >= 18

• MCP SDK: @modelcontextprotocol/sdk

• Transporte: stdio

Desarrollo

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

Agradecimientos

El contenido de habilidades de este proyecto se destila de los siguientes 10 proyectos de código abierto. Agradecemos a sus autores originales por compartirlo desinteresadamente:

Licencia de código abierto

Este proyecto se publica bajo la licencia MIT. El contenido de las habilidades sigue las licencias de código abierto de cada proyecto original (MIT / CC0 1.0).