✨ Святкуємо 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 Cloud · Discord · Стежити за @OpenDesignHQ

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

OpenDesign — перший спільний робочий простір із ШІ-дизайн-агентами. Почніть з опису завдання та скористайтеся звичним агентом для розробки або OpenDesign Cloud, щоб створити прототип відповідно до вашої дизайн-системи. Поділіться ним із командою, зберіть відгуки й попросіть агента вдосконалити результат у тому самому проєкті.

Цей процес відкритий і розширюваний. OpenDesign поширюється за ліцензією Apache 2.0: команди можуть вивчати й адаптувати навички, шаблони, дизайн-системи та плагіни до своїх процесів.

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

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

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

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.

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

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

Вебпрототип — редакторський дашборд зі смугами прокрутки, KPI та діаграмами. Відрендерено прямо з design-templates/dating-web/.

Прототип мобільного застосунку — гейміфікований потік із трьох екранів зі стрічками XP та деталями квестів. Передавайте прямо в Cursor / Codex / Claude Code, щоб перетворити на React/Next/Vue.

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

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

Режим презентації (guizang-ppt) — журнальні макети, WebGL-герой, чеклісти P0/P1/P2. Включено дослівно з op7418/guizang-ppt-skill зі збереженням оригінальної ліцензії.

Презентація у швейцарському інтернаціональному стилі — закріплена на сітці, монохромні акценти. Один із 15 шаблонів презентацій та 36 тем у design-templates/html-ppt-*/.

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

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

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

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

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

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

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

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/.

• 🤖 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 або GitHub Releases
• Windows (x64) → open-design.ai або GitHub Releases
• Linux (AppImage, опціональна лінія) → GitHub Releases

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

Ви можете користуватися OpenDesign, жодного разу не відкриваючи 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, пише канонічні файли, а OpenDesign їх показує. BYOK/API без файлових інструментів повертає один повний блок <artifact>.

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 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. Користувачі Windows, див. docs/windows-troubleshooting.md. Повний швидкий старт, змінні середовища та процес упакованого збирання → QUICKSTART.md.

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

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

OpenDesign постачає сервер MCP через stdio та скрипти встановлення для кожного агента. Будь-який MCP-сумісний агент в іншому репозиторії може читати файли з ваших локальних проєктів OpenDesign безпосередньо — 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.

Протокол і поділ каталогів → 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 описує форму й походження.

Повторно імпортуйте бібліотеку через 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 для дизайн-систем.

Також 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-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[].

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

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/.

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 │
   └──────────────────────────────────────────────────────────────────┘

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

• Демон + 26 runtime-визначень на 25 різних CLI + реєстри навичок/шаблонів + каталог систем
• Вебзастосунок + чат + форма запитань + селектор 5 напрямів + прогрес todo + попередній перегляд у пісочниці
• 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 лінтингу артефактів + 5-вимірний шлюз самокритики перед видачею
• 0.8.0 — інфраструктура маркетплейсу плагінів (261 офіційний плагін, специфікація маніфесту, скрипти встановлення для кожного агента)
• 0.9.0 — OpenDesign Cloud (офіційний Model Router, вбудований у застосунок: нуль конфігурації, вхід в один клік)
• Упаковані збірки Electron — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (опціональна лінія)
• Хірургічні правки в режимі коментарів — частково випущено; надійне цільове патчування в розробці
• UX панелі налаштувань, виданої ШІ — ще не реалізовано
• npx od init для каркасування проєкту з DESIGN.md
• Plugin SDK + CLI od plugin {add,list,remove,test,publish}
• Плагіни міграції Figma / Pencil → React / Next / Vue (alpha)
• Плагін оновлення наявної кодової бази (спрямувати на репозиторій git + DESIGN.md)

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

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

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

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

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

Якщо ви — агент, який це читає, найшвидший шлях такий:

# 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).

Ми набираємо OpenDesign Fellows по всьому світу — Fellows формують продукт разом із основною командою, офіційно представляють OpenDesign у своєму регіоні та розвивають спільноту локально, маючи фінансовану підтримку ($1,000 / MR), безкоштовні LLM-кредити та прямий трек рев'ю. Деталі → MAINTAINERS.md та анонс у Discord.

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

@Nagendhra-web Maintainer

@Sid-Qin Maintainer

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

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

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

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

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

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