Figma To Vue MCP

🚀 Figma から Vue MCP サーバー

このサーバーは、モデルコンテキストプロトコル (MCP) を利用し、Figma のデザインを Hostinger のデザインシステムと HComponents の要件に合致した Vue 3 コンポーネントに変換します。

🚀 クイックスタート

この MCP サーバーを使用することで、Figma のデザインを Vue 3 コンポーネントに簡単に変換できます。以下の手順に従ってセットアップしてください。

✨ 主な機能

• Figma のデザインを TypeScript と <script setup> 構文の Vue 3 コンポーネントに変換します。
• 適切な場合、HComponents を自動的にインポートして使用します。
• BEM スタイルの CSS クラスを生成します。
• デザインシステムの一貫性を維持します。
• レスポンシブレイアウトを処理します。
• コンポーネント属性と動的コンテンツをサポートします。

📦 インストール

1. リポジトリをクローンします:

git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp

2. 依存関係をインストールします:

npm install

3. .env ファイルを作成し、Figma アクセストークンを追加します:

FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # オプション、デフォルトは 3000

4. サーバーを起動します:

npm run dev  # 開発モード
# または
npm start    # 本番モード

💻 使用例

基本的な使用法

/generate-component に以下のような POST リクエストを送信します:

{
  "figmaUrl": "https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]",
  "componentName": "MyComponent"
}

サーバーは以下のようなレスポンスを返します:

{
  "component": "// 生成された Vue コンポーネントコード"
}

高度な使用法

以下は curl を使用した具体的なリクエストの例です:

curl -X POST http://localhost:3000/generate-component \
  -H "Content-Type: application/json" \
  -d '{
    "figmaUrl": "https://www.figma.com/file/abc123/MyDesign?node-id=1:1",
    "componentName": "YoutubeLinks"
  }'

📚 ドキュメント

開発

• npm run dev: ホットリロード機能付きでサーバーを起動します。
• npm run build: 本番用バージョンをビルドします。
• npm test: テストを実行します。

貢献

1. リポジトリをフォークします。
2. 機能ブランチを作成します (git checkout -b feature/amazing-feature)。
3. 変更をコミットします (git commit -m 'Add amazing feature')。
4. ブランチにプッシュします (git push origin feature/amazing-feature)。
5. Pull Request を開きます。

📄 ライセンス

MIT