Tele UX-UI-Motion Skill MCP

Ein MCP-Server auf Basis des Model Context Protocol, der KI-Agenten die Fähigkeit zum Durchsuchen, Suchen und Lesen einer Bibliothek von UI/UX-/Animations-Design-Skills bietet.

Enthält 198 Design-Skills aus 17 Bereichen, destilliert aus 10 Open-Source-Design-Projekten.

Destillierte Projekte:

Schnellstart · Skill-Kategorien · Workflow · Danksagung

Einführung

Bei der Entwicklung von Frontends fehlt KI-Agenten oft systematisches Designwissen – sie wissen nicht, was Glassmorphism ist, kennen die WCAG-Kontrastanforderungen nicht und können keine Animationen mit GSAP schreiben. Die Lösung dieses Projekts: Hochwertiges Open-Source-Designwissen wird in strukturierte Skill-Dateien organisiert und über das MCP-Protokoll für Agenten bereitgestellt, damit sie es bei Bedarf wie in einem Nachschlagewerk abrufen können.

Agenten müssen nicht mehr ständig zwischen Designwissen und Projektcode wechseln, sondern können über einen progressiven Workflow schrittweise Skills abrufen, lesen und anwenden, um letztendlich Oberflächen zu erstellen, die professionellen Designstandards entsprechen.

Kernfunktionen

• Durchsuchen — Schrittweises Navigieren durch 17 Top-Level-Kategorien, um die Struktur der Skill-Bibliothek zu erkunden

• Suchen — Globale oder kategoriespezifische Suche nach Schlüsselwörtern, um benötigte Skills schnell zu finden

• Lesen — Vollständige Designleitfäden für Skills mit Prinzipien, Mustern und Codebeispielen abrufen

• Schlüsselwort-Abfrage — Alle Schlüsselwörter eines Skills anzeigen, um die präzise Suche zu unterstützen

• Progressive Anleitung — Ein Agenten-Workflow in 5 Schritten, der vom Entdecken bis zur Abgabe begleitet

Related MCP server: AceternityUI_MCP_Server

Schnellstart

Verwendung über npx (empfohlen)

Keine Installation erforderlich – direkt im MCP-Client konfigurieren:

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

Wenn du aus dem Quellcode entwickelst, musst du zuerst das lokale Paket global installieren: npm install -g .. Danach ist die npx-Konfiguration identisch mit der nach der offiziellen Veröffentlichung.

Lokale Entwicklung

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

Umgebungsvariablen

Skill-Kategorien

Workflow

Agenten folgen bei der Nutzung dieses Dienstes einem progressiven 5-Schritte-Workflow. Für jeden Schritt erhält man über help(step=N) detaillierte Anleitungen zur jeweiligen Phase:

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

Technologie-Stack

• Sprache: TypeScript

• Laufzeit: Node.js >= 18

• MCP SDK: @modelcontextprotocol/sdk

• Transport: stdio

Entwicklung

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

Danksagung

Die Skill-Inhalte dieses Projekts wurden aus den folgenden 10 Open-Source-Projekten destilliert. Wir danken den ursprünglichen Autoren für ihre großzügige Weitergabe:

Open-Source-Lizenz

Dieses Projekt ist unter der MIT-Lizenz Open Source. Die Skill-Inhalte folgen den Open-Source-Lizenzen der jeweiligen Originalprojekte (MIT / CC0 1.0).