Figma to Vue MCP Server

Figma to Vue MCP Server

Hostinger のデザインシステムと HComponents の要件に従い、Figma のデザインから Vue 3 コンポーネントを生成する Model Context Protocol（MCP）サーバーです。

機能

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

セットアップ

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

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

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

npm install

3. Figma アクセストークンを含む .env ファイルを作成します：

FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, defaults to 3000

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

npm run dev  # For development
# or
npm start    # For production

使用方法

次の本文を指定して /generate-component に POST リクエストを送信します：

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

サーバーは次の内容を返します：

{
  "component": "// Generated Vue component code"
}

例

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