Дизайн без Figma и мучительных правок: пробуем Open Design

Недавно поймал себя на мысли: почему мы до сих пор «рисуем» интерфейсы в одном месте, а пишем код в другом? Сначала дизайнер мучается с пикселями в Figma, потом разработчик пытается угадать отступы, а в итоге получается «ну, почти как на макете». Anthropic в 2026 году попытались решить это через Claude Design, но предсказуемо закрыли все в своем облаке. Проект Open Design (или просто OD) — это как раз попытка вытащить классную идею из корпоративного плена и отдать её в руки тем, кто любит self-hosted решения и локальный запуск.

Что это за зверь и зачем он нужен

Если упростить, Open Design — это десктопное приложение для macOS и Windows, которое превращает ваши текстовые описания и существующие гайдлайны в реальные артефакты. Это не просто картинки. На выходе получается живой HTML, CSS, презентации в PPTX или даже видео в MP4.

Проект пригодится в первую очередь тем, кто устал от бесконечных итераций «дизайнер-разработчик». Здесь цепочка короче: набросали бриф, скормили его агенту (тому же Claude, Cursor или Copilot), и получили рабочий прототип, который уже понимает ваш дизайн-код.

Как это работает на практике

Главная фишка OD — это концепция DESIGN.md. Вместо того чтобы хранить стили в голове или разрозненных JSON-файлах, вы описываете брендбук в обычном Markdown. Проект поставляется с огромной библиотекой из 150 готовых систем: Apple, Stripe, Linear, Vercel — всё, на что мы привыкли равняться.

Живые прототипы и дашборды

Когда вы просите систему собрать интерфейс, она не просто кидает вам скриншот. Внутри OD крутится песочница с iframe. Агент пишет реальный код, который тут же рендерится.

Интерфейс студии

Кстати, если у вас уже есть проект на React или Vue, OD умеет подтягивать ваши компоненты. В моей практике часто бывает, что нужно быстро набросать внутреннюю админку или дашборд для метрик. В OD это делается одной командой: выбираем скилл dashboard, указываем систему и получаем результат, который не стыдно показать заказчику.

Презентации и моушн-дизайн

Меня зацепило, что ребята внедрили поддержку HyperFrames. Это фреймворк от HeyGen, который позволяет делать анимацию через код (GSAP + CSS) и рендерить её в честный MP4 через headless Chrome.

Примеры видео

Для маркетологов или продактов, которым нужно завтра запитчить идею, это спасение. Можно собрать презентацию, которая выглядит как дорогой лендинг, и экспортировать её в PDF или PPTX без единого открытого PowerPoint.

Техническая внутрянка и подключение агентов

Архитектура OD построена по принципу local-first. Весь жир крутится на вашем компьютере: локальный демон на Express и SQLite управляет проектами, а фронтенд на Next.js 16 (да, они смотрят в будущее) рисует интерфейс.

Самое интересное — как они подружились с AI-агентами. OD не навязывает конкретную модель. Вы можете использовать od mcp install, чтобы пробросить инструменты в свои привычные редакторы:

Cursor
Claude Code
VS Code + GitHub Copilot
И ещё десяток CLI-инструментов

По сути, OD выступает в роли «рук» для вашего AI-ассистента. Агент видит файлы вашего проекта через MCP-сервер, может патчить их и сразу видеть результат в окне предпросмотра.

# Пример установки в Claude Code
od mcp install claude

После этого в чате с ботом можно просто написать: «Собери мне страницу регистрации в стиле Stripe», и он начнет дергать методы Open Design для генерации артефактов.

С чего начать

Если не хочется возиться с терминалом, просто скачайте бинарник с официального сайта. Для любителей Docker или сборки из исходников процесс тоже несложный:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

После запуска на localhost:7456 появится полноценная дизайн-студия.

Кому стоит попробовать

Проект явно зайдёт небольшим командам и инди-хакерам. Когда у вас нет времени и бюджета на фултайм-дизайнера, OD закроет 80% задач по визуалу.

Мне понравилось, насколько проект открыт. В папке skills/ можно найти готовые сценарии для всего: от email-рассылок до сложных финансовых отчетов. Всё это можно кастомизировать под себя, просто поправив Markdown-файлы.

Считать ли это «убийцей Figma»? Вряд ли. Для сложной отрисовки иконок или сложного UI-кита классический инструмент всё ещё нужен. Но для быстрой проверки гипотез и сборки интерфейсов на лету Open Design выглядит очень бодро. Как минимум, стоит потыкать его ради интереса — подход к «дизайну через код» здесь реализован максимально дружелюбно.