デザインのための Gemini CLI。

Gemini CLI とは実際に何か

Gemini CLI は、Google がターミナル向けに提供するオープンソース（Apache-2.0）の AI エージェントです。リポジトリを読み取り、ファイルを編集し、シェルコマンドを実行し、Web を取得し、Google Search で回答の裏付けを取ることもできます——単に行を補完するのではなく、自然言語のタスクから作業を計画し検証します。同じエンジンは VS Code 内の Gemini Code Assist エージェントの基盤にもなっています。

デザイン作業では、二つの特性が際立ちます。モデルがネイティブにマルチモーダルであるため、スクリーンショットを渡すと実際のレイアウトについて推論できること。そしてコンテキストウィンドウが最大 100万トークンに達し、デザインシステム・コンポーネントライブラリ・参照セット全体を要約して切り詰めることなく一度に保持できることです。

• コンテキストファイル: Gemini CLI は永続的なプロジェクトコンテキストとして GEMINI.md ファイルを読み込みます——デザイン規約、tokens、レビュー用チェックリストを記述する自然な場所です。個人設定とチーム設定がその上に重なります。
• 組み込みツール + MCP: ファイル・シェル・Web 取得・Google Search のツールを標準で備え、~/.gemini/settings.json で設定する MCP サーバーをサポートします——たとえばライブの Figma ファイルのような外部コンテキストを追加できます。
• 無料で始められる: 個人の Google アカウントでサインインすれば、潤沢な無料枠の Gemini リクエストが使えます。Gemini API キーを持ち込んだり、Vertex AI を使ったりもできます。

• ベンダー：Google
• 認証情報：Google アカウント（無料枠）、または AI Studio の Gemini API キー（BYOK）、もしくは Vertex AI
• ライセンス：Apache-2.0、オープンソース

マルチモーダルなモデルと巨大なコンテキストがデザインに適する理由

Gemini CLI のデザイン上の強みは二つのモデル特性に由来します——ただし、どのエージェントでも同じく、センスは人間が供給しなければなりません。

• 強力なマルチモーダル理解: Gemini モデルはネイティブにマルチモーダルなので、エージェントは参照スクリーンショットをよく読み取ります——文章の説明から推測するのではなく、レンダリングした出力を画像と照らし合わせます。
• 100万トークンのコンテキストウィンドウ: 大きなコンテキストはデザインシステム全体・tokens・多数の参照状態を一度に収められることを意味します。そのためエージェントは場当たり的なスタイルを発明するのではなく、あなたの実際のプリミティブを再利用します。
• GEMINI.md の規約: GEMINI.md（と Figma MCP サーバー）が、あなたの tokens・コンポーネント・実際の仕様へエージェントを向けます。これにより既定の見た目ではなく、ブランドに沿って作業します。

教訓は、どのエージェントも教えてくれるものと同じです：Gemini CLI は既定でセンスを持っていません。制約を与えたときに——デザインシステム、美的な skill、具体的な参照を——良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化しています。だからこそ両者が噛み合うのです（詳細は後述）。

デザイン作業向けに Gemini CLI をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Gemini CLI までの全行程はこちらです。

# 1. Install Gemini CLI (Node 20+)
npm install -g @google/gemini-cli
# or run without installing: npx https://github.com/google-gemini/gemini-cli

# 2. Start it in your project and authenticate on first run
cd your-project
gemini            # sign in with your Google account, or set GEMINI_API_KEY

# 3. Generate project context
/init             # scaffolds a GEMINI.md for this project

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it under "mcpServers" in ~/.gemini/settings.json

• デザインルールを記述する: tokens・プリミティブ・規約を GEMINI.md に記述し、Gemini をそこへ向けます。これにより、没個性な既定の見た目に流れず、ブランドに合った出力になります。
• ブラウザ検証を追加する: Playwright またはブラウザ MCP を組み込み、Gemini が本物のブラウザでレンダリングして、ビルドが通ったことだけを確認するのではなく、各ブレークポイントで出力を確認できるようにします。

スクリーンショットから UI へのワークフロー

Gemini CLI で最もレバレッジの高いデザインループは、参照画像を動作するレスポンシブな UI に変換し、一致するまで反復することです——マルチモーダルモデルを活かして、出力を参照画像と照らし合わせます。

1. 手元にある最も明確なビジュアル参照から始めましょう——そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
2. プロンプトでは具体的に書きましょう。曖昧なプロンプトは、強力なモデルを使っても没個性な UI を生みます。
3. デザインシステムと規約を GEMINI.md に保ち、tokens と正規のプリミティブがどこにあるかを Gemini に伝えます。
4. 開発サーバーを起動し、Gemini に本物のブラウザでレンダリングさせ、ブレークポイントへリサイズして結果を確認させます。
5. Gemini に実装をスクリーンショットと照らし合わせさせて反復します——単にビルドが通ることを確認するのではなく。

@ で画像を参照してプロンプトに添付し、具体的な制約を与えます：

gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from GEMINI.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

プロンプトは小さく焦点を絞り、良い反復はコミットし、悪い反復はリバートします（リバートしたら Gemini に伝えます）。こうすれば各パスがきれいなベースの上に積み上がります。

GEMINI.md、MCP、拡張機能

三つの拡張ポイントが、持続的なデザイン作業に Gemini CLI を実用的にします。そしてその三つとも、オープンなデザインワークフローにきれいに対応します。

• GEMINI.md のコンテキスト: プロジェクトのルールはリポジトリ直下の GEMINI.md に置かれます（グローバル層・チーム層あり）。毎回の実行で読み込まれる、デザイン規約の恒久的な置き場所です。
• MCP サーバー: MCP サーバーは ~/.gemini/settings.json で設定します——デザインコンテキストや外部ツール（最も関連性が高いのは Figma MCP サーバー）を持ち込む、可搬性の高い方法で、Gemini に限らず複数のエージェントをまたいで機能します。
• 拡張機能と組み込みツール: Gemini CLI の拡張機能と、組み込みの Google Search・ファイル・シェル・Web 取得ツールによって、ターミナルを離れることなく参照を集め、検証ループを回せます。

これらは可搬で、複数エージェント対応の機能です——まさに Open Design が、プロジェクトごとに作り直すのではなくオーケストレーションするために作られた類のものです。

デザインにおける Gemini CLI vs Codex vs Claude Code vs Cursor

デザイン作業に単一の勝者はいません——各エージェントには異なる強みがあり、熟練したチームはそれらを組み合わせて使います。公平にまとめると：

コミュニティで繰り返し下される結論は、センスは人間から来るというものです：どれも skill・参照・制約がなければ没個性な美的感覚に流れます。それこそが本当に解くべき問題であり——モデルの形をした問題ではなく、デザインツールの形をした問題です。

落とし穴と、「AI っぽさ」の見た目を避ける方法

AI が生成したデザインへの最も一般的な不満は、没個性に見えるというものです——柔らかいグラデーション、浮いたパネル、大きすぎる角丸、大げさな影、「AI が作ったと一目でわかる」Inter とパープルの雰囲気。報告されている他の問題には、崩れたモバイルレイアウトや、指示が UI コピーに漏れ出すことなどがあります。これらはどれも Gemini CLI に固有のものではありません。厳選されたデザインコンテキストなしにどんなエージェントでも動かせば起きることです。

• 美的な skill を追加する: 厳選されたデザイン skill は、既定の見た目ではなく本物の方向性にエージェントを踏み込ませます。
• 本物のブラウザで検証する: マルチモーダルモデルを使って各ブレークポイントでレンダリングと自己チェックを行い、モバイルでレイアウトが静かに崩れないようにします。
• tokens と参照を供給する: 実際のデザイン tokens と参照スクリーンショットは、出力品質に対する最大のレバーです。
• ルールを GEMINI.md に記述する: 「ヒーローカード禁止、書体は最大 2 つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。

どの対策も、エージェントに厳選されたデザインコンテキストを与えることに尽きる点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持することこそ、Open Design が取り除く労苦です。

Open Design の中で Gemini CLI を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めてきた、オープンソースのデザインレイヤーです。Gemini CLI をファーストパーティのアダプターとして扱い、厳選された skill とデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包みます——そのため、Gemini を優れたものにするデザインコンテキストが最初の実行から揃っており、毎回手作業で組み立てる必要がありません。どちらもオープンソースかつローカルファーストであり、この組み合わせは自然にフィットします。

1. Open Design をインストールし、エージェントとして Gemini CLI を選びます。
2. Google アカウントまたは Gemini API キー（BYOK）で認証します——認証情報はあなたのマシンに留まり、当社を経由してプロキシされることは決してありません。
3. デザインシステムと skill を選び、一貫したセンスでデック、プロトタイプ、ランディングページを生成します。
4. すべての成果物と DESIGN.md ファイルは、ホスト型のクラウドではなく、あなた自身のリポジトリに置かれます。

同じ Gemini CLI エージェント、同じキー——加えてその周りに、本物で、可搬で、オープンソースのデザインワークフロー。ローカルファーストかつ Apache-2.0 なので、あなたの作業や認証情報がマシンの外へ出ることは一切ありません。

よくある質問

1. 01 Gemini CLI は本当にデザイン作業ができますか？ +

   できます——美的な skill、デザインシステム、実際の参照画像をコンテキストに与えれば、Gemini CLI は本番品質のレスポンシブな UI を生み出し、その強力なマルチモーダルモデルが出力を参照と照らし合わせて検証します。そのコンテキストがないと没個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 Gemini CLI でデザインするには支払いが必要ですか？ +

   いいえ——Google アカウントでサインインすれば潤沢な無料枠が使え、Gemini API キー（BYOK）を持ち込んだり Vertex AI を使ったりもできます。Open Design はいずれの場合も認証情報をプロキシしません。

3. 03 Gemini CLI がとりわけデザインに向いている理由は何ですか？ +

   二つあります：モデルが強力にマルチモーダルなので参照スクリーンショットをよく読み取れること、そして 100万トークンのコンテキストがデザインシステムと参照セット全体を一度に保持できること。どちらも役立ちますが——センスは、あなたが供給するデザインシステム、skill、参照から生まれます。

4. 04 フロントエンドのデザインには Gemini CLI と Claude Code のどちらが良いですか？ +

   どちらも強力です。Claude Code は具体的で、コードベースを理解したデザイン判断で知られています。Gemini CLI の強みはマルチモーダル理解に加え、巨大なコンテキストと無料枠です。多くのチームは両方を使います——Open Design なら、デザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Gemini CLI を Figma にどう接続しますか？ +

   ~/.gemini/settings.json の mcpServers に Figma MCP サーバーを追加します。すると Gemini は実際のデザインコンテキスト——コンポーネント、変数、レイアウトデータ——を取り込めるため、生成されるコードは近似ではなくソースに一致します。

6. 06 Open Design は Google と提携していますか？ +

   いいえ。Gemini CLI は Google の製品であり、Open Design はそれをファーストパーティのアダプターとしてサポートする独立したオープンソースプロジェクトです。Gemini は Google の商標です。

7. 07 私のファイルと認証情報は安全ですか？ +

   はい——Open Design はローカルファーストで Apache-2.0 です。あなたのファイル、成果物、DESIGN.md はあなた自身のリポジトリに留まり、Google の認証情報はあなたのエージェントが直接使用し、Open Design のサーバーを経由することは決してありません。