デザインのための Trae CLI。

Trae CLI とは実際に何か

Trae CLI は ByteDance のオープンソース trae-agent プロジェクトに由来するコマンドラインエージェントです。リポジトリを読み、ファイルを表示・作成・編集し、永続的な環境でシェルコマンドを実行します。単に行を補完するのではなく、自然言語のタスクから作業を計画し検証します。MIT ライセンスで、透明かつモジュール式のアーキテクチャを中心に設計されているため、検査も拡張も容易です。同じベンダーのものですが、VS Code ベースの AI エディタである独立した Trae IDE とは別物です。

デザイン作業では二つの性質が際立ちます。モデル非依存であること。LLM プロバイダを自分で選べるので、単一モデルの強みや限界に縛られません。そして完全にオープンで設定駆動であること。挙動・ツール・プロバイダを、ホストされたサービスの裏に隠すのではなく、プロジェクトと並べてバージョン管理に固定できます。

• run モードとインタラクティブモード: Trae CLI は `trae-cli run "..."` で単一タスクを実行するか、`trae-cli interactive` で継続的なセッションを保ちます。後者はデザイン規約に照らして UI を反復するのに自然な場です。
• 組み込みツール: ファイル編集、bash/シェル実行、構造化推論のツールを最初から備えているため、ターミナルを離れずに構築・開発サーバ起動・実行時エラーの確認ができます。
• 自分のプロバイダを持ち込む: 信頼するプロバイダ（OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、あるいはローカルの Ollama モデル）の API キーを、環境変数または設定ファイルで指定します。

• ベンダー：ByteDance（オープンソースの trae-agent プロジェクト）
• 認証情報：LLM プロバイダの API キー（BYOK）— 例：OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、またはローカルの Ollama モデル
• ライセンス：MIT、オープンソース

なぜオープンでモデル非依存のエージェントがデザインに適するのか

Trae CLI のデザイン上の強みは、オープンでプロバイダを柔軟に選べる点から来ます。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• 設計からしてモデル非依存: プロバイダを自分で選べるため、レイアウトやフロントエンドコードについて今最もよく推論できるモデルにデザイン作業を回し、後でワークフローを変えずに差し替えられます。
• オープンで設定駆動: エージェント・ツール・プロバイダを、コミットできる設定ファイルに固定できます。チームは開発者ごとにブレることなく、どのマシンでも同じエージェント挙動を得られます。
• 規約はリポジトリの中に: プロジェクト内に置いたトークン・コンポーネント・実際の仕様をエージェントに指し示せば、無個性な見た目に流れず、ブランドに沿って作業します。

教訓はどのエージェントも教えてくれるものと同じです。Trae CLI は既定でセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化し、ACP 経由で Trae CLI に供給します。だからこそ両者は噛み合います（詳細は後述）。

デザイン作業向けに Trae CLI をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Trae CLI までの全行程を示します。Trae CLI は uv を使ってソースからインストールし、使いたい LLM プロバイダで設定します。

# 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

• デザインルールを記述する: トークン・プリミティブ・規約をリポジトリに置き、Trae CLI に指し示します。すると出力は無個性な見た目に流れず、ブランドに合致します。
• ブラウザ検証を加える: Trae CLI に開発サーバを起動させ実際のブラウザで描画させます。ビルドが通ったことだけを確認するのではなく、各ブレークポイントで出力を点検させます。

スクリーンショットから UI へのワークフロー

Trae CLI で最も効果の高いデザインループは、参照画像を動作するレスポンシブな UI に変え、一致するまで反復することです。Trae CLI はモデル非依存なので、参照をうまく扱えるモデルを持つプロバイダを指定し、結果の確認には実際のブラウザを頼りにします。

1. 手持ちで最も明瞭な視覚的参照から始め、ヒーロー画像 1 枚だけでなく複数の状態（デスクトップとモバイル、ホバー、空、ロード中）を記述します。
2. プロンプトは具体的に。曖昧なプロンプトは、強力なモデルでも無個性な UI を生みます。
3. デザインシステムと規約をリポジトリに保ち、トークンと正規のプリミティブの場所を Trae CLI に伝えます。
4. 開発サーバを起動し、Trae CLI に実際のブラウザで描画させ、ブレークポイントまでリサイズして結果を確認します。
5. 単にビルドが通ることを確認するのではなく、実装を参照と照らし合わせて 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.

プロンプトは小さく焦点を絞り、良い反復はコミットし、悪い反復は元に戻します（戻したときは Trae CLI に伝えます）。こうして各パスがクリーンな土台の上に積み重なります。

設定・ツール・プロバイダ

三つの拡張点が Trae CLI を継続的なデザイン作業に実用的にし、いずれもオープンなデザインワークフローにきれいに対応します。

• 設定ファイル: Trae CLI はプロバイダ・モデル・設定を固定する trae_config.yaml を読みます。プロジェクトでエージェントがどう動くかを定める、永続的でバージョン管理可能な置き場です。
• プロバイダの選択: 多くのプロバイダ（OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、Ollama）に対応するため、信頼するモデルにデザイン作業を回し、ワークフローを組み直さずに差し替えられます。
• 組み込みツール: ファイル編集・シェル・構造化推論のツールにより、ターミナルを離れずにコンテキスト収集・構築・開発サーバ起動・検証ループの実行ができます。

これらは可搬でエージェントレベルの機能であり、プロジェクトごとに作り直すのではなく、まさに Open Design が ACP 経由でオーケストレーションするために作られた類のものです。

デザインにおける Trae CLI 対 Codex 対 Claude Code 対 Cursor 対 Gemini CLI

デザイン作業に唯一の勝者はいません。各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると：

コミュニティで繰り返し語られる結論は、センスは人から来るということです。どれもスキル・参照・制約がなければ無個性な美的傾向に流れます。それこそが解くべき本当の問題であり、モデルの形ではなくデザインツールの形をした問題です。

落とし穴と「AI 丸出し」な見た目を避ける方法

AI が生成したデザインへの最も多い不満は、無個性に見えることです。淡いグラデーション、浮遊するパネル、過大に丸めた角、大げさな影、Inter と紫の雰囲気が「AI が作ったと丸わかり」になります。ほかにも、壊れたモバイルレイアウトや指示文が UI コピーに漏れ出すといった問題が報告されています。いずれも Trae CLI 固有のものではなく、厳選されたデザインコンテキストなしにどのエージェントを走らせても起こることです。

• 美的スキルを加える: 厳選されたデザインスキルは、既定の見た目ではなく本物の方向性へ踏み込むようエージェントに強制します。
• 実際のブラウザで検証する: Trae CLI に各ブレークポイントで描画・自己点検させ、モバイルでレイアウトが静かに壊れないようにします。
• トークンと参照を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する最大の梃子です。
• ルールをリポジトリに記述する: 「ヒーローカード禁止、書体は最大 2 種、ブランド優先の階層」のようなルールを、エージェントが毎回読む場所に置きます。

どの対策も、エージェントに厳選されたデザインコンテキストを与えることに帰着する点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持する労苦こそ、Open Design が取り除くものです。

Open Design の中で Trae CLI を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めるオープンソースのデザインレイヤーです。Trae CLI をファーストパーティのアダプタとして扱い、その trae-cli バイナリを介して Agent Client Protocol（ACP）経由で駆動します。そして厳選されたスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包みます。こうして Trae CLI を良くするデザインコンテキストが、毎回手作業で組み立てるのではなく初回から備わります。両者ともオープンソースでローカルファーストなので、この組み合わせは自然です。

1. Open Design をインストールし、エージェントとして Trae CLI を選択します。
2. 自分の LLM プロバイダキー（BYOK）で認証します。認証情報はあなたのマシンに留まり、当方を経由してプロキシされることは決してありません。
3. デザインシステムとスキルを選び、一貫したセンスでデッキ・プロトタイプ・ランディングページを生成します。
4. すべての成果物と DESIGN.md ファイルは、ホスト型クラウドではなく自分のリポジトリに置かれます。

同じ Trae CLI エージェント、同じプロバイダキー。そのまわりに本物で可搬なオープンソースのデザインワークフローが加わります。ローカルファーストでオープンソースなので、作業や認証情報があなたのマシンを離れることはありません。

よくある質問

1. 01 Trae CLI は本当にデザイン作業ができますか？ +

   はい。美的スキル、デザインシステム、本物の参照コンテキストがあれば、Trae CLI は本番品質のレスポンシブな UI を生み出します。しかもモデル非依存なので、フロントエンドについて最もよく推論できるプロバイダに作業を回せます。そのコンテキストがないと無個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 Trae CLI でデザインするのに支払いは必要ですか？ +

   Trae CLI 自体は無料でオープンソース（MIT）です。自分の LLM プロバイダキーを持ち込むので、費用はそのプロバイダの課金分だけです。Ollama 経由でローカルモデルを動かせば無料にもなります。いずれにせよ Open Design があなたの認証情報をプロキシすることはありません。

3. 03 Trae CLI がとりわけデザインに向いている理由は？ +

   二つあります。モデル非依存なので、フロントエンド作業に最適な LLM プロバイダを選べること。そして完全にオープンで設定駆動なので、挙動が透明でチーム間で再現できること。ただしセンスは、あなたが供給するデザインシステム・スキル・参照から来ます。

4. 04 フロントエンドのデザインには Trae CLI と Claude Code のどちらが良いですか？ +

   どちらも有能です。Claude Code は具体的でコードベースを理解したデザイン判断で知られています。Trae CLI の強みはオープンソースでプロバイダを柔軟に選べる点で、単一モデルに縛られません。多くのチームは両方を使います。Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Open Design が Trae CLI を動かすのに何が必要ですか？ +

   Open Design は Trae CLI の trae-cli バイナリを Agent Client Protocol（ACP）経由で駆動し、あなたが設定した LLM プロバイダキーを使います。エージェントとして Trae CLI を選び、プロバイダを指定すれば、Open Design がそのまわりに厳選されたデザインコンテキストを供給します。

6. 06 Open Design は ByteDance や Trae と提携していますか？ +

   いいえ。Trae CLI（trae-agent）は ByteDance の製品です。Open Design は独立したオープンソースプロジェクトで、ファーストパーティのアダプタとしてこれをサポートします。Trae は ByteDance の商標です。

7. 07 私のファイルと認証情報は安全ですか？ +

   はい。Open Design はローカルファーストでオープンソースです。ファイル・成果物・DESIGN.md は自分のリポジトリに留まり、LLM プロバイダの認証情報はあなたのエージェントが直接使い、Open Design のサーバを経由することは決してありません。