使い方 — Mothership | 木下スタジオ

自分のAI

Claude / Gemini / Codex のいずれか（Claudeが実績◎）。あなたのサブスクで動く＝FigmaのAIクレジット不要。ログイン済みに（例：claude --version が通ればOK）。別途API課金なし。

Figma

生成先。Mothershipプラグインをネイティブ生成に使う。

Node.js

依存ゼロのrelayを1回セットアップ。node setup.js で以降ログイン時に自動起動。

Setup

3分で、つなぐ。

プラグインを入れる

Figma Community で Mothership を追加する。

relay一式を入手

ターミナルで clone して依存を入れる（Code → Download ZIP でも可）。

git clone https://github.com/kinoshitastudio/mothership-relay.git
cd mothership-relay
npm install

relayを常駐させる（初回1回）

ターミナルで1回だけこれを実行。以降はログイン時に自動起動（端末を開き続ける必要なし・落ちても自動再起動）。

node setup.js
# ✅ ログイン自動起動を登録して今すぐ起動（mac/Windows）
# やめる時: node setup.js --uninstall ／ 状態確認: node setup.js --status
# 1回だけ手動で動かすなら: node relay.js

プラグインで「接続」

Figmaでプラグインを実行 → http://localhost:4575 の横の接続を押す。緑の「接続中」になればライブ連携開始。

話しかける

パネルのチャットに「シンプルな料金表を3プランで作って」。claudeが原本を編集し、Figmaにネイティブ生成される。以後、原本が変わるたび自動で反映。

Mothershipのパネルでチャットし、料金表が本物のレイヤーとしてFigmaに生成された画面

↑ パネルに話しかけた結果。料金表が本物のレイヤーとしてFigmaに生成されている。

うまくいかない時

・パネルが「relay待機中…」→ relayが起動していないだけ。フォルダ内で node setup.js --status で確認、未起動なら node setup.js。
・起動時に ⚠️ claude CLI が見つかりません → Claude Code を入れてログイン（Pro/Max）。claude --version が通ればOK。
・URL→Figma が動かない → npm install（playwright）を実行。

URLから再現・ NEW

気になるサイトを、
叩き台にする。

URLを渡す

チャットに「https://example.com/ のKVを再現して」。スマホ表示なら「スマホで」、特定箇所なら「料金表セクションを」と添える。

自動で採取 → 再構成

relayがページを読み取り、claudeが算出スタイルどおりに 編集可能なレイヤーで Figma に再構成。写真も実画像で入る。ターミナル操作は不要。

詰める・貯める

出た叩き台を studio で詰め、ライブラリへ。再現は自動でライブラリに保存されるので消えない。

URLから再現したサイトのKVがMothershipのライブラリに並んでいる画面（Digital Grid・Naito & Otsuka・Nothing 等）

↑ URLから再現したKVがライブラリに蓄積。算出スタイルどおりのレイアウト、写真も実画像で。動画ヒーローはプレースホルダ、専有フォントは代替に（できる範囲を正直に）。

Three faces

ひとつのパネルで、作って・詰めて・貯める。

💬

チャット

話しかけてデザインを生成・修正。claude -p が mothership.json を編集 → Figmaへ。大きい画面でも開ける。

✎

詰める（studio）

参照画像を半透明で重ねて当て込み、要素をドラッグ・数値で調整。余白とタイポを詰め、整ったらFigmaへ書き出し。参照画像はデザインごとに紐づく。

▤

ライブラリ

詰め切ったパターンをサムネで一覧。「Figmaに送る」で原本に流し込み、ネイティブ生成。貯めるほど速くなる。

FAQ

よくある質問

チャットはターミナルの会話と同じ？: 別です。チャットは毎回あたらしい claude -p を起動します。会話の記憶は持ちませんが、常に最新の mothership.json を読むので「見出しを大きく」のような修正は効きます（原本が共有の記憶）。
API課金は？: 不要です。あなたが選んだAIのサブスク（Claude Pro / Max など）で動きます。relayとプラグインは自前のAPIを呼ばず、開発者側に課金は乗りません＝FigmaのAIクレジットも不要。
写真はどうするの？: Mothershipは写真を描きません。AIが画像生成プロンプトを書き、外部（DALL·E / Gemini / MJ など）で作って差す分業です。写真はなんとでもなる——母艦の価値は機能でなく“立て付け”（自分のAIで動く・原本を所有・ロックの外）にあります。
生成したものは編集できる？: できます。SVGの塊ではなく、テキスト・オートレイアウト・角丸まで本物のネイティブレイヤーとして建つので、そのままFigmaで編集できます。