OpenCode для дизайна.

Чем на самом деле является OpenCode

OpenCode — это open-source ИИ-агент для кодинга, созданный для терминала и поддерживаемый командой, стоящей за SST (Anomaly Innovations). Он читает ваш репозиторий, выполняет команды, редактирует файлы и общается с большой языковой моделью — но, в отличие от агентов, привязанных к поставщику, он не поставляет собственную модель. Вы направляете его на любого провайдера и любую модель и используете собственный ключ.

Он работает как терминальный UI (TUI), с десктопным приложением и расширениями IDE поверх того же движка. Под капотом он использует клиент-серверную архитектуру, так что агент, который делает работу, отделён от поверхности, с которой вы им управляете. Два встроенных агента — build и plan — переключаются клавишей Tab.

• Независимость от моделей: Модели и провайдеры берутся из models.dev — открытого каталога. Вы настраиваете их в opencode.json строкой provider/model-id и можете отключить нежелательных провайдеров — так что тот же дизайн-процесс работает на Anthropic, OpenAI, Google, OpenRouter, локальных моделях и не только.
• Файл инструкций: OpenCode читает файл AGENTS.md в вашем проекте (кросс-инструментальный стандарт, также совместимый с CLAUDE.md) для правил проекта — естественное место, где можно зафиксировать ваши дизайн-конвенции. Запустите /init, чтобы сгенерировать его.
• Расширяемость: Он поддерживает интеграцию LSP, серверы MCP, темы, горячие клавиши и пользовательские команды, плюс ссылки на общие сессии для совместной работы.

• Сопровождающий: SST / Anomaly Innovations (open-source проект)
• Учётные данные: ваши собственные API-ключи провайдеров моделей — BYOK, без привязки к поставщику
• Лицензия: MIT, open source

Почему открытый агент с любой моделью подходит для дизайн-работы

У OpenCode нет единой «дизайн-модели», как у агента, привязанного к поставщику, — и в этом весь смысл. Поскольку он независим от моделей и открыт, вы можете запускать тот же дизайн-процесс на той модели, что сейчас лучшая во фронтенде, позже сменить её или откатиться к локальной модели — и всё это без изменения настройки.

Но один лишь выбор модели не покупает вкус. Как и любой кодинг-агент, OpenCode создаёт шаблонный UI, пока вы не дадите ему ограничения. Хороший дизайн-результат рождается из трёх вводных, которые вы предоставляете.

• Дизайн-система: Реальные tokens, примитивы и конвенции, которые агент переиспользует, чтобы вывод соответствовал бренду, а не сваливался в шаблонный вид.
• Эстетический skill: Курируемый skill, навязывающий реальный вкус — сдержанная анимация, иерархия от бренда, не более двух шрифтов и одного акцентного цвета — и заставляющий агента задать направление до сборки.
• Конкретные референсы: Реальные референсные изображения и несколько состояний (десктоп и мобильный, hover, пустое, загрузка), а не один hero-кадр.

Урок: OpenCode даёт вам свободу выбора модели, но вкус по-прежнему рождается из курируемого дизайн-контекста. Open Design упаковывает именно эти вводные, поэтому они так хорошо сочетаются — оба open-source и local-first (подробнее ниже).

Настройка OpenCode для дизайна с нуля

Вот полный путь от чистой машины до OpenCode, способного создавать и проверять UI.

# 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

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Зафиксируйте свои дизайн-правила: Поместите свои tokens, примитивы и конвенции в AGENTS.md (или DESIGN.md, на который он ссылается), чтобы вывод соответствовал бренду, а не сваливался в шаблонный вид. Опция instructions в opencode.json может указывать на дополнительные файлы правил через globs.
• Выберите способную модель: Поскольку OpenCode независим от моделей, выберите для дизайн-прохода тот provider/model, что сейчас сильнее всего во фронтенде, — и оставьте остальной процесс без изменений.

Рабочий процесс «скриншот в UI»

Самый эффективный дизайн-цикл с любым агентом — это превращение референсного изображения в работающий, адаптивный UI и итерация до совпадения. Та же пятишаговая форма применима в OpenCode.

1. Начинайте с самых ясных визуальных референсов, что у вас есть, — и включайте несколько состояний (десктоп и мобильный, hover, пустое, загрузка), а не только один hero-кадр.
2. Будьте конкретны в промпте; расплывчатые промпты дают шаблонный UI.
3. Подготовьте дизайн-систему и подскажите OpenCode, где лежат tokens и канонические примитивы (в AGENTS.md).
4. Запустите dev-сервер и заставьте агента отрисовывать результат в настоящем браузере, меняя размер до брейкпоинтов, чтобы проверить результат.
5. Итерируйте, заставляя OpenCode сравнивать свою реализацию со скриншотами, а не просто подтверждать сборку.

Ссылайтесь на файлы через @ в TUI для нечёткого поиска по рабочей директории, выполняйте shell-команды инлайн с ведущим !, и управляйте действиями через команды /. Затем задавайте промпт с конкретными ограничениями:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Держите промпты короткими и сфокусированными, коммитьте удачные итерации и откатывайте неудачные (сообщая OpenCode об откате), чтобы каждый проход строился на чистой основе.

AGENTS.md, MCP и общие сессии

Три точки расширения делают OpenCode практичным для длительной дизайн-работы, и все три аккуратно ложатся на открытый дизайн-процесс.

• Правила AGENTS.md: Правила проекта живут в AGENTS.md в корне репозитория (или глобальные правила в ~/.config/opencode/AGENTS.md). Это устойчивый дом для ваших дизайн-конвенций, читаемый при каждом запуске, и он совместим с файлами CLAUDE.md, которые используют другие агенты.
• Серверы MCP: OpenCode поддерживает как локальные (command), так и удалённые (URL) серверы MCP, настраиваемые под ключом mcp — переносимый способ подтянуть дизайн-контекст и внешние инструменты, работающие в разных агентах, а не только в OpenCode.
• Общие сессии: Команда /share создаёт публичную ссылку на диалог для совместной работы или ревью, а /unshare отзывает её — полезно для получения обратной связи по дизайн-проходу.

Это переносимые, мультиагентные возможности — именно то, что Open Design создан оркестрировать, а не пересоздавать в каждом проекте.

OpenCode против Codex против Claude Code против Cursor для дизайна

Единого победителя в дизайн-работе нет — у каждого агента своя сильная сторона, и опытные команды комбинируют их. Честная сводка:

Повторяющийся вердикт сообщества: вкус исходит от людей — все они по умолчанию сваливаются в шаблонную эстетику без skills, референсов и ограничений. Вот настоящая проблема, которую нужно решить — и она по форме относится к дизайн-инструменту, а не к модели, и именно поэтому открытый агент вроде OpenCode так хорошо сочетается с открытым дизайн-слоем.

Подводные камни и как избежать вида «AI slop»

Самая частая жалоба на дизайн, сгенерированный ИИ, в том, что он выглядит шаблонно — мягкие градиенты, плавающие панели, чрезмерно скруглённые углы, драматичные тени, вайб Inter-и-фиолетового, который «кричит, что это сделал ИИ». Среди других сообщаемых проблем — сломанные мобильные раскладки и инструкции, протекающие в текст UI. Ничто из этого не уникально для OpenCode; это то, что происходит, когда любой агент работает без курируемого дизайн-контекста.

• Добавьте эстетический skill: Курируемый дизайн-skill заставляет агента задать реальное направление вместо вида по умолчанию.
• Проверяйте в настоящем браузере: Отрисовывайте и самопроверяйте результат на разных брейкпоинтах, чтобы раскладки не ломались незаметно на мобильном.
• Предоставьте tokens и референсы: Реальные дизайн-tokens и референсные скриншоты — самый сильный рычаг для качества вывода.
• Зафиксируйте правила в AGENTS.md: Поместите правила вроде «без hero-карточек, максимум два шрифта, иерархия от бренда» туда, где агент читает их при каждом запуске.

Обратите внимание: каждое из этих средств сводится к тому, чтобы дать агенту курируемый дизайн-контекст — независимо от того, какую модель вы запускаете. Поддержка этого контекста вручную, для каждого проекта, — та рутина, которую устраняет Open Design.

Дизайн с OpenCode внутри Open Design

Open Design — это тот open-source дизайн-слой, которого процесс выше постоянно требует. Он рассматривает OpenCode как нативный адаптер и оборачивает его в курируемую библиотеку skill и дизайн-систем, структурированный конвейер рендера и локальный десктопный UI — так что дизайн-контекст, делающий любого агента хорошим, есть с первого запуска, а не собирается вручную каждый раз. Оба проекта open-source и local-first, что делает их сочетание естественным.

1. Установите Open Design и выберите OpenCode как своего агента.
2. Аутентифицируйтесь с помощью собственного API-ключа провайдера моделей (BYOK) — учётные данные остаются на вашей машине и никогда не проксируются через нас.
3. Выберите любого провайдера и модель, плюс дизайн-систему и skill, затем генерируйте презентации, прототипы и лендинги с единообразным вкусом.
4. Каждый артефакт и файл DESIGN.md живёт в вашем собственном репозитории, а не в хостинговом облаке.

Тот же агент OpenCode, та же свобода выбора модели — плюс настоящий, переносимый, open-source дизайн-процесс вокруг него. Он local-first и под Apache-2.0, так что ничто из вашей работы или ваших учётных данных не покидает машину.

Часто задаваемые вопросы

1. 01 Действительно ли OpenCode способен на дизайн-работу? +

   Да — с эстетическим skill, дизайн-системой и реальными референсными изображениями в контексте OpenCode создаёт продакшен-качественный, адаптивный UI и может проверить его в браузере. Поскольку он независим от моделей, вы запускаете ту модель, что сейчас лучшая во фронтенде. Без такого курируемого контекста он склонен сваливаться в шаблонный вид — и именно этот разрыв закрывает Open Design.

2. 02 Какую модель использовать с OpenCode для дизайна? +

   Любую на ваш вкус — OpenCode независим от провайдера через models.dev, так что вы можете запускать Anthropic, OpenAI, Google, OpenRouter или локальные модели за тем же рабочим процессом и переключаться в любой момент. Качество дизайн-вывода зависит куда больше от вашего skill, дизайн-системы и референсов, чем от одной только модели.

3. 03 Сделан ли Open Design командой OpenCode (SST)? +

   Нет. Open Design — независимый open-source проект, который интегрирует OpenCode как агента. Он дополняет OpenCode local-first, открытой библиотекой skill и дизайн-систем.

4. 04 Нужна ли специальная подписка, чтобы заниматься дизайном с OpenCode? +

   Нет — OpenCode работает по BYOK. Вы используете собственный API-ключ провайдера моделей, и Open Design никогда не проксирует ваши учётные данные. Привязки к поставщику нет.

5. 05 OpenCode, Codex или Claude Code для фронтенд-дизайна? +

   Все сильны, и многие команды комбинируют их. Преимущество OpenCode — полная открытость и независимость от моделей; Codex блистает в делегированных сборках в песочнице; Claude Code известен конкретными, учитывающими кодовую базу дизайн-решениями. Open Design позволяет переключать агентов, не меняя дизайн-процесс.

6. 06 Как расширить OpenCode для дизайн-контекста? +

   Зафиксируйте правила в AGENTS.md, добавьте серверы MCP под ключом mcp для переносимых инструментов и дизайн-контекста и используйте общие сессии для ревью. Open Design поставляет курируемую библиотеку skill и дизайн-систем, так что вы пропускаете настройку под каждый проект.

7. 07 Связан ли Open Design с OpenCode или SST? +

   Нет. OpenCode — open-source проект, поддерживаемый SST (Anomaly Innovations); Open Design — независимый open-source проект, который поддерживает его как нативный адаптер.

8. 08 В безопасности ли мои файлы и учётные данные? +

   Да — Open Design является local-first. Ваши файлы, артефакты и DESIGN.md остаются в вашем собственном репозитории, а ваши учётные данные провайдера моделей используются напрямую вашим агентом и никогда не маршрутизируются через серверы Open Design.