用 Trae CLI 做设计。

Trae CLI 究竟是什么

Trae CLI 是字节跳动开源 trae-agent 项目中的命令行 agent。它会读取你的仓库，查看、创建和编辑文件，并在一个持久化的环境中运行 shell 命令——根据自然语言任务进行规划和验证，而不只是补全几行代码。它采用 MIT 许可，围绕透明、模块化的架构构建，因此易于审视和扩展。它与另一款独立的 Trae IDE（字节跳动基于 VS Code 的 AI 编辑器）不同，尽管两者出自同一厂商。

对设计工作来说，有两个特性尤为突出。它模型无关——你选择 LLM 提供商，所以永远不会被某个模型的长处或局限所束缚。它也完全开放、配置驱动，因此它的行为、工具和提供商都可以和你的项目一起固定在版本控制里，而不是藏在某个托管服务背后。

• 运行模式与交互模式: Trae CLI 用 `trae-cli run "..."` 运行单个任务，或用 `trae-cli interactive` 保持一个持续会话——这正是对照你的设计规范来迭代 UI 的好地方。
• 内置工具: 它开箱即带文件编辑、bash/shell 执行和结构化推理工具，因此能构建、跑起开发服务器并检查运行时错误，全程不用离开终端。
• 自带你的提供商: 你为信任的提供商提供一个 API 密钥——OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure，或本地的 Ollama 模型——通过环境变量或配置文件设置。

• 厂商：字节跳动（开源 trae-agent 项目）
• 凭证：一个 LLM 提供商 API 密钥（BYOK）——例如 OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure，或本地的 Ollama 模型
• 许可：MIT，开源

为什么开放、模型无关的 agent 适合做设计

Trae CLI 在设计上的优势来自它的开放和提供商灵活性——但和每一个 agent 一样，品味仍然得由人来提供。

• 天生模型无关: 因为提供商由你选择，你可以把设计工作交给当下在布局和前端代码上推理最好的模型，日后再换掉它也不必改动工作流。
• 开放且配置驱动: agent、它的工具及其提供商都固定在一个你可以提交的配置文件里，于是团队在每台机器上都得到相同的 agent 行为，而不是因开发者而异地漂移。
• 规范留在你的仓库里: 把 agent 指向你的 tokens、组件和真实规格——它们都保存在你的项目里——这样它就是在针对一个品牌工作，而不是退回到千篇一律的外观。

这条教训和每个 agent 教给我们的一样：Trae CLI 默认并不具备品味。当你给它约束——一个设计系统、一个审美 skill 以及具体的参考——它才会产出好的设计。Open Design 恰好把这些输入打包好，并通过 ACP 喂给 Trae CLI，这正是两者契合的原因（下文详述）。

从零开始配置 Trae CLI 来做设计

这是从一台干净的机器到一个能构建并验证 UI 的 Trae CLI 的完整路径。Trae CLI 用 uv 从源码安装，然后配置上你想用的 LLM 提供商。

# 1. 从源码获取 Trae CLI（trae-agent）——需要 uv
git clone https://github.com/bytedance/trae-agent.git
cd trae-agent
uv sync --all-extras
source .venv/bin/activate

# 2. 通过把它指向你的 LLM 提供商密钥来完成认证
#    在环境变量里设置（或写进 trae_config.yaml 文件）
export OPENAI_API_KEY=...        # 或 ANTHROPIC_API_KEY、GOOGLE_API_KEY 等

# 3. 在你的项目中运行一个任务
trae-cli run "Create a hello world page"
#    或保持一个会话：
trae-cli interactive

# 4. 查看解析后的配置（密钥会被打码）
trae-cli show-config

• 把你的设计规则编码进去: 把你的 tokens、原语和规范放在仓库里并把 Trae CLI 指向它们，这样产出就会匹配一个品牌，而不是退回到千篇一律的外观。
• 加入浏览器验证: 让 Trae CLI 跑起开发服务器并在真实浏览器中渲染，这样它就会跨断点检查自己的产出，而不只是确认构建通过。

截图到 UI 的工作流

用 Trae CLI 做设计时，杠杆最高的循环是把一张参考图变成可用的响应式 UI，并不断迭代直到匹配。因为 Trae CLI 模型无关，把它指向一个其模型能很好处理参考图的提供商，并依靠真实浏览器来检查结果。

1. 从你手头最清晰的视觉参考出发——并描述多种状态（桌面端和移动端、悬停、空态、加载中），而不只是一张主视觉。
2. 提示词要具体；含糊的提示即便配上强模型也会产出千篇一律的 UI。
3. 把你的设计系统和规范留在仓库里，并告诉 Trae CLI tokens 和标准原语在哪里。
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，它固定了你的提供商、模型和各项设置——这是 agent 在项目上如何运行的持久、可版本控制的归宿。
• 提供商选择: 由于它支持众多提供商（OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、Ollama），你可以把设计工作交给你信任的模型，并在不重接工作流的情况下换掉它。
• 内置工具: 它的文件编辑、shell 和结构化推理工具让它能收集上下文、构建、跑起开发服务器并运行验证循环，全程不用离开终端。

这些都是可移植的、agent 级别的能力——恰恰是 Open Design 被设计用来通过 ACP 编排的那类东西，而不必每个项目都重新搭一遍。

做设计时 Trae CLI 对比 Codex、Claude Code、Cursor、Gemini CLI

设计工作没有唯一的赢家——每个 agent 各有不同的强项，有经验的团队会把它们叠着用。一个公允的总结：

社区反复得出的结论是：品味来自人——没有 skill、参考和约束时，它们全都会退回到千篇一律的审美。这才是真正要解决的问题——而它是设计工具形状的，不是模型形状的。

陷阱，以及如何避开「AI 廉价感」的外观

对 AI 生成设计最常见的抱怨是它看起来千篇一律——柔和的渐变、悬浮的面板、过大的圆角、夸张的阴影，一种 Inter 字体加紫色的调调，「一看就是 AI 做的」。其他被反映的问题还包括移动端布局错乱，以及指令泄漏进 UI 文案。这些都不是 Trae CLI 独有的；任何 agent 在缺乏精选的设计上下文下运行时都会这样。

• 加一个审美 skill: 一个精选的设计 skill 会迫使 agent 选定一个真正的方向，而不是默认外观。
• 在真实浏览器中验证: 让 Trae CLI 跨断点渲染并自检，这样布局就不会在移动端悄悄崩坏。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图是撬动产出质量的最大单一杠杆。
• 把规则编码进你的仓库: 把「不用主视觉卡片、最多两种字体、品牌优先的层级」这类风格规则放在 agent 每次运行都会读到的地方。

注意到了吗，每一项缓解措施都在于给 agent 一份精选的设计上下文。逐个项目手工维护这份上下文，正是 Open Design 替你省掉的苦力活。

在 Open Design 中用 Trae CLI 做设计

Open Design 正是上面那套工作流一再呼唤的那个开源设计层。它把 Trae CLI 当作一等适配器——通过其 trae-cli 二进制文件、用 Agent Client Protocol（ACP）来驱动它——并把它包进一套精选的 skill 与设计系统库、一条结构化的渲染流水线和一个本地桌面 UI，于是让 Trae CLI 出彩的那份设计上下文从第一次运行起就在那里，不必每次手工拼凑。两者都是开源、本地优先，这让它们的搭配成了天然之选。

1. 安装 Open Design 并选择 Trae CLI 作为你的 agent。
2. 用你自己的 LLM 提供商密钥（BYOK）认证——凭证留在你的机器上，绝不经我们代理。
3. 挑一个设计系统和一个 skill，然后以一致的品味生成演示稿、原型和落地页。
4. 每一个产物和 DESIGN.md 文件都存在你自己的仓库里，而不是某个托管云上。

同一个 Trae CLI agent、同一个提供商密钥——外加一套真正可移植、开源的设计工作流围着它运转。它本地优先、开源，所以关于你的工作或你的凭证，没有任何东西会离开你的机器。

常见问题

1. 01 Trae CLI 真的能做设计工作吗？ +

   能——配上一个审美 skill、一个设计系统和真实的参考上下文，Trae CLI 能产出生产级、响应式的 UI；而且因为它模型无关，你可以把工作交给在你的前端上推理最好的提供商。没有这份上下文时，它往往会退回到千篇一律的外观，这正是 Open Design 填补的鸿沟。

2. 02 用 Trae CLI 做设计需要付费吗？ +

   Trae CLI 本身免费且开源（MIT）。你自带 LLM 提供商密钥，所以你唯一的成本是那家提供商收的费用——或者如果你通过 Ollama 跑本地模型，则分文不花。无论哪种方式，Open Design 都不会代理你的凭证。

3. 03 Trae CLI 具体好在哪里、适合做设计？ +

   两点：它模型无关，所以你可以选择最适合前端工作的 LLM 提供商；它完全开放、配置驱动，所以它的行为对一个团队来说透明且可复现。但品味仍然来自你提供的设计系统、skill 和参考。

4. 04 前端设计该用 Trae CLI 还是 Claude Code？ +

   两者都很能干。Claude Code 以具体、代码库感知的设计决策著称；Trae CLI 的优势是开源且提供商灵活，所以你永远不会被锁定在某一个模型上。许多团队两个都用——Open Design 让你在不改动设计工作流的情况下切换 agent。

5. 05 Open Design 运行 Trae CLI 需要什么？ +

   Open Design 通过 Agent Client Protocol（ACP）驱动 Trae CLI 的 trae-cli 二进制文件，并使用你配置的 LLM 提供商密钥。你选择 Trae CLI 作为你的 agent，把它指向一个提供商，Open Design 就在它周围提供那份精选的设计上下文。

6. 06 Open Design 和字节跳动或 Trae 有关联吗？ +

   没有。Trae CLI（trae-agent）是字节跳动的产品；Open Design 是一个独立的开源项目，把它作为一等适配器来支持。Trae 是字节跳动的商标。

7. 07 我的文件和凭证安全吗？ +

   安全——Open Design 本地优先且开源。你的文件、产物和 DESIGN.md 都留在你自己的仓库里，你的 LLM 提供商凭证由你的 agent 直接使用，绝不经 Open Design 的服务器中转。