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

Чим насправді є OpenCode

OpenCode — це AI-агент для кодування з відкритим кодом, створений для терміналу й підтримуваний командою, що стоїть за 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 (проєкт з відкритим кодом)
• Облікові дані: ваш(і) власний(і) API-ключ(і) постачальника моделей — BYOK, без прив'язки до вендора
• Ліцензія: MIT, відкритий код

Чому відкритий агент із будь-якою моделлю пасує дизайн-роботі

OpenCode не має єдиної «дизайн-моделі», як її має вендорний агент — і в цьому суть. Оскільки він незалежний від моделей і відкритий, ви можете запускати той самий дизайн-процес на тій моделі, яка зараз найкраща у фронтенді, замінити її пізніше або відкотитися до локальної моделі — і все без зміни вашого налаштування.

Але самого вибору моделі мало для смаку. Як і кожен агент для кодування, OpenCode створює загальний UI, доки ви не дасте йому обмежень. Добрий дизайн-вивід походить із трьох вхідних даних, які надаєте ви.

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

Урок: OpenCode дає вам свободу моделі, але смак усе одно походить із кураторського дизайн-контексту. Open Design упаковує саме ці вхідні дані, тому ці двоє пасують одне одному — обидва з відкритим кодом і 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 може вказувати на додаткові файли правил через glob-и.
• Виберіть здатну модель: Оскільки OpenCode незалежний від моделей, виберіть той постачальник/модель, що зараз найсильніший у фронтенді, для дизайн-проходу — і лишіть решту свого процесу незмінною.

Робочий процес «скриншот → 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 для дизайну

Єдиного переможця для дизайн-роботи немає — у кожного агента своя сильна сторона, і досвідчені команди поєднують їх. Чесне резюме:

Сталий вердикт спільноти такий: смак походить від людей — усі вони за замовчуванням тяжіють до загальної естетики без skill-ів, референсів і обмежень. Це і є справжня проблема, яку треба розв'язати — і вона має форму дизайн-інструмента, а не моделі, і саме тому відкритий агент на кшталт OpenCode так добре поєднується з відкритим дизайн-шаром.

Пастки та як уникнути вигляду «AI slop»

Найпоширеніша скарга на дизайн, згенерований ШІ, — що він виглядає загальним: м'які градієнти, плаваючі панелі, завеликі заокруглені кути, драматичні тіні, вайб «Inter-і-фіолетовий», який «кричить, що це зробив ШІ». Серед інших повідомлених проблем — поламані мобільні розкладки та інструкції, що протікають у текст UI. Жодна з них не унікальна для OpenCode; це те, що стається, коли будь-який агент працює без кураторського дизайн-контексту.

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

Зверніть увагу: кожен спосіб пом'якшення зводиться до надання агенту кураторського дизайн-контексту — незалежно від того, яку модель ви запускаєте. Підтримувати цей контекст вручну для кожного проєкту — це рутина, яку усуває Open Design.

Дизайн із OpenCode всередині Open Design

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

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

Той самий агент OpenCode, та сама свобода моделі — плюс реальний, переносний дизайн-процес з відкритим кодом навколо нього. Він 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 — незалежний проєкт з відкритим кодом, який інтегрує 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 — проєкт з відкритим кодом, який підтримує SST (Anomaly Innovations); Open Design — незалежний проєкт з відкритим кодом, який підтримує його як власний адаптер.

8. 08 Чи мої файли й облікові дані в безпеці? +

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