デザインのための GitHub Copilot CLI。

GitHub Copilot CLI とは実際に何か

GitHub Copilot CLI は GitHub のターミナルネイティブなコーディングエージェントです。リポジトリを読み取り、ファイルを編集し、シェルコマンドを実行し、issue・プルリクエスト・リポジトリといった GitHub のコンテキストと直接連携します。認証は既存の GitHub アカウントで行います。GitHub の Copilot コーディングエージェントと同じエージェントハーネスを基盤としているため、行を補完するだけでなく、複雑なタスクを計画し反復します。2025 年 9 月に始まったパブリックプレビューを経て、2026 年 2 月に一般提供に到達しました。

デザイン作業では二つの特性が際立ちます。カスタム指示ファイル — .github/copilot-instructions.md のリポジトリ全体ルールに加えて AGENTS.md — を読み取るため、あなたのデザイン規約が実行のたびに自動的に取り込まれます。そして複数の基盤モデルプロバイダーをサポートするため、/model コマンドでタスクごとに、ある UI について最もよく推論するモデルへ切り替えられます。

• 指示ファイル: Copilot CLI は .github/copilot-instructions.md のリポジトリ指示、.github/instructions 配下のパス固有ファイル、そして AGENTS.md を読み取ります。ここがデザイン規約・トークン・レビューチェックリストをエンコードする自然な場所です。
• 組み込みツール＋MCP: GitHub の MCP サーバーを組み込みで備え、ファイルやシェルのツールを実行します。/mcp add（設定は ~/.copilot 配下の mcp-config.json に保存）でカスタム MCP サーバーを追加し、ライブの Figma ファイルのような外部コンテキストを取り込めます。
• モデルの選択: /model コマンドで Anthropic、OpenAI、Google のフロンティアモデルから選べます。タスクごとに切り替えられ、すべて既存の Copilot サブスクリプションで動きます。

• ベンダー：GitHub
• 認証情報：有効な GitHub Copilot サブスクリプション（Pro、Pro+、Business、または Enterprise）
• インストール：npm install -g @github/copilot を実行し、その後 copilot を起動

なぜリポジトリの指示とモデル選択がデザインに合うのか

Copilot CLI のデザイン上の強みは二つの特性から来ます。ただし、どのエージェントでも同じく、センス（taste）は人間が供給しなければなりません。

• リポジトリと共に旅する規約: Copilot CLI は .github/copilot-instructions.md と AGENTS.md を自動で読むため、あなたのトークン・プリミティブ・レビュールールが実行のたびにコンテキストに入ります。エージェントは既定の見た目ではなく、ブランドに沿って作業します。
• タスクごとに適切なモデルを選ぶ: Anthropic、OpenAI、Google にまたがるモデル選択により、あるレイアウトについて最もよく推論するモデルを選び、次のタスクでは別のモデルへ切り替えられます。ワークフローを変えずに。
• MCP 経由で本物の仕様を: 組み込みの GitHub MCP サーバーに加え、Figma MCP サーバーがエージェントをあなたのトークン・コンポーネント・本物の仕様へ向けるので、近似ではなくソースから構築します。

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

デザイン作業のために Copilot CLI をゼロからセットアップする

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

# 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot

# 2. Start it in your project and authenticate on first run
cd your-project
copilot           # run /login and follow the prompts to sign in

# 3. Choose a model for the task
#    inside the session:
/model            # pick a frontier model from Anthropic, OpenAI, or Google

# 4. Add custom instructions and the Figma MCP server (optional)
#    write .github/copilot-instructions.md or AGENTS.md
/mcp add          # add the Figma MCP server for design handoff

• デザインルールをエンコードする: トークン・プリミティブ・規約を .github/copilot-instructions.md または AGENTS.md に入れます。そうすれば出力が平凡な既定の見た目に落ちるのではなく、ブランドに合致します。
• ブラウザ検証を追加する: Playwright またはブラウザ MCP を接続し、Copilot が本物のブラウザで描画してブレークポイント横断で出力を確認するようにします。ビルドが通ることを確認するだけで終わらせないために。

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

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

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

Copilot を参照画像に向け、具体的な制約を与えます。実行前に、各ファイル編集やコマンドをあなたの承認のためにプレビューします：

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

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

カスタム指示、MCP、拡張機能

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

• カスタム指示: リポジトリのルールは .github/copilot-instructions.md（および .github/instructions 配下のパス固有ファイルと AGENTS.md）に存在します。これらはあなたのデザイン規約の永続的な置き場であり、実行のたびに自動的に取り込まれます。
• MCP サーバー: Copilot CLI は GitHub の MCP サーバーを組み込みで備え、/mcp add（設定は ~/.copilot 配下の mcp-config.json に保存）でカスタムサーバーを追加できます。これはデザインコンテキスト、最も関連が深いものとしては Figma MCP サーバーを持ち込むためのポータブルな手段で、Copilot に限らず複数のエージェント間で機能します。
• 専門エージェントと組み込みツール: Copilot CLI の専門モード — コードベースの探索、ビルドとテストの実行、変更レビュー、計画用 — に加え、ファイルとシェルのツールにより、ターミナルを離れずに参照素材を集め、検証ループを回せます。

これらはポータブルでマルチエージェント対応の機能であり、まさに Open Design がプロジェクトごとに作り直すのではなくオーケストレーションするために作られたものです。

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

デザイン作業に唯一の勝者はいません。各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると：

コミュニティで繰り返される結論は、センスは人間から来るというものです。スキル・参照素材・制約がなければ、どれも平凡な美的傾向に落ちます。それこそが解くべき本当の課題であり、それはモデルの形ではなくデザインツールの形をしています。

落とし穴と「AI スロップ」感を避ける方法

AI 生成デザインに対する最も一般的な不満は、平凡に見えるというものです。ぼんやりしたグラデーション、浮いたパネル、過大な角丸、大げさな影、「AI が作ったと叫ぶ」ような Inter とパープルの雰囲気。報告されている他の問題には、崩れたモバイルレイアウトや、指示文が UI コピーに漏れ出ることなどがあります。これらはどれも Copilot CLI 固有のものではなく、どのエージェントであれキュレーションされたデザインコンテキストなしで動かしたときに起こることです。

• 美的スキルを追加する: キュレーション済みのデザインスキルは、エージェントに既定の見た目ではなく本物の方向性へ踏み込ませます。
• 本物のブラウザで検証する: ブラウザ MCP でブレークポイント横断に描画・自己チェックし、モバイルでレイアウトが静かに崩れないようにします。
• トークンと参照素材を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する単一で最大のレバーです。
• カスタム指示にルールをエンコードする: 「ヒーローカードは禁止、書体は最大 2 種、ブランド優先の階層」といった様式ルールを .github/copilot-instructions.md または AGENTS.md に入れます。エージェントが実行のたびに読む場所です。

どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることに尽きる点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持すること、それこそ Open Design が取り除く骨折り仕事です。

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

Open Design は、上記のワークフローが繰り返し求めてくるオープンソースのデザイン層です。GitHub Copilot CLI をファーストパーティのアダプターとして扱い、キュレーション済みのスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルなデスクトップ UI でそれを包みます。だから Copilot を良くするデザインコンテキストが、毎回手作業で組み立てるのではなく、最初の実行から揃っています。Open Design は独立しており、オープンソース（Apache-2.0）で、ローカルファーストです。だからこの組み合わせは噛み合います。エージェントが作業をこなし、あなたのファイルと認証情報はあなたのものに留まります。

1. Open Design をインストールし、エージェントとして GitHub Copilot CLI を選びます。
2. あなたの GitHub Copilot サブスクリプションで認証します。認証情報はあなたのマシンに留まり、私たちを経由してプロキシされることはありません。
3. デザインシステムとスキルを選び、一貫したセンスでデッキ・プロトタイプ・ランディングページを生成します。
4. すべての成果物と DESIGN.md ファイルは、ホスト型クラウドではなくあなた自身のリポジトリに存在します。

同じ Copilot CLI エージェント、同じサブスクリプション。そこに本物でポータブルなオープンソースのデザインワークフローが加わります。Open Design はローカルファーストで Apache-2.0 なので、あなたの作業や認証情報に関する何も、マシンの外へ出ません。

よくある質問

1. 01 GitHub Copilot CLI は本当にデザイン作業をこなせますか？ +

   はい。美的スキル、デザインシステム、そして本物の参照画像をコンテキストに入れれば、Copilot CLI は本番品質のレスポンシブな UI を生み出し、出力を参照に対して最もよく検証できるモデルを選べます。そのコンテキストがないと平凡な見た目に落ちがちで、それこそ Open Design が埋めるギャップです。

2. 02 Copilot CLI でデザインするのにサブスクリプションは必要ですか？ +

   はい。Copilot CLI は有効な GitHub Copilot サブスクリプション（Pro、Pro+、Business、または Enterprise）で動きます。BYOK ではありません。認証は GitHub アカウントで行います。Open Design はあなたの認証情報を決してプロキシしません。サブスクリプションはあなたのエージェントが直接使います。

3. 03 Copilot CLI が特にデザインに向いている理由は？ +

   二つあります。リポジトリの指示と AGENTS.md を自動で読むため、デザイン規約がリポジトリと共に旅すること。そして Anthropic、OpenAI、Google のフロンティアモデルをタスクごとに切り替えられること。どちらも役立ちますが、センスは依然としてあなたが供給するデザインシステム、スキル、参照素材から生まれます。

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

   どちらも強力です。Claude Code は具体的でコードベースを把握したデザイン判断で知られ、Copilot CLI の強みはプロバイダーをまたぐモデル選択と、すでに持っているかもしれないサブスクリプションでの深い GitHub 統合です。多くのチームは両方を使います。Open Design なら、デザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Copilot CLI を Figma に接続するには？ +

   /mcp add コマンドで Figma MCP サーバーを追加します。設定は ~/.copilot 配下の mcp-config.json に保存されます。すると Copilot は本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めるので、生成されるコードは近似ではなくソースに合致します。

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

   いいえ。GitHub Copilot CLI は GitHub の製品です。Open Design は独立したオープンソースプロジェクトで、それをファーストパーティのアダプターとしてサポートします。GitHub Copilot は GitHub, Inc. および Microsoft の商標です。

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

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