OpenDesign で
Qwen と
デザインする。

team-calendar.html · 1440px

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

1. 1

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

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

   OpenDesignをダウンロード

   チェックポイント

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

   Qwenの接続を準備する

   インストール済みバージョンのQwenの指示に従ってください。DashScopeまたはQwenのAPIキー（BYOK）で認証します — 認証情報はお使いのマシンにとどまります。

   Qwen Code ドキュメント

   # 1. Install Qwen Code (Node 22+)
   npm install -g @qwen-code/qwen-code@latest
   # or: brew install qwen-code
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   qwen              # run /auth, or set a key in ~/.qwen/settings.json

   公開ガイド内のQwenセットアップに関する注記からの情報です。最新のコマンドについては、ベンダーのドキュメントをご確認ください。

   チェックポイント

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

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

   全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。

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

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

   チェックポイント

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

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

1. 1

   デザインブリーフ

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

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

   New project · PromptQwen

   You

   Build the team calendar week view from this reference: five days, working hours, colour by calendar, day agenda on the phone.

   Qwen

   Understood. The reference uses six calendar colours. Keep them as neutral tints and use the accent for the focused event only?
2. 2

   デザイン制約

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

   • あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
   • Qwenコードを書き始める前に、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

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

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

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

   Project files3 files

   • team-calendar.htmlnew
   • QWEN.mdbound
   • DESIGN.mdread
4. 4

   プレビュー

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

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

   Preview · 390pxComment mode

   Comment on · events

   Neutral tints for calendars; accent only on the focused event.

   Comment on · mobile

   Day strip plus agenda; do not shrink the week grid onto the phone.
5. 5

   修正と検証

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

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

   Verification · v23 of 4

   • ✓Accent on one event and today
   • ✓Agenda list at 390px
   • ✓No horizontal scroll at 390px
   • Week navigation — checked by you