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

🛠️

現在、Figma Community へ申請中です。 公開までは下記の「マニフェストから読み込む（開発モード）」でご利用いただけます。公開後はワンクリックで導入できるようになります。

Pro または Max。これがデザインを翻訳する頭脳。別途APIは不要。

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

依存ゼロのrelayを動かすだけ。node relay.js。

Setup

3分で、つなぐ。

Figma → メニュー → Plugins → Development → Import plugin from manifest… で mothership/manifest.json を選ぶ。

ターミナルで、依存ゼロの中継サーバーを立ち上げる。

cd mothership
node relay.js
# ▲ Mothership relay → http://localhost:4575

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

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

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

Three faces

💬

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

✎

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

▤

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

FAQ

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