/docs/i18n/README.ru.md

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

🔥 Open Design 0.13.0 — Stay in Flow уже здесь. Раньше долгие сессии дизайна прерывались на каждой заминке — запуск терял своё место, выбор модели заставлял гадать, а экспорт требовал ещё одного обходного пути. 0.13.0 сохраняет сессию живой: возобновляйте запуски Codex / OpenCode / Pi / Open Design Cloud между ходами, быстрее выбирайте нужную модель и передавайте подкреплённые скриншотами PPTX / PDF, не покидая приложение. Скачать 0.13.0 · Примечания к выпуску

⚡ 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.  ⚡ Комбинируемые навыки, брендовые дизайн-системы DESIGN.md и готовые к использованию плагины.  🖼️ Генерирует веб-, десктопные и мобильные прототипы, живые дашборды / артефакты, презентации, изображения, видео, а также моушн-графику HyperFrames. 🔒 Предпросмотр в изолированном iframe · экспорт HTML / PDF / PPTX / MP4.  🤖 Работает на Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity и 22 локальных CLI, либо на любом OpenAI-совместимом эндпоинте через BYOK.

Open Design — это то, что получается, когда агентно-нативный цикл, который Anthropic выпустила вместе с Claude Design — изучить бриф, зафиксировать направление, потоково собрать артефакт, провести ревью и передать результат — перестаёт быть закрытым и становится файловой системой навыков, дизайн-систем и плагинов, которую уже установленные на вашем ноутбуке кодинг-агенты могут читать, писать и ремиксовать. Ваш CLI становится дизайн-движком, ноутбук — студией, а DESIGN.md вашей команды — брендовым контрактом.

Это также альтернатива 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
Cursor	✅ Поддерживается	od mcp install cursor
VS Code + GitHub Copilot	✅ Поддерживается	od mcp install copilot
GitHub Copilot CLI	✅ Поддерживается	od mcp install copilot
Gemini CLI	✅ Поддерживается	od mcp install gemini
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 на границе демона.

Контракт адаптера и парсеры потоков находятся в apps/daemon/src/agents.ts. Добавление нового CLI — это одна запись, см. 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 — схему из 9 разделов, охватывающую палитру, типографику, отступы, движение, голос, антипаттерны. 150 систем поставляются с репозиторием (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Положите папку — и выбор её найдёт.
• 🖥️ Локальный по умолчанию, BYOK на каждом уровне. Нативные десктопные приложения остаются локальными, без обращений в облако. Перед описанием путей данных демона необходимо прочитать корневой AGENTS.md, раздел Daemon data directory contract.
• 🌍 Компонуемый в трёх плоскостях. Плагины несут запускаемые рабочие процессы · навыки несут дизайнерский вкус агента · дизайн-системы несут бренд. Все три — это обычные файлы, которые кто угодно может создавать, версионировать и публиковать.
• 🔁 Обновляйте существующую кодовую базу. Передайте 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 + Vercel
Агентно-нативный (работает в вашем CLI)	Только Anthropic	❌	Только облачный агент	✅ 22 CLI + BYOK
DESIGN.md брендового уровня	Проприетарный	Theme JSON	Ограниченные токены	✅ 150 поставляемых систем
Навыки / плагины / шаблоны	Закрытые	Магазин плагинов	Закрытые	✅ 100+ навыков · 261 плагин
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+ навыков и 150 дизайн-систем и позволяет вам ввести бриф на экране входа.

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

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

# Установка одной командой в агент, которым вы пользуетесь:
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | 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

Агент читает skills/, выбирает правильный SKILL.md, привязывает названный вами DESIGN.md и выдаёт <artifact>, доступный для предпросмотра по адресу http://localhost:7456.

🐳 Запуск с 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

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

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

---

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

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

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

# После этого агент может:
od search-files "primary button"      # поиск файлов по проектам
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # последний отрендеренный артефакт
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

Почему 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/, следующую конвенции Claude Code SKILL.md, расширенной фронтматтером od: (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Положите папку, перезапустите демон, и она появится в выборе.

Два режима закрепляют каталог: prototype (одностраничные веб-/мобильные/десктопные артефакты) и deck (горизонтально-листаемые презентации). Также режимы image, video, audio, template, design-system и utility. Поле scenario группирует их по аудитории: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Навык	Режим	Сценарий	Что производит
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.

---

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

150 систем DESIGN.md брендового уровня поставляются с репозиторием — каждая представляет собой один Markdown-файл со схемой из 9 разделов (цвет, типографика, отступы, макет, компоненты, движение, голос, бренд, антипаттерны), из VoltAgent/awesome-design-md. Переключите систему → следующий рендер использует новые токены. Никакого theme JSON.

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

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.

---

Плагины

261 официальный плагин находится в plugins/_official/. Каждый плагин — это переносимая папка агентского навыка — SKILL.md (читаемый любым агентом, поддерживающим Agent Skills), плюс опциональный манифест open-design.json, который даёт Open Design метаданные маркетплейса, входы, предпросмотры, пайплайны и декларации возможностей. Перейдите сразу к категории:

Категория	Кол-во	Содержимое
scenarios/	11	Полные дизайн-сценарии — 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
image-templates/	45	Одношаговые промпты для изображений — редакционные, кинематографичные, продуктовые, портретные
video-templates/	50	Моушн-шаблоны HyperFrames / Seedance / Veo
design-systems/	142	Брендовые DESIGN.md, обёрнутые в плагины
atoms/	13	Переиспользуемые UI-фрагменты (кнопки, герои, KPI-карточки)
examples/	140	Ремиксуемые эталонные результаты

Также 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 в автоматизацию.

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

Плагину нужен как минимум только SKILL.md; чтобы он попал в маркетплейс Open Design, добавьте open-design.json:

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

Основные поля open-design.json: specVersion (сейчас 1.0.0), name (стабильный ID), version (semver), compat.agentSkills[].path (указывает на ./SKILL.md), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (поверхность вывода, например prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (декларируйте минимум — ограниченная установка по умолчанию даёт только prompt:inject), 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/.

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

1. Поместите папку плагина в plugins/community/ (сторонние плагины), или — чтобы поставлять его вместе с Open Design — в соответствующий уровень plugins/_official/.
2. Пройдите валидацию: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
3. Заполните PR, используя шаблон в plugins/spec/CONTRIBUTING.md (ID, версия, линия, режим, возможности, примеры триггеров; приложите скриншот / предпросмотр для визуальных плагинов).
4. Чтобы опубликовать во внешнем реестре (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/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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

Слой	Стек
Фронтенд	Next.js 16 App Router + React 18 + TypeScript
Демон	Node 24 · Express · SSE-стриминг · better-sqlite3
Хранилище	Перед изменением или документированием путей хранения демона необходимо прочитать корневой AGENTS.md, раздел Daemon data directory contract. Этот README НЕ ДОЛЖЕН пересказывать его.
Предпросмотр	Изолированный iframe srcdoc + стриминговый парсер <artifact>
Экспорт	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.

---

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

• Демон + 22 адаптера CLI кодинг-агентов + реестр навыков + каталог дизайн-систем
• Веб-приложение + чат + форма вопросов + выбор из 5 направлений + прогресс задач + изолированный предпросмотр
• 100+ навыков · 150 дизайн-систем · 5 визуальных направлений · 5 рамок устройств
• Проекты на SQLite · диалоги · сообщения · вкладки · шаблоны
• Мультипровайдерный BYOK-прокси (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + защита от SSRF
• Импорт ZIP из Claude Design (/api/import/claude-design)
• Sidecar-протокол + десктоп на Electron + IPC-автоматизация
• API линтинга артефактов + пятимерный гейт самокритики перед выдачей
• 0.8.0 — инфраструктура маркетплейса плагинов (261 официальный плагин, спецификация манифеста, скрипты установки для каждого агента)
• 0.9.0 — Open Design Cloud (официальный сервис моделей, встроенный в приложение: без настройки, вход в один клик)
• 0.10.0 — универсальное рабочее пространство дизайна: весь craft-цикл в одном окне (референсы → материалы → интерактивное редактирование → motion → handoff)
• 0.11.0 — The Bazaar: разработка в открытую — community-маркетплейс плагинов и дизайн-систем, которые можно выбирать и пополнять
• 0.12.0 — Brand-backed Design System: превращайте уже существующий бренд в переиспользуемую переносимую систему DESIGN.md
• 0.13.0 — Stay in Flow: нативное возобновление сессий, более быстрый выбор модели и экспорт сразу в PPTX / PDF со скриншотами
• Упакованные сборки Electron — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (опциональная линия)
• Хирургические правки в режиме комментариев — частично выпущено; надёжное точечное патчинг в процессе
• UX панели настроек, выдаваемой ИИ — ещё не реализовано
• npx od init для создания каркаса проекта с DESIGN.md
• Plugin SDK + CLI od plugin {add,list,remove,test,publish}
• Плагины миграции Figma / Pencil → React / Next / Vue (alpha)
• Плагин обновления существующей кодовой базы (направить на git-репозиторий + DESIGN.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, используя схему из 9 разделов	design-systems/<brand>/
Новый плагин	Бросьте open-design.json + манифест в папку категории	plugins/community/ · спецификация в plugins/spec/SPEC.md · руководство по разработке для агентов в plugins/spec/AGENT-DEVELOPMENT.md
Поддержку нового CLI кодинг-агента	Одна запись адаптера + парсер потока	apps/daemon/src/agents.ts
Исправить баг или отполировать 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	Источник схемы DESIGN.md из 9 разделов и 70 продуктовых систем.
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).