OpenDesign で
Copilot と
デザインする。

launch-landing.html · 1440pxshipctl · previewshipctl · preview

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

1. 1

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

   お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。

   OpenDesignをダウンロード

   チェックポイント

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

   Copilotの接続を準備する

   インストールされているバージョンのCopilotの手順に従ってください。GitHub Copilotサブスクリプションで認証してください — 資格情報はお使いのマシンに保持されます。

   GitHub 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

   公開ガイドのCopilotセットアップノートより。現在のコマンドについてはベンダーのドキュメントを確認してください。

   チェックポイント

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

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

   1回の修正を含め、ループ全体を判断できる程度に小さいブリーフから始めます。

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

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

   チェックポイント

   結果を開き、保存状態をテストし、1つの具体的な変更を要求します。生成されたファイルはレビューを開始するものであり、終了するものではありません。

ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。

1. 1

   デザインブリーフ

   ブリーフを平易な言葉で3〜6行で書きます。誰のためか、画面が何をすべきか、どのプラットフォームが重要かを述べます。

   • あなたあなたはブリーフを書き、参考スクリーンショットがある場合は添付します。
   • CopilotCopilot CLIはブリーフとリポジトリの指示ファイル（カスタム指示とAGENTS.md）を読み、曖昧な点があれば質問します。
   • OpenDesignOpenDesignはプロジェクト、プロンプトサーフェス、および成果物タイプのスキルを提供します。
   • 確認あなたはブリーフが受け入れ基準を明示していることを確認します。生成前にそれらを確定する方が、後から追加するよりもコストがかかりません。

   New project · PromptCopilot

   You

   このスクリーンショットから当社のローンチページを作成してください：インストールコマンド付きのヒーロー、3つの機能、証明ポイント。当社のコンポーネントを再利用してください。

   Copilot

   了解です。スクリーンショットはダークなヒーローです。当社のライトなキャンバスを維持し、アクセントはインストールボタンだけに置きますか？
2. 2

   デザイン制約

   デザインシステムと厳格なルールが、Copilot CLI がデフォルトの見た目にフォールバックするのを防ぎます。

   • あなたあなたはデザインシステムを選択し、ブレークポイントに名前を付け、必ず表示する必要があるコンポーネントにフラグを立てます。
   • CopilotCopilot CLI は、1行書く前に 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

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

   Copilot CLI は、レイアウト、スタイル、インタラクション、安定したフックを含む自己完結型の HTML アーティファクトを作成します。

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

   Project files3 files

   • launch-landing.htmlnew
   • copilot-instructions.mdbound
   • DESIGN.mdread
4. 4

   プレビュー

   ファイルは、要求した幅で OpenDesign 内にレンダリングされます。ここでデザインが評価されます。

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

   Preview · 390pxComment mode

   Comment on · hero

   インストールコマンドには、コードスタイリングだけでなく、コピー用のアフォーダンスが必要です。

   Comment on · features

   3つのブロック。説明が必要なアイコンは不要；小さな四角で十分です。
5. 5

   修正と検証

   プレビュー内の要素を指し示して変更を依頼します。各リビジョンは新しいファイルとして届きます；通知なしに上書きされることはありません。

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

   Verification · v23 of 4

   • ✓インストールコマンド上のコピー用アフォーダンス
   • ✓Accent on one button only
   • ✓No horizontal scroll at 390px
   • Anchor navigation — checked by you