Open Design — открытая альтернатива Claude Design: ваш CLI становится дизайн-движком
📂 Исходный код на 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.
В апреле 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