OpenCode 
OpenDesign Как проектировать интерфейсы с OpenCode в OpenDesign: design.md привязывается до генерации чего-либо, выбранный вами провайдер, одна задача в общем инбоксе от брифа до проверенного файла, а также ограничения, которые нужно знать перед началом работы.
«Общий почтовый ящик, построенный на
design.md, а не на настройках по умолчанию».
ТРИ СПОСОБА НАЧАТЬ ЭТО РУКОВОДСТВО ПО OPENCODE
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАВот полный путь от чистой машины до OpenCode, способного создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕЧем OpenCode отличается от Codex, Claude Code, Cursor в работе над дизайном и когда стоит выбрать другой workflow.
Посмотреть сравнениеОдна полная дизайн-задача в OpenCode
Одна задача, показанная целиком: бриф и ограничения, которые вы передаёте, артефакт, который вы получаете обратно, и проверки, которые вы всё равно выполняете перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не запись реального запуска OpenCode.
БрифСпроектируйте общий командный почтовый ящик: список бесед с указанием владельцев, вид треда и правую панель с контекстом клиента. Перед генерацией привяжите систему design.md. Десктоп и телефон.
data-od-idПишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
Три панели на сетке 8px; панель контекста сворачивается раньше, чем тред.
Владелец и тема — на первом месте; акцент отмечает только «ожидает от нас».
Сначала список, затем тред по тапу; панель контекста становится шитом.
Отфильтруйте по владельцу, откройте тред, переключите панель, отправьте ответ.
Fit
Совместимость
В этом руководстве рассматривается OpenCode при подключении через desktop-приложение OpenDesign. Опубликованные источники проверены 6 сентября 2026 года.
OpenCode — это open-source (MIT) терминальный AI-агент для кода — TUI плюс десктопные и IDE-интерфейсы — поддерживаемый Anomaly (командой SST) на github.com/anomalyco/opencode. Эта страница о проектировании интерфейсов с помощью OpenCode через OpenDesign, а не о собственном интерфейсе OpenCode. В заметках по настройке OpenDesign перечислены доступные агенты.
Ключи провайдера через конфиг OpenCode (BYOK). OpenCode использует ваши ключи провайдера через собственный конфиг (BYOK) — ничего не проксируется. Эта страница не гарантирует квоту или цену.
Проверьте страницу загрузки desktop-сборок. Требования к Node.js и pnpm из быстрого старта из исходников касаются запуска из исходного кода, а не установки desktop-пакета. Минимальная совместимая версия OpenCode здесь не проверялась.
Следуйте инструкциям по подключению, которые показывает установленная у вас версия, затем запустите небольшую задачу. Убедитесь, что OpenCode обработал её и что артефакт открывается. Одной только загрузки для подтверждения работающего подключения недостаточно.
Начните с десктопного приложения
Сначала загрузите, завершите настройку OpenCode для вашей установленной версии, затем проверьте небольшой результат. Собирать OpenDesign из исходников для этого пути не нужно.
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignСледуйте инструкциям по OpenCode из вашей установленной версии. OpenCode использует ваши ключи провайдера через собственный конфиг (BYOK) — ничего не проксируется.
# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode
# 2. Start the TUI in your project, then authenticate your provider
opencode # then run /login and pick your provider + paste your keyИз заметок по настройке OpenCode в опубликованном руководстве; актуальную команду уточняйте в документации поставщика.
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Создайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Дизайн-workflow OpenCode
Та же задача с командным инбоксом, пройденная от брифа до проверенного файла. Каждый шаг описывает, что предоставляете вы, что делает OpenCode, что добавляет OpenDesign и что вы проверяете.
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
OpenCode пишет автономный HTML-файл: разметку, стили, взаимодействия и стабильные хуки.
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
data-od-id для комментариев и правок.Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
Ресурсы
Обучающие материалы, документация и разборы по дизайну с OpenCode, перечисленные в опубликованном руководстве.
Типы артефактов, которые OpenCode может создавать в OpenDesign, по одному skill на тип.
Токены бренда и компоненты, которые нужно привязать до того, как OpenCode что-либо сгенерирует.
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Вопросы и ответы
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.