OpenCode 
OpenDesign OpenDesign で OpenCode を使ってインターフェースをデザインする方法：何かを生成する前にバインドされる design.md、選択するプロバイダー、ブリーフからレビュー済みファイルまでの共有インボックスタスク1件、そして始める前に知っておくべき制限事項。
「デフォルトではなく
design.mdの上に構築された、共有インボックス。」
このOpenCodeガイドへの3つの入り口
このガイドでは、ブリーフ、参考資料、デザインルール、そしてレビュー済みのHTML結果を紹介します。
このガイドを読む セットアップこちらは、クリーンな環境から UI を構築・検証できる OpenCode に至るまでの全体の道筋です。
セットアップに進む 比較デザイン作業において OpenCode が Codex、Claude Code、Cursor とどう異なるか、また別のワークフローを選ぶべきタイミングについて。
比較を見る1件の完全な OpenCode デザインタスク
1件のタスクを最初から最後まで示します：引き渡すブリーフと制約、返ってくる成果物、そして完了までに実行するチェック。以下のインターフェースは、このページ用に作成された説明用の例であり、記録された OpenCode の実行結果ではありません。
ブリーフ共有チームインボックスを設計します。担当者付きの会話リスト、スレッドビュー、顧客コンテキストを表示する右レールを用意します。生成前にdesign.mdシステムをバインドしてください。デスクトップとフォンに対応します。
data-od-idフックを持つ、自己完結型のHTMLファイル1つブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
8pxグリッド上の3つのペイン。コンテキストレールはスレッドより先に折りたたまれます。
担当者と件名を優先表示し、アクセントは「対応待ち」のみを示します。
まずリスト、タップでスレッドへ。コンテキストレールはシートになります。
担当者でフィルターし、スレッドを開き、レールを切り替え、返信を送信します。
適合性
互換性
このガイドでは、OpenDesignデスクトップアプリを通じて接続したOpenCodeについて説明します。公開情報は2026年9月6日時点で確認済みです。
OpenCodeはオープンソース（MIT）のターミナルAIコーディングエージェントです。TUIに加えてデスクトップとIDE上のインターフェースを備え、Anomaly（SSTチーム）がgithub.com/anomalyco/opencodeで保守しています。本ページはOpenDesignを通じてOpenCodeでインターフェースを設計することについて説明するもので、OpenCode自体のインターフェースについては扱いません。OpenDesignのセットアップノートに、利用可能なエージェントの一覧があります。
OpenCode設定経由のプロバイダーキー（BYOK）。OpenCodeは独自の設定を通じてお客様のプロバイダーキーを使用します（BYOK）。中継は一切行われません。本ページではクォータや価格を保証するものではありません。
デスクトップ版のビルドについては、ダウンロードページをご確認ください。ソースクイックスタートに記載されているNode.jsおよびpnpmの要件は、ソースからの実行に適用されるものであり、デスクトップパッケージのインストールには適用されません。互換性のある最小OpenCodeバージョンについては、ここでは確認していません。
インストール済みのバージョンに表示される接続手順に従い、簡単なタスクを実行してください。OpenCodeがそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続は確立されません。
デスクトップアプリから始める
まずダウンロードし、インストール済みのバージョン用にOpenCodeのセットアップを完了させ、その後小さな結果を確認してください。この手順に従うために、OpenDesignをソースからビルドする必要はありません。
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードインストール済みのバージョンにあるOpenCodeの手順に従ってください。OpenCodeは独自の設定（BYOK）を通じてお使いのプロバイダーキーを利用します。プロキシは介在しません。
# 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公開されているガイドのOpenCodeセットアップに関する注記より。現在のコマンドについてはベンダーのドキュメントをご確認ください。
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
プロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
OpenCodeデザインワークフロー
同じチーム受信ボックスのタスクを、ブリーフから検証済みファイルまで追った例です。各ステップでは、あなたが提供するもの、OpenCode が行うこと、OpenDesign が提供するもの、そしてあなたが確認する内容を示します。
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
OpenCodeは、レイアウト・スタイル・インタラクション・安定したフックを含む、自己完結型のHTMLファイルを作成します。
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
data-od-id ターゲットを公開します。プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
リソース
公開されているガイドに記載されている、OpenCodeでデザインを行うためのチュートリアル、ドキュメント、ウォークスルーです。
制限事項
よくある質問
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。