Open Design: відкрита альтернатива Claude Design

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

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

Вебсайт · Завантажити · Open Design Cloud · Discord · Стежити за @OpenDesignHQ

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

Що таке Open Design

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

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

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

Огляд продукту

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

Основні сторінки

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

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

Studio — багато типів артефактів в одному проєкті

Усередині Studio проєкту та сама дизайн-система передає потоком кілька типів артефактів:

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

Сумісність платформ

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

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

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

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

Визначення runtime містяться в apps/daemon/src/runtimes/defs/ і реєструються в runtimes/registry.ts. Новий parser потрібен лише для нового wire-формату — див. docs/agent-adapters.md.

Демо

Чотири основні категорії продукту, усі відрендерені кодувальним агентом, що працює на вашому ноутбуці. Натисніть на мініатюру, щоб побачити реальний приклад.

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

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

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

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

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

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

3 · Презентації — журнальні презентації, щотижневі оновлення, пітчі

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

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

4 · Зображення — `gpt-image-2`, ImageRouter, користувацький API

_{Ілюстрована мапа міської їжі
Намальований від руки редакторський тревел-постер}

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

_{Кіберпанк-портрет
Аватар профілю — неоновий текст на обличчі}

_{3D кам'яні сходи
Інфографіка з тесаного каменю}

_{Гламурний портрет
Редакторський студійний знімок}

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

5 · Відео та HyperFrames — моушн-графіка agent-native

HyperFrames — це відкрита, agent-native відеоплатформа від 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-ролик · 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. Без виходу, без самохостингу, без розгортання на Vercel, без можливості підставити власного агента.

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

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

Порівняння

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

Швидкий старт

🖥️ Завантажте десктопний застосунок (рекомендовано — нуль конфігурації)

Найшвидший спосіб скористатися Open Design. Без Node, без pnpm, без клонування.

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

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

🤖 Встановіть у свого кодувального агента (без UI)

Ви можете користуватися Open Design, жодного разу не відкриваючи GUI — викликайте його як навичку, плагін або сервер MCP усередині Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi тощо.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

Потім усередині агента:

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

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

🐳 Запуск через Docker

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

🚀 Розгортання на Sealos

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

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

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

Відкрийте URL, надрукований tools-dev; без явних портових прапорців порти розробки призначаються динамічно.

Node ~24, pnpm 10.33.x. Користувачі Windows, див. docs/windows-troubleshooting.md. Повний швидкий старт, змінні середовища, Nix flake та процес упакованого збирання → QUICKSTART.md.

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

бриф → плагін → напрям → дизайн-система → артефакт → передача → пам'ять

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

Використання Open Design зі свого кодувального агента

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

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
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 отримує deeplink в один клік; 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. Облікові дані конекторів та маршрути попереднього перегляду живих артефактів залишаються лише на петлевому інтерфейсі незалежно від цього.

Навички та шаблони дизайну

100+ функціональних навичок містяться в skills/ і дають повторно використовувану поведінку, довідки чи утиліти. Рендерні starter-и відокремлено в 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	Брендований email із безпечним табличним фолбеком
`magazine-poster`	prototype	marketing	Односторінковий журнальний макет
`motion-frames`	prototype	marketing	Зациклений CSS-моушн-герой
`sprite-animation`	prototype	marketing	8-бітний піксельний анімований пояснювач
`pm-spec`	prototype	product	PM-специфікація (з ToC + журналом рішень)
`team-okrs`	prototype	product	Табель OKR
`eng-runbook`	prototype	engineering	Runbook інцидентів
`finance-report`	prototype	finance	Виконавче фінансове резюме
`hr-onboarding`	prototype	hr	План онбордингу на посаду
`guizang-ppt`	deck	marketing	Веб-PPT у журнальному стилі (типовий для презентацій)
`html-ppt-*`	deck	marketing	15 шаблонів презентацій × 36 тем (головний шаблон у `design-templates/html-ppt/`)
`hyperframes`	video	marketing	Моушн-графіка HTML → MP4 (OSS-платформа HeyGen)
`critique`	utility	design	П'ятивимірний табель самокритики
`tweaks`	utility	design	Маніфест панелі налаштувань, виданий ШІ

Протокол і поділ каталогів → docs/skills-protocol.md. GET /api/skills обслуговує навички, GET /api/design-templates — шаблони.

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

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

Повний каталог (натисніть, щоб розгорнути)

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

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

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

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

Електронна комерція — 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 remix-приклади містяться в 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.
💾 Зберігають користувацькі робочі процеси — багаторазові шаблони вашої команди стоять поряд із тими, що постачаються.

Використання плагінів

Плагіни мають повний паритет між вебінтерфейсом та CLI od — ті самі кінцеві точки /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 в автоматизацію.

Створення плагіна

Плагіну Open Design потрібні open-design.json і payload його типу. Навички та сценарії також містять SKILL.md; інші типи використовують власний payload:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

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

Каркасування + валідація локально:

od plugin scaffold --id my-plugin --title "My Plugin"   # 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/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

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

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

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

Поетапна доставка → docs/roadmap.md.

Спільнота

За кожним каналом — реальні люди.

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

Мітки good-first-issue та help-wanted — найлегший спосіб долучитися.

Внесок

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

🎯 З чого почати (максимальний важіль, мінімальна зміна)

Хочете випустити…	Як	Де
Нову навичку	Покладіть теку з `SKILL.md` + `assets/` + `references/`	`skills/` · специфікація в `docs/skills-protocol.md`
Нову дизайн-систему	Покладіть пакет із `DESIGN.md` в основі; за потреби додайте `manifest.json`, `tokens.css`, компоненти, ресурси або дані про походження	`design-systems/<brand>/`
Новий плагін	Покладіть `open-design.json` + payload відповідного типу під текою категорії	`plugins/community/` · специфікація в `plugins/spec/SPEC.md` · посібник із розробки агентом у `plugins/spec/AGENT-DEVELOPMENT.md`
Підтримку нового CLI кодувального агента	Визначення runtime + запис у registry; parser лише для нового формату	`apps/daemon/src/runtimes/defs/`
Виправити баг або відполірувати 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.

Maintainer'и

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

_{@Nagendhra-web}
_Maintainer

_@Sid-Qin
_Maintainer

Правила для maintainer'ів, критерії підвищення та протокол виходу → MAINTAINERS.md (також Deutsch · Français · 简体中文 · 日本語 · Português).

Контриб'ютори

Дякуємо всім, хто долучився — кодом, документацією, відгуками, влучним issue, новою навичкою, новою дизайн-системою.

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

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

Поставте нам зірку

Якщо це зекономило вам тридцять хвилин, поставте ★. Зірки не платять за оренду — але вони кажуть наступному дизайнеру, агенту й контриб'ютору, що цей експеримент вартий їхньої уваги. Один клік, три секунди, реальний сигнал.

Посилання та родовід

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

Детальне походження → docs/references.md.

Ліцензія

Apache-2.0. Включений design-templates/guizang-ppt/ зберігає свою оригінальну LICENSE (MIT, @op7418). Включений design-templates/html-ppt/ зберігає свою оригінальну LICENSE (MIT, @lewislulu).

FilesExpand file tree

README.uk.md

Latest commit

History