Open Design: открытая альтернатива Claude Design

⚡ Open Design Cloud — официальный сервис моделей. Одно пополнение — и GPT, Claude, Gemini и DeepSeek доступны прямо в Open Design: 20+ флагманских моделей, ноль настройки, оплата по реальному расходу токенов. Попробовать Open Design Cloud

🏅 Программа Open Design Fellow теперь открыта. Если вы тоже верите, что дизайн должен быть открытым — станьте Open Design Fellow, формируйте продукт вместе с основной командой и помогайте большему числу людей участвовать в определении будущего дизайна. Подробности → MAINTAINERS.md и Discord.

Сайт · Скачать · Open Design Cloud · Discord · Подписаться @OpenDesignHQ

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

Что такое Open Design

🎨 Открытая альтернатива Claude Design. 🖥️ Локальное по умолчанию нативное десктопное приложение для macOS и Windows. ⚡ 100+ функциональных навыков + отдельный каталог шаблонов рендеринга · ✨ 151 пакет дизайн-систем · 📦 277 плагинов. 🤖 Работает через 25 различных локальных исполняемых CLI, либо на любом OpenAI-совместимом эндпоинте через BYOK.

Open Design превращает этот цикл в файловую систему функциональных навыков, шаблонов рендеринга, дизайн-систем и плагинов, которую агенты могут читать, писать и ремиксовать.

Это также альтернатива Figma для эпохи агентов — вместо того чтобы двигать пиксели на холсте, она поставляет одностраничные артефакты в настоящем CSS, настоящих шрифтах, настоящих компонентах, экспортируемые сразу в HTML / PDF / PPTX / MP4 — уже оформленные вашей дизайн-системой, уже запускаемые внутри агента, которым вы пользуетесь каждый день.

Обзор продукта

Краткий взгляд на то, что такое Open Design и что он делает. Начните с Home, организуйте повторяющиеся рабочие процессы с помощью Automation, оформите брендовый контракт в Design System и расширяйте возможности через Plugins и интеграции; внутри Studio любого проекта та же дизайн-система потоком выдаёт прототипы, живые артефакты, HyperFrames, презентации и изображения.

Основные страницы

_{Home — точка входа с обзором. Выберите навык и дизайн-систему, введите бриф и запустите всё из одного места.}

_{Automation — превращайте повторяющиеся дизайн-процессы в переиспользуемые автоматизации с возможностью планирования.}	_{Design System — дистиллируйте DESIGN.md вашей команды в брендовый контракт, который формирует каждый результат.}
_{Plugin — просматривайте, устанавливайте и распространяйте плагины рабочих процессов, чтобы расширять генерацию по запросу.}	_{Integrations — подключайте внешние системы и MCP-инструменты и используйте Open Design из любой IDE, скрипта или автоматизации.}

Studio — множество типов артефактов в одном проекте

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

_{Prototype — одностраничные HTML-артефакты, которые читают вашу дизайн-систему и рендерятся в изолированном iframe, с мгновенным предпросмотром и возможностью скачать исходник.}	_{HyperFrame — программная анимация и движущаяся графика, отрендеренные в настоящий MP4 (например, 1920×1080 · 30fps).}
_{Deck — питч-презентации, которые можно листать, листать с клавиатуры и экспортировать в PPTX / PDF.}	_{Image — изображения и визуальные ассеты брендового уровня с генерацией и скачиванием в высоком разрешении.}

Совместимость с платформами

Open Design поставляется как навыки, CLI и MCP-сервер, которые мейнстримные кодинг-агенты потребляют нативно. После установки OD одна команда od mcp install <agent> подключает MCP-сервер в конфигурацию этого агента, и вы вызываете одни и те же инструменты изнутри любого агента.

Кодинг-агент / платформа	Статус	Установка MCP-сервера одной строкой
Claude Code	✅ Поддерживается	`od mcp install claude`
Codex CLI	✅ Поддерживается	`od mcp install codex`
DeepSeek Reasonix	✅ Поддерживается	`od mcp install reasonix`
Raven	✅ Поддерживается	`od mcp install raven`
Cursor	✅ Поддерживается	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Поддерживается	`od mcp install copilot`
GitHub Copilot CLI	✅ Поддерживается	`od mcp install copilot`
OpenCode	✅ Поддерживается	`od mcp install opencode`
OpenClaw	✅ Поддерживается	`od mcp install openclaw`
Antigravity	✅ Поддерживается	`od mcp install antigravity`
Cline	✅ Поддерживается	`od mcp install cline`
Trae	✅ Поддерживается	`od mcp install trae`
Kimi CLI	✅ Поддерживается	`od mcp install kimi`
Kiro	✅ Поддерживается	`od mcp install kiro`
Pi Agent	✅ Поддерживается	`od mcp install pi`
Mistral Vibe CLI	✅ Поддерживается	`od mcp install vibe`
Hermes Agent	✅ Поддерживается	`od mcp install hermes`

od mcp install <agent> --print для предпросмотра без изменений · --uninstall для удаления · полный список через od mcp install --help.

Нет установленного CLI? BYOK-прокси по адресу POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream даёт вам тот же цикл (без запуска процессов) — вставьте baseUrl + apiKey + model, с поддержкой OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM или любого OpenAI-совместимого эндпоинта. Защита от SSRF для каждой цели блокирует внутренние IP / link-local / CGNAT на границе демона.

Определения runtime находятся в apps/daemon/src/runtimes/defs/ и регистрируются в runtimes/registry.ts. Новый парсер нужен только для нового wire-формата — см. docs/agent-adapters.md.

Демо

Четыре основные категории продукта, все отрендерены кодинг-агентом, работающим на вашем ноутбуке. Нажмите на миниатюру, чтобы увидеть реальный пример.

1 · Прототипы — веб · десктоп · мобильные

Поверхность вывода по умолчанию. Одностраничные HTML-артефакты, которые читают ваш DESIGN.md и рендерятся в изолированном iframe.

_{Экран входа — выберите навык, выберите дизайн-систему, введите бриф. Одна поверхность для прототипов, дашбордов, презентаций, мобильных приложений, журнальных страниц.}	_{Мобильный прототип — пиксельно точный интерфейс iPhone 15 Pro, многоэкранные потоки. Агент никогда не перерисовывает рамку телефона; общие рамки устройств находятся в assets/frames/.}
_{Веб-прототип — редакционный дашборд со скроллбарами, KPI и графиками. Отрендерен напрямую из design-templates/dating-web/.}	_{Прототип мобильного приложения — трёхэкранный геймифицированный поток с лентами XP и деталями квеста. Передавайте напрямую в Cursor / Codex / Claude Code, чтобы превратить в React/Next/Vue.}

2 · Живые артефакты и дашборды

Живые дашборды, комнаты принятия решений, KPI-стены — одностраничные артефакты, которые подтягивают данные через панель настроек и остаются редактируемыми на месте.

_{Живой дашборд — редактируемая KPI-стена, чья панель настроек выводит параметры, которые стоит подкручивать. Агент выдаёт манифест, и iframe перерисовывается без перезагрузки.}	_{Комната принятия решений — артефакт-брифинг из множества источников для встреч по продукту / исследованиям / операциям.}
_{Дашборд в стиле GitHub — метрики репозитория, представленные как живой артефакт.}	_{Шаблон живого дашборда Flow — доменно-специфичный KPI-шаблон, оформленный через активный DESIGN.md.}

3 · Презентации — журнальные презентации, еженедельные апдейты, питчи

_{Режим презентации (guizang-ppt) — журнальные макеты, WebGL-герой, чек-листы P0/P1/P2. Включён дословно из op7418/guizang-ppt-skill с сохранением оригинальной лицензии.} _{Презентация в швейцарском интернациональном стиле — привязанная к сетке, монохромные акценты. Один из 15 шаблонов презентаций и 36 тем в design-templates/html-ppt-*/.}

Каждая презентация экспортируется в HTML (один файл, встроенные ассеты), PDF (печать из браузера, с учётом презентации), PPTX (навык, управляемый агентом), ZIP (архив) или Markdown.

4 · Изображения — `gpt-image-2`, ImageRouter, кастомный API

_{Иллюстрированная гастрономическая карта города
Рисованный от руки редакционный туристический постер}

_{Кинематографичная сцена в лифте
Однокадровый редакционный стоп-кадр}

_{Киберпанк-портрет
Аватар профиля — неоновый текст на лице}

_{3D-каменная лестница
Инфографика из тёсаного камня}

_{Гламурный портрет
Редакционная студийная съёмка}

93 готовых к воспроизведению промпта находятся в prompt-templates/ — миниатюры предпросмотра, полное тело промпта, целевая модель, соотношение сторон и указание источника. Один клик помещает бриф в композер.

5 · Видео и HyperFrames — агентно-нативная моушн-графика

HyperFrames — это открытый, агентно-нативный видеофреймворк от HeyGen, интегрированный как полноправный участник в Open Design. Агент пишет HTML + CSS + GSAP, а HyperFrames рендерит это в детерминированный MP4 через headless Chrome + FFmpeg. Сочетайте его с Seedance 2.0 для кинематографичного t2v / i2v, Veo 3 / Sora 2 / Kling 2 для маршрутизируемых вариантов моделей и Suno v5 / Lyria 2 для аудиослоя.

_{30-секундное промо SaaS-продукта · 16:9 · 3D-раскрытие UI}	_{TikTok-караоке с говорящей головой · 9:16 · TTS + субтитры с синхронизацией по словам}	_{30-секундный брендовый sizzle reel · 16:9 · аудиореактивная кинетическая типографика}	_{Гонка столбчатых диаграмм · 16:9 · инфографика данных в стиле NYT}
_{Карта полёта · 16:9 · раскрытие маршрута в стиле Apple}	_{4-секундная кинематографичная заставка логотипа · 16:9 · посборочная сборка + bloom}	_{Счётчик денег $0 → $10K · 9:16 · хайп в стиле Apple}	_{Сайт в видео · 16:9 · снимает сайт в 3 вьюпортах}

11 шаблонов HyperFrames + 39 промптов Seedance поставляются с репозиторием. Миниатюры каталога © HeyGen; фреймворк под Apache-2.0. Специфичный для OD рабочий процесс рендеринга (кэш композиций, обход sandbox-exec, MP4-как-чип) подробно описан в design-templates/hyperframes/.

Почему Open Design

В апреле 2026 года Anthropic выпустила Claude Design — впервые LLM перестала писать прозу и начала поставлять дизайн-артефакты напрямую. Это стало вирусным. Но продукт остался закрытым, только платным, только облачным, привязанным к модели Anthropic, навыкам Anthropic, поверхности Anthropic. Никакого доступа к исходникам, никакого self-host, никакого деплоя на Vercel, никакой возможности подставить собственного агента.

Open Design (OD) — это открытая альтернатива. Тот же цикл, та же ментальная модель «сначала артефакт», без всякой привязки:

🤖 Агентно-нативный, не зависящий от модели. Мы не поставляем агента. claude / codex / cursor-agent / copilot / hermes / kimi, уже находящиеся в вашем PATH, — это дизайн-движок. Переключайтесь одним кликом.
🧠 Брендовый уровень по умолчанию. Каждый рендер читает DESIGN.md активного пакета как основной контракт бренда. Репозиторий содержит 151 пакет дизайн-систем; старые пакеты могут состоять только из DESIGN.md, а новые — добавлять manifest.json, tokens.css, компоненты, ресурсы и сведения о происхождении. Положите папку — и выбор её найдёт.
🖥️ Локальный по умолчанию, BYOK на каждом уровне. Нативные десктопные приложения остаются локальными, без обращений в облако. Перед описанием путей данных демона необходимо прочитать корневой AGENTS.md, раздел Daemon data directory contract.
🌍 Компонуемый в четырёх плоскостях. Плагины несут workflow · функциональные навыки — поведение агента · шаблоны дизайна — чертежи рендеринга · дизайн-системы — бренд.
🔁 Обновляйте существующую кодовую базу. Передайте git-репозиторий + DESIGN.md агенту, и он отрефакторит ваши реальные компоненты под спецификацию бренда. Специальные плагины мигрируют рабочие процессы Figma / Pencil в код React / Next.js / Vue.
🔒 Конфиденциальность по убеждению. Всё работает там, где живут ваши данные — ваш ноутбук, сервер вашей команды, ваш проект на Vercel. Когда нужна сеть, BYOK-прокси защищён от SSRF.

Сравнение

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
Открытый исходный код	❌	❌	❌	✅ Apache-2.0
Self-host / десктоп	❌	❌	❌	✅ macOS + Windows + Docker
Агентно-нативный (работает в вашем CLI)	Только Anthropic	❌	Только облачный агент	✅ 25 CLI + BYOK
`DESIGN.md` брендового уровня	Проприетарный	Theme JSON	Ограниченные токены	✅ 151 поставляемых систем
Навыки / плагины / шаблоны	Закрытые	Магазин плагинов	Закрытые	✅ 100+ функциональных навыков · отдельный каталог шаблонов рендеринга · 277 плагинов
HyperFrames (HTML→MP4)	❌	❌	❌	✅ Полноправный
Обновление существующего репозитория под бренд	❌	❌	❌	✅ через агента + `DESIGN.md`
Минимальный биллинг	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · любой совместимый эндпоинт

Быстрый старт

🖥️ Скачайте десктопное приложение (рекомендуется — без настройки)

Самый быстрый способ использовать Open Design. Никакого Node, никакого pnpm, никакого клонирования.

macOS (Apple Silicon · Intel x64) → open-design.ai или GitHub Releases
Windows (x64) → open-design.ai или GitHub Releases
Linux (AppImage, опциональная линия) → GitHub Releases

После установки: приложение автоматически обнаруживает каждый CLI кодинг-агента в вашем PATH, загружает 100+ функциональных навыков, отдельный каталог шаблонов рендеринга и 151 пакет дизайн-систем и позволяет вам ввести бриф на экране входа.

🤖 Установка в ваш кодинг-агент (без UI)

Вы можете использовать Open Design, ни разу не открыв GUI — вызывайте его как навык, плагин или MCP-сервер внутри Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi и других.

# Установка одной командой в агент, которым вы пользуетесь:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

# Аналогичная установка через hosted shell-скрипт:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

install.sh — тонкая shell-обертка вокруг od mcp install. Она нужна, чтобы hosted URL возвращал shell-скрипт вместо HTML-fallback лендинга и быстро падал, если ваша оболочка находит не Open Design, а другой бинарник od.

Пользователям WSL2: если CLI ваших кодинг-агентов запускаются внутри WSL2, сначала выполните шаги из гайда по настройке WSL2. Linux-команда /usr/bin/od может перекрывать команду od из Open Design.

Затем, внутри агента:

> Use open-design to generate a landing page with the Linear design system

В локальном CLI-запуске с файловой системой агент компонует выбранный функциональный навык или шаблон с DESIGN.md, пишет канонические файлы, а Open Design показывает их. BYOK/API-запуск без файловых инструментов возвращает один полный блок <artifact>.

🐳 Запуск с 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://localhost:7456

Пользователям macOS: если веб-интерфейс показывает Authorization: Bearer <OD_API_TOKEN> required, причина в bridge networking Docker Desktop. Решение описано в разделе Docker Desktop on macOS.

🚀 Развертывание на Sealos

Шаблон Sealos App Store запускает опубликованный Docker-образ Open Design с постоянным хранилищем рабочей области и Basic Auth на публичном прокси. Для пользовательских публичных или совместных Docker-развертываний следуйте рекомендациям по обратному прокси и OPEN_DESIGN_ALLOWED_ORIGINS в deploy/README.md.

🧑‍💻 Запуск из исходников

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

Откройте URL, напечатанный tools-dev; без явных флагов порты разработки назначаются динамически.

Node ~24, pnpm 10.33.x. Пользователям WSL2 см. docs/wsl-setup.md; пользователям нативной Windows — docs/windows-troubleshooting.md. Полный быстрый старт, переменные окружения, Nix flake и процесс упакованной сборки → QUICKSTART.md.

Полный рабочий процесс — от брифа до артефакта

brief → plugin → direction → design system → artifact → handoff → memory

PM подаёт бриф. Выбор плагина предлагает лендинг · питч-презентацию · дашборд · пост для соцсетей · PM-спецификацию · OKR-карту…
Дизайнер (или агент) фиксирует направление. Нет бренда? Выберите одно из 5 кураторских направлений. Есть бренд? Добавьте скриншот или URL → агент подключит GitHub, импортирует Figma и кодифицирует переиспользуемый DESIGN.md.
Агент создаёт первый результат. CLI-запуски с файловой системой пишут канонические файлы; BYOK/API без файловых инструментов возвращает полный <artifact>.
Передача в разработку. Артефакт — это настоящий HTML/CSS. Откройте его в Cursor, Codex или Claude Code, чтобы продолжать сборку как код, либо сразу экспортируйте PPTX / PDF / MP4 для маркетинга.
Open Design становится умнее по мере использования. Ваши скриншоты, шрифты, палитры и подтверждённые артефакты накапливаются как значения по умолчанию для следующей сессии. Меньше переделок, меньше дрейфа.

Используйте Open Design из вашего кодинг-агента

Open Design поставляет stdio MCP-сервер и скрипты установки для каждого агента. Любой MCP-совместимый агент в другом репозитории может читать файлы из ваших локальных проектов Open Design напрямую — токены CSS, JSX-компоненты, входной HTML — как структурированный API, запрашиваемый по имени. Агент всегда видит живой файл, а не устаревший экспорт.

# Установка одной командой (поддерживается 16+ CLI):
od mcp install <agent>

# После этого агент может:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

Почему MCP? Экспорт и повторное прикрепление zip на каждой итерации ломает поток. MCP открывает дизайн-источник напрямую — агент всегда видит живой файл.

Для агента, начинающего с нуля, установщик размещает ~/.config/<agent>/open-design.json (или эквивалент для платформы) плюс готовый к копированию MCP-сниппет. Cursor получает диплинк в один клик; Claude Code получает однострочник claude mcp add-json; каждый другой агент получает JSON в той схеме, которую ожидает его конфигурация. Полный процесс для каждого агента → Settings → MCP server в десктопном приложении или docs/agent-adapters.md.

Модель безопасности. Только для чтения по умолчанию, демон привязывается к 127.0.0.1, а SSRF блокируется на границе прокси. Доступ из LAN требует явного OD_BIND_HOST плюс OD_ALLOWED_ORIGINS. Учётные данные коннекторов и маршруты предпросмотра живых артефактов остаются только loopback в любом случае.

Внутренние эндпоинты моделей. Чтобы предотвратить SSRF, демон по умолчанию блокирует базовые URL провайдеров, которые резолвятся в приватные или внутренние диапазоны адресов (RFC1918, link-local, CGNAT и IP cloud-metadata), и показывает Internal IPs blocked. Если вы запускаете внутренний gateway, например LiteLLM или Ollama на доступном только через VPN адресе 10.x / 192.168.x, разрешите этот хост через OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,... — список голых hostnames или IP через запятую либо пробел (10.0.0.5, litellm.internal.corp; host:port или полный URL принимаются и сводятся к hostname; IPv6 нужно писать в квадратных скобках, например [fd00::1]). Allowlist строго opt-in (пустой по умолчанию), exact-host (без сопоставления поддоменов или подстрок) и применяется только к настроенным вами provider endpoints: проверке соединения, обнаружению моделей и BYOK-чату. Он намеренно не ослабляет защиту для download URL, возвращённых в ответах upstream: они остаются заблокированными. Некорректная запись — как и CIDR-нотация, которая не поддерживается — отбрасывается с предупреждением, а не молча считается доверенной, поэтому опечатка не расширит (и не сузит) защиту незаметно. Разрешая hostname, вы доверяете тому, во что он резолвится (как и с OD_ALLOWED_ORIGINS); если хотите повторно проверять DNS-результат, добавьте в allowlist уже разрешённый IP.

Навыки и шаблоны дизайна

100+ функциональных навыков находятся в skills/ и дают повторно используемое поведение, справки или утилиты. Рендеримые стартеры отделены в design-templates/ и попадают в каталог шаблонов, а не в реестр функциональных навыков.

Два режима закрепляют каталог шаблонов: prototype и deck; другие шаблоны покрывают image, video, audio и utility.

Шаблон дизайна	Режим	Сценарий	Что производит
`web-prototype`	prototype	design	Лендинг / герой по умолчанию
`saas-landing`	prototype	marketing	Герой / фичи / прайсинг / CTA
`dashboard`	prototype	operation	Админка / аналитика (с сайдбаром)
`mobile-app`	prototype	design	Приложение в рамке iPhone 15 Pro / Pixel
`mobile-onboarding`	prototype	design	Сплеш · ценностное предложение · поток входа
`social-carousel`	prototype	marketing	Карусель из 3 карточек 1080×1080
`email-marketing`	prototype	marketing	Брендовое письмо с безопасным табличным фолбэком
`magazine-poster`	prototype	marketing	Одностраничный журнальный макет
`motion-frames`	prototype	marketing	Зацикленный CSS-моушн-герой
`sprite-animation`	prototype	marketing	8-битный пиксельный анимированный объяснитель
`pm-spec`	prototype	product	PM-спецификация (с оглавлением + журналом решений)
`team-okrs`	prototype	product	OKR-карта
`eng-runbook`	prototype	engineering	Runbook по инцидентам
`finance-report`	prototype	finance	Финансовая сводка для руководства
`hr-onboarding`	prototype	hr	План онбординга на роль
`guizang-ppt`	deck	marketing	Веб-PPT в журнальном стиле (презентация по умолчанию)
`html-ppt-*`	deck	marketing	15 шаблонов презентаций × 36 тем (мастер-шаблон в `design-templates/html-ppt/`)
`hyperframes`	video	marketing	Моушн-графика HTML → MP4 (OSS-фреймворк HeyGen)
`critique`	utility	design	Пятимерный лист самокритики с оценками
`tweaks`	utility	design	Манифест панели настроек, выдаваемый ИИ

Протокол и разделение каталогов → docs/skills-protocol.md. GET /api/skills обслуживает навыки, GET /api/design-templates — шаблоны.

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

151 пакет дизайн-систем с DESIGN.md в центре поставляется с репозиторием. Старые пакеты могут содержать только Markdown-контракт; новые также могут включать manifest.json, собранный tokens.css, fixtures, assets и доказательства происхождения. Каталог смешивает upstream-производные и собственные дополнения; design-systems/README.md описывает форму и происхождение.

Полный каталог (нажмите, чтобы раскрыть)

AI и LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Инструменты разработчика — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

Продуктивность — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Финтех — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Медиа — spotify · playstation · wired · theverge · meta

Автомобили — tesla · bmw · ferrari · lamborghini · bugatti · renault

Прочее — apple · ibm · nvidia · vodafone · resend · spacex

Стартеры — default (Neutral Modern) · warm-editorial

Переимпортируйте библиотеку через scripts/sync-design-systems.ts. Добавьте свой бренд → бросьте DESIGN.md в design-systems/<brand>/. Полное руководство → design-systems/README.md.

Плагины

277 официальных плагинов и 183 ремиксуемых примера находятся в plugins/_official/. Каждый элемент — каталог с open-design.json и payload своего типа: SKILL.md для workflow, template.json для медиа-шаблонов или DESIGN.md для дизайн-систем.

Категория	Кол-во	Содержимое
`scenarios/`	13	Полные дизайн-сценарии — `od-default`, `od-design-refine`, `od-figma-migration`, `od-code-migration`, `od-react-export`, `od-nextjs-export`, `od-vue-export`, `od-media-generation`, `od-new-generation`, `od-tune-collab`, `od-plugin-authoring`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	Одношаговые промпты для изображений — редакционные, кинематографичные, продуктовые, портретные
`video-templates/`	63	Моушн-шаблоны HyperFrames / Seedance / Veo
`design-systems/`	143	Брендовые `DESIGN.md`, обёрнутые в плагины
`atoms/`	13	Переиспользуемые UI-фрагменты (кнопки, герои, KPI-карточки)
`examples/`	183	Ремиксуемые эталонные результаты

Также plugins/community/ для плагинов сообщества и plugins/registry/ для процесса публикации.

Что умеют плагины

🤖 Работают в любом кодинг-агенте — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… через тот же протокол навыков, который агент уже знает.
🔁 Мигрируют рабочие процессы Figma / Pencil → исходники React, Next.js или Vue. См. od-figma-migration.
🛠️ Обновляют существующую кодовую базу под спецификацию бренда — направьте плагин на git-репозиторий + DESIGN.md, получите PR. См. od-code-migration.
💾 Сохраняют кастомные рабочие процессы — переиспользуемые шаблоны вашей команды лежат рядом с поставляемыми.

Использование плагинов

Плагины полностью равнозначны в веб-UI и od CLI — те же эндпоинты /api/plugins, выбирайте, что удобнее.

В десктопном / веб-приложении: откройте страницу Plugin, чтобы просмотреть маркетплейс и нажать Install; внутри Studio проекта плагины появляются как чипы композера, по которым вы кликаете для применения (с входами, которые они декларируют).

В командной строке (работает без UI — это путь, который используют внешние агенты):

od plugin list                       # список установленных плагинов (фильтры --task-kind / --mode / --tag)
od plugin search "landing page"      # поиск по ключевым словам
od plugin info od-default            # метаданные, входы и возможности плагина
od plugin install od-figma-migration # установка из registry; также принимает ./local-folder или ссылку https://…
od plugin apply od-default --input brief="одностраничный питч для нашего seed-раунда"
od plugin upgrade od-default         # обновление
od plugin uninstall od-default       # удаление

Каждая команда поддерживает --json, так что вы можете пропускать вывод через jq / xargs в автоматизацию.

Создание плагина

Плагину Open Design нужны open-design.json и payload его типа. Навыки и сценарии также содержат SKILL.md; остальные типы используют свой payload:

my-plugin/
├── open-design.json    ← обязательно: метаданные + inputs + pipeline + capabilities
├── SKILL.md            ← обязательно для agent-skill/scenario; для других типов не требуется
├── README.md           ← опционально: использование, установка, ссылки на registry
├── preview/            ← опционально: index.html / poster.png (очень желательно для визуальных плагинов)
└── examples/           ← опционально: конкретные сценарии использования

Основные поля: specVersion, name, version, опциональный compat.agentSkills[].path только при экспорте Agent Skill, а также od.kind, od.taskKind, od.mode, od.capabilities[] и od.inputs[].

Создайте каркас + проверьте локально:

od plugin scaffold --id my-plugin --title "My Plugin"   # сгенерировать каркас
od plugin validate ./my-plugin                          # проверить манифест и структуру файлов
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Полный набор полей и рантайм-контракт → plugins/spec/SPEC.md; разработка плагина с кодинг-агентом → plugins/spec/AGENT-DEVELOPMENT.md; готовые к копированию минимальные шаблоны → plugins/spec/examples/.

Вклад в виде плагина

Поместите папку плагина в plugins/community/ (сторонние плагины), или — чтобы поставлять его вместе с Open Design — в соответствующий уровень plugins/_official/.
Пройдите валидацию: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
Заполните PR, используя шаблон в plugins/spec/CONTRIBUTING.md (ID, версия, линия, режим, возможности, примеры триггеров; приложите скриншот / предпросмотр для визуальных плагинов).
Чтобы опубликовать во внешнем реестре (skills.sh / ClawHub / отдельный GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Эндпоинт реестра плагинов: GET /api/plugins. Обзор директории → plugins/README.md (简体中文).

Архитектура

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Слой	Стек
Фронтенд	Next.js 16 App Router + React 18 + TypeScript
Демон	Node 24 · Express · SSE-стриминг · `better-sqlite3`
Хранилище	Перед изменением или документированием путей хранения демона необходимо прочитать корневой `AGENTS.md`, раздел Daemon data directory contract. Этот README НЕ ДОЛЖЕН пересказывать его.
Предпросмотр	Filesystem-запуск рендерит канонические файлы; BYOK/API разбирает полный `<artifact>` в iframe `srcdoc`
Экспорт	HTML (встроенный) · PDF (печать из браузера) · PPTX (управляемый агентом) · ZIP · Markdown · MP4 (HyperFrames)
Десктоп	Electron-оболочка + изолированный рендерер + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Жизненный цикл	Одна точка входа: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check)

Полная архитектура → docs/architecture.md. Протокол навыков → docs/skills-protocol.md. Контракт адаптера агента → docs/agent-adapters.md.

Дорожная карта

Поэтапная поставка → docs/roadmap.md.

Сообщество

За каждым каналом стоят настоящие люди.

💬 Discord — ежедневный чат, обмен плагинами, вопросы → discord.gg/mHAjSMV6gz
🐦 X / Twitter — заметки о релизах, вехи, закулисье → @OpenDesignHQ
🗣️ GitHub Discussions — глубокие Q&A, RFC, «покажи свою работу» → Discussions
🐛 GitHub Issues — отчёты об ошибках, запросы функций → Issues

Метки good-first-issue и help-wanted — самый простой способ начать.

Вклад в проект

Open Design продолжает двигаться, потому что контрибьюторы — дизайнеры, инженеры, авторы промптов — продолжают появляться. Многие из самых используемых навыков, дизайн-систем и плагинов были написаны людьми вне основной команды.

🎯 С чего начать (максимум пользы, минимум изменений)

Хотите выпустить…	Как	Где
Новый навык	Бросьте папку с `SKILL.md` + `assets/` + `references/`	`skills/` · спецификация в `docs/skills-protocol.md`
Новую дизайн-систему	Бросьте пакет с `DESIGN.md` в основе; при необходимости добавьте `manifest.json`, `tokens.css`, компоненты, ресурсы или сведения о происхождении	`design-systems/<brand>/`
Новый плагин	Бросьте `open-design.json` + полезную нагрузку соответствующего типа в папку категории	`plugins/community/` · спецификация в `plugins/spec/SPEC.md` · руководство по разработке для агентов в `plugins/spec/AGENT-DEVELOPMENT.md`
Поддержку нового CLI кодинг-агента	Определение runtime + регистрация; парсер только для нового формата	`apps/daemon/src/runtimes/defs/`
Исправить баг или отполировать UI	Просмотрите метку `good-first-issue`	Issues →
Перевести документацию	Обновите файлы `README.<lang>.md`	`TRANSLATIONS.md`

🤖 Вклад в роли агента

Если вы — агент, читающий это, самый быстрый путь:

# 1. Запустите проект локально
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. Найдите good-first-issue и назначьте себя
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # создать ветку и worktree

# 3. Внесите изменение и запустите проверки
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Откройте PR
gh pr create --fill

Полный процесс вклада, дружественный к агентам, стиль кода и планка PR → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

🏅 Программа Open Design Fellow

Мы набираем Open Design Fellows по всему миру — Fellows формируют продукт вместе с основной командой, официально представляют Open Design в своём регионе и развивают сообщество локально, при финансовой поддержке ($1,000 / MR), бесплатных кредитах на LLM и прямом треке ревью. Подробности → MAINTAINERS.md и анонс в Discord.

Мейнтейнеры

Они несут на себе значительную часть нагрузки — ежедневное обслуживание, ревью и поддержку сообщества.

_{@Nagendhra-web}
_{Мейнтейнер}

_@Sid-Qin
_{Мейнтейнер}

_@YOMXXX
_{Мейнтейнер}

Правила мейнтейнеров, критерии повышения и протокол выхода → MAINTAINERS.md (также Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

Контрибьюторы

Спасибо всем, кто принял участие — код, документация, обратная связь, точный issue, новый навык, новая дизайн-система.

Активность репозитория

SVG выше регенерируется ежедневно через .github/workflows/metrics.yml с помощью lowlighter/metrics.

Поставьте нам звезду

Если это сэкономило вам тридцать минут, поставьте ★. Звёзды не платят за аренду — но они говорят следующему дизайнеру, агенту и контрибьютору, что этот эксперимент достоин их внимания. Один клик, три секунды, настоящий сигнал.

Ссылки и происхождение

Проект	Роль
Claude Design	Закрытый продукт, открытой альтернативой которому является этот репозиторий.
`alchaincyf/huashu-design`	Компас дизайн-философии — рабочий процесс джуниор-дизайнера, протокол брендовых ассетов, чек-лист против AI-слопа, пятимерная критика.
`op7418/guizang-ppt-skill`	Навык веб-PPT в журнальном стиле, включённый дословно в `design-templates/guizang-ppt/`. По умолчанию для режима презентаций.
`lewislulu/html-ppt-skill`	Семейство HTML PPT Studio — 15 шаблонов презентаций, 36 тем, 31 макет страниц, рантайм анимации, режим презентера с магнитными карточками.
`OpenCoworkAI/open-codesign`	Первая открытая альтернатива Claude Design; UX-паттерны, которые мы заимствуем (цикл стриминга артефактов, изолированный iframe, живая панель агента).
`multica-ai/multica`	Архитектура демона + адаптеров — обнаружение агентов сканированием PATH, локальный демон как единственный привилегированный процесс.
`VoltAgent/awesome-design-md`	Исторический источник исходной 9-раздельной схемы `DESIGN.md` и 70 систем, производных от upstream; современные пакеты могут расширять эту основу.
`bergside/awesome-design-skills`	Источник 57 дизайн-навыков, добавленных в `design-systems/`.
`heygen-com/hyperframes`	Фреймворк моушн-графики HTML→MP4, интегрированный как полноправный `hyperframes-html` в Open Design.
Claude Code skills	Конвенция `SKILL.md`, которую мы перенимаем дословно.

Подробное происхождение → docs/references.md.

Лицензия

Apache-2.0. Включённые навыки и шаблоны со своими файлами LICENSE сохраняют собственные лицензии, включая design-templates/guizang-ppt/ (MIT, @op7418), design-templates/html-ppt/ (MIT, @lewislulu) и skills/web-clone/ (MIT, @Jane-xiaoer).

Uh oh!

FilesExpand file tree

README.ru.md

Latest commit

History