mirror of https://github.com/nexu-io/open-design.git synced 2026-07-03 12:27:55 +08:00

Files

PerishFire a0afc584bb [codex] centralize daemon data directory docs (#4222 )

* docs: centralize daemon data directory contract

* fix(e2e): allow slower artifact consistency navigation

Generated-By: looper 0.9.5 (runner=fixer, agent=codex)

* docs: localize daemon data directory pointers

Generated-By: looper 0.9.5 (runner=fixer, agent=codex)

---------

Co-authored-by: Looper <looper@noreply.github.com>

2026-06-15 02:52:05 +00:00

70 KiB

Raw Blame History

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

🔥 Open Design 0.10.0 вже тут: універсальний Agentic-робочий простір для дизайну. Усе ремесло тепер живе в одному вікні — від розмитої ідеї до пошуку референсів, збирання матеріалу, інтерактивного редагування, черги коментарів, шліфування анімацій і передачі результату редактору чи Code Agent — не виходячи із застосунку. З паралельними сесіями це вже не один асистент, а ціла локальна команда дизайнерів, що працює на вас. Завантажити 0.10.0 · Долучитися до обговорення

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

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

Вебсайт · Завантажити · Model Router · Discord · Стежити за @nexudotio

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

Що таке Open Design

🎨 Локально-орієнтована альтернатива Claude Design з відкритим кодом. 🖥️ Нативний десктопний застосунок для macOS і Windows. ⚡ 100+ навичок · ✨ 150 систем DESIGN.md брендового рівня · 📦 261 готовий до використання плагін. 🖼️ Генерує вебпрототипи · десктопні · мобільні прототипи, живі дашборди / артефакти, презентації, зображення, відео, а також моушн-графіку HyperFrames. 🔒 Попередній перегляд у пісочниці iframe · експорт у HTML / PDF / PPTX / MP4. 🤖 Працює на Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity і 21 локальному CLI, або на будь-якій OpenAI-сумісній кінцевій точці через BYOK.

Open Design — це те, що ви отримуєте, коли agent-native цикл, який Anthropic випустила разом із Claude Design — з'ясуй бриф, зафіксуй напрям, передавай артефакт потоком, критикуй, доставляй — перестає бути закритим і стає файловою системою навичок, дизайн-систем і плагінів, яку кодувальні агенти, що вже є на вашому ноутбуці, можуть читати, записувати та реміксувати. Ваш CLI стає рушієм дизайну, ваш ноутбук стає студією, а DESIGN.md вашої команди стає контрактом бренду.

Це також альтернатива 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`
Cursor	✅ Підтримується	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Підтримується	`od mcp install copilot`
GitHub Copilot CLI	✅ Підтримується	`od mcp install copilot`
Gemini CLI	✅ Підтримується	`od mcp install gemini`
OpenCode	✅ Підтримується	`od mcp install opencode`
OpenClaw	✅ Підтримується	`od mcp install openclaw`
Antigravity	✅ Підтримується	`od mcp install antigravity`
Cline	✅ Підтримується	`od mcp install cline`
Trae	✅ Підтримується	`od mcp install trae`
Kimi CLI	✅ Підтримується	`od mcp install kimi`
Pi Agent	✅ Підтримується	`od mcp install pi`
Mistral Vibe CLI	✅ Підтримується	`od mcp install vibe`
Hermes Agent	✅ Підтримується	`od mcp install hermes`

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

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

Контракт адаптера та парсери потоку містяться в apps/daemon/src/agents.ts. Додавання нового CLI — це один запис, див. docs/agent-adapters.md.

Демо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 · Відео та HyperFrames — моушн-графіка 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 — схему з 9 розділів, що охоплює палітру, типографіку, відступи, рух, голос, антипатерни. 150 систем постачаються разом із репозиторієм (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Покладіть теку всередину — селектор її знайде.
🖥️ Локально-орієнтована, BYOK на кожному шарі. Нативні десктопні застосунки залишаються локальними, без звернень у хмару. Перш ніж описувати шляхи даних демона, необхідно прочитати кореневий AGENTS.md, розділ Daemon data directory contract.
🌍 Композиційна на трьох площинах. Плагіни несуть робочі процеси, що запускаються · навички несуть дизайнерський смак агента · дизайн-системи несуть бренд. Усі три — це звичайні файли, які будь-хто може створювати, версіонувати та публікувати.
🔁 Оновлюйте наявну кодову базу. Передайте агенту репозиторій git + DESIGN.md, і він рефакторить ваші реальні компоненти відповідно до специфікації бренду. Спеціальні плагіни мігрують робочі процеси Figma / Pencil у код React / Next.js / Vue.
🔒 Приватність за переконанням. Усе працює там, де живуть ваші дані — на вашому ноутбуці, на сервері вашої команди, у вашому проєкті Vercel. Коли потрібна мережа, проксі BYOK захищений від SSRF.

Порівняння

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

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

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

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

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

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

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

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

# One-line install into the agent you're using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

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

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

Агент зчитує skills/, обирає правильний SKILL.md, прив'язує названий вами DESIGN.md і видає <artifact>, доступний для перегляду за адресою http://localhost:7456.

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

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

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

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

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

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

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

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

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

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

# One-line install (16+ CLIs supported):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

Чому 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/, що дотримується конвенції SKILL.md Claude Code, розширеної frontmatter od: (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Покладіть теку всередину, перезапустіть демон — і вона з'явиться в селекторі.

Два режими є основою каталогу: prototype (односторінкові артефакти web/mobile/desktop) та deck (презентації з горизонтальним гортанням). Також режими image, video, audio, template, design-system та utility. Поле scenario групує їх за аудиторією: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Навичка	Режим	Сценарій	Що вона створює
`web-prototype`	prototype	design	Типовий лендинг / герой
`saas-landing`	prototype	marketing	Герой / функції / ціни / CTA
`dashboard`	prototype	operation	Адмін / аналітика (з бічною панеллю)
`mobile-app`	prototype	design	Застосунок у рамці iPhone 15 Pro / Pixel
`mobile-onboarding`	prototype	design	Заставка · ціннісна пропозиція · потік входу
`social-carousel`	prototype	marketing	Карусель із 3 карток 1080×1080
`email-marketing`	prototype	marketing	Брендований 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.

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

150 систем DESIGN.md брендового рівня постачаються разом із репозиторієм — кожна є одним файлом Markdown зі схемою з 9 розділів (колір, типографіка, відступи, макет, компоненти, рух, голос, бренд, антипатерни), з VoltAgent/awesome-design-md. Перемкніть систему → наступний рендер використовує нові токени. Без theme JSON.

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

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

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

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

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.

Плагіни

261 офіційний плагін міститься в plugins/_official/. Кожен плагін — це портативна тека agent-skill — SKILL.md (зчитувана будь-яким агентом, що підтримує Agent Skills), плюс опціональний маніфест open-design.json, який надає Open Design метадані маркетплейсу, входи, попередні перегляди, конвеєри та декларації можливостей. Перейдіть одразу до категорії:

Категорія	Кількість	Вміст
`scenarios/`	11	Повні дизайн-сценарії — `od-default`, `od-design-refine`, `od-figma-migration`, `od-code-migration`, `od-react-export`, `od-nextjs-export`, `od-vue-export`, `od-media-generation`, `od-new-generation`, `od-tune-collab`, `od-plugin-authoring`
`image-templates/`	45	Одношотові промпти зображень — редакторські, кінематографічні, продуктові, портретні
`video-templates/`	50	Моушн-шаблони HyperFrames / Seedance / Veo
`design-systems/`	142	Брендові `DESIGN.md`, обгорнуті як плагіни
`atoms/`	13	Багаторазові фрагменти UI (кнопки, герої, KPI-картки)
`examples/`	140	Реміксувані еталонні результати

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

Що можуть робити плагіни

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

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

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

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

Плагіну щонайменше потрібен лише SKILL.md; щоб помістити його в маркетплейс Open Design, додайте open-design.json:

my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Основні поля open-design.json: specVersion (наразі 1.0.0), name (стабільний ID), version (semver), compat.agentSkills[].path (вказує на ./SKILL.md), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (поверхня виведення, наприклад prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (декларуйте мінімум — обмежене встановлення за замовчуванням надає лише prompt:inject), od.inputs[] (параметри часу застосування).

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

od plugin scaffold --id my-plugin --title "My Plugin"   # 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/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

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

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

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

Демон + 21 адаптер CLI кодувальних агентів + реєстр навичок + каталог дизайн-систем
Вебзастосунок + чат + форма запитань + селектор 5 напрямів + прогрес todo + попередній перегляд у пісочниці
100+ навичок · 150 дизайн-систем · 5 візуальних напрямів · 5 рамок пристроїв
Проєкти · розмови · повідомлення · вкладки · шаблони на основі SQLite
Мультипровайдерний проксі BYOK (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + захист від SSRF
Імпорт ZIP Claude Design (/api/import/claude-design)
Протокол sidecar + десктоп Electron + автоматизація IPC
API лінтингу артефактів + 5-вимірний шлюз самокритики перед видачею
0.8.0 — інфраструктура маркетплейсу плагінів (261 офіційний плагін, специфікація маніфесту, скрипти встановлення для кожного агента)
0.9.0 — Open Design AMR (офіційний 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/qhbcCH8Am4
🐦 X / Twitter — нотатки до релізів, віхи, закулісся → @nexudotio
🗣️ GitHub Discussions — глибокі Q&A, RFC, «покажи свою роботу» → Discussions
🐛 GitHub Issues — звіти про баги, запити на функції → Issues

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

Внесок

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

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

Хочете випустити…	Як	Де
Нову навичку	Покладіть теку з `SKILL.md` + `assets/` + `references/`	`skills/` · специфікація в `docs/skills-protocol.md`
Нову дизайн-систему	Покладіть `DESIGN.md` за схемою з 9 розділів	`design-systems/<brand>/`
Новий плагін	Покладіть `open-design.json` + маніфест під текою категорії	`plugins/community/` · специфікація в `plugins/spec/SPEC.md` · посібник із розробки агентом у `plugins/spec/AGENT-DEVELOPMENT.md`
Підтримку нового CLI кодувального агента	Один запис адаптера + парсер потоку	`apps/daemon/src/agents.ts`
Виправити баг або відполірувати UI	Перегляньте мітку `good-first-issue`	Issues →
Перекласти документацію	Оновіть файли `README.<lang>.md`	`TRANSLATIONS.md`

🤖 Внесок як агент

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

# 1. 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`	Джерело схеми `DESIGN.md` з 9 розділів та 70 продуктових систем.
`bergside/awesome-design-skills`	Джерело 57 дизайн-навичок, доданих під `design-systems/`.
`heygen-com/hyperframes`	Платформа моушн-графіки HTML→MP4, інтегрована як повноправний `hyperframes-html` в Open Design.
Claude Code skills	Конвенція `SKILL.md`, яку ми приймаємо дослівно.

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

Ліцензія

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

70 KiB Raw Blame History Unescape Escape