ecomfe/tempad-dev

TemPad Dev – 概要

TemPad Dev は、Figma デザインファイル と コーディングエージェント（LLM ベースのコードアシスタント）および開発者の IDE を橋渡しするオープンソースの Chrome 拡張機能です。デザインの CSS/JS を検査したり、レイアウトデータを取得したり、AI エージェントに Figma キャンバスの作成や編集をさせたり、選択したデザインから実装コードを直接生成したりできます。

主な機能

領域	できること	仕組み
デザイン検査	Figma ファイル内の任意の要素を選択すると、CSS、Tailwind スタイルのオブジェクト、変数、JSX/Vue スニペットがすぐに表示されます。	拡張機能はローカル MCP（マルチクライアントプロトコル）サーバーを呼び出し、プラグイン API を介して Figma にクエリを実行し、`get_code`、`get_structure` などを返します。
ディープ選択 / 測定 / スクロール	ショートカットなしでネストされたレイヤーにドリルダウンし、間隔を測定し、ノードをビューにスクロールできます。	パネルに組み込まれた UI ヘルパー。背後で同じ Figma API 呼び出しを実行します。
エージェント駆動のキャンバス編集	LLM（例：Claude、Qwen Code、Cursor、VS Code エージェント）に画面の作成、間隔の調整、タイポグラフィの変更を依頼できます。	拡張機能は MCP ツール（`apply_canvas`、`upload_asset` など）を公開し、エージェントがこれらを呼び出して Figma ドキュメントを読み書きします。
デザインからコードへ	エージェントに、選択した Figma コンポーネントをコードベースに実装するようプロンプトし、コンポーネントライブラリとスタイル規約を尊重させます。	`figma-design-to-code` スキルがレイアウト、アセット、デザインシステムのメタデータを提供し、エージェントがスターターコードを記述します。
プラグインシステム	生成されたコードを変換する小さな JavaScript プラグインを記述できます（例：Stylus 出力、CSS 変数の Sass への変換、カスタムスケーリングの適用）。	プラグインは URL からロードされる ES モジュールで、ブラウザのローカルストレージに保存されます。

始め方

Chrome ウェブストアから拡張機能を インストール します。
Figma ファイルを開き、要素を選択して、サイドパネルでコードを表示します – AI は不要です。
AI エージェントを有効にするには、設定 → エージェント統合 → MCP アクセス を開き、エージェントを設定 をクリックし、選択したクライアント（Claude、Codex、Cursor、VS Code など）の画面の指示に従います。
Node 22/24/26+ がインストールされていることを確認してください。MCP サーバー（@tempad-dev/mcp@latest）はローカルで実行され、127.0.0.1 を介して拡張機能と通信します。
（オプション）コードブロックをカスタマイズするために 出力プラグイン をインストールまたは記述します。

気になるかもしれない技術的な詳細

MCP サーバー – 拡張機能のリクエストを Figma プラグイン API 呼び出しに変換する小さな Node サービス（@tempad-dev/mcp）。一緒に使用されるバージョン：拡張機能 0.23.1、MCP 0.11.0、エージェントプラグイン 0.5.0。
スキル – エージェントが呼び出せる事前パッケージ化されたコマンドセット（design-in-figma、figma-design-to-code）。リソース発見、キャンバス差分、検証を処理します。
サポートされているエージェント – Qwen Code、Qoder、ZCode、Kimi Code、Pi、Hermes、および汎用の「その他のエージェント」。統合は主に UI 駆動です。拡張機能は特定のモデルにロックされません。
アセット処理 – 生成された PNG/JPEG/GIF アセットはローカル Hub にアップロードされます。MCP 応答には、キャンバス編集で参照できる assetHash が含まれます。
設定 – オプションの環境変数は packages/mcp-server/README.md に文書化されています。UI 設定で CSS 単位、変数表示モード、ディープ選択などを切り替えられます。

誰に役立つか？

フロントエンドエンジニア – Figma から正確な CSS/JS を手動でトークン変換せずに迅速かつ確実にコピーしたい方。
プロダクトチーム – LLM ベースのコーディングアシスタントを使用し、デザインシステムへの安定したブリッジが必要な方。
デザインシステム保守者 – エージェントにデザインカタログ（get_design_system）を読み取らせ、コードを同期させたい方。
ツールビルダー – ブラウザ拡張機能と外部 AI クライアントの両方と通信するローカルプロトコル（MCP）のリファレンス実装を探している方。

詳細情報

Chrome ウェブストアページ – ワンクリックインストール。
Discord コミュニティ – ライブヘルプと機能ディスカッション。
エージェントプラグイン README – 各サポートクライアントの詳細なセットアップ。
ソースコード – リポジトリには拡張機能、MCP サーバー、プラグインレジストリが含まれています。

TL;DR

TemPad Dev は、Figma デザインを検査し、AI エージェントを実行してキャンバスを編集し、スターター UI コードを生成できる Chrome 拡張機能です。これは、エージェントが呼び出せる一連のツール（get_code、apply_canvas など）を公開するローカル MCP サーバーを介して動作します。小さな JavaScript プラグインで出力をカスタマイズでき、スタック全体はオープンソースで、より緊密なデザインからコードへのループを求める開発者向けです。