OpenDesign: перший спільний робочий простір із ШІ-дизайн-агентами

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

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

Home — Почніть з опису завдання або прикладу.	All projects — Повертайтеся до дизайн-систем, медіа та прототипів.
Design Systems — Переглядайте матеріали бренду й удосконалюйте їх разом з агентом.	Plugins — Знаходьте навички й запускайте їх через Try it.

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

` під'єднує сервер MCP до конфігурації цього агента, і ви викликаєте ті самі інструменти зсередини будь-якого агента. | Кодувальний агент / платформа          | Статус    | Встановлення сервера MCP одним рядком                    | |---|:---:|---| | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Підтримується | `od mcp install claude` | | [Codex CLI](https://github.com/openai/codex) | ✅ Підтримується | `od mcp install codex` | | [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ Підтримується | `od mcp install reasonix` | | [Raven](https://github.com/EverMind-AI/Raven) | ✅ Підтримується | `od mcp install raven` | | [Cursor](https://www.cursor.com/cli) | ✅ Підтримується | `od mcp install cursor` | | [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Підтримується | `od mcp install copilot` | | [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Підтримується | `od mcp install copilot` | | [OpenCode](https://opencode.ai/) | ✅ Підтримується | `od mcp install opencode` | | [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Підтримується | `od mcp install openclaw` | | [Antigravity](https://antigravity.google) | ✅ Підтримується | `od mcp install antigravity` | | [Cline](https://github.com/cline/cline) | ✅ Підтримується | `od mcp install cline` | | [Trae](https://www.trae.ai/) | ✅ Підтримується | `od mcp install trae` | | [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ Підтримується | `od mcp install kimi` | | [Kiro](https://kiro.dev) | ✅ Підтримується | `od mcp install kiro` | | [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Підтримується | `od mcp install pi` | | [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Підтримується | `od mcp install vibe` | | [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ Підтримується | `od mcp install hermes` | `od mcp install --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/`](../../apps/daemon/src/runtimes/defs/) і реєструються в `runtimes/registry.ts`. Новий parser потрібен лише для нового wire-формату — див. [`docs/agent-adapters.md`](../../docs/agent-adapters.md). --- ## Демо Чотири основні категорії продукту, усі відрендерені кодувальним агентом, що працює на вашому ноутбуці. Натисніть на мініатюру, щоб побачити реальний приклад. ### 1 · Прототипи — веб · десктоп · мобільні Типова поверхня виведення. Односторінкові HTML-артефакти, які зчитують ваш `DESIGN.md` і рендеряться в iframe-пісочниці.

Вебпрототип — редакторський дашборд зі смугами прокрутки, 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/`](../../prompt-templates/) — мініатюри попереднього перегляду, повний текст промпта, цільова модель, співвідношення сторін та зазначення джерела. Один клік скидає бриф у композитор. ### 5 · Відео та HyperFrames — моушн-графіка agent-native **[HyperFrames][hyperframes]** — це відкрита, agent-native відеоплатформа від 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** для аудіошару.

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/`](../../design-templates/hyperframes/). [hyperframes]: https://github.com/heygen-com/hyperframes --- ## Чому OpenDesign - 🤖 **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`, і він рефакторить ваші реальні компоненти відповідно до специфікації бренду. - 🔒 **Приватність за переконанням.** Проєкти можуть працювати локально або у власному розгортанні. Запити до хмарних моделей та OpenDesign Cloud надсилаються відповідним сервісам. BYOK-проксі містить захист від SSRF. --- ## Швидкий старт ### 🖥️ Завантажте десктопний застосунок (рекомендовано — нуль конфігурації) Найшвидший спосіб скористатися OpenDesign. Без Node, без pnpm, без клонування. - **macOS** (Apple Silicon · Intel x64) → [**open-design.ai**](https://open-design.ai/) або [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) або [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Linux** (AppImage, опціональна лінія) → [GitHub Releases](https://github.com/nexu-io/open-design/releases) Після встановлення: застосунок автоматично виявляє кожен CLI кодувального агента у вашому `PATH`, завантажує 100+ функціональних навичок, окремий каталог шаблонів рендерингу та 151 пакет дизайн-систем і дозволяє ввести бриф у вікні входу. ### 🤖 Встановіть у свого кодувального агента (без UI) Ви можете користуватися OpenDesign, жодного разу не відкриваючи GUI — викликайте його як навичку, плагін або сервер MCP усередині Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi тощо. ```bash # One-line install into the agent you're using: od mcp install # = 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`, пише канонічні файли, а OpenDesign їх показує. BYOK/API без файлових інструментів повертає один повний блок ``. ### 🐳 Запуск через Docker ```bash 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 [](https://sealos.io/products/app-store/open-design/) Шаблон Sealos App Store запускає опублікований Docker-образ OpenDesign із постійним сховищем робочої області та Basic Auth на публічному проксі. Для користувацьких публічних або спільних Docker-розгортань дотримуйтеся рекомендацій щодо зворотного проксі та `OPEN_DESIGN_ALLOWED_ORIGINS` у [`deploy/README.md`](../../deploy/README.md#local-compose). ### 🧑‍💻 Запуск із вихідного коду ```bash 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`](../../docs/windows-troubleshooting.md). Повний швидкий старт, змінні середовища та процес упакованого збирання → [`QUICKSTART.md`](../../QUICKSTART.md). ### Повний робочий процес — від брифа до артефакта `бриф → плагін → напрям → дизайн-система → артефакт → передача → пам'ять` 1. **PM подає бриф.** Селектор плагінів пропонує лендинг · пітч-презентацію · дашборд · допис у соцмережі · PM-специфікацію · табель OKR… 2. **Дизайнер (або агент) фіксує напрям.** Немає бренду? Виберіть з-поміж 5 курованих напрямів. Маєте бренд? Скиньте скриншот / URL → агент під'єднує GitHub та кодифікує багаторазовий `DESIGN.md`. 3. **Агент створює перший результат.** CLI із filesystem пише канонічні файли; BYOK/API без файлових інструментів повертає повний ``. 4. **Передача в інженерію.** Артефакт — це справжній HTML/CSS — скиньте його в Cursor, Codex або Claude Code, щоб продовжувати будувати як код. Або експортуйте PPTX / PDF / MP4 прямо в маркетинг. 5. **OpenDesign стає розумнішим у міру використання.** Ваші скриншоти, шрифти, палітри та підтверджені артефакти накопичуються як значення за замовчуванням для наступної сесії. Менше переробки, менше дрейфу. --- ## Використання OpenDesign зі свого кодувального агента OpenDesign постачає **сервер MCP через stdio** та **скрипти встановлення** для кожного агента. Будь-який MCP-сумісний агент в іншому репозиторії може читати файли з ваших локальних проєктів OpenDesign безпосередньо — CSS токенів, JSX-компоненти, вхідний HTML — як структурований API, до якого можна звертатися за іменем. Агент завжди бачить живий файл, а не застарілий експорт. ```bash # One-line install (16+ CLIs supported): od mcp install # Then the agent can: od project list --json od files list --json od files read od plugin list --json od skills list --json ``` **Чому MCP?** Експорт і повторне приєднання zip-архіву на кожній ітерації порушує потік. MCP відкриває джерело дизайну безпосередньо — агент завжди бачить живий файл. **Для агента, що починає з нуля,** інсталятор розміщує `~/.config//open-design.json` (або платформенний еквівалент) плюс готовий до вставлення фрагмент MCP. Cursor отримує deeplink в один клік; Claude Code отримує однорядкову команду `claude mcp add-json`; кожен інший агент отримує JSON у схемі, якої очікує його конфігурація. Повний процес для кожного агента → **Settings → MCP server** у десктопному застосунку або [`docs/agent-adapters.md`](../../docs/agent-adapters.md). **Модель безпеки.** За замовчуванням лише для читання, демон прив'язується до `127.0.0.1`, а SSRF блокується на межі проксі. Доступ із LAN вимагає явного `OD_BIND_HOST` плюс `OD_ALLOWED_ORIGINS`. Облікові дані конекторів та маршрути попереднього перегляду живих артефактів залишаються лише на петлевому інтерфейсі незалежно від цього. --- ## Навички та шаблони дизайну **100+ функціональних навичок містяться в [`skills/`](../../skills/)** і дають повторно використовувану поведінку, довідки чи утиліти. Рендерні starter-и відокремлено в [`design-templates/`](../../design-templates/) і вони потрапляють до каталогу шаблонів, не реєстру функціональних навичок. Два **режими** є основою каталогу шаблонів: `prototype` і `deck`; інші шаблони покривають `image`, `video`, `audio` та utility. | Шаблон дизайну | Режим | Сценарій | Що він створює | |---|---|---|---| | [`web-prototype`](../../design-templates/web-prototype/) | prototype | design | Типовий лендинг / герой | | [`saas-landing`](../../design-templates/saas-landing/) | prototype | marketing | Герой / функції / ціни / CTA | | [`dashboard`](../../design-templates/dashboard/) | prototype | operation | Адмін / аналітика (з бічною панеллю) | | [`mobile-app`](../../design-templates/mobile-app/) | prototype | design | Застосунок у рамці iPhone 15 Pro / Pixel | | [`mobile-onboarding`](../../design-templates/mobile-onboarding/) | prototype | design | Заставка · ціннісна пропозиція · потік входу | | [`social-carousel`](../../design-templates/social-carousel/) | prototype | marketing | Карусель із 3 карток 1080×1080 | | [`email-marketing`](../../design-templates/email-marketing/) | prototype | marketing | Брендований email із безпечним табличним фолбеком | | [`magazine-poster`](../../design-templates/magazine-poster/) | prototype | marketing | Односторінковий журнальний макет | | [`motion-frames`](../../design-templates/motion-frames/) | prototype | marketing | Зациклений CSS-моушн-герой | | [`sprite-animation`](../../design-templates/sprite-animation/) | prototype | marketing | 8-бітний піксельний анімований пояснювач | | [`pm-spec`](../../design-templates/pm-spec/) | prototype | product | PM-специфікація (з ToC + журналом рішень) | | [`team-okrs`](../../design-templates/team-okrs/) | prototype | product | Табель OKR | | [`eng-runbook`](../../design-templates/eng-runbook/) | prototype | engineering | Runbook інцидентів | | [`finance-report`](../../design-templates/finance-report/) | prototype | finance | Виконавче фінансове резюме | | [`hr-onboarding`](../../design-templates/hr-onboarding/) | prototype | hr | План онбордингу на посаду | | [`guizang-ppt`](../../design-templates/guizang-ppt/) | deck | marketing | Веб-PPT у журнальному стилі (типовий для презентацій) | | [`html-ppt-*`](../../design-templates/) | deck | marketing | 15 шаблонів презентацій × 36 тем (головний шаблон у [`design-templates/html-ppt/`](../../design-templates/html-ppt/)) | | [`hyperframes`](../../design-templates/hyperframes/) | video | marketing | Моушн-графіка HTML → MP4 (OSS-платформа HeyGen) | | [`critique`](../../design-templates/critique/) | utility | design | П'ятивимірний табель самокритики | | [`tweaks`](../../design-templates/tweaks/) | utility | design | Маніфест панелі налаштувань, виданий ШІ | Протокол і поділ каталогів → [`docs/skills-protocol.md`](../../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`](../../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` **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`](../../scripts/sync-design-systems.ts). Додайте власний бренд → покладіть `DESIGN.md` у `design-systems//`. Повний посібник → [`design-systems/README.md`](../../design-systems/README.md). [acd2]: https://github.com/VoltAgent/awesome-design-md --- ## Плагіни **277 офіційних плагінів і 183 remix-приклади** містяться в [`plugins/_official/`](../../plugins/_official/). Кожен елемент — каталог з `open-design.json` і payload свого типу: `SKILL.md` для workflow, `template.json` для медіашаблонів або `DESIGN.md` для дизайн-систем. | Категорія | Кількість | Вміст | |---|---|---| | [`scenarios/`](../../plugins/_official/scenarios/) | 13 | Повні дизайн-сценарії — [`od-default`](../../plugins/_official/scenarios/od-default/), [`od-design-refine`](../../plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/), [`od-react-export`](../../plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](../../plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](../../plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](../../plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](../../plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](../../plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](../../plugins/_official/scenarios/od-plugin-authoring/), [`od-share-to-community`](../../plugins/_official/scenarios/od-share-to-community/), [`od-web-effect-extractor`](../../plugins/_official/scenarios/od-web-effect-extractor/) | | [`image-templates/`](../../plugins/_official/image-templates/) | 45 | Одношотові промпти зображень — редакторські, кінематографічні, продуктові, портретні | | [`video-templates/`](../../plugins/_official/video-templates/) | 63 | Моушн-шаблони HyperFrames / Seedance / Veo | | [`design-systems/`](../../plugins/_official/design-systems/) | 143 | Брендові `DESIGN.md`, обгорнуті як плагіни | | [`atoms/`](../../plugins/_official/atoms/) | 13 | Багаторазові фрагменти UI (кнопки, герої, KPI-картки) | | [`examples/`](../../plugins/_official/examples/) | 183 | Реміксувані еталонні результати | Також [`plugins/community/`](../../plugins/community/) для плагінів спільноти та [`plugins/registry/`](../../plugins/registry/) для процесу публікації. ### Що можуть робити плагіни - 🤖 **Працюють у будь-якому кодувальному агенті** — [Claude Code](../../docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), Hermes, Kimi… через той самий протокол навичок, який агент уже знає. - 🔁 **Мігрують робочі процеси Figma / Pencil** → вихідний код React, Next.js або Vue. Див. [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/). - 🛠️ **Оновлюють наявну кодову базу до специфікації бренду** — спрямуйте плагін на репозиторій `git` + `DESIGN.md`, отримайте PR. Див. [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/). - 💾 **Зберігають користувацькі робочі процеси** — багаторазові шаблони вашої команди стоять поряд із тими, що постачаються. ### Використання плагінів Плагіни мають повний паритет між **вебінтерфейсом** та **CLI `od`** — ті самі кінцеві точки `/api/plugins`, виберіть те, що підходить. **У десктопному / вебзастосунку:** відкрийте сторінку **Plugin**, щоб переглянути маркетплейс, і натисніть **Install**; усередині Studio проєкту плагіни з'являються як чипи композитора, на які ви натискаєте для застосування (з входами, які вони декларують). **У командному рядку** (працює без UI — це шлях, який використовують зовнішні агенти): ```bash 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-default # 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` в автоматизацію. ### Створення плагіна Плагіну OpenDesign потрібні `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` (`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode`, `od.capabilities[]` і `od.inputs[]`. Каркасування + валідація локально: ```bash 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/SPEC.md); розробка плагіна з кодувальним агентом → [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md); мінімальні шаблони для копіювання → [`plugins/spec/examples/`](../../plugins/spec/examples/). ### Внесок плагіна 1. Покладіть теку плагіна в [`plugins/community/`](../../plugins/community/) (сторонні плагіни), або — щоб постачати його в комплекті з OpenDesign — у відповідний рівень [`plugins/_official/`](../../plugins/_official/). 2. Пройдіть валідацію: `od plugin validate`, `pnpm guard`, `pnpm --filter @open-design/plugin-runtime typecheck`. 3. Заповніть PR за шаблоном у [`plugins/spec/CONTRIBUTING.md`](../../plugins/spec/CONTRIBUTING.md) (ID, версія, лінія, режим, можливості, приклади тригерів; додайте скриншот / попередній перегляд для візуальних плагінів). 4. Щоб опублікувати у зовнішньому реєстрі (skills.sh / ClawHub / окремий GitHub) → [`plugins/spec/PUBLISHING-REGISTRIES.md`](../../plugins/spec/PUBLISHING-REGISTRIES.md). Кінцева точка реєстру плагінів: `GET /api/plugins`. Огляд директорій → [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.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 розбирає повний `` в 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/architecture.md). Протокол навичок → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Контракт адаптера агента → [`docs/agent-adapters.md`](../../docs/agent-adapters.md). --- ## Дорожня карта - [x] Демон + 26 runtime-визначень на 25 різних CLI + реєстри навичок/шаблонів + каталог систем - [x] Вебзастосунок + чат + форма запитань + селектор 5 напрямів + прогрес todo + попередній перегляд у пісочниці - [x] 100+ функціональних навичок · окремий каталог шаблонів · 151 пакет дизайн-систем · 5 напрямів · 5 рамок - [x] Проєкти · розмови · повідомлення · вкладки · шаблони на основі SQLite - [x] Мультипровайдерний проксі BYOK (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + захист від SSRF - [x] Імпорт ZIP Claude Design (`/api/import/claude-design`) - [x] Протокол sidecar + десктоп Electron + автоматизація IPC - [x] API лінтингу артефактів + 5-вимірний шлюз самокритики перед видачею - [x] **0.8.0** — інфраструктура маркетплейсу плагінів (261 офіційний плагін, специфікація маніфесту, скрипти встановлення для кожного агента) - [x] **0.9.0** — OpenDesign Cloud (офіційний Model Router, вбудований у застосунок: нуль конфігурації, вхід в один клік) - [x] Упаковані збірки 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`](../../docs/roadmap.md). --- ## Спільнота За кожним каналом — реальні люди. - 💬 **Discord** — щоденний чат, обмін плагінами, запитання → [**discord.gg/mHAjSMV6gz**](https://discord.gg/mHAjSMV6gz) - 🐦 **X / Twitter** — нотатки до релізів, віхи, закулісся → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ) - 🗣️ **GitHub Discussions** — глибокі Q&A, RFC, «покажи свою роботу» → [**Discussions**](https://github.com/nexu-io/open-design/discussions) - 🐛 **GitHub Issues** — звіти про баги, запити на функції → [**Issues**](https://github.com/nexu-io/open-design/issues) Мітки [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) та [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) — найлегший спосіб долучитися. --- ## Внесок OpenDesign продовжує рухатися, бо контриб'ютори — дизайнери, інженери, автори промптів — продовжують приходити. Багато з найуживаніших навичок, дизайн-систем і плагінів написали люди поза основною командою. ### 🎯 З чого почати (максимальний важіль, мінімальна зміна) | Хочете випустити… | Як | Де | |---|---|---| | Нову **навичку** | Покладіть теку з `SKILL.md` + `assets/` + `references/` | [`skills/`](../../skills/) · специфікація в [`docs/skills-protocol.md`](../../docs/skills-protocol.md) | | Нову **дизайн-систему** | Покладіть пакет із `DESIGN.md` в основі; за потреби додайте `manifest.json`, `tokens.css`, компоненти, ресурси або дані про походження | [`design-systems//`](../../design-systems/) | | Новий **плагін** | Покладіть `open-design.json` + payload відповідного типу під текою категорії | [`plugins/community/`](../../plugins/community/) · специфікація в [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) · посібник із розробки агентом у [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md) | | Підтримку нового **CLI кодувального агента** | Визначення runtime + запис у registry; parser лише для нового формату | [`apps/daemon/src/runtimes/defs/`](../../apps/daemon/src/runtimes/defs/) | | Виправити баг або відполірувати UI | Перегляньте мітку [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) | [Issues →](https://github.com/nexu-io/open-design/issues) | | Перекласти документацію | Оновіть файли `README..md` | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) | ### 🤖 Внесок як агент Якщо *ви — агент, який це читає*, найшвидший шлях такий: ```bash # 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 # create a branch and worktree # 3. Make the change, run the checks pnpm guard && pnpm typecheck pnpm --filter @open-design/ test # 4. Open the PR gh pr create --fill ``` Повний дружній до агентів процес внеску, стиль коду та планка PR → [`CONTRIBUTING.md`](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)). ### 🏅 Програма OpenDesign Fellow Ми набираємо **OpenDesign Fellows** по всьому світу — Fellows формують продукт разом із основною командою, офіційно представляють OpenDesign у своєму регіоні та розвивають спільноту локально, маючи фінансовану підтримку ($1,000 / MR), безкоштовні LLM-кредити та прямий трек рев'ю. Деталі → [`MAINTAINERS.md`](../../MAINTAINERS.md) та анонс у [Discord](https://discord.gg/mHAjSMV6gz). --- ## Maintainer'и Вони несуть значну частину навантаження — щоденне обслуговування, рев'ю та підтримку спільноти.

@Nagendhra-web Maintainer

@Sid-Qin Maintainer

Правила для maintainer'ів, критерії підвищення та протокол виходу → [`MAINTAINERS.md`](../../MAINTAINERS.md) (також [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)). ## Контриб'ютори Дякуємо всім, хто долучився — кодом, документацією, відгуками, влучним issue, новою навичкою, новою дизайн-системою. --- ## Активність репозиторію SVG вище щодня перегенеровується [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml) за допомогою [`lowlighter/metrics`](https://github.com/lowlighter/metrics). --- ## Поставте нам зірку

Якщо це зекономило вам тридцять хвилин, поставте ★. Зірки не платять за оренду — але вони кажуть наступному дизайнеру, агенту й контриб'ютору, що цей експеримент вартий їхньої уваги. Один клік, три секунди, реальний сигнал. --- ## Посилання та родовід | Проєкт | Роль | |---|---| | [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design) | Компас дизайн-філософії — робочий процес джуніор-дизайнера, протокол брендових ресурсів, чекліст проти AI-slop, п'ятивимірна критика. | | [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) | Навичка веб-PPT у журнальному стилі, включена дослівно під [`design-templates/guizang-ppt/`](../../design-templates/guizang-ppt/). Типова для режиму презентацій. | | [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) | Сімейство HTML PPT Studio — 15 шаблонів презентацій, 36 тем, 31 макет сторінки, рантайм анімації, режим презентера з магнітними картками. | | [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign) | UX-патерни, які ми запозичуємо (цикл потокового артефакта, iframe-пісочниця, жива панель агента). | | [`multica-ai/multica`](https://github.com/multica-ai/multica) | Архітектура демон + адаптер — виявлення агентів скануванням PATH, локальний демон як єдиний привілейований процес. | | [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md) | Історичне джерело початкової 9-роздільної схеми `DESIGN.md` і 70 систем, похідних від upstream; сучасні пакети можуть розширювати цю основу. | | [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | Джерело 57 дизайн-навичок, доданих під `design-systems/`. | | [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) | Платформа моушн-графіки HTML→MP4, інтегрована як повноправний `hyperframes-html` в OpenDesign. | | [Claude Code skills][skill] | Конвенція `SKILL.md`, яку ми приймаємо дослівно. | Детальне походження → [`docs/references.md`](../../docs/references.md). [skill]: https://docs.anthropic.com/en/docs/claude-code/skills ## Ліцензія Apache-2.0. Включений `design-templates/guizang-ppt/` зберігає свою оригінальну [LICENSE](../../design-templates/guizang-ppt/LICENSE) (MIT, [@op7418](https://github.com/op7418)). Включений `design-templates/html-ppt/` зберігає свою оригінальну [LICENSE](../../design-templates/html-ppt/LICENSE) (MIT, [@lewislulu](https://github.com/lewislulu)).