Feuse Mcp

英語 | 中文

📖 ドキュメント

feuse-mcp 公式ドキュメント

✨ 機能

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

🔧 利用可能なツールセット (継続的に更新中)

ツール名	カテゴリ	説明	入力パラメータ	備考
Figma-To-Code	Figma 連携	PNG を補助的に使用し、Figma のスタイル情報に基づいてフロントエンドコードを生成	fileKey, nodeId(任意)	ローカル設定 (ESLint など) に自動適応、レスポンシブレイアウトをサポート
extract-svg-assets	アセット分析	Figma DSL 構造を分析し、SVG リソースを自動抽出	fileKey, nodeId(任意)	インテリジェントな Figma ファイル分析、SVG アイコン/ベクターの一括抽出
extract-color-vars	デザイントークン	Figma DSL からカラー変数を抽出し、CSS フレームワーク設定に変換	fileKey, nodeId(任意)	UnoCSS、TailwindCSS、またはカスタムファイル形式での出力をサポート
similarity-figma	品質管理	Figma プロトタイプとプロジェクトページのスクリーンショットを比較	url, fileKey, nodeId(任意)	インテリジェントな類似度スコアリングと詳細な分析による視覚的比較
api-automation	開発ツール	バックエンド API ドキュメントを解析し、型、定数、モックデータを生成	apiDocs	複数の API ドキュメント形式をサポートし、完全なフロントエンド API ツールキットを生成
initialize-project-standard	プロジェクト管理	プロジェクト構造を分析し、Copilot/Cursor のグローバルルールを生成	パラメータなし	インテリジェントなコーディングアシスタントのプロジェクトコンテキストと標準を自動生成
Download-Figma-Images	アセット管理	ノード ID を指定して Figma から SVG および PNG 画像リソースを一括ダウンロード	fileKey, nodes[], localPath	imageRef の処理をサポート、ディレクトリ構造を自動作成 (他の MCP 向けの低レベルツール)
download-svg-assets	アセット管理	画像/アイコンのノード ID を指定して Figma から SVG ベクターリソースをダウンロード	fileKey, nodes[], localPath	SVG 形式のみ、複雑なノード構造をサポート (他の MCP 向けの低レベルツール)

🚀 クイックスタート

設定

MCP クライアントの設定に追加してください:

Figma API キーは Figma Developer Settings から取得してください。

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

🔧 コードコントリビューター向け

セットアップ

# Clone the repository
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp

# Install dependencies
pnpm install

# Build
pnpm build

MCP クライアントの設定に追加してください:

Figma API キーは Figma Developer Settings から取得してください。

{
  "feuse-mcp": {
    "command": "npx",
    // Configure path
    "args": ["YOUR/PATH/TO/dist/main.cjs"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

📁 プロジェクト構造

feuse-mcp/
├── src/
│   ├── main.ts              # Main entry point
│   ├── services/            # Core services
│   │   ├── figma/          # Figma integration
│   │   ├── similarity/     # Visual comparison
│   │   └── utility/        # Utility toolset
│   ├── types/              # TypeScript definitions
│   └── utils/              # Helper functions
├── docs/                   # Documentation
└── dist/                   # Built files

🤝 コントリビューション

コントリビューションを歓迎します! お気軽に Pull Request を送信してください。大幅な変更の場合は、まず issue を作成して、変更したい内容について議論してください。

開発ガイドライン

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

📝 ライセンス

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

もっと面白くて、楽しくて、クールなアイデアがあれば、ぜひすぐに issues で提出してください ! ! !

🙏 謝辞

• Figma のデザイン分析機能を提供してくれた Figma-Context-MCP
• MCP の迅速な開発フレームワークを提供してくれた fastmcp
• このプロジェクトのすべてのコントリビューターとユーザーの皆様