frame-relay

Frame-Relay

Figma コンポーネントを、AI コーディングエージェントが従うデザインキットに変換します。

初めての方は、デザイナー向けセットアップガイドに沿って進めてください。

ステータス：パブリックベータです。 以下のコマンドでは、CLI の beta タグをインストールします。まだ不完全な点がある場合があります。 気づいた点はベータ版フィードバックフォームからお知らせください。

Frame-Relay は、OpenCode や Antigravity などの AI コーディングツールをすでに利用しているデザイナーや、AI が UI を作成する間も Figma のシステムを信頼できる唯一の情報源として保ちたい小規模チーム向けです。Figma でのデザインはそのまま続けられます。エージェントにはスクリーンショットから推測させるのではなく、正確なコンポーネント、トークン、ルールを提供できます。

仕組み

1. Figma でデザインします。 いつもの方法でコンポーネントを作成し、エクスポートの予測可能性を保つために命名規約を使用します。
2. プラグインでエクスポートします。 Frame-Relay プラグインがファイルをキットに変換します。コンポーネント仕様、デザイントークン、アイコン、スクリーンショットがプレーンな JSON ファイルと画像ファイルとして出力されます。
3. 同期を実行します。 1 つのコマンドで、React + Tailwind コンポーネント、トークン CSS、AI 向けのルールファイル、MCP クライアント設定をプロジェクトに書き込みます。
4. AI エージェントで構築します。 エージェントは MCP サーバーを通じてキットを読み取り、デザインに一致する画面を作成します。ルールファイルによって、既定のボタンやハードコードされた色を勝手に作らないようにします。

ライブモードは任意の 5 つ目のステップです。Figma とエージェントを連携させ、選択中のレイヤーを読み取らせます。ライブモードをご覧ください。エクスポートモードは、ライブモードなしでも常に利用できます。

60 秒で始める

# 1. Create a React + TypeScript app (Vite shown here; any React app works)
npm create vite@latest my-app -- --template react-ts
cd my-app

# 2. Add Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite
# Then add the tailwindcss() plugin to vite.config.ts and
# `@import "tailwindcss";` to src/index.css.

# 3. In Figma: run the Frame-Relay plugin, open the Export tab, click Export Kit (.zip)

# 4. Set up Frame-Relay and sync the kit
npx @frame-relay/cli@beta init --yes
npx @frame-relay/cli@beta sync --from ~/Downloads/frame-relay-kit-my-file.zip

# 5. Check the setup
npx @frame-relay/cli@beta doctor

フォルダーを OpenCode（またはお使いの AI ツール）で開き、「キットのコンポーネントを使って設定ページを作成して」と依頼してください。エージェントは MCP サーバーからコンポーネント一覧、プロパティ、トークンを取得して、ページを作成します。

Figma プラグインの入手方法： Frame-Relay は Figma Community に近日公開予定です。承認されるまでは、Figma デスクトップを開き、Plugins、Development、Import plugin from manifest の順に選択して、このリポジトリにある packages/plugin/manifest.jsonを指定してください。

詳しい手順：はじめに。まずアイデアを知りたい方は、 コンセプトをご覧ください。

デザイナー向けセットアップガイド

以下の手順は、ターミナルを使ったことがないデザイナー向けに書かれています。ターミナルとは、短いコマンドを入力してコンピューターを操作するウィンドウです。AI コーディングツールにはターミナルが組み込まれています。

パート 1：準備する（初回のみ）

ステップ 1. Node.js をインストールします。 nodejs.org にアクセスし、LTS バージョンをダウンロードして、ほかのアプリと同じようにインストールしてください。 理由： Frame-Relay は Node.js 上で動作します。Node.js がないと、コンピューターで以下のコマンドを実行できません。

ステップ 2. AI コーディングツールをインストールします。 Cursor、Antigravity、OpenCode、Claude Code のいずれかを選び、インストールしてサインインしてください。 理由： これはアプリを作成する AI です。Frame-Relay は、デザインを使う方法を AI に教えます。

ステップ 3. Figma に Frame-Relay プラグインを追加します。 Figma を開き、Community plugins で「Frame-Relay」を検索して、Install をクリックしてください。プラグインが公開されるまでは、最新の GitHub リリースからプラグインの zip をダウンロードして、こちらのインポート手順に従ってください。 理由： プラグインを使うことで、デザインを Figma から AI に渡せます。

Part 2: Figma での作業

Step 4. コンポーネントをデザインします。 ボタン、入力欄、カードを Figma のコンポーネントとして作成します。命名規則 に従って、「Size=Large」や「State=Hover」のように名前を付け、色と間隔には Figma の変数を使います。 理由： 名前が明確だと、Frame-Relay がデザインを理解しやすくなります。変数を使うことで、正確な色やサイズをコードに反映できます。

Step 5. ファイルを確認します。 Frame-Relay プラグインを実行し、Lint タブを開きます。Check file をクリックします。リストに表示された問題を修正してから、もう一度確認します。 理由： デザインファイルのスペルチェックのようなものです。問題が厄介なコードになる前に見つけられます。

Step 6. キットをエクスポートします。 Export タブを開き、Export kit をクリックします。zip ファイルがダウンロードされます。 理由： この zip は、色、サイズ、コンポーネントとそれぞれの画像をひとまとめにした、デザインシステム一式です。

Part 3: アプリをセットアップする

Step 7. プロジェクトフォルダーを作成します。 コンピューターに新しいフォルダーを作成します。たとえば my-app のような名前にします。名前にはスペースではなくハイフンを使います。そのフォルダーを AI ツールで開きます。 理由： アプリのコードを置く場所が必要です。

Step 8. AI にアプリのセットアップを頼みます。 次の内容を AI ツールに貼り付けます。

Set up a Vite + React + TypeScript app in this folder, with Tailwind CSS v4 and the "@/" path alias pointing to src. Then run npm run build to confirm it works.

理由： Frame-Relay が扱える、空のアプリが作成されます。

Step 9. Frame-Relay をセットアップします。 AI ツールでターミナルを開き、次のように入力します。

npx @frame-relay/cli@beta init

質問には「はい」と答えます。 理由： アプリを確認し、デザインを受け入れられる状態にします。

Step 10. デザインを取り込みます。 末尾にスペースを付けて、次のように入力します。

npx @frame-relay/cli@beta sync --from

次に、Step 6 の zip ファイルをターミナルにドラッグし、Enter キーを押します。 理由： 箱を開くようなものです。Figma のコンポーネントを実際のコードに変換し、AI に「必ずこれを使い、独自のものを作らない」よう指示するルールを書き込みます。

Step 11. ヘルスチェックを実行します。

npx @frame-relay/cli@beta doctor

緑色のチェックマークが表示されます。 理由： 車の警告灯のようなものです。作業を始める前に、すべてが接続されていることを確認できます。

Part 4: AI で構築する

Step 12. AI に画面の構築を頼みます。 AI ツールで新しいチャットを開始し、必要なものを頼みます。たとえば、「デザインキットを使ってログインページを作ってください」と入力します。 理由： AI は構築する前にコンポーネントを参照するため、独自のボタンや入力欄を作るのではなく、既存のものを使います。

Step 13. アプリを確認します。 ターミナルで次のように入力します。

npm run dev

表示されたリンク（通常は http://localhost:5173）をブラウザーで開きます。 理由： AI が構築したページを表示し、Figma のデザインと比較できます。

Step 14. AI の作業を確認します。

npx @frame-relay/cli@beta check

理由： ランダムな色を使うなど、AI がルールに違反した箇所を見つけられます。問題が見つかった場合は、AI に「frame-relay check で見つかった問題を修正してください」と頼みます。

Part 5: その他

Step 15. ライブモードを使います（任意）。 AI に「Frame-Relay のライブモードを開始してください」と頼みます。6 桁のコードが表示されます。Figma でプラグインの Live タブを開き、コードを入力して Connect をクリックします。これで、Figma で任意のものを選択し、AI に「Figma で選択したものに合うものを作ってください」と頼めます。 理由： AI は Figma で選択したものをすぐに認識するため、まだエクスポートしていないデザインから構築できます。

Step 16. デザインを変更した場合。 Step 5、6、10 を繰り返して、再度チェック、エクスポート、同期を行います。 理由： コードを最新の Figma デザインに合わせた状態に保てます。生成されたコンポーネントを手作業で編集した場合、Frame-Relay はその編集内容を保持し、新しいバージョンをその隣に保存するため、作業内容を失うことはありません。

対応している AI ツール

sync は検出した各ツールのセットアップを書き込み、エージェントがすぐにキットを使い始められるようにします。

ツール	sync が書き込む内容
Antigravity	.agents/mcp_config.json と .agents/rules/frame-relay.md
OpenCode	opencode.json（マージし、ほかのキーは保持）と AGENTS.md
Cursor	.cursor/mcp.json と .cursor/rules/frame-relay.mdc
Claude Code	.mcp.json と CLAUDE.md

安定版のリリースまでは、パッケージは beta タグのみで公開されます。最も簡単なセットアップは、開発依存関係として一度インストールすることです：npm install -D @frame-relay/cli@beta。その後、sync はローカルインストールを使用するコマンドを書き込み、変更を加えずに MCP サーバーが起動します。

ドキュメント

ページ	内容
はじめに	空のフォルダーから AI がページを構築するまでの初回ガイドです。
コンセプト	キット、sync、ルールファイル、MCP、check、doctor、ライブモードについて説明します。
CLI コマンド	すべてのコマンド、フラグ、書き込まれるファイルについて説明します。
Figma プラグイン	Lint、Export、Live タブに加え、警告とアイコンのルールについて説明します。
ライブモード	ペアリング、Live タブ、ライブツール、セキュリティ、トラブルシューティングについて説明します。
MCP サーバー	エージェントが呼び出す 10 個のツール、リソース、クライアントのセットアップについて説明します。
キットの形式	フォルダーレイアウトとキット JSON ファイル内のすべてのフィールドについて説明します。
コンバーター	すべての警告コードを含め、Figma のデータがキットの仕様にどのように対応するかを説明します。
Figma の命名規約	エクスポートを整理された状態に保つ命名ルールについて説明します。
JSON スキーマ	マニフェスト、トークン、コンポーネントスキーマの安定した URL について説明します。

同じドキュメントが https://joseph-brendan.github.io/Frame-Relay/ にも公開されています。

コントリビューション

セットアップ、コマンド、ブランチの命名、リリースノートについては CONTRIBUTING.md をご覧ください。 セキュリティに関する報告先：SECURITY.md。収集する情報について：何もありません。PRIVACY.md をご覧ください。

ライセンス

MIT、著作権 (c) 2026 Joseph Brendan。