Open-source, local-first альтернатива закрытому облачному сервису Claude Design. Превращает ваш существующий coding-агент (Claude Code, Codex, Cursor, Gemini CLI и ещё десятки CLI) в полноценный дизайн-движок, управляемый 132 скиллами и 150 портативными дизайн-системами в формате DESIGN.md.

Коротко: вы приносите свой API-ключ (BYOK — Bring Your Own Key), свой агент и свою дизайн-систему — Open Design связывает всё в единый рабочий цикл. Без подписок, без vendor lock-in, без облака вендора. Лицензия Apache-2.0, данные остаются на вашем диске.

Проект появился в апреле 2026 года от команды nexu-io. За первый месяц собрал 50 800+ звёзд на GitHub. Релизы выходят еженедельно.

Что это

Представьте: у вас уже установлен Claude Code или Codex CLI. Вы пишете код через агента каждый день. Но когда нужен лендинг, дашборд или презентация — вы открываете отдельный дизайн-инструмент, переключаете контекст, теряете время.

Open Design решает эту проблему. Он не поставляет собственный ИИ-агент. Вместо этого он обнаруживает coding-агенты, уже установленные на вашем компьютере, и превращает их в дизайн-движки через систему скиллов и дизайн-систем. Скилл — это файл SKILL.md по конвенции Claude Code, который описывает, что и как генерировать. Дизайн-система — это файл DESIGN.md с палитрой, шрифтами, отступами и правилами компонентов.

Вы выбираете скилл (например, «лендинг SaaS»), выбираете дизайн-систему (например, Stripe или Linear), заполняете короткую форму с параметрами — и агент генерирует готовый HTML-артефакт, который рендерится прямо в приложении и экспортируется в нужный формат.

Зачем нужно

  • Прототипирование без переключения контекста. Тот же агент, который пишет код, теперь генерирует лендинги, дашборды, мобильные экраны, презентации и email-рассылки.
  • Контроль данных. Всё локально: файлы проектов в .od/, SQLite, credentials в .od/media-config.json. Ничего не уходит в облако вендора.
  • Любой провайдер моделей. BYOK-прокси поддерживает Anthropic, OpenAI, Azure OpenAI, Google Gemini, Ollama, SenseAudio. Вставляете baseUrl, apiKey, model — и работаете.
  • Своя дизайн-система за один клик. 150 готовых DESIGN.md-систем: Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Xiaohongshu и десятки других. Переключение — один клик, следующий рендер использует новые токены.
  • Импорт из Claude Design. Перетащите ZIP-экспорт из Claude Design — Open Design разберёт его в проект, агент продолжит работу.

Как устроено

Архитектура

graph TD
    A["Browser (Next.js 16)"] -->|/api/*| B["Local Daemon (Express + SQLite)"]
    A -->|iframe preview| C["Sandboxed Preview"]
    B -->|spawn CLI| D["Coding Agent"]
    B -->|SSE proxy| E["BYOK API Provider"]
    D -->|Read/Write/Bash| F[".od/projects/<id>/"]
    B -->|SQLite| G[".od/app.sqlite"]
СлойСтек
FrontendNext.js 16 App Router + React 18 + TypeScript, деплой на Vercel
DaemonNode 24, Express, SSE-стриминг, better-sqlite3
Агентный транспортchild_process.spawn с типизированными парсерами для каждого CLI (claude-stream-json, json-event-stream, acp-json-rpc, pi-rpc, plain)
ХранениеФайлы в .od/projects// • SQLite в .od/app.sqlite • credentials в .od/media-config.json
PreviewSandboxed iframe через srcdoc • парсер на каждый скилл
DesktopElectron (macOS Apple Silicon / Intel, Windows x64) — опционально

Инсайт: Prompt stack — ключевая часть архитектуры. При отправке запроса собирается многослойный контекст: директивы discovery → identity charter → активная DESIGN.md → активная SKILL.md → метаданные проекта → side-файлы скилла → deck-фреймворк. Каждый слой — файл, который можно редактировать.

Рабочий цикл: четырёхшаговый процесс

Open Design выстраивает процесс, который не даёт агенту «фристайлить»:

  • Detect — daemon сканирует PATH, находит агенты, загружает скиллы и дизайн-системы.
  • Discover — при первом сообщении вместо генерации агент показывает интерактивную форму: поверхность, аудитория, тон, бренд-контекст, масштаб. 30 секунд радио-кнопок экономят 30 минут переделок.
  • Direct — если у вас нет бренда, агент предлагает 5 курированных визуальных направлений с детерминированной палитрой OKLCh и шрифтовым стеком: Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental.
  • Deliver — агент пишет на диск, артефакт рендерится в sandboxed iframe, экспортируется в HTML / PDF / PPTX / ZIP.

Важно: Антислоп-механизм. Каждый артефакт проходит 5-мерную самокритику (Philosophy · Hierarchy · Execution · Specificity · Restraint) и чеклисты P0/P1/P2 на каждый скилл. Это встроено в prompt stack, а не полагается на добросовестность модели.

Установка

Вариант 1: Desktop-приложение (без сборки)

Самый быстрый способ — скачать готовое приложение с open-design.ai или со страницы GitHub Releases. Доступно для macOS (Apple Silicon + Intel) и Windows (x64).

Вариант 2: Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

Откройте http://localhost:7456 в браузере.

Вариант 3: из исходников

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

Требования: Node 24, pnpm 10.33.x.

Первый запуск

  • Daemon сканирует PATH и находит установленные coding-агенты.
  • Загружает 132 скилла и 150 дизайн-систем.
  • Открывает welcome-диалог для ввода API-ключа (нужен только для BYOK-режима).
  • Создаёт .od/ — локальную папку для SQLite, проектов и рендеров.

Внимание: Папка .od/ содержит все данные проектов и находится в .gitignore. Не коммитьте её. Для переноса на другую машину используйте переменную окружения OD_DATA_DIR или ручную миграцию.

Управление жизненным циклом

pnpm tools-dev start web    # фоновый запуск
pnpm tools-dev stop         # остановка
pnpm tools-dev status       # статус
pnpm tools-dev logs         # логи
pnpm tools-dev restart --daemon-port 17456 --web-port 17573  # перезапуск с фиксированными портами

Когда использовать

Скиллы: что можно генерировать

132 скилла разбиты на три группы: prototype mode, deck mode и офисные операции.

Design и маркетинг (prototype mode)

СкиллПлатформаЧто генерирует
web-prototypeDesktopОдностраничный HTML — лендинги, маркетинговые страницы, hero-секции
saas-landingDesktopHero / features / pricing / CTA
dashboardDesktopАдминка / аналитика с сайдбаром
mobile-appMobileiPhone 15 Pro / Pixel — рамки с пиксельной точностью
social-carouselDesktop3-карточная 1080×1080 карусель для соцсетей
email-marketingDesktopHTML-письмо с table-fallback
magazine-posterDesktopЖурнальный постер
motion-framesDesktopMotion-дизайн с CSS-анимациями

Презентации (deck mode)

guizang-ppt (журнальные слайды с WebGL-фоном), simple-deck (минимальные слайды), replit-deck (продуктовые деки), weekly-update (недельные апдейты).

Офис и операции

pm-spec (спецификация продукта), team-okrs (OKR-таблица), meeting-notes (протокол), kanban-board (доска), eng-runbook (инцидент-ранбук), finance-report (финансовый отчёт), invoice (инвойс), hr-onboarding (онбординг).

Совет: Добавить свой скилл просто: создайте папку в skills/ с файлом SKILL.md по конвенции Claude Code, перезапустите daemon — скилл появится в каталоге. Подробности в docs/skills-protocol.md.

Дизайн-системы

150 портативных дизайн-систем в формате DESIGN.md — 9-секционная схема из проекта awesome-design-md:

  • Color — палитра в OKLCh
  • Typography — шрифтововой стек
  • Spacing — сетка отступов
  • Layout — принципы компоновки
  • Components — UI-компоненты
  • Motion — анимации
  • Voice — тон коммуникации
  • Brand — бренд-гайд
  • Anti-patterns — чего избегать

Переключение системы — один клик в dropdown. Следующий рендер использует новые токены без перепромптинга. Чтобы добавить свою: попросите агента извлечь бренд из скриншота или Figma-экспорта в DESIGN.md, сохраните в design-systems//.

Медиагенерация

93 готовых промпт-шаблона. Поддерживаемые модели:

  • gpt-image-2 — постеры, аватары, инфографика
  • Seedance 2.0 — видео до 15 секунд
  • HyperFrames — HTML в MP4 (motion-графика)

Экспорт

HTML (inline assets), PDF, PPTX, ZIP, Markdown, MP4.

MCP-сервер

Open Design поставляет встроенный stdio MCP-сервер (Model Context Protocol — открытый протокол для связи ИИ-агентов с внешними инструментами). Подключите его к Claude Code, Codex, Cursor, VS Code или любому MCP-совместимому клиенту — агент в другом репозитории получит прямой доступ к файлам проекта Open Design:

  • search_files — поиск по проекту
  • get_file — получение конкретного файла (токены, CSS, JSX)
  • get_artifact — получение артефакта

Без аргумента project MCP отдаёт файлы из текущего открытого проекта — промпты вроде «build this in my app» или «match these styles» работают сразу.

Пример

Практические сценарии

  • Прототипирование лендинга. Выбираете скилл saas-landing, указываете дизайн-систему (или просите агента извлечь из скриншота), заполняете форму discovery — через минуту получаете полный HTML с hero, features, pricing и CTA.
  • Питч-дек для инвестора. Скилл guizang-ppt генерирует журнальные слайды с WebGL-фоном. Результат — одностраничный HTML, который экспортируется в PDF или PPTX.
  • Мобильный прототип. Скилл mobile-app рендерит экраны в пиксельно точных рамках iPhone 15 Pro с Dynamic Island и status bar.
  • Редакционный контент. Скиллы social-carousel и email-marketing генерируют готовые к публикации карусели 1080×1080 и HTML-письма с table-fallback.
  • Расширение для команды. Запускаете daemon на сервере внутри сети, каждый разработчик подключает свой CLI — общая библиотека скиллов и дизайн-систем, единый стиль.

Тарифы и лимиты

ПараметрЗначение
Стоимость Open DesignБесплатно, Apache-2.0
API-расходыОплачиваете напрямую своему провайдеру (Anthropic, OpenAI, Google, xAI и др.)
ПодпискаНет, BYOK
Self-hostПолностью поддерживается: Docker, Vercel, свой сервер
ЛимитыОпределяются лимитами вашего API-провайдера и мощностью машины

Сравнение с Claude Design

ПараметрClaude DesignOpen Design
МодельТолько Anthropic (Opus 4.7)Любой из 16 CLI + BYOK-прокси
ХостингОблако AnthropicЛокально, Docker, Vercel, свой сервер
ЛицензияПроприетарнаяApache-2.0
ЦенаПодписка AnthropicБесплатно + ваш API-ключ
Дизайн-системыВстроенные, закрытые150 портативных DESIGN.md • свои
СкиллыФиксированный набор132 + добавление через SKILL.md-папку
ДанныеОблако вендораЛокальный диск, ваш контроль
Импорт—Импорт ZIP из Claude Design

Инсайт: Главное архитектурное отличие — Open Design не заменяет вашего агента. Он делает существующий CLI-агент дизайн-движком. Вы не меняете рабочий контур, вы расширяете его.

Ограничения

Ограничения

Что учитывать

Только desktop и self-host — нет облачного SaaS-режима от вендора.

Запускаете на своей машине или сервере.

Зависимость от API-провайдера — расход токенов и лимиты определяются вашим API-ключом, а не Open Design.

Дорогая модель = дорогая генерация.

Node 24 и pnpm 10.33.x — жёсткие требования для сборки из исходников.

На более старых версиях не запустится.

Electron только для macOS и Windows

— Linux-версии desktop-приложения нет, но Docker и сборка из исходников работают.

Медиагенерация через сторонние API

— gpt-image-2, Seedance 2.0 и HyperFrames требуют отдельных API-ключей и оплаты соответствующим провайдерам.

Антипаттерны

Антипаттерны

Чего не делать

Не коммитьте .od/ — папка содержит SQLite, проекты и credentials.

Добавьте в .gitignore или используйте OD_DATA_DIR для выноса за пределы репозитория.

Не используйте один API-ключ для всей команды — BYOK означает, что каждый приносит свой ключ.

Общий ключ размывает ответственность и расход.

Не ждите готового Figma — Open Design не заменяет Figma как редактор.

Он генерирует артефакты из промптов и дизайн-систем. Если нужен pixel-perfect ручной дизайн — это другая категория инструмента.

Не пропускайте шаг Discover — форма discovery существует не для красоты.

30 секунд радио-кнопок экономят 30 минут переделок, потому что агент не фристайлит.

Чеклист

Чеклист

Проверка перед запуском

Node 24 установлен — проверьте через node —version.

Для сборки из исходников нужен pnpm 10.33.x.

Coding-агент в PATH — Open Design находит агенты через сканирование PATH.

Убедитесь, что Claude Code, Codex или другой CLI доступен в терминале.

API-ключ под рукой — нужен для BYOK-режима.

Без ключа можно запустить, но генерация не заработает.

Порт 7456 свободен — дефолтный порт для Docker-режима.

Для сборки из исходников можно переопределить через —web-port.

Диск под .od/ — SQLite, проекты и рендеры хранятся локально.

На маленьком диске стоит вынести через OD_DATA_DIR.

Ссылки

Ссылки

По теме

По теме