OpenDesign で
Kimi と
デザインする。

notification-preferences.html · 1440px

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

1. 1

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

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

   OpenDesignをダウンロード

   チェックポイント

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

   Kimiの接続を準備する

   インストールしたバージョンのKimiの手順に従ってください。ご自身のMoonshot APIキー（BYOK）で認証します — 認証情報はお使いのマシン上に留まります。

   Kimi CLI ドキュメント — はじめに

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

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

   チェックポイント

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

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

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

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

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

   チェックポイント

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

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

1. 1

   デザインブリーフ

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

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

   New project · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
2. 2

   デザイン制約

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

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

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

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

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

   Project files3 files

   • notification-preferences.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   プレビュー

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

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

   Preview · 390pxComment mode

   Comment on · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
5. 5

   修正と検証

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

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

   Verification · v23 of 4

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you