ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ
Дополнительные материалы по Trae CLI
Учебные материалы, документация и пошаговые руководства по дизайну с Trae CLI, перечисленные в опубликованном руководстве.
Trae CLI 
OpenDesign Проектируйте с
Trae CLI в
OpenDesign.
Как проектировать интерфейсы с Trae CLI в OpenDesign: модель, которую вы предоставляете, реальный браузер, проверяющий каждый проход, одна задача по лендинговой странице от брифа до проверенного файла и ограничения, которые нужно знать перед началом.
От брифа к интерфейсу01 / Trae CLI
ВЫ ПРИНОСИТЕ ИДЕЮ↗
«Страница товара, которую можно проверить
в настоящем браузере, на каждом этапе».
ТРИ СПОСОБА НАЧАТЬ С ЭТИМ РУКОВОДСТВОМ ПО TRAE CLI
Выберите, с чего начать работу с Trae CLI
ЭТО РУКОВОДСТВО · ДИЗАЙН ИНТЕРФЕЙСОВ
Создайте интерфейс продукта с Trae CLI
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАНастройте Trae CLI с нуля
Вот полный путь от чистой машины до Trae CLI, способного собирать и проверять UI.
Перейти к настройке СРАВНЕНИЕСравнение Trae CLI с другими агентами
Чем Trae CLI отличается от Codex, Claude Code, Cursor в дизайн-задачах и когда выбрать другой workflow.
Посмотреть сравнениеНа этой странице Пример
Одна полная дизайн-задача Trae CLI
Дизайн-задача Trae CLI — от брифа до интерфейса
Одна задача, показанная целиком: бриф и ограничения, которые вы передаёте, артефакт, который возвращается, и проверки, которые вы всё равно выполняете до завершения. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не записанный запуск Trae CLI.
1Дизайн-бриф и ограничения
БрифСпроектируйте лендинг для продукта документации: hero, демо поиска с живым видом, три преимущества и логотипы клиентов. Проверяйте каждую итерацию в реальном браузере на обеих ширинах.
- Дизайн-системаOpenDesign paper canvas: Albert Sans, один зелёный акцент
- Брейкпоинты1440px десктоп и 390px мобильный, без горизонтального скролла
- ВзаимодействияСостояние фокуса демо поиска, состояния CTA, скролл строки логотипов
- РезультатОдин самодостаточный HTML-файл со стабильными хуками
data-od-id
2Разделение работы: вы, Trae CLI и OpenDesign
- Вы
Пишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
- Trae CLI
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
- OpenDesign
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
- Проверка
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
3Артефакт Trae CLI: страница товара при 1440px и 390px
4Проверка перед передачей
Layout
Сетка и отступы
Hero и преимущества на сетке 8px; демо поиска сохраняет фиксированную высоту, чтобы страница не «прыгала».
Иерархия
Визуальная иерархия
Заголовок, демо поиска, затем преимущества; акцентный цвет отмечает только кнопку запуска.
Responsive
Мобильная раскладка
Текст, затем демо, затем преимущества; логотипы скроллятся горизонтально внутри своей строки.
Interaction
Проверка взаимодействия
Сфокусируйте демо, пройдите по обоим CTA, прокрутите строку логотипов.
Fit
Когда Trae CLI подходит для задачи, а когда нет
Trae CLI подходит, когда
- Используйте свою модель. Изначально модель-независим, поэтому вы направляете работу над UI тому LLM-провайдеру, который лучше всего рассуждает о вашем фронтенде — и можете сменить его позже.
- Открытость и настройка через конфиг. Лицензия MIT, закреплён в trae_config.yaml — поведение агента прозрачно и воспроизводимо в команде.
- Реальный цикл работы в браузере. Инструменты для файлов, shell и рассуждений позволяют собирать проект, запускать dev-сервер и проверять UI по брейкпоинтам.
- Бесплатный старт. Сам агент бесплатен; ваши расходы — только на выбранного провайдера, либо ничего при использовании локальной модели Ollama.
Выберите другой workflow, если
- Вам нужны редактируемые векторные файлы. Артефакт — это HTML, а не редактируемый дизайн-документ. Проверьте отдельный векторный workflow для нужного вам формата файлов.
- У вас нет ни референса, ни ограничений. Без дизайн-системы или примеров результат стремится к типовому виду; сначала напишите бриф.
- У вас нет учётных данных, необходимых этому агенту. Требуется: ваш собственный API-ключ провайдера LLM (используйте свой ключ) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure или локальная Ollama. OpenDesign не предоставляет и не проксирует учётные данные.
- Ваша команда работает в Qoder или Kimi. У этих агентов есть свои страницы; рабочее пространство то же, но настройка отличается. См. похожие агенты.
Совместимость
Что нужно перед началом работы с Trae CLI
В этом руководстве рассматривается Trae CLI при подключении через desktop-приложение OpenDesign. Опубликованные источники проверены 6 сентября 2026 года.
Область применения инструментаTrae CLI, от ByteDance
Trae CLI — это ИИ-агент для терминала с открытым исходным кодом (MIT) от ByteDance, распространяемый в виде проекта trae-agent. Он читает вашу кодовую базу, редактирует файлы и выполняет команды shell на основе задач, сформулированных на естественном языке. Эта страница посвящена дизайну интерфейсов с помощью Trae CLI через OpenDesign, а не собственному интерфейсу Trae CLI. В инструкциях по настройке OpenDesign перечислены доступные агенты.
Учётные записи и аутентификацияСобственный API-ключ провайдера LLM (BYOK) —
Собственный API-ключ провайдера LLM (BYOK) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure или локальный Ollama. Пройдите аутентификацию с помощью собственного ключа провайдера LLM (BYOK) — учётные данные остаются на вашем компьютере. Эта страница не гарантирует квоту или цену.
Система и версииДесктопное приложение или сборка из исходников
Информацию о десктопных сборках см. на странице загрузки. Требования к Node.js и pnpm в быстром старте из исходного кода касаются запуска из исходного кода, а не установки десктопного пакета. Минимальная совместимая версия Trae CLI: здесь не проверялась.
Проверка подключенияСигнал об успехе
Следуйте инструкциям по подключению, показанным вашей установленной версией, затем запустите небольшую задачу. Убедитесь, что Trae CLI справился с ней и что артефакт открывается. Одна лишь загрузка не устанавливает рабочее подключение.
Начните с десктопного приложения
Настройка Trae CLI за три шага
Сначала загрузите, завершите настройку Trae CLI для вашей установленной версии, затем проверьте небольшой результат. Для этого пути вам не нужно собирать OpenDesign из исходного кода.
- 1
Загрузите десктопное приложение OpenDesign
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignКОНТРОЛЬНАЯ ТОЧКАОткрывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно. - 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
Выполните одну небольшую задачу в Trae CLI
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Начальный брифСоздайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
КОНТРОЛЬНАЯ ТОЧКАОткройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс дизайна в Trae CLI
Рабочий процесс дизайна в Trae CLI за пять шагов
Одна и та же задача по странице продукта, пройденная от брифа до проверенного файла. На каждом шаге указано, что предоставляете вы, что делает Trae CLI, чем помогает OpenDesign и что вы проверяете.
- 1
Дизайн-бриф
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
- ВыНапишите бриф; приложите референсный скриншот, если он есть.
- Trae CLIСчитывает бриф и файл инструкций проекта; задаёт вопросы, если что-то неоднозначно.
- OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
- ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.
- 2
Дизайн-ограничения
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
- ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
- Trae CLIЗагружает токены DESIGN.md и правила подачи в контекст перед написанием первой строки.
- OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
- ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.
- 3
Сгенерировать интерфейс
Trae CLI создаёт автономный HTML-файл: разметку, стили, интерактивность и стабильные хуки.
- ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
- Trae CLIПланирует разделы, пишет HTML, CSS и JavaScript, запускает файл и исправляет ошибки.
- OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
- ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.
- 4
Предпросмотр
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
- ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
- Trae CLIСчитывает ваши комментарии к предпросмотру и готовит следующую редакцию.
- OpenDesignОтображает предпросмотр, предоставляет цели
data-od-idдля комментариев и правок. - ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.
- 5
Правки и проверка
Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
- ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
- Trae CLIПрименяет изменения на месте и повторно запускает файл.
- OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
- ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.
Ресурсы
Ресурсы по дизайну для Trae CLI
Skills Просмотреть skills Дизайн-системы Просмотреть системы Шаблоны Просмотреть шаблоны
Skills для дизайна
Типы артефактов, которые Trae CLI может создавать в OpenDesign — один skill на каждый тип.
Дизайн-системы
Брендовые токены и компоненты, которые нужно привязать перед тем, как Trae CLI начнёт что-либо генерировать.
Шаблоны
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Ограничения Trae CLI, ручные проверки и запасные варианты
- Область примененияОн не привязан к конкретной модели — вы используете собственный ключ провайдера LLM (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure или локальную модель Ollama), — а его поведение фиксируется в конфигурационном файле, который можно закоммитить. Эта страница описывает Trae CLI как агента, подключённого к OpenDesign, а не все возможности Trae CLI.
- Лимиты использованияЛимиты использования и стоимость зависят от учётных данных, которые вы используете (собственный API-ключ провайдера LLM — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure или локальная Ollama). Эта страница не утверждает наличие бесплатных квот.
- СетьЛокальные файлы проекта не означают офлайн-инференс. Прежде чем передавать конфиденциальные данные, ознакомьтесь с настройками провайдера вашего агента и политиками обработки данных.
- Результат — HTMLПродукты представляют собой HTML-файлы, а не векторные файлы дизайна.
- Ручная проверкаДоступность, реальный контент, соответствие бренду и корректность взаимодействия проверяете вы сами в предпросмотре. Любую самопроверку агента следует считать лишь первым проходом.
- Запасной вариантЕсли агент недоступен или задача завершилась ошибкой, проверьте инструкции по подключению и авторизации для установленной версии. Перед изменением конфигурации сохраните ошибку и последний работающий артефакт.
Вопросы и ответы
Частые вопросы о Trae CLI и OpenDesign
Может ли Trae CLI действительно выполнять дизайн-работу?
Да — с эстетическим skill, дизайн-системой и реальным референсным контекстом Trae CLI создаёт адаптивный UI производственного качества, а поскольку он не привязан к конкретной модели, вы можете направить задачу тому провайдеру, который лучше всего рассуждает о вашем фронтенде. Без этого контекста он склонен к типовому виду — именно этот разрыв закрывает OpenDesign.
Нужно ли платить, чтобы проектировать с Trae CLI?
Сам Trae CLI бесплатен и с открытым исходным кодом (MIT). Вы используете собственный ключ провайдера LLM, поэтому единственные ваши расходы — это то, что берёт этот провайдер, — или ничего, если вы запускаете локальную модель через Ollama. OpenDesign в любом случае никогда не проксирует ваши учётные данные.
Что делает Trae CLI особенно удачным для дизайна?
Две вещи: он не привязан к конкретной модели, поэтому вы выбираете провайдера LLM, наиболее подходящего для работы с фронтендом, и он полностью открыт и управляется конфигурацией, поэтому его поведение прозрачно и воспроизводимо в команде. Но вкус всё равно определяется дизайн-системой, skill и референсами, которые вы предоставляете.
Trae CLI или Claude Code для дизайна фронтенда?
Оба справляются с задачей. Claude Code известен точными решениями по дизайну с учётом кодовой базы; преимущество Trae CLI — открытый код и гибкость выбора провайдера, так что вы никогда не привязаны к одной модели. Многие команды используют оба — OpenDesign позволяет переключать агентов без изменения рабочего процесса дизайна.
Что нужно OpenDesign для запуска Trae CLI?
OpenDesign управляет бинарным файлом trae-cli агента Trae CLI по протоколу Agent Client Protocol (ACP) и использует ключ вашего настроенного провайдера LLM. Вы выбираете Trae CLI в качестве агента, указываете провайдера, а OpenDesign предоставляет тщательно подобранный дизайн-контекст вокруг него.
Начните первую дизайн-задачу с Trae CLI
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.