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回の修正を含む完全なループを判断できる程度に小さく保ちます。

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

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

   チェックポイント

   結果を開き、保存状態をテストし、1つの具体的な変更を依頼します。生成されたファイルには、まだあなたのレビューパスが必要です。

OpenDesign をソースから実行する予定の場合は、代わりに 技術クイックスタート に従ってください。

1. 1

   デザインブリーフ

   3〜6行の簡潔な行で十分です。画面が誰に役立つか、何をする必要があるか、どのプラットフォームが重要かを述べます。

   • あなたブリーフを下書きし、リファレンスのスクリーンショットがあれば添付します。
   • Qwenブリーフとプロジェクトの QWEN.md を読み、曖昧さが残る場合は質問します。
   • OpenDesignプロジェクト、プロンプトサーフェス、および成果物タイプに一致するスキルを提供します。
   • 確認ブリーフが受け入れ基準を明記していることを確認します。ここで追加する方が、生成後よりコストがかかりません。

   New project · PromptQwen

   You

   このリファレンスからチームカレンダーの週表示を構築してください：5日間、勤務時間、カレンダーごとの色分け、スマートフォン用の日次アジェンダ。

   Qwen

   理解しました。リファレンスでは6つのカレンダー色を使用しています。ニュートラルな色合いに留め、アクセントはフォーカスされたイベント用に取っておくべきですか？
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 Code は、レイアウト、スタイル、インタラクション、安定したフックを備えた単一の自己完結型 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

   カレンダーはニュートラルな色合いに保ち、アクセントはフォーカスされたイベント用に取っておきます。

   Comment on · mobile

   日ストリップとアジェンダを使い、週グリッドをスマートフォンに押し込まないでください。
5. 5

   修正と検証

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

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

   Verification · v23 of 4

   • ✓アクセントは1つのイベントと今日のために取っておきます。
   • ✓Agenda list at 390px
   • ✓No horizontal scroll at 390px
   • Week navigation — checked by you