102.7K+ダウンロード
Trae CLI OpenDesign

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

OpenDesign で Trae CLI を使ってインターフェースをデザインする方法：お客様が用意するモデル、各パスを実際のブラウザで確認する仕組み、ブリーフからレビュー済みファイルまでの1つのランディングページタスク、そして始める前に知っておくべき限界について。

OpenDesignをダウンロード セットアップに進む

Trae CLI の3つの入り口

Trae CLI の出発点を選ぶ

このガイド・UIデザイン

Trae CLI で製品インターフェースを設計する

このパスでは、ブリーフ、参考資料、デザインルール、レビュー済みの HTML アーティファクトを扱います。

このガイドを読む セットアップ

Trae CLI をゼロからインストールして設定する

クリーンなマシンから UI を構築・検証できる Trae CLI までの道のり。

セットアップに進む 比較

Trae CLI を他のエージェントと並べて位置づける

デザイン作業において Trae CLI が Codex、Claude Code、Cursor とどう違うか、そして別のワークフローの方が適しているのはどんな場合か。

比較を見る
このページの内容 例
  1. 例
  2. 適性
  3. 互換性
  4. セットアップ
  5. ワークフロー
  6. リソース
  7. 制限事項
  8. FAQ

完全な Trae CLI デザインパス

Trae CLI デザイン課題: ブリーフ入力、インターフェース出力

あなたが渡すブリーフと制約、返ってくるアーティファクト、そして完了とする前に残るチェック項目。以下のインターフェースはこのページ用に作られた例示であり、記録された Trae CLI の実行ではありません。

1設計ブリーフと制約条件

ブリーフ

ドキュメント製品のランディングページを設計する：ヒーロー、ライブ風の検索デモ、3つの利点、顧客ロゴ。両方の幅で、各パスを実際のブラウザで確認すること。

  • デザインシステムOpenDesign ペーパーキャンバス：Albert Sans、グリーンのアクセントを1色
  • ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
  • インタラクション検索デモのフォーカス状態、CTAの状態、ロゴ行のスクロール
  • 出力安定したdata-od-idフックを持つ、自己完結型のHTMLファイル1つ

2誰が何をするか：あなた、Trae CLI、そして OpenDesign

  • あなた

    ブリーフを書き、デザインシステムを選び、受け入れ基準を定義する。

  • Trae CLI

    レイアウトを計画し、HTML、CSS、JavaScript を書き、要求に応じて修正する。

  • OpenDesign

    デザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクトファイルとして保存する。

  • レビュー

    視覚的階層、8px グリッドの間隔、両方のブレークポイント、すべてのインタラクションが引き渡し前にチェックされる。

3Trae CLI アーティファクト: 1440px と 390px での製品ページ

Trae CLI アーティファクト: 1440px と 390px での製品ページ — デスクトップ
参考例

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

レイアウト

グリッドとスペーシング

ヒーローと利点は 8px グリッドに沿って配置され、検索デモは固定高さを保つのでページが跳ねない。

階層

視覚的階層

見出し、検索デモ、次に利点。アクセントは開始ボタンだけを目立たせる。

レスポンシブ

モバイルレイアウト

コピー、デモ、ベネフィットの順です。ロゴは専用の行内で横方向にスクロールします。

インタラクション

インタラクションの確認

デモにフォーカスし、両方のCTAをたどり、ロゴ行をスクロールしてください。

適合性

Trae CLIが適するタスクと適さないタスク

Trae CLIが適している場合

  • モデルを持ち込む。 設計上モデル非依存なので、UI 作業をフロントエンドの推論に最も適した LLM プロバイダーにルーティングでき、後から交換もできます。
  • オープンで設定駆動。 MIT ライセンスで trae_config.yaml に固定されるため、エージェントの動作がチーム全体で透過的かつ再現可能に保たれます。
  • 実際のブラウザループ。 ファイル、シェル、推論ツールにより、ビルドし、開発サーバーを実行し、ブレークポイント全体で UI を検証できます。
  • 無料で始められます。 エージェント自体は無料で、唯一のコストは選択したプロバイダーの利用料です。ローカルのOllamaモデルを使えば無料です。

別のワークフローを選ぶべきケース

  • 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
  • 参考資料も制約もない。 デザインシステムやサンプルがないと、出力は一般的な見た目になりがちです。まずブリーフを書きましょう。
  • このエージェントに必要な認証情報をお持ちではありません。 必要なもの: ご自身のLLMプロバイダーのAPIキー(BYOK) — OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルのOllama。OpenDesignは認証情報を提供またはプロキシしません。
  • チームが Qoder や Kimi で作業している。 それらのエージェントには独自のページがあります。ワークスペースが重なっていてもセットアップはエージェントごとに異なります。関連エージェントを参照。

互換性

始める前に必要な Trae CLI の要件

このガイドは、OpenDesign デスクトップアプリ経由で接続された Trae CLI を扱います。公開されている参考文献は 2026年9月6日に確認されました。

ツールの範囲Trae CLI, by ByteDance

Trae CLI は ByteDance のオープンソース（MIT）ターミナル AI エージェントで、trae-agent プロジェクトとして提供されています。コードベースを読み、ファイルを編集し、自然言語のタスクからシェルコマンドを実行します。OpenDesign が Trae IDE を置き換えるのか補完するのかを判断する必要がある場合は、OpenDesign vs Trae 比較をご覧ください。このページは、OpenDesign を通じて Trae CLI でインターフェースを設計することに関するものであり、Trae CLI 自体のインターフェースではありません。OpenDesign の セットアップノート に利用可能なエージェントが記載されています。

アカウントと認証ご自身のLLMプロバイダーAPIキー（BYOK）—

ご自身の LLM プロバイダーの API キー（BYOK）— OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルの Ollama。ご自身の LLM プロバイダーキー（BYOK）で認証してください。認証情報はお使いのマシンに留まります。このページはクォータや価格を保証するものではありません。

システムとバージョンデスクトップアプリまたはソース

デスクトップビルドについてはダウンロードページをご確認ください。ソースのクイックスタートにある Node.js と pnpm の要件は、ソースから実行する場合に適用され、デスクトップパッケージのインストールには適用されません。互換性のある最小 Trae CLI バージョン：ここでは未確認です。

接続確認成功の目安

インストール済みのバージョンに表示される接続手順に従い、小さなタスクを実行してください。Trae CLIがそのタスクを処理し、成果物が開くことを確認してください。ダウンロードだけでは、正常な接続は確立されません。

デスクトップアプリから始める

Trae CLI のセットアップを3ステップで

まずダウンロードし、インストールされたバージョンに応じて Trae CLI のセットアップを完了し、小さな結果を確認します。このパスでは OpenDesign をソースからビルドする必要はありません。

  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回の修正を含めます。

    スターターブリーフ

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

    チェックポイント
    結果を開き、保存状態をテストし、1つ具体的な変更を依頼します。生成はレビューを開始するものであり、終了させるものではありません。

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

Trae CLIのデザインワークフロー

Trae CLI デザインワークフローを5ステップで

製品ページは、Trae CLI のブリーフ、ルール、ビルド、ブラウザレビュー、修正パスを経ます。各ステップでは、あなたの入力、Trae CLI のアクション、OpenDesign の貢献、そしてあなたのチェックを挙げます。

  1. 1

    デザインブリーフ

    3～6行の平易な説明：対象読者、画面の目的、ターゲットプラットフォーム。

    • あなたブリーフを作成し、お持ちの参考スクリーンショットを添付します。
    • Trae CLIブリーフとリポジトリの指示ファイルを解析し、構築前に曖昧さを明らかにします。
    • OpenDesignプロジェクト、プロンプトサーフェス、アーティファクトタイプのスキルを提供します。
    • 確認受け入れ基準がブリーフに含まれていることを確認します。生成前に決めておく方が、後から合わせるよりもコストが低くなります。
  2. 2

    デザイン制約

    デザインシステムと厳格な制約が、ブランドに合った出力とデフォルトの AI スタイリングとの境界線です。

    • あなたデザインシステムを選び、ブレークポイントと必ず使用するコンポーネントをリストアップします。
    • Trae CLIマークアップを書く前に DESIGN.md のトークンと姿勢ルールを読み込みます。
    • OpenDesignデザインシステムライブラリを提供し、選択されたシステムをスキルテンプレートにバインドします。
    • 確認トークンがブランドに合っているか確認します。単一のアクセント、正しいフォント、正しい角丸。
  3. 3

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

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

    • あなた待つか、確認の質問に答えてください。設定することは何もありません。
    • Trae CLIセクションを計画し、HTML、CSS、JavaScript を書き、ファイルを実行し、失敗を修復します。
    • OpenDesignアーティファクトをプロジェクトフォルダーに保存し、プレビュー用にインデックス化します。
    • 確認待ってください。ソースではなく、レンダリングされたファイルを評価してください。
  4. 4

    プレビュー

    OpenDesign が指定した幅でファイルをレンダリングします。ここが判断のポイントです。

    • あなた幅を変更し、インタラクションを試し、特定の要素にコメントします。
    • Trae CLIプレビューのコメントを読み、次の修正を準備します。
    • OpenDesignプレビューをレンダリングし、コメントと編集のために data-od-id ターゲットを公開します。
    • チェック階層、コントラスト、390px のオーバーフロー、フォーカス状態、控えめなアクセントの使用。
  5. 5

    修正と検証

    変更を依頼するには、プレビュー要素を指します。各修正は新しいファイルになり、無言で上書きされることはありません。

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

リソース

Trae CLIのデザインリソース

スキル

デザインスキル

Trae CLIがOpenDesignで生成できる成果物のタイプ。タイプごとに1つのスキル。

スキルを見る デザインシステム

デザインシステム

Trae CLIが生成する前にバインドするブランドトークンとコンポーネント。

システムを見る テンプレート

テンプレート

デッキ、ランディングページ、プロダクト画面のための出発点です。

テンプレートを見る

制限事項

Trae CLIの制限、手動チェック、フォールバックパス

  • スコープこれはモデルに依存しません — 自分のLLMプロバイダーキー（OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルOllamaモデル）を持ち込み、その動作はコミットできるtrae_config.yamlに固定されています。このページはTrae CLIをOpenDesignに接続されたエージェントとして扱い、すべてのTrae CLI機能の完全な調査ではありません。
  • 利用制限コストと使用制限は、提供する資格情報（自分のLLMプロバイダーAPIキー — OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルOllama）に依存します。ここでは無料枠の主張はしません。
  • ネットワークローカルプロジェクトファイルはオフライン推論を意味しません。機密性の高い入力を送信する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
  • 出力は HTML です成果物はHTMLファイルであり、ベクターデザインファイルではありません。
  • 手動レビュープレビューでアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確性を確認します。エージェントの自己チェックは最初のパスとして扱ってください。
  • フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールしたバージョンの接続手順と認証を確認してください。構成を変更する前に、エラーと最後に動作した成果物を保持してください。

よくある質問

Trae CLI と OpenDesign に関するよくある質問

Trae CLIは実際にデザインを処理しますか？
はい。美的スキル、デザインシステム、実際のリファレンスコンテキストがあれば、Trae CLI は本番品質のレスポンシブUIを生成します。モデル非依存であるため、フロントエンドの推論に最も優れたプロバイダーに作業を振り分けることができます。そのコンテキストがない場合、汎用的な見た目になりがちですが、これこそが OpenDesign が補う部分です。
Trae CLIでデザインするのにコストはかかりますか？
Trae CLI 自体は無料でオープンソース（MIT）です。ご自身のLLMプロバイダーキーを使用するため、コストが発生するのはそのプロバイダーの課金分のみです。Ollama でローカルモデルを実行する場合は無料です。いずれの場合も、OpenDesign が認証情報を代理で扱うことはありません。
Trae CLIがデザインに適しているのはなぜですか？
2つの理由があります。モデル非依存であるため、フロントエンド作業に最も適したLLMプロバイダーを選択できること、そして完全にオープンで設定駆動であるため、その動作はチーム全体で透明かつ再現可能であることです。ただし、センスはあくまでご自身が用意するデザインシステム、スキル、リファレンスから生まれます。
フロントエンドデザインには Trae CLI と Claude Code のどちらが良いですか？
どちらも優れています。Claude Code はコードベースを理解した具体的なデザイン判断で知られており、Trae CLI の強みはオープンソースでプロバイダーを自由に選べることで、1つのモデルに縛られることがありません。多くのチームが両方を使用しており、OpenDesign を使えばデザインワークフローを変えることなくエージェントを切り替えられます。
OpenDesign が Trae CLI を実行するために必要なものは何ですか？
OpenDesign は Agent Client Protocol（ACP）経由で Trae CLI の trae-cli バイナリを操作し、設定済みのLLMプロバイダーキーを使用します。エージェントとして Trae CLI を選択し、プロバイダーを指定するだけで、OpenDesign がその周りに厳選されたデザインコンテキストを提供します。
Trae CLIとは何か
Trae CLI は、ByteDance のオープンソース trae-agent プロジェクトから提供されるコマンドラインエージェントです。リポジトリを読み取り、ファイルの表示・作成・編集を行い、永続環境でシェルコマンドを実行します。単に行を補完するのではなく、自然言語のタスクから計画・検証を行います。MIT ライセンスで提供され、透明性の高いモジュラーアーキテクチャに基づいて構築されているため、簡単に検査・拡張できます。同じベンダーから提供されていますが、ByteDance の VS Code ベースの AI エディタである別の Trae IDE とは異なります。

設計作業において、2つの特性が際立っています。モデルに依存しないため、LLM プロバイダを選択でき、単一モデルの長所や制限に縛られることがありません。また、完全にオープンで設定駆動型であるため、その動作、ツール、プロバイダを、ホスト型サービスの背後に隠すのではなく、プロジェクトとともにバージョン管理に固定できます。

実行モードと対話モード: Trae CLI は `trae-cli run "..."` で単一のタスクを実行するか、`trae-cli interactive` で継続セッションを保持します。これは、設計規約に照らして UI を反復するための自然な場所です。

組み込みツール: ファイル編集、bash/シェル実行、構造化推論ツールが最初から同梱されており、ターミナルを離れることなく、ビルド、開発サーバーの起動、ランタイムエラーの検査が可能です。

独自のプロバイダを持ち込む: 信頼するプロバイダ (OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルの Ollama モデル) の API キーを、環境変数または設定ファイルを介して提供します。

認証情報: LLM プロバイダの API キー (BYOK) — 例: OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルの Ollama モデル

ベンダー: ByteDance (オープンソース trae-agent プロジェクト)

ライセンス: MIT、オープンソース
モデルに依存しないオープンエージェントがデザインに適合する理由
Trae CLI の設計上の優位性は、オープンでプロバイダに柔軟であることから生まれますが、他のエージェントと同様に、センスは依然として供給する必要があります。

設計上モデル非依存: プロバイダを選択するため、現在レイアウトとフロントエンドコードについて最も優れた推論を行うモデルに設計作業をルーティングでき、ワークフローを変更せずに後で交換できます。

オープンで設定駆動型: エージェント、そのツール、プロバイダは、コミット可能な設定ファイルに固定されるため、チームは開発者ごとにドリフトすることなく、すべてのマシンで同じエージェント動作を得られます。

リポジトリ内の規約: プロジェクトに保持されているトークン、コンポーネント、実際の仕様にエージェントを向けることで、汎用的な見た目にデフォルト設定されるのではなく、ブランドに沿って動作します。

センスは、あなたが提供する3つの入力から生まれます: デザインシステム、スキル、実際の参照画像です。

教訓は、すべてのエージェントが教えるものと同じです: Trae CLI はデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに優れたデザインを生み出します。OpenDesign はまさにそれらの入力をパッケージ化し、ACP を介して Trae CLI に供給します。これが両者がうまく組み合わさる理由です (詳細は後述)。
ゼロから始めるTrae CLIのデザイン用セットアップ
クリーンなマシンから、UI をビルドして検証できる Trae CLI までの完全なパスを以下に示します。Trae CLI は uv を使用してソースからインストールされ、使用したい LLM プロバイダで設定されます。

セットアップ手順: インストール → プロバイダキーで認証 → 設計規約の設定 → スキルの追加 → ブラウザ検証の有効化。

設計ルールのエンコード: トークン、プリミティブ、規約をリポジトリに保持し、Trae CLI にそれらを指し示すことで、汎用的な見た目にデフォルト設定されるのではなく、ブランドに一致した出力が得られます。

ブラウザ検証の追加: Trae CLI に開発サーバーを実行させ、実際のブラウザでレンダリングさせることで、ビルドが成功したことを確認するだけでなく、ブレークポイント全体で出力をチェックします。

コマンドとバージョン固有の詳細については、現在のセットアップセクションを使用してください。変更される可能性があります。

# 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. # 3. Run a task in your project trae-cli run "Create a hello world page" # or hold a session: trae-cli interactive # 4. Check the resolved configuration (keys are masked) trae-cli show-config
前のガイドの履歴コマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
参照画像からUIへのワークフロー
Trae CLI で最もレバレッジの高い設計ループは、参照画像を動作するレスポンシブ UI に変換し、一致するまで反復することです。Trae CLI はモデルに依存しないため、参照をうまく処理するモデルを持つプロバイダにそれを向け、実際のブラウザに依存して結果を確認します。

持っている最も明確な視覚的参照から始め、1つのヒーローショットだけでなく、複数の状態 (デスクトップとモバイル、ホバー、空、ローディング) を説明してください。

プロンプトを具体的にしてください。強力なモデルでも、曖昧なプロンプトは汎用的な UI を生成します。

デザインシステムと規約をリポジトリに保持し、トークンと正規のプリミティブがどこにあるかを Trae CLI に伝えてください。

開発サーバーを実行し、Trae CLI に実際のブラウザでレンダリングさせ、ブレークポイントに合わせてリサイズして結果を確認します。

Trae CLI にその実装を参照と比較させて反復します — ビルドが成功したことを確認するだけではありません。

対話セッションを実行し、1行の依頼ではなく具体的な制約を与えます:

プロンプトを小さく焦点を絞ったものに保ち、良い反復をコミットし、悪い反復を元に戻します (元に戻すときに Trae CLI に伝えます)。これにより、各パスがクリーンなベースに基づいて構築されます。

trae-cli interactive # in the session: > Implement the attached reference design in React + Vite + Tailwind + TypeScript. Reuse my existing design-system components and tokens. Match spacing, layout, and hierarchy; make it responsive. Run the dev server, render it in the browser, and iterate until it matches the references across breakpoints.
前のガイドの履歴コマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
設定、ツール、プロバイダ
3つの拡張ポイントにより、Trae CLIは持続的な設計作業に実用的であり、そのすべてがオープンな設計ワークフローにきれいに適合します。

設定ファイル: Trae CLIはtrae_config.yamlを読み取り、プロバイダー、モデル、設定を固定します。これは、エージェントがプロジェクト上でどのように動作するかの永続的でバージョン管理可能なホームです。

プロバイダーの選択: 多くのプロバイダー（OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、Ollama）をサポートしているため、信頼するモデルに設計作業をルーティングし、ワークフローを再配線することなく交換できます。

組み込みツール: ファイル編集、シェル、構造化推論ツールにより、ターミナルを離れることなく、コンテキストを収集し、ビルドし、開発サーバーを実行し、検証ループを実行できます。

これらはポータブルでエージェントレベルの機能であり、まさにOpenDesignがプロジェクトごとに再作成するのではなく、ACPを介してオーケストレーションするために構築された種類のものです。
設計のための Trae CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI
設計作業に単一の勝者はいません。各エージェントには異なる強みがあり、経験豊富なチームはそれらを組み合わせて使います。公平な要約：

Trae CLI — オープンソース（MIT）でモデル非依存。独自のプロバイダーキーを持ち込み、設定駆動で透明性が高い — 無料で検査可能なエージェントと、LLMプロバイダーを選択または交換する自由を求めるチーム向け

Codex — フロントエンドスキルによる強力なビジュアル洗練。サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール向け

Claude Code — 具体的な設計決定（hex、間隔、タイポグラフィ）とコードベースを意識したUX — フロントエンド推論と大規模コンテキストのリファクタリング向け

Cursor — ライブプレビューとインライン編集を備えたビジュアルなビルド＆確認ループ — IDE内での密接な反復と観察のUI作業向け

Gemini CLI — 強力なマルチモーダル画像理解と100万トークンのコンテキスト。オープンソースで無料枠あり — スクリーンショット多用の作業と設計システム全体をコンテキストに保持する作業向け

コミュニティで繰り返される見解は、センスは人間から来るということです。スキル、参照、制約がなければ、すべてが一般的な美学にデフォルトで落ち着きます。それが真に解決すべき問題であり、それは設計ツールの形をした問題であって、モデルの形をした問題ではありません。

エージェント — 設計上の強み — 最適な用途
落とし穴と「AIスロップ」な見た目からの脱却
AI生成のデザインに関する最も一般的な不満は、それが一般的に見えることです。柔らかいグラデーション、浮遊するパネル、過度に大きい角丸、劇的な影、「AIが作ったと叫んでいる」ようなInterと紫の雰囲気。その他の報告された問題には、モバイルレイアウトの破損や、指示がUIコピーに漏れ出すことが含まれます。これらはTrae CLIに固有のものではなく、キュレーションされたデザインコンテキストなしに任意のエージェントが実行されたときに起こることです。

美的スキルを追加する：キュレーションされたデザインスキルは、エージェントにデフォルトの外観ではなく実際の方向性にコミットさせます。

実際のブラウザで検証する：Trae CLIにレンダリングさせ、ブレークポイント全体で自己チェックさせて、モバイルでレイアウトが静かに壊れないようにします。

トークンと参照を提供する：実際のデザイントークンと参照スクリーンショットは、出力品質に対する最大のレバレッジです。

リポジトリにルールをエンコードする：「ヒーローカードなし、最大2つの書体、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読み取る場所に置きます。

すべての緩和策がエージェントにキュレーションされたデザインコンテキストを与えることに関するものであることに注意してください。そのコンテキストをプロジェクトごとに手作業で維持することは、OpenDesignが取り除く苦労です。
OpenDesignでのTrae CLIによるデザイン
OpenDesignは、上記のワークフローが求め続けているオープンソースのデザインレイヤーです。Trae CLIをファーストパーティアダプターとして扱い、そのtrae-cliバイナリを介してAgent Client Protocol (ACP) で駆動し、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダリングパイプライン、ローカルデスクトップUIでラップします。そのため、Trae CLIを優れたものにするデザインコンテキストが最初の実行から存在し、毎回手作業で組み立てる必要はありません。どちらもオープンソースでローカルファーストであり、この組み合わせは自然な適合です。

独自のLLMプロバイダーキー（BYOK）で認証します。資格情報はあなたのマシンに留まり、私たちを介してプロキシされることはありません。

デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。

すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに存在します。

同じTrae CLIエージェント、同じプロバイダーキー、さらにその周りに本物のポータブルなオープンソースデザインワークフロー。ローカルファーストでオープンソースなので、作業や資格情報がマシンから離れることはありません。

OpenDesignをインストールし、エージェントとしてTrae CLIを選択します。
OpenDesignはByteDanceと提携していますか？
いいえ。OpenDesignは独立しています。TraeはByteDanceの商標です。