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回の修正を含む小さなブリーフを使用してください。

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

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

   チェックポイント

   結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。

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

1. 1

   デザインブリーフ

   平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。

   • あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
   • Copilotブリーフとプロジェクトの指示ファイルを読み込み、不明な点があれば質問します。
   • OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
   • 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。

   New project · PromptCopilot

   You

   Build our launch page from this screenshot: hero with install command, three features, proof points. Reuse our components.

   Copilot

   Understood. The screenshot uses a dark hero. Keep our light canvas and use the accent on the install button only?
2. 2

   デザイン制約

   デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。

   • あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
   • Copilotコードを書き始める前に、DESIGN.mdのトークンと方針ルールをコンテキストに読み込みます。
   • OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
   • 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。

   DESIGN.md · OpenDesignbound

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

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

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

   • あなた待つか、確認の質問に答えます。設定することは何もありません。
   • Copilotセクションを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行して失敗箇所を修正します。
   • OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
   • 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。

   Project files3 files

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

   プレビュー

   ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。

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

   Preview · 390pxComment mode

   Comment on · hero

   Install command needs a copy affordance, not just a code style.

   Comment on · features

   Three blocks, no icons that need explaining; a small square is enough.
5. 5

   修正と検証

   プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。

   • あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
   • Copilot変更をその場で適用し、ファイルを再実行します。
   • OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
   • チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。

   Verification · v23 of 4

   • ✓Copy affordance on the install command
   • ✓Accent on one button only
   • ✓No horizontal scroll at 390px
   • Anchor navigation — checked by you