OpenDesign で
DeepSeek Harness と
デザインする。

admin-users.html · 1440px

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

1. 1

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

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

   OpenDesignをダウンロード

   チェックポイント

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

   DeepSeek Harnessの接続を準備する

   インストール済みバージョンのDeepSeek Harnessの手順に従ってください。OpenDesignで設定 → モデルとプロバイダー → ローカルCLIを開き、再スキャンしてください。

   deepseek-ai/deepseek-harness

   curl -fsSL 'https://open-design.ai/install-dsh.sh?version=1' | sh

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

   チェックポイント

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

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

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

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

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

   チェックポイント

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

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

1. 1

   デザインブリーフ

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

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

   New project · PromptDeepSeek Harness

   You

   Design the admin users page: searchable table with role, team, status, last active, bulk actions, pagination. Use the console profile.

   DeepSeek Harness

   Profile “console” loaded. Should suspended users stay in the default list, or move behind the Status filter?
2. 2

   デザイン制約

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

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

   DESIGN.md · OpenDesignbound

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

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

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

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

   Project files3 files

   • admin-users.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   プレビュー

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

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

   Preview · 390pxComment mode

   Comment on · table

   Owner role in accent; the rest neutral pills.

   Comment on · mobile

   List rows with role on the right; status as a dot.
5. 5

   修正と検証

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

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

   Verification · v23 of 4

   • ✓Accent on owner role only
   • ✓List layout at 390px
   • ✓No horizontal scroll at 390px
   • Bulk actions — checked by you