Feuse MCP

🚀 フロントエンド有用MCP（モデルコンテキストプロトコル）ツール

Web開発者にとって、API統合の自動化、Figmaのデザインからコードへの変換、開発ワークフローの最適化を行うための必須ユーティリティです。

English | 日本語

📚 ドキュメント

feuse-mcp公式ドキュメント

✨ 主な機能

• 🎨 Figma統合：Figma-Context-MCPとの組み込み統合により、Figmaのデザインからコードへのシームレスな変換と自動アセット抽出を実現します。
• 📝 API自動化：APIドキュメントからTypeScriptのインターフェース型、API URL定数、モックデータ、リクエスト関数を生成します。
• 🖼️ アセット管理：FigmaファイルからSVGとPNG画像をダウンロードし、整理されたファイル構造で保存します。
• 🎯 類似性比較：生成されたコードページと元のFigmaプロトタイプを比較して精度を検証します。
• 🛠️ プロジェクト標準：現在のプロジェクトアーキテクチャに基づいて、Copilot & Cursor用のグローバルな仕様ガイドファイルを生成します。
• 🔧 カラー変数：Figmaのカラー変数を指定された標準（UnoCSS、TailwindCSS、またはカスタム構造）のCSS/デザイントークンに抽出および変換します。

🔧 利用可能なツールセット（継続的に更新）

🚀 クイックスタート

設定

MCPクライアントの設定に追加します。

Figma開発者設定からFigma APIキーを取得します。

{
  "feuse-mcp": {
    "command": "npx",
    "args": ["feuse-mcp@latest"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

🔧 コード貢献者向け

セットアップ

# リポジトリをクローン
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp

# 依存関係をインストール
pnpm install

# ビルド
pnpm build

MCPクライアントの設定に追加します。

Figma開発者設定からFigma APIキーを取得します。

{
  "feuse-mcp": {
    "command": "npx",
    // パスを設定
    "args": ["YOUR/PATH/TO/dist/main.cjs"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

📁 プロジェクト構造

feuse-mcp/
├── src/
│   ├── main.ts              # メインエントリーポイント
│   ├── services/            # コアサービス
│   │   ├── figma/          # Figma統合
│   │   ├── similarity/     # 視覚的比較
│   │   └── utility/        # ユーティリティツールセット
│   ├── types/              # TypeScript定義
│   └── utils/              # ヘルパー関数
├── docs/                   # ドキュメント
└── dist/                   # ビルド済みファイル

🤝 貢献について

貢献は大歓迎です！自由にプルリクエストを送信してください。大きな変更の場合は、まずイシューを開いて変更内容を議論してください。

開発ガイドライン

1. 既存のコードスタイルに従ってください。
2. 必要に応じてドキュメントを更新してください。

📝 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細についてはLICENSEファイルを参照してください。

もしあなたに面白くて楽しくてクールなアイデアがあれば、すぐにイシューに投稿してください！！！

🙏 謝辞

• Figma-Context-MCP がFigmaデザイン分析機能を提供してくれたことに感謝します。
• fastmcp がMCPの迅速な開発フレームワークを提供してくれたことに感謝します。
• このプロジェクトのすべての貢献者とユーザーに感謝します。