OpenDesign で
Trae CLI と
デザインする。

docs-product-landing.html · 1440pxsearch · analyticssearch · analytics

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

1. 1

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

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

   OpenDesignをダウンロード

   チェックポイント

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

   Trae CLIの接続を準備する

   インストール済みのバージョンに記載されているTrae CLIの手順に従ってください。ご自身のLLMプロバイダーキー（BYOK）で認証を行い、認証情報はお使いのマシン上に保持されます。

   Traeのドキュメント

   # 1. Get Trae CLI (trae-agent) from source — needs uv
   git clone https://github.com/bytedance/trae-agent.git
   cd trae-agent
   uv sync --all-extras
   source .venv/bin/activate
   
   # 2. Authenticate by pointing it at your LLM provider key
   #    set it in the environment (or a trae_config.yaml file)
   export OPENAI_API_KEY=...        # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.

   公開されているガイドに記載のTrae CLIセットアップ手順に基づいています。最新のコマンドについては、ベンダーのドキュメントをご確認ください。

   チェックポイント

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

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

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

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

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

   チェックポイント

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

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

1. 1

   デザインブリーフ

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

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

   New project · PromptTrae CLI

   You

   Design the Docsmith landing page: hero, search demo, three benefits, logos. Check each pass in a real browser at 1440 and 390.

   Trae CLI

   Understood. Should the search demo be interactive or a static frame with a focus state? The brief says live-looking.
2. 2

   デザイン制約

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

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

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

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

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

   Project files3 files

   • docs-product-landing.htmlnew
   • trae_config.yamlbound
   • DESIGN.mdread
4. 4

   プレビュー

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

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

   Preview · 390pxComment mode

   Comment on · demo

   Static frame with a real focus state is enough; no fake typing animation.

   Comment on · logos

   Logo row scrolls on the phone; do not shrink logos below 24px.
5. 5

   修正と検証

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

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

   Verification · v23 of 4

   • ✓Demo has a focus state
   • ✓Logo row scrolls at 390px
   • ✓No horizontal scroll at 390px
   • Browser pass at both widths — checked by you