External/open-design

Fork 0

mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00

Files

T

SivanColaandGitHub 91d737d10e docs: add Reasonix to localized platform tables (#5477 )

2026-07-13 07:59:11 +00:00

78 KiB

Raw Blame History

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`
DeepSeek Reasonix	✅ Поддерживается	`od mcp install reasonix`
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

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, запрашиваемый по имени. Агент всегда видит живой файл, а не устаревший экспорт.

# Установка одной командой (поддерживается 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/.

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

Поместите папку плагина в 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: 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).

78 KiB Raw Blame History Unescape Escape