Open Design — открытая альтернатива Claude Design: ваш CLI становится дизайн-движком

· 2 мин чтения
design design-system ai-agents prototyping open-source
📂 Исходный код на GitHub

Открытая альтернатива Claude Design от nexu-io. Local-first приложение для macOS и Windows: coding-агент генерирует веб- и мобильные прототипы, живые дашборды, презентации, изображения и моушн-графику HyperFrames на основе дизайн-систем DESIGN.md. 151 дизайн-система, 100+ скиллов, 277 плагинов, экспорт в HTML/PDF/PPTX/MP4, поддержка 26 CLI-агентов и BYOK. Лицензия Apache-2.0.

Open Design — открытая альтернатива Claude Design: ваш CLI становится дизайн-движком

В апреле 2026 года Anthropic выпустила Claude Design — первый продукт, где LLM перестал писать текст и начал напрямую выдавать дизайн-артефакты. Идея завирусилась, но продукт остался закрытым: платная подписка, только облако, только модели Anthropic. Проект Open Design от nexu.io — открытая (Apache-2.0) альтернатива с той же artifact-first-логикой: ваш coding-агент становится дизайн-движком, ноутбук — студией, а файл DESIGN.md — бренд-контрактом. Почти 90 тысяч звёзд на GitHub говорят, что спрос на такую свободу огромный.

Что это такое

Open Design — local-first desktop-приложение для macOS (Apple Silicon и Intel) и Windows (x64), опционально Linux AppImage. Главная идея: проект не поставляет собственного агента. Дизайн-движком становится любой CLI, уже установленный на вашей машине, — Claude Code, Codex, Cursor, OpenCode, Copilot, Kimi, Antigravity и ещё около двух десятков. Всего поддерживаются 26 CLI-утилит, а через BYOK-прокси — любой OpenAI-совместимый endpoint: достаточно указать baseUrl, apiKey и model.

Цикл работы выглядит так: brief → plugin → direction → design system → artifact → handoff → memory. Вы описываете задачу, агент фиксирует направление, подключает дизайн-систему и выдаёт готовый артефакт — реальные файлы, а не картинку. Результат можно сразу отдать инженерам (это честный HTML/CSS) или экспортировать в PDF/PPTX/MP4 для маркетинга.

Четыре плоскости композиции

Вся экосистема Open Design собрана из переносимых, версионируемых директорий, которые может писать и публиковать кто угодно:

Плоскость Роль Сколько в репозитории
Plugins Готовые сценарии работы 277 официальных + 183 примера
Skills Функциональное поведение агента 100+ скиллов
Design templates Чертежи рендеринга Прототипы, деки, видео, утилиты
Design systems Бренд через DESIGN.md 151 пакет

Ключевой файл — DESIGN.md: бренд-контракт уровня «brand-grade», который читается при каждом рендере. В комплекте — дизайн-системы Shopify, Stripe, Linear, Notion, Figma, Airbnb, Tesla, Apple и десятков других брендов. Библиотека систем, кстати, синхронизируется из уже знакомого нам проекта VoltAgent/awesome-design-md. Добавить свой бренд проще простого: положите папку с DESIGN.md в design-systems/<brand>/ — пикер найдёт её автоматически. Более новые пакеты могут дополняться manifest.json, скомпилированным tokens.css, компонентами и ассетами.

Что умеет генерировать

Внутри проекта есть Studio, где разговор с агентом, сгенерированные файлы и живой предпросмотр живут вместе. Типы артефактов:

  • Прототипы — одностраничные HTML-артефакты для web, desktop и mobile: лендинги, SaaS-страницы, дашборды, мобильные приложения с превью в рамке устройства.
  • Живые артефакты — KPI-стены, «диспетчерские», брифинги: одностраничники, которые тянут данные через панель tweaks и редактируются на месте без перезагрузки.
  • Презентации — 15 шаблонов дек и 36 тем, включая журнал-стайл guizang-ppt (с WebGL-хиро, бандлится из op7418/guizang-ppt-skill с сохранением оригинальной лицензии) и швейцарскую типографику. Экспорт: HTML, PDF, PPTX, ZIP, Markdown.
  • Изображения — 93 готовых промпта в prompt-templates/ с превью, целевой моделью и соотношением сторон.
  • Видео и HyperFrames — интеграция с открытым фреймворком HeyGen HyperFrames: агент пишет HTML + CSS + GSAP, а рендер в детерминированный MP4 идёт через headless Chrome + FFmpeg. 11 шаблонов моушн-графики: SaaS-промо, бар-чарты в стиле NYT, карта перелётов, кинематографичный лого-аутро.

Отдельная фишка — «refresh существующего кода»: отдайте агенту git-репозиторий плюс DESIGN.md, и он отрефакторит ваши реальные компоненты под бренд-спеку, а плагины миграции переводят Figma-мастер-файлы в React/Next.js/Vue.

Совместимость с агентами

Проект подключается к агентам двумя способами: через skills/CLI/MCP для тех, кто потребляет Open Design, и через нативные runtime-адаптеры для тех, кого OD сам запускает (DeepSeek Harness dsh — нативный runtime с потоковой передачей, отменой и возобновлением сессий). Установка — одной строкой:

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | openclaw
#         | antigravity | hermes | kimi | cline | trae | opencode

# Then the agent can read live project files:
od project list --json
od files read <project-id> <relative-path>

MCP-сервер открывает агенту живой доступ к файлам проектов — tokens CSS, JSX-компоненты, entry HTML, — а не к устаревшему экспорту в zip. Без GUI можно вообще обойтись: Open Design используется как скилл, плагин или MCP-сервер внутри привычного CLI.

Сравнение

Claude Design Figma Lovable / v0 / Bolt Open Design
Открытый код нет нет нет Apache-2.0
Self-host / desktop нет нет нет macOS + Windows + Docker + Vercel
Агент в вашем CLI только Anthropic нет облачный агент 26 CLI + BYOK
Дизайн-системы проприетарные Theme JSON ограниченные 151 систем через DESIGN.md
HTML → MP4 нет нет нет HyperFrames
Минимальный биллинг Pro / Max Pro / Org Pro / Team BYOK, любой endpoint

Установка и архитектура

Быстрый путь — скачать desktop-приложение с open-design.ai или из GitHub Releases: после установки приложение само находит все CLI-агенты на вашем PATH и загружает скиллы, шаблоны и дизайн-системы. Для серверного запуска есть Docker:

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://127.0.0.1:7456

Внутри: фронтенд на Next.js 16 (App Router, React 18, TypeScript), локальный демон на Node 24 (Express, SSE-стриминг, better-sqlite3), Electron-оболочка с сандбоксированным рендерером. Предпросмотр — в изолированном iframe, экспорт артефактов проходит линт и пятиуровневую самокритику. Безопасность всерьёз: демон по умолчанию читаемый и слушает только 127.0.0.1, BYOK-прокси защищён от SSRF, вынос в LAN требует явного opt-in через переменные окружения.

Нюанс для macOS и WSL2: команда od может перехватываться системной утилитой /usr/bin/od (октальный дамп), поэтому в desktop-версии лучше копировать сниппет MCP из Settings — он использует абсолютные пути.

Кому пригодится

Open Design стоит попробовать командам, которые уже живут в Claude Code/Cursor/Codex и хотят дизайн-артефакты без привязки к одному вендору: продуктовым менеджерам (брифы, спеки, OKR-скоркарды), маркетингу (лендинги, соцсети, презентации, видео), дизайнерам (быстрые прототипы и извлечение дизайн-систем из брендов) и инженерам (миграция Figma → код, рефакторинг под бренд). Это один из самых показательных примеров того, куда движется агентная экосистема в 2026 году: не «AI-инструмент вместо дизайнера», а открытая файловая система скиллов и дизайн-контрактов, которую агент читает, пишет и ремиксует.

Источник: https://github.com/nexu-io/open-design