README.ru.md
June 2, 2026 · View on GitHub
Open Design: открытая альтернатива Claude Design
🔥 Open Design 0.9.0 уже здесь: создавайте без настройки. официальный Model Router встроен прямо в приложение — никакой дополнительной конфигурации, никакого CLI для установки, никакого API-ключа заранее. Просто откройте приложение, войдите в систему и сразу начинайте проектировать и творить. Скачать 0.9.0 · Присоединиться к обсуждению
🏅 Программа Open Design Fellow теперь открыта. Если вы тоже верите, что дизайн должен быть открытым — станьте Open Design Fellow, формируйте продукт вместе с основной командой и помогайте большему числу людей участвовать в определении будущего дизайна. Подробности →
MAINTAINERS.mdи Discord.
Сайт · Скачать · Discord · Подписаться @nexudotio
English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe
Что такое Open Design
🎨 Локальная по умолчанию, открытая альтернатива Claude Design. 🖥️ Нативное десктопное приложение для macOS и Windows. ⚡ 100+ навыков · ✨ 150 систем DESIGN.md брендового уровня · 📦 261 готовый к использованию плагин. 🖼️ Генерирует веб-, десктопные и мобильные прототипы, живые дашборды / артефакты, презентации, изображения, видео, а также моушн-графику HyperFrames. 🔒 Предпросмотр в изолированном iframe · экспорт HTML / PDF / PPTX / MP4. 🤖 Работает на Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity и 21 локальном 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 |
| 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 на каждом уровне. Нативные десктопные приложения для macOS (Apple Silicon + Intel) и Windows (x64). Linux AppImage на опциональной линии релизов. SQLite в
.od/app.sqlite, файлы в.od/projects/<id>/, без телеметрии, без обращений в облако. - 🌍 Компонуемый в трёх плоскостях. Плагины несут запускаемые рабочие процессы · навыки несут дизайнерский вкус агента · дизайн-системы несут бренд. Все три — это обычные файлы, которые кто угодно может создавать, версионировать и публиковать.
- 🔁 Обновляйте существующую кодовую базу. Передайте
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 | ❌ | Только облачный агент | ✅ 21 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 и других.
# One-line install into the agent you're using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
# | pi | vibe | hermes | cline | kimi | trae | opencode
Затем, внутри агента:
> 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
🧑💻 Запуск из исходников
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. Пользователям 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. - Агент выдаёт первый
<artifact>. Плагин + навык +DESIGN.mdпривязаны. Он стримится в изолированный iframe, редактируемый на месте — а не «перегенерировать с нуля». - Передача в разработку. Артефакт — это настоящий HTML/CSS — бросьте его в Cursor, Codex или Claude Code, чтобы продолжать сборку как код. Или экспортируйте PPTX / PDF / MP4 сразу в маркетинг.
- Open Design становится умнее по мере использования. Ваши скриншоты, шрифты, палитры и подтверждённые артефакты накапливаются как значения по умолчанию для следующей сессии. Меньше переделок, меньше дрейфа.
Используйте Open Design из вашего кодинг-агента
Open Design поставляет stdio MCP-сервер и скрипты установки для каждого агента. Любой MCP-совместимый агент в другом репозитории может читать файлы из ваших локальных проектов Open Design напрямую — токены CSS, JSX-компоненты, входной HTML — как структурированный API, запрашиваемый по имени. Агент всегда видит живой файл, а не устаревший экспорт.
# One-line install (16+ CLIs supported):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# Then the agent can:
od search-files "primary button" # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug> # latest rendered artifact
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 в любом случае.
Навыки
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$ | \text{prototype} | \text{marketing} | Карусель из 3 карточек 1080 \times 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-*$ | \text{deck} | \text{marketing} | 15 шаблонов презентаций \times 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 # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page" # search by keyword
od plugin info od-default # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default # upgrade
od plugin uninstall od-default # uninstall
Каждая команда поддерживает --json, так что вы можете пропускать вывод через jq / xargs в автоматизацию.
Создание плагина
Плагину нужен как минимум только SKILL.md; чтобы он попал в маркетплейс Open Design, добавьте open-design.json:
my-plugin/
├── SKILL.md ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md ← optional: usage, install, registry links
├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/ ← optional: concrete use cases
Основные поля 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" # generate the skeleton
od plugin validate ./my-plugin # check manifest / file layout
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/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: .od/projects/<id> })
▼
┌──────────────────────────────────────────────────────────────────┐
│ 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 |
| Хранилище | Файлы в .od/projects/<id>/ + SQLite в .od/app.sqlite + media-config.json (gitignored, создаётся автоматически). OD_DATA_DIR перемещает всё. |
| Предпросмотр | Изолированный 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.
Дорожная карта
- Демон + 21 адаптер 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 AMR (официальный Model Router, встроенный в приложение: без настройки, вход в один клик)
- Упакованные сборки 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/qhbcCH8Am4
- 🐦 X / Twitter — заметки о релизах, вехи, закулисье → @nexudotio
- 🗣️ 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. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web
# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number> # create a branch and worktree
# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test
# 4. Open the 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 Maintainer |
 @Sid-Qin Maintainer |
Правила мейнтейнеров, критерии повышения и протокол выхода → 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. Включённый design-templates/guizang-ppt/ сохраняет свою оригинальную LICENSE (MIT, @op7418). Включённый design-templates/html-ppt/ сохраняет свою оригинальную LICENSE (MIT, @lewislulu).