Codigma MCP Server

Codigma MCP Server

Codigma MCP Server リポジトリへようこそ！

Codigma MCP Server は、Codigma.io のバックエンドサービスです。Codigma.io は、公開されている Figma リンクを、すっきりとしたセマンティックな HTML と CSS に簡単に変換できる無料ツールです。

Figma リンクを貼り付けるだけで、あとは Codigma.io が処理します！

---

🔄 できること

• 公開 Figma ファイルのデータを取得します。
• Figma のデザインを構造化された Codigma Models に変換します。
• すっきりとしたセマンティックな HTML と CSS のコードを生成します。
• オプションで、TailwindCSS のクラスを使用した HTML を生成します。
• レスポンシブデザイン、フォント、枠線、影、グラデーションに対応しています。

---

📚 クイックスタート

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 トークンの取得方法

4. サーバーを起動する

開発モード

npm run dev

本番モード

npm run build
npm start

---

🌐 主な API エンドポイント

エンドポイント	メソッド	説明
/api/fetch-figma-data	POST	公開 Figma ファイルの JSON データを取得します。
/api/map-figma-node	POST	Figma Node を Codigma Model に変換します。
/api/generate-html	POST	Codigma Model から HTML を作成します。
/api/generate-css	POST	Codigma Model から CSS を作成します。
/api/generate-bundle	POST	完全なバンドル（HTML + CSS）を作成します。
/api/figma-to-bundle	POST	Figma URL からコード出力までの一連の処理を実行します（TailwindCSS にも対応）。

---

📅 例

POST /api/figma-to-bundle

リクエストボディ：

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

レスポンス：

• Codigma Model（構造化データ）
• HTML + CSS バンドル（または TailwindCSS の HTML）

---

🔧 技術

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

---

📊 ロードマップ

• ✅ 公開 Figma ファイルの取得
• ✅ TailwindCSS 出力オプション
• ✅ フォント、枠線、影への対応
• ⬆️ レスポンシブ対応の改善
• ⬆️ 非公開ファイル向け OAuth ログイン
• ⬆️ スナップショットとバージョン管理機能
• ⬆️ 管理者ダッシュボード

---

👤 作者について

Mehmet Alp
Rast Mobile の創業者

• GitHub： @rastmob
• メール：[email protected]

---

📄 ライセンス

ISC License の下でライセンスされています。

---

📈 コントリビューション

プルリクエストを歓迎します！

リポジトリをフォーク → ブランチを作成 → 変更をコミット → プルリクエストを作成 → 完了！ 📚

---

🐝 バグの報告

バグを見つけましたか？こちらから Issue を作成してください。

Codigma MCP Server をご利用いただきありがとうございます！
Codigma.io もぜひ無料でお試しください！