UI/UX Design Automation Suite with MCP

MCP による UI/UX デザイン自動化スイート

インスピレーションの収集から開発への引き継ぎまで、UI/UX デザインワークフロー全体を効率化するエンドツーエンドの Model Context Protocol (MCP) ソリューションです。このスイートは、複数の専門化された MCP サーバーを統合し、AI 支援を通じてデザインプロセスを自動化・強化します。

🎯 ビジョン

私たちの目標は、初期のインスピレーションから開発者への最終的な引き継ぎまで、UI/UX デザイナーのデザインプロセス全体を支える、シームレスで AI を活用したワークフローを実現することです。MCP サーバーを通じて大規模言語モデルの力を活用することで、デザイン業務をより効率的かつ一貫性のあるものにする包括的なソリューションを構築しています。

🌟 機能

1. デザインインスピレーション (inspire-mcp)

• UI/UX のインスピレーションのために既存のウェブサイトをダウンロードして分析
• インライン CSS とリソースを含む完全な HTML コンテンツをキャプチャ
• AI によるデザインパターンとコンポーネントの分析
• 詳細ドキュメント

2. Figma デザイン統合 (design-mcp)

• API を通じた Figma デザインとの直接的な連携
• Figma ファイルからのデザイン情報の抽出
• Figma プラグインによるデザインの作成と更新
• 読み取り専用モードと書き込みモードの両方をサポート
• 詳細ドキュメント

3. 開発への引き継ぎ (handoff-mcp)

• Figma デザインを React コンポーネントに変換
• Tailwind CSS を使用した TypeScript コードの生成
• Figma コンポーネントの抽出と変換
• アクセシビリティの自動強化
• 詳細ドキュメント

🔄 ワークフロー

1. インスピレーション段階

   • 既存のウェブサイトからインスピレーションを収集
   • UI パターンとコンポーネントを分析
   • 参考資料を保存

2. デザイン段階

   • Figma でデザインを作成
   • デザインの意思決定に AI 支援を活用
   • コンポーネントとスタイルを管理

3. 開発への引き継ぎ

   • Figma デザインを React コンポーネントに変換
   • レスポンシブレイアウトを生成
   • アクセシビリティ機能を実装
   • 開発可能なコードを作成

🚀 はじめに

このスイートの各コンポーネントには、それぞれ詳細なドキュメントがあります。具体的なセットアップと使用方法については、各プロジェクトディレクトリの個別の README ファイルを参照してください。

• inspire-mcp - Web UI インスピレーションツール
• design-mcp - Figma 統合サーバー
• handoff-mcp - Figma から React へのコンバーター

🛠️ 前提条件

• Node.js 18 以上
• Figma アカウントと API トークン
• AI 支援のための Claude または Cursor IDE へのアクセス

🔜 ロードマップ

このプロジェクトは活発に開発が進められています。今後の機能には以下が含まれます。

• 統合された構成管理
• 統合されたワークフロー自動化
• 強化された AI によるデザイン提案
• デザインシステムの生成
• スタイルガイドの自動作成
• コンポーネントライブラリの管理
• デザインバージョン管理の統合

📝 注記

これは作業中のプロジェクトであり、このスイートの機能を継続的に改善・拡張しています。各コンポーネントは現在、それぞれ独自のドキュメントとともに個別に維持されていますが、より統合された体験の実現に向けて取り組んでいます。

📄 ライセンス

ISC

---

自動化を愛するデザイナーのために ❤️ を込めて構築