デザインのための OpenCode。

OpenCode とは実際に何か

OpenCode は、SST（Anomaly Innovations）のチームが保守する、ターミナル向けに作られたオープンソースの AI コーディングエージェントです。リポジトリを読み、コマンドを実行し、ファイルを編集し、大規模言語モデルと対話します — しかしベンダーに縛られたエージェントと違い、自前のモデルは出荷しません。好きなプロバイダーとモデルを指定し、あなた自身のキーを持ち込みます。

ターミナル UI（TUI）として動作し、同じエンジンの上にデスクトップアプリと IDE 拡張機能が乗っています。内部ではクライアント/サーバーアーキテクチャを使っているため、作業を行うエージェントは、あなたがそれを操作する面から切り離されています。組み込みの 2 つのエージェント — build と plan — は Tab キーで切り替わります。

• モデル非依存: モデルとプロバイダーはオープンなカタログ models.dev から来ます。opencode.json で provider/model-id の文字列により構成し、読み込みたくないプロバイダーは無効化できます — そのため同じデザインワークフローが Anthropic、OpenAI、Google、OpenRouter、ローカルモデルなどで動きます。
• 指示ファイル: OpenCode はプロジェクト内の AGENTS.md ファイル（ツール横断の標準で、CLAUDE.md とも互換）をプロジェクトルールとして読み込みます — デザインの規約を記述する自然な場所です。/init を実行すると 1 つ生成されます。
• 拡張可能: LSP 連携、MCP サーバー、テーマ、キーバインド、カスタムコマンドに加え、コラボレーションのための共有可能なセッションリンクもサポートします。

• メンテナー: SST / Anomaly Innovations（オープンソースプロジェクト）
• 認証情報: あなた自身のモデルプロバイダー API キー — BYOK、ベンダーロックインなし
• ライセンス: MIT、オープンソース

なぜオープンで任意モデルのエージェントがデザイン作業に合うのか

OpenCode は、ベンダーエージェントのような単一の「デザインモデル」を持っていません — そしてそれが要点です。モデル非依存でオープンなので、いま最もフロントエンドに優れたモデルで同じデザインワークフローを動かし、あとで入れ替え、あるいはローカルモデルへフォールバックすることが、セットアップを一切変えずにできます。

しかしモデルの選択だけではセンスは手に入りません。どのコーディングエージェントとも同じで、制約を与えない限り OpenCode はありきたりな UI を生み出します。良いデザイン出力は、あなたが与える 3 つの入力から生まれます。

• デザインシステム: エージェントが再利用する本物の tokens、プリミティブ、規約。これにより出力がありきたりな見た目に落ち着かず、ブランドに沿ったものになります。
• 美的な skill: 本物のセンスを徹底する厳選された skill — 抑制されたモーション、ブランド優先の階層、最大 2 つの書体と 1 つのアクセントカラー — そして構築前にエージェントに方向性をコミットさせます。
• 具体的なリファレンス: 実際のリファレンス画像と複数の状態（デスクトップとモバイル、ホバー、空、ローディング）であり、1 枚のヒーローショットではありません。

教訓: OpenCode はモデルの自由を与えてくれますが、センスは依然として厳選されたデザインコンテキストから生まれます。Open Design はまさにそれらの入力をパッケージ化しており、だからこそ両者は噛み合うのです — どちらもオープンソースでローカルファーストです（詳細は後述）。

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

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

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• デザインルールを記述する: tokens、プリミティブ、規約を AGENTS.md（またはそこから参照される DESIGN.md）に書き、出力がありきたりな見た目に落ち着かず、ブランドに沿ったものになるようにします。opencode.json の instructions オプションは、グロブによって追加のルールファイルを指せます。
• 有能なモデルを選ぶ: OpenCode はモデル非依存なので、デザインパスにはいま最もフロントエンドに強い provider/model を選び — ワークフローの残りはそのままに保ちます。

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

どのエージェントでも最も効果の高いデザインのループは、リファレンス画像を動作するレスポンシブな UI に変え、一致するまで反復することです。OpenCode でも同じ 5 ステップの形が当てはまります。

1. 手元にある最も明確なビジュアルリファレンスから始めましょう — そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
2. プロンプトでは具体的に。曖昧なプロンプトはありきたりな UI を生みます。
3. デザインシステムを用意し、tokens と正規のプリミティブがどこにあるか（AGENTS.md 内）を OpenCode に伝えます。
4. dev サーバーを動かし、エージェントに実際のブラウザで描画させ、結果を確認するためにブレークポイントへリサイズさせます。
5. OpenCode に実装をスクリーンショットと照合し直させて反復します — 単にビルドが通ることを確認するだけにしないようにします。

TUI で @ を使ってファイルを参照すると作業ディレクトリのあいまい検索ができ、先頭に ! を付けてシェルコマンドをインラインで実行し、/ コマンドでアクションを駆動します。そのうえで具体的な制約を添えてプロンプトを出します:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

プロンプトを小さく焦点を絞って保ち、良い反復はコミットし、悪い反復は元に戻す（戻したことを OpenCode に伝える）ことで、各パスがクリーンなベースの上に積み上がるようにします。

AGENTS.md、MCP、共有可能なセッション

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

• AGENTS.md ルール: プロジェクトルールはリポジトリルートの AGENTS.md（またはグローバルルールとして ~/.config/opencode/AGENTS.md）に置きます。それはデザインの規約の恒久的な置き場であり、毎回の実行で読み込まれ、他のエージェントが使う CLAUDE.md ファイルとも互換です。
• MCP サーバー: OpenCode はローカル（コマンド）とリモート（URL）の両方の MCP サーバーをサポートし、mcp キーの下で構成します — OpenCode だけでなくエージェント横断で機能する、デザインコンテキストや外部ツールを取り込むためのポータブルな方法です。
• 共有可能なセッション: /share コマンドはコラボレーションやレビューのために会話への公開リンクを作り、/unshare がそれを取り消します — デザインパスへのフィードバックを得るのに便利です。

これらはポータブルでマルチエージェントな機能です — まさに Open Design が、プロジェクトごとに再作成するのではなく、編成するために作られたものです。

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

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

コミュニティで繰り返される結論は、センスは人間から生まれるということです: どれもが、skills・リファレンス・制約がなければありきたりな美意識へと落ち着きます。それこそが解くべき本当の問題であり — それはモデルの形ではなくデザインツールの形をしています。だからこそ OpenCode のようなオープンなエージェントは、オープンなデザインレイヤーと非常に相性が良いのです。

落とし穴、そして「AI スロップ」っぽい見た目を避ける方法

AI 生成デザインへの最もよくある不満は、ありきたりに見えるというものです — 柔らかいグラデーション、浮いたパネル、過大な角丸、ドラマチックな影、「いかにも AI が作りました」と叫ぶような Inter と紫の雰囲気。ほかにも、モバイルレイアウトの崩れや、指示が UI のコピーに漏れ出す問題が報告されています。これらはどれも OpenCode に固有のものではありません。どのエージェントでも、厳選されたデザインコンテキストなしに動かしたときに起こることです。

• 美的な skill を追加する: 厳選されたデザイン skill は、エージェントにデフォルトの見た目ではなく本物の方向性へコミットさせます。
• 実際のブラウザで検証する: ブレークポイントをまたいで描画と自己チェックをし、レイアウトがモバイルで黙って崩れないようにします。
• tokens とリファレンスを供給する: 本物のデザイン tokens とリファレンスのスクリーンショットは、出力品質に対する最大の単一のレバーです。
• ルールを AGENTS.md に記述する: 「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。

どの対策も、どのモデルを動かすかに関係なく、エージェントに厳選されたデザインコンテキストを与えることが要だと気づくでしょう。そのコンテキストをプロジェクトごとに手作業で維持する手間こそ、Open Design が取り除くものです。

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

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

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

同じ OpenCode エージェント、同じモデルの自由 — それに加えて、それを取り巻く本物でポータブルなオープンソースのデザインワークフロー。ローカルファーストで Apache-2.0 なので、あなたの作業も認証情報も、マシンの外へ出ることはありません。

よくある質問

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

   はい — 美的な skill、デザインシステム、本物のリファレンス画像をコンテキストに与えれば、OpenCode は本番品質でレスポンシブな UI を生み出し、ブラウザで検証できます。モデル非依存なので、いま最もフロントエンドに優れたモデルを動かせます。その厳選されたコンテキストがなければありきたりな見た目に落ち着きがちで、それこそ Open Design が埋めるギャップです。

2. 02 OpenCode でデザインするにはどのモデルを使うべきですか？ +

   好きなものを — OpenCode は models.dev 経由でプロバイダー非依存なので、Anthropic、OpenAI、Google、OpenRouter、ローカルモデルを同じワークフローの背後で動かし、いつでも切り替えられます。デザイン出力の品質は、モデル単独よりも、あなたの skill、デザインシステム、リファレンスにはるかに左右されます。

3. 03 Open Design は OpenCode（SST）チームが作っていますか？ +

   いいえ。Open Design は OpenCode をエージェントとして統合する、独立したオープンソースプロジェクトです。OpenCode を、ローカルファーストでオープンな skill とデザインシステムのライブラリで補完します。

4. 04 OpenCode でデザインするには特別なサブスクリプションが必要ですか？ +

   いいえ — OpenCode は BYOK です。あなた自身のモデルプロバイダー API キーを持ち込み、Open Design があなたの認証情報をプロキシすることはありません。ベンダーロックインはありません。

5. 05 フロントエンドデザインには OpenCode、Codex、Claude Code のどれがよいですか？ +

   どれも強力で、多くのチームがそれらを重ねて使います。OpenCode の強みは完全にオープンソースでモデル非依存であること、Codex は委任されたサンドボックス化ビルドに優れ、Claude Code は具体的でコードベースを踏まえたデザイン判断で知られます。Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

6. 06 デザインコンテキストのために OpenCode をどう拡張しますか？ +

   ルールを AGENTS.md に記述し、ポータブルなツールやデザインコンテキストのために mcp キーの下に MCP サーバーを追加し、レビューには共有可能なセッションを使います。Open Design は厳選された skill とデザインシステムのライブラリを提供するので、プロジェクトごとのセットアップを省けます。

7. 07 Open Design は OpenCode または SST と提携していますか？ +

   いいえ。OpenCode は SST（Anomaly Innovations）が保守するオープンソースプロジェクトであり、Open Design はそれを第一級のアダプターとしてサポートする、独立したオープンソースプロジェクトです。

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

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