Open Design で参考画像を本物のページに変える（Gemini で無料）
Open Design の参考画像ワークフロー——気に入ったデザイン（Dribbble の作品や任意のサイトのスクリーンショット）を用意して放り込み、その視覚言語のまま Open Design に本物のページを作らせる。すべて Gemini CLI の無料枠で完全無料に動かせる。Compile Future の解説をベースに。
このガイドが扱うのは、Open Design の具体的で見過ごされがちなワークフローです：参考画像から始める。気に入ったデザイン——Dribbble の作品や任意のサイトのスクリーンショット——を見つけて放り込めば、Open Design がその視覚言語のまま本物のページを作ってくれます。しかもこのすべてを、コーディング agent の無料枠で無料に実行できます。本記事は Compile Future が動画で示した解説をベースに、現行リリースに合わせて書き直し・更新したものです。上の動画を見るか、このまま文章版をお読みください。
Open Design ワークスペース：作りたいものを記述し、モードを選べば、あとは agent がやってくれます。
Open Design とは？
Open Design は、オープンソースでローカルファーストのデザインプラットフォーム——自分のマシン上で動く Claude Design の代替です。最大の違いは、一つのモデルに縛られるのではなく、あなたがすでに使っているコーディング agent——Claude Code、Codex、Cursor、Gemini、OpenCode など——を駆動する点です。豊富なスキルとブランドデザインシステムのライブラリ（Airbnb、Apple、Cursor、Ferrari、Figma など多数）を同梱しているため、生成は汎用的なプロンプトからではなく、本物の美学から始まります。
- オープンソース、Apache-2.0——クローンする、セルフホストする、あるいは単にアプリをダウンロードする。
- ローカルで動作——プロジェクトはあなた自身のマシン上に存在します。
- どんなモデルでも——無料枠を含む。GPU は不要（モデルはあなたのハードウェアではなく、CLI 経由でクラウド上で動きます）。
ステップ 1——インストールして無料モデルを接続する
open-design.ai/download からインストーラ（macOS DMG または Windows .exe）をダウンロードするか、ソースから実行します。初回起動時に agent を選びます。Compile Future が Gemini CLI を使うのは、その無料枠が寛大だから（1 日あたりの無料リクエストが豊富）——だからワークフロー全体が無料で済みます：
- セットアップで Gemini を選びます。検出されない場合は、Gemini CLI をインストール（公式サイトのコマンド一つ）し、Google アカウントでログインします。
- 別のものがいい？検出された CLI ならどれでも動きますし、自分の API key を持ち込んでも構いません。
これが「GPU 不要」の理由です：モデルは CLI 経由でクラウド上で動くので、控えめなスペックのノート PC でも問題ありません。
ステップ 2——テキストプロンプトから作る（基本）
デフォルトのデザインシステムを設定し（Compile Future は大胆なものが好み）、Prototype を選んで名前を付け、最良の出力のために high fidelity を選びます。ブリーフを送ります。Open Design はいくつかのディスカバリー質問（単一ツール／ランディングページ／オールインワン？レスポンシブ？トーン？ブランドの背景？）とビジュアルの方向性（例：Vercel 風のミニマルな見た目）を尋ねたうえで、きれいな初版を作ります。アクセントカラーはページ上で直接調整できます。
プレビューでレンダリングされた本物の生成プロトタイプ——ダークで映画的なエージェンシーのランディングページ。
ステップ 3——参考画像ワークフロー（おいしいところ）
これがこの動画の価値といえるテクニックです。見た目を言葉で説明する代わりに、Open Design に見た目を見せるのです：
- 気に入ったデザインを見つける——インスピレーションを求めて Dribbble（例：「tools website」で検索）や任意の公開サイトを巡る。
- それのスクリーンショットを保存する。
- Open Design に戻り、free-form モードでプロジェクトを作成し、スクリーンショットを添付して、こうプロンプトする：“build my [site], use the design language from the image I shared.”
- ディスカバリー質問に答え、画像の UI に合わせるよう伝える。
Open Design は参考画像からブランド仕様を書き出し（それを表示して確認を求めます）、その視覚言語のままページを作ります——参考画像と同じレイアウトの質感、配色、書体を、あなたのコンテンツに適用します。欲しいものが見えているのに言葉にできないとき、オンブランドな結果を得る最速の方法です。
プラグインライブラリ：registry から直接スキルをインストール——アンチスロップのデザインスキルも含む。
ステップ 4——編集して公開する
平易な言葉で調整する——「remove the sign-in button」「adjust the card radius」——と、更新される様子が見られます。Source でコードを表示し、Share で ZIP、PDF、PowerPoint をダウンロードしたり、スタンドアロン HTML をエクスポートしたり、あるいはワンクリックで deploy to Vercel（Vercel token を貼り付けるだけ）して共有可能なリンクを得たりできます。
ヒント
- Gemini CLI の無料枠で無料に動かす（または無料枠のある任意の CLI）——サブスクリプション不要、GPU 不要。
- 見た目を思い描けるのに説明できないときは、参考画像を使う——Dribbble や任意のサイトのスクリーンショット。
- free-form モード + 「match the image」が、参考画像をぴたりと再現するプロンプトのパターンです。
- 作り始める前に、生成されたブランド仕様を確認して、方向性を正しくしておきましょう。
- 洗練された出力には high fidelity。平易な言葉での編集で反復しましょう。
FAQ
GPU は必要ですか？ いいえ。モデルは（クラウド上で）CLI 経由で動き、あなたのマシン上では動きません——普通のノート PC で十分です。
本当に無料で動かせますか？ はい——Gemini のような無料枠の CLI に向ければ、コストゼロでデザインを生成できます。有料のモデル／API を選んだ場合にのみ料金がかかります。
気に入った画像からデザインするには？ free-form モードを使い、スクリーンショットを添付して、その画像のデザイン言語を使うよう伝えます。ブランド仕様を抽出し、そのスタイルで作ってくれます。
無料でオープンソースですか？ はい——Apache-2.0。ローカルで無料に動かせます。料金がかかるのは、接続したモデル／メディアの使用分のみです。
この文章ガイドは Compile Future の解説をベースにしています。上の完全版動画を見て、より多くの無料 AI ワークフローのためにCompile Future をチャンネル登録してください。