Files
open-design/docs/i18n/README.ru.md
1343f374c6 docs: align README positioning and clarify service disclosures (#8718)
* docs: align README positioning and clarify service disclosures

* docs: restore shipped migration and import contracts

* docs: list task-kind values in condensed translations

---------

Co-authored-by: Joey <236967869+joeylee12629-star@users.noreply.github.com>
2026-10-13 12:00:42 +00:00

71 KiB
Raw Permalink Blame History

OpenDesign: первое совместное рабочее пространство с ИИ-дизайн-агентами

✨ Отмечаем 100K звёзд на GitHub с OpenDesign Go — Кредиты Go удвоены: 8 долларов США за первый месяц и до 120 долларов США в ежемесячных кредитах для доступных в Design Plan моделей. Используйте их с более чем 10 моделями, включая GPT-6 Luna, DeepSeek V4.1 Flash, GLM-5.3 Flash-X и MiMo V2.6 Flash. Все персональные тарифы включают доступ к API для Codex, Claude Code, DSH, OpenCode и других инструментов.

OpenDesign: первое совместное рабочее пространство с ИИ-дизайн-агентами

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

релиз лицензия discord быстрый старт

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


Что такое OpenDesign

OpenDesign — первое совместное рабочее пространство с ИИ-дизайн-агентами. Начните с описания задачи и используйте привычного агента для разработки или OpenDesign Cloud, чтобы создать прототип в соответствии с вашей дизайн-системой. Поделитесь им с командой, соберите отзывы и попросите агента доработать результат в том же проекте.

Этот процесс открыт и расширяем. OpenDesign распространяется по лицензии Apache 2.0: команды могут изучать и адаптировать навыки, шаблоны, дизайн-системы и плагины под свои процессы.


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

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

Home — Начните с описания задачи или примера.
Home — Начните с описания задачи или примера.
All projects — Вернитесь к дизайн-системам, медиафайлам и прототипам.
All projects — Вернитесь к дизайн-системам, медиафайлам и прототипам.
Design Systems — Изучайте фирменные материалы и дорабатывайте их с агентом.
Design Systems — Изучайте фирменные материалы и дорабатывайте их с агентом.
Plugins — Находите навыки и запускайте их через Try it.
Plugins — Находите навыки и запускайте их через Try it.

Studio — создание и доработка в одном проекте

Prototype — Создавайте и улучшайте интерактивные сайты вместе с агентом и просматривайте результат в реальном времени.
Prototype — Создавайте и улучшайте интерактивные сайты вместе с агентом и просматривайте результат в реальном времени.
Slides — Создавайте презентации, проверяйте слайды и заметки докладчика, затем экспортируйте результат.
Slides — Создавайте презентации, проверяйте слайды и заметки докладчика, затем экспортируйте результат.
Image — Создавайте изображения из переписки, проверяйте результат, затем скачивайте или открывайте его.
Image — Создавайте изображения из переписки, проверяйте результат, затем скачивайте или открывайте его.
HyperFrames — Создавайте анимированную графику с агентом и экспортируйте её в MP4.
HyperFrames — Создавайте анимированную графику с агентом и экспортируйте её в MP4. Смотреть видео.

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

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

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

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

25 CLI кодинг-агента, которые поддерживает OpenDesign — Claude Code · Codex · OpenCode · Hermes · Antigravity · Vela · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Amp · CodeBuddy · Mimo · AtomCode · Devin · Trae

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

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


Демо

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

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

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

Веб-прототип dating-web
Веб-прототип — редакционный дашборд со скроллбарами, KPI и графиками. Отрендерен напрямую из design-templates/dating-web/.
Геймифицированное приложение
Прототип мобильного приложения — трёхэкранный геймифицированный поток с лентами XP и деталями квеста. Передавайте напрямую в Cursor / Codex / Claude Code, чтобы превратить в React/Next/Vue.

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

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

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

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

Журнальная презентация (guizang-ppt)
Режим презентации (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-каменной лестницы
3D-каменная лестница
Инфографика из тёсаного камня
Гламурный портрет
Гламурный портрет
Редакционная студийная съёмка

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

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

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

Промо SaaS-продукта
30-секундное промо SaaS-продукта · 16:9 · 3D-раскрытие UI
TikTok-караоке
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/.


Почему OpenDesign

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🐳 Запуск с Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://127.0.0.1:7456

Если браузер запрашивает учётные данные, укажите open-design как имя пользователя и значение OD_API_TOKEN из deploy/.env как пароль. Трафик Docker bridge останется защищённым без включения host networking.

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

Deploy on Sealos

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


Плагины

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

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

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

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

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

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

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

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

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

od plugin list                       # список установленных плагинов (фильтры --task-kind / --mode / --tag)
od plugin search "landing page"      # поиск по ключевым словам
od plugin info od-default            # метаданные, входы и возможности плагина
od plugin install od-default        # установка из 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 в автоматизацию.

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

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

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

Основные поля: specVersion, name, version, опциональный compat.agentSkills[].path только при экспорте Agent Skill, а также od.kind, od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode, od.capabilities[] и od.inputs[].

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

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

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

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

  1. Поместите папку плагина в plugins/community/ (сторонние плагины), или — чтобы поставлять его вместе с OpenDesign — в соответствующий уровень 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/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘
Слой Стек
Фронтенд Next.js 16 App Router + React 18 + TypeScript
Демон Node 24 · Express · SSE-стриминг · better-sqlite3
Хранилище Перед изменением или документированием путей хранения демона необходимо прочитать корневой AGENTS.md, раздел Daemon data directory contract. Этот README НЕ ДОЛЖЕН пересказывать его.
Предпросмотр Filesystem-запуск рендерит канонические файлы; BYOK/API разбирает полный <artifact> в iframe srcdoc
Экспорт HTML (встроенный) · PDF (печать из браузера) · PPTX (управляемый агентом) · ZIP · Markdown · MP4 (HyperFrames)
Десктоп Electron-оболочка + изолированный рендерер + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Жизненный цикл Одна точка входа: pnpm tools-dev (start / stop / run / status / logs / inspect / check)

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


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

  • Демон + 26 runtime-определений на 25 разных CLI + реестры навыков/шаблонов + каталог систем
  • Веб-приложение + чат + форма вопросов + выбор из 5 направлений + прогресс задач + изолированный предпросмотр
  • 100+ функциональных навыков · отдельный каталог шаблонов · 151 пакет дизайн-систем · 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 — OpenDesign 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 — самый простой способ начать.


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

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

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

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

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

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

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

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

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

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

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

🏅 Программа OpenDesign Fellow

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


Мейнтейнеры

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

@Nagendhra-web
@Nagendhra-web

Мейнтейнер
@Sid-Qin
@Sid-Qin

Мейнтейнер
@YOMXXX
@YOMXXX

Мейнтейнер

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

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

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

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

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

OpenDesign — метрики репозитория

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


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

Поставьте звезду OpenDesign на GitHub — github.com/nexu-io/open-design

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

История звёзд OpenDesign

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

Проект Роль
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 UX-паттерны, которые мы заимствуем (цикл стриминга артефактов, изолированный iframe, живая панель агента).
multica-ai/multica Архитектура демона + адаптеров — обнаружение агентов сканированием PATH, локальный демон как единственный привилегированный процесс.
VoltAgent/awesome-design-md Исторический источник исходной 9-раздельной схемы DESIGN.md и 70 систем, производных от upstream; современные пакеты могут расширять эту основу.
bergside/awesome-design-skills Источник 57 дизайн-навыков, добавленных в design-systems/.
heygen-com/hyperframes Фреймворк моушн-графики HTML→MP4, интегрированный как полноправный hyperframes-html в OpenDesign.
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).