OpenDesign で
OpenCode と
デザインする。

team-inbox.html · 1440px

4ハンドオフ前のレビュー

1. 1

   OpenDesignデスクトップアプリをダウンロードする

   お使いのコンピューター用のパッケージを選び、インストールしてアプリを開きます。

   OpenDesignをダウンロード

   チェックポイント

   デスクトップアプリが開きます。すでにインストール済みの場合は次のステップに進んでください。再度ダウンロードする必要はありません。
2. 2

   OpenCode接続の準備

   インストールしたバージョンに含まれる 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 セットアップノートから引用。最新のコマンドについてはベンダーのドキュメントを確認してください。

   チェックポイント

   目的のエージェントとアカウントを確認します。利用できない場合は、より大きなタスクを試す前に互換性を確認してください。
3. 3

   小さなOpenCodeタスクを1つ実行する

   ブリーフは控えめにして、1回の修正を含むループ全体を判断できるようにします。

   スターターブリーフ コピー

   プロフィールフォームと保存確認を備えた設定画面を構築してください。私のデザインルールに従ってください。デスクトップとモバイルの幅で確認してください。

   チェックポイント

   結果を開き、保存状態をテストし、具体的な変更を1つ依頼します。生成はレビューを始めるものであり、終わらせるものではありません。

OpenDesign をソースから実行したい場合は、代わりに テクニカルクイックスタート を使用してください。

1. 1

   デザインブリーフ

   シンプルかつ短く：3～6行。誰がその画面を使い、どんな役割を果たし、どのプラットフォームに適合する必要があるかを述べます。

   • あなたブリーフを作成し、リファレンスのスクリーンショットがあれば添付します。
   • OpenCodeOpenCode はブリーフとプロジェクトの AGENTS.md を読み、詳細が曖昧な場合は質問します。
   • OpenDesignOpenDesign はプロジェクト、ターミナルプロンプトサーフェス、成果物タイプに合ったスキルを提供します。
   • 確認ブリーフに受け入れ基準が明記されているか確認します。生成前にそれらを確定するほうが、後で修正するよりコストが低くなります。

   New project · PromptOpenCode

   You

   共有チーム受信トレイをデザインする：担当者リスト、スレッド、顧客コンテキストレール。何かを生成する前に design.md をバインドする。デスクトップとスマートフォン。

   OpenCode

   design.md はバインド済み。「waiting on us」はフィルターか、タグか、それとも両方か？ブリーフで2回言及されている。
2. 2

   デザイン制約

   デザインシステムと、短いハードルールのリスト。この組み合わせが、OpenCode が一般的な見た目に後退するのを防ぎます。

   • あなたデザインシステムを選び、必須のブレークポイントとコンポーネントを明確にします。
   • OpenCodeOpenCode はマークアップを書く前に DESIGN.md のトークンと姿勢ルールを読み込みます。
   • OpenDesignOpenDesign はデザインシステムライブラリを提供し、あなたの選択をスキルテンプレートにバインドします。
   • 確認トークンをブランドと照合します。アクセント1つ、意図したフォント、正しい角丸。

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   インターフェースを生成する

   OpenCode は自己完結型の HTML ファイルを1つ書きます。レイアウト、スタイル、インタラクション、安定したフック。

   • あなた待つか、明確化の質問に答えます。この時点で設定するものはありません。
   • OpenCodeセクションを計画し、HTML、CSS、JavaScript を書き、ファイルを実行し、失敗した箇所を修復します。
   • OpenDesignOpenDesign は成果物をプロジェクトフォルダーに保存し、プレビュー用にインデックス化します。
   • 確認まだです。ソースマークアップではなく、レンダリングされたファイルを評価します。

   Project files3 files

   • team-inbox.htmlnew
   • design.mdbound
   • AGENTS.mdread
4. 4

   プレビュー

   OpenDesignは指定した幅でファイルをプレビューします。ここでデザインが評価されます。

   • あなた幅を変更し、インタラクションを試し、要素にコメントを残します。
   • OpenCodeOpenCodeはプレビューのコメントを読み、次のリビジョンを準備します。
   • OpenDesignOpenDesignはプレビューをレンダリングし、コメントと編集のためにdata-od-idターゲットを公開します。
   • チェック階層、コントラスト、390pxでのオーバーフロー、フォーカス状態、そしてアクセントが抑制されているかどうかを確認します。

   Preview · 390pxComment mode

   Comment on · rail

   1100pxではコンテキストレールが折りたたまれるべきで、電話だけではありません。

   Comment on · tags

   「Waiting on us」がアクセントを帯び、salesとsecurityはニュートラルのままです。
5. 5

   修正と検証

   プレビュー要素を指して変更を依頼します。各リビジョンは新しいファイルとして生成され、あなたが見ないうちに上書きされることはありません。

   • あなたコメントをリクエストに変え、タスクがいつ完了したかを判断します。
   • OpenCodeOpenCodeが変更を適用し、ファイルを再実行します。
   • OpenDesignOpenDesignはバージョンを並べて保持します。完了したら画像またはHTMLをエクスポートします。
   • チェック最初に変更された領域を確認し、次に各ブレークポイントで一度ページ全体を確認します。

   Verification · v23 of 4

   • ✓Rail collapses at 1100px
   • ✓アクセントはwaiting-on-usのみ
   • ✓No horizontal scroll at 390px
   • Reply flow — checked by you