Tele UX-UI-Motion Skill MCP

Model Context Protocol に基づく MCP サービスで、AI エージェントに UI/UX/アニメーション設計スキルライブラリの閲覧・検索・読み取り機能を提供します。

198 の設計スキル を内蔵し、17 の領域 をカバー、10 のオープンソース設計プロジェクトから抽出されています。

抽出元プロジェクト：

クイックスタート · スキルライブラリのカテゴリ · ワークフロー · 謝辞

はじめに

フロントエンドの UI を作成する際、AI エージェントは体系的な設計知識を欠いていることがよくあります——グラスモーフィズムが何かを知らず、WCAG のコントラスト要件を理解せず、GSAP でアニメーションを書くこともできません。本プロジェクトの解決策は、優れたオープンソースの設計知識を構造化されたスキルファイルに整理し、MCP プロトコルを通じてエージェントに公開することで、辞書を引くように必要に応じて参照できるようにすることです。

エージェントは設計知識とプロジェクトコードの間を行き来する必要はなく、段階的なワークフローを通じてスキルを徐々に検索・閲覧・適用し、最終的にプロフェッショナルな設計基準に沿った UI を生み出します。

コア機能

• ブラウズ — 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）に従います。