Codigma MCP Server

🚀 Codigma MCP サーバー

Codigma MCP サーバーは、Codigma.io のバックエンドサービスの中核です。この無料ツールを使えば、任意の公開 Figma リンクを簡単にきれいで意味のある HTML と CSS に変換できます。

Figma リンクを貼り付けるだけで、Codigma.io が残りの作業を完了します！

🚀 クイックスタート

1. リポジトリをクローンする

git clone https://github.com/rastmob/codigma-mcp-server.git
cd codigma-mcp-server

2. 依存関係をインストールする

npm install

3. Figma APIトークンを追加する

.env ファイルを作成します。

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token_here

Figma Token の取得方法はこちら

4. サーバーを起動する

開発モード

npm run dev

本番モード

npm run build
npm start

✨ 主な機能

• Figma の公開ファイルデータを取得する。
• Figma のデザインを構造化された Codigma モデルに変換する。
• きれいで意味のある HTML と CSS コードを生成する。
• TailwindCSS ベースの HTML をオプションで生成する。
• レスポンシブデザイン、フォント、ボーダー、シャドウ、グラデーションをサポートする。

📚 ドキュメント

🌐 主要 API エンドポイント

📅 使用例

POST /api/figma-to-bundle

リクエストボディ：

{
  "figmaUrl": "https://www.figma.com/file/abcd1234/Design-System?node-id=123%3A456",
  "outputType": "plain" // または "tailwind"
}

レスポンス：

• Codigma モデル（構造化）
• HTML + CSS コードパッケージ（または TailwindCSS HTML）

🔧 技術詳細

• Node.js 18+
• Express 5
• TypeScript
• Axios
• Jest（テスト用）
• ESLint（コード品質管理用）

📊 ロードマップ

• ✅ Figma 公開ファイルの取得
• ✅ TailwindCSS 出力オプションのサポート
• ✅ フォント、ボーダー、シャドウのサポート
• ⬆️ より良いレスポンシブデザインのサポート
• ⬆️ プライベートファイル用の OAuth ログインサポート
• ⬆️ スナップショットとバージョン管理機能
• ⬆️ 管理者コンソール

👤 作者情報

Mehmet Alp
Codigma.io の創設者

• GitHub: @rastmob
• メール: mehmet.alp@rastmobile.com

📄 ライセンス

このプロジェクトは ISC ライセンスに基づいて配布されています。

📈 貢献ガイド

私たちはどんな貢献も歓迎します！

リポジトリをフォーク -> 変更をコミット -> プルリクエストを送信

皆さんの貢献により、このプロジェクトをより良いものにすることができます。