open-design/README.uk.md

Open Design

Альтернатива з відкритим кодом до Claude Design. Локально-перший, розгортується в web, BYOK на кожному рівні — 13 CLI агентів для кодування автоматично виявляються у вашому PATH (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Mistral Vibe) стають механізмом дизайну, керуються 31 компонуваною навичкою та 72 системами дизайну комерційного класу. Немає CLI? OpenAI-сумісний BYOK проксі — це той же цикл без spawn.

English · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська

---

Чому це існує

Claude Design від Anthropic (випущено 17.04.2026, Opus 4.7) показав, що відбувається, коли LLM припиняє писати прозу й починає поставляти артефакти дизайну. Це стало вірусним — і залишилось закритим кодом, тільки платним, тільки хмарним, прив'язаним до моделі Anthropic та навичок Anthropic. Немає касси, немає self-hosting, немає Vercel deploy, немає зміни на свого власного агента.

Open Design (OD) — це альтернатива з відкритим кодом. Той же цикл, той же artifact-first менталітет, але без lock-in. Ми не поставляємо агента — найсильніші агенти для кодування вже живуть на вашому ноутбуці. Ми підключаємо їх до workflow дизайну, керованого навичками, що працює локально за допомогою pnpm tools-dev, може розгорнути веб-шар на Vercel, і залишається BYOK на кожному рівні.

Введіть make me a magazine-style pitch deck for our seed round. Інтерактивна форма запитань з'являється до того, як модель навіть імпровізує один піксель. Агент вибирає один із п'яти курованих візуальних напрямків. Живий план TodoWrite потокує в UI. Демон будує реальну папку проекту на диску з seed шаблоном, бібліотекою макетів і контрольним списком self-check. Агент читає їх — перевірка перед польотом обов'язкова — запускає п'яти-розмірну критику проти свого власного виходу й видає один <artifact>, який рендериться в пісочниці iframe через кілька секунд.

Це не "AI спробує щось спроектувати". Це AI, яка була навчена prompt stack, щоб поводитись як старший дизайнер з робочою файловою системою, детермінованою бібліотекою палітри та культурою контрольного списку — саме той стандарт, який встановив Claude Design, але відкритий і ваш.

OD стоїть на плечах чотирьох проектів з відкритим кодом:

• alchaincyf/huashu-design — компас філософії дизайну. Workflow молодого дизайнера, протокол бренд-активів з 5 кроками, контрольний список anti-AI-slop, п'яти-розмірна self-critique та ідея "5 шкіл × 20 філософій дизайну" за нашим direction picker — все конденсоване в apps/daemon/src/prompts/discovery.ts.
• op7418/guizang-ppt-skill — режим presentations. Включена без змін під skills/guizang-ppt/ із збереженою оригінальною ліцензією; макети в стилі журналу, WebGL герой, контрольні списки P0/P1/P2.
• OpenCoworkAI/open-codesign — UX північна зірка й наш найближчий партнер. Перша альтернатива Claude Design з відкритим кодом. Ми запозичили цикл streaming-artifact, шаблон preview sandboxed-iframe (vendored React 18 + Babel), live agent panel (todos + tool calls + interruptible generation) та п'ять форматів експорту (HTML / PDF / PPTX / ZIP / Markdown). Ми навмисно розходимось за формою — вони настільна Electron app з bundled pi-ai; ми веб-app + локальний daemon, яка делегує вашому наявному CLI.
• multica-ai/multica — архітектура daemon та runtime. Виявлення агента PATH-scan, локальний daemon як єдиний привілейований процес, світогляд agent-as-teammate.

Одним поглядом

	Що ви отримуєте
CLI агентів для кодування (13)	Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Mistral Vibe CLI (ACP) — автоматично виявляються на PATH, одночисельний swap
BYOK fallback	Специфічний для протоколу API проксі за адресою /api/proxy/{anthropic,openai,azure,google}/stream — вставте baseUrl + apiKey + model, виберіть Anthropic / OpenAI / Azure OpenAI / Google Gemini, і демон нормалізує SSE назад у той самий потік чату. Внутрішні IP/SSRF заблоковані на краю демона.
Системи дизайну вбудовані	129 — 2 hand-authored starter + 70 систем продукту (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, …) з awesome-design-md, плюс 57 навичок дизайну з awesome-design-skills додано безпосередньо під design-systems/
Навички вбудовані	31 — 27 у режимі prototype (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs, …) + 4 у режимі deck (guizang-ppt · simple-deck · replit-deck · weekly-update). Згруповані у picker за scenario: design / marketing / operation / engineering / product / finance / hr / sale / personal.
Медіа генерація	Поверхні Image · video · audio поставляються разом з циклом дизайну. gpt-image-2 (Azure / OpenAI) для плакатів, аватарів, інфографіки, ілюстрованих карт · Seedance 2.0 (ByteDance) для кінематографічних 15-секундних text-to-video та image-to-video · HyperFrames (heygen-com/hyperframes) для HTML→MP4 motion graphics (product reveals, kinetic typography, data charts, social overlays, logo outros). 93 готових до репліки підказки — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames — під prompt-templates/, з preview thumbnails та атрибуцією джерела. Той же chat surface як код; виходить реальний .mp4 / .png chip у робочий простір проекту.
Візуальні напрями	5 курованих шкіл (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental) — кожна поставляється детермінованою палітрою OKLch + font stack (apps/daemon/src/prompts/directions.ts)
Кадри пристроїв	iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — пікселем точні, спільні під assets/frames/
Agent runtime	Локальний daemon запускає CLI у вашій папці проекту — агент отримує справжні Read, Write, Bash, WebFetch проти справжнього середовища на диску, з Windows ENAMETOOLONG fallbacks (stdin / prompt-file) у кожному адаптері
Імпорти	Перенесіть Claude Design export ZIP на вікно приватних користувачів — POST /api/import/claude-design розбирає його на справжній проект, щоб ваш агент міг продовжувати там, де Anthropic закінчився
Постійність	SQLite за адресою .od/app.sqlite: projects · conversations · messages · tabs · saved templates. Пересніть завтра, todo card і відкриті файли саме там, де ви їх залишили.
Життєвий цикл	Одна точка входу: pnpm tools-dev (start / stop / run / status / logs / inspect / check) — завантажує daemon + web (+ desktop) під типізованими sidecar stamps
Desktop	Опціональна Electron shell із sandboxed renderer + sidecar IPC (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN) — керує tools-dev inspect desktop screenshot для E2E
Розгортувати до	Локально (pnpm tools-dev) · Vercel web layer · packaged Electron (placeholder, in-flight)
Ліцензія	Apache-2.0

Демонстрація

Вид входу — виберіть навичку, виберіть систему дизайну, введіть brief. Та сама поверхня для прототипів, presentations, мобільних додатків, dashboards та редакційних сторінок.	Форма discovery Turn-1 — до того, як модель напише піксель, OD блокує brief: surface, audience, tone, brand context, scale. 30 секунд радіо краще, ніж 30 хвилин редиректів.
Вибір напрямку — коли користувач не має бренду, агент видає другу форму з 5 курованими напрямами (Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm). Один click радіо → детермінована палітра + font stack, без model freestyle.	Живий прогрес todo — план агента потокує як live card. `in_progress` → `completed` оновлення приходять в реальному часі. Користувач може дешево перенаправити в польоті.
Попередній перегляд в пісочниці — кожен `` рендериться в чистому srcdoc iframe. Редаговується на місці через файловий workspace; завантажується як HTML, PDF, ZIP.	72-система бібліотека — кожна система продукту показує своїм 4-колірна підпис. Натисніть для повного `DESIGN.md`, сітки зразків та live showcase.
Режим Deck (guizang-ppt) — bundled guizang-ppt-skill падає без змін. Макети журналу, WebGL герой backgrounds, однофайловий HTML output, PDF export.	Мобільний прототип — пікселем точна iPhone 15 Pro chrome (Dynamic Island, status bar SVGs, home indicator). Мультиекранні прототипи використовують спільні `/frames/` активи, тому агент ніколи не перерисовує телефон.

Навички

31 навичка входить до комплекту. Кожна — це папка під skills/, яка слідує конвенції Claude Code SKILL.md з розширеним od: frontmatter, який демон розбирає дослівно — mode, platform, scenario, preview.type, design_system.requires, default_for, featured, fidelity, speaker_notes, animations, example_prompt (apps/daemon/src/skills.ts).

Два основні режими (modes) формують каталог: prototype (27 навичок — все, що рендериться як артефакт однієї сторінки, від журнального landing до екрана телефону чи специфікації PM) та deck (4 навички — horizontal-swipe presentations з deck-framework chrome). Поле scenario — це те, як вибір групує їх: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Показові приклади

Візуально характерні навички, які ви, ймовірно, захочете спробувати першими. Кожна з них містить реальний example.html, який ви можете відкрити прямо з репозиторію, щоб побачити, що саме створить агент — без реєстрації та налаштування.

dating-web · prototype Дашборд для знайомств — ліва навігація, стрічка новин, KPI, графік взаємних симпатій за 30 днів, редакційна типографіка.	digital-eguide · template Цифровий посібник на два розвороти — обкладинка (назва, автор, зміст) + розворот уроку з цитатою та списком кроків.
email-marketing · prototype HTML-лист для запуску продукту — шапка, головне зображення, заголовок, CTA, сітка характеристик. Одна колонка, безпечно для таблиць.	gamified-app · prototype Три кадри ігрового мобільного додатка на темній сцені — обкладинка, сьогоднішні квести з XP та шкалою рівня, деталі квесту.
mobile-onboarding · prototype Три кадри онбордингу мобільного додатка — заставка, цінність продукту, вхід. Статус-бар, точки прокрутки, основний CTA.	motion-frames · prototype Однокадровий герой моушн-дизайну з циклічною CSS-анімацією — кільце тексту, що обертається, анімований глобус, таймер. Готово для HyperFrames.
social-carousel · prototype Карусель для соцмереж з трьох карток 1080×1080 — кінематографічні панелі з заголовками, що з'єднуються в серію, логотип бренду.	sprite-animation · prototype Піксельний / 8-бітний анімований слайд-пояснення — кремова сцена на весь екран, анімований талісман, кінетичний японський шрифт, CSS-анімації.

Поверхні дизайну та маркетингу (режим prototype)

Навичка	Платформа	Сценарій	Що створює
web-prototype	desktop	design	Односторінковий HTML — лендінги, маркетинг, головні сторінки (типово для прототипів)
saas-landing	desktop	marketing	Макет маркетингу: герой / переваги / ціни / CTA
dashboard	desktop	operation	Адмінка / аналітика з бічною панеллю + щільний макет даних
pricing-page	desktop	sale	Окремі сторінки цін та таблиці порівняння
docs-page	desktop	engineering	3-колонковий макет документації
blog-post	desktop	marketing	Редакційний лонгрід
mobile-app	mobile	design	Екран(и) додатка в рамці iPhone 15 Pro / Pixel
mobile-onboarding	mobile	design	Багатоекранний онбординг (заставка · цінність · вхід)
gamified-app	mobile	personal	Трикадровий ігровий прототип мобільного додатка
email-marketing	desktop	marketing	Брендований HTML-лист для запуску продукту
social-carousel	desktop	marketing	Карусель для соцмереж з 3 карток 1080×1080
magazine-poster	desktop	marketing	Односторінковий плакат у журнальному стилі
motion-frames	desktop	marketing	Герой моушн-дизайну з циклічними CSS-анімаціями
sprite-animation	desktop	marketing	Піксельний / 8-бітний анімований слайд-пояснення
dating-web	desktop	personal	Макет дашборду для сервісу знайомств
digital-eguide	desktop	marketing	Цифровий посібник на два розвороти (обкладинка + урок)
wireframe-sketch	desktop	design	Намальований від руки ескіз — для ранньої візуалізації ідей
critique	desktop	design	5-вимірна оцінка самокритики (Філософія · Ієрархія · Деталі · Функція · Інновація)
tweaks	desktop	design	Панель налаштувань від AI — модель виводить параметри, які варто підкоригувати

Поверхні презентацій (режим deck)

Навичка	Типово для	Що створює
guizang-ppt	типово для deck	Веб-презентація у журнальному стилі — взято з op7418/guizang-ppt-skill
simple-deck	—	Мінімалістична презентація з горизонтальним гортанням
replit-deck	—	Презентація для огляду продукту (у стилі Replit)
weekly-update	—	Щотижневий звіт команди (прогрес · блокери · наступні кроки)

Поверхні для офісу та операцій (режим prototype, сценарії документів)

Навичка	Сценарій	Що створює
pm-spec	product	Специфікація PM зі змістом + журналом рішень
team-okrs	product	Таблиця оцінки OKR
meeting-notes	operation	Журнал рішень зустрічі
kanban-board	operation	Знімок канбан-дошки
eng-runbook	engineering	Інструкція з реагування на інциденти
finance-report	finance	Фінансовий звіт для керівництва
invoice	finance	Односторінковий рахунок-фактура
hr-onboarding	hr	План онбордингу на посаду

Додавання навички займає одну папку. Прочитайте docs/skills-protocol.md про розширений frontmatter, скопіюйте існуючу навичку, перезапустіть демон, і вона з'явиться у виборі. Ендпоінт каталогу — GET /api/skills; збірка seed для кожної навички (шаблон + side-file посилання) живе на GET /api/skills/:id/example.

Шість ключових ідей

1 · Ми не постачаємо агента. Ваш — достатньо хороший.

При запуску демон сканує ваш PATH на наявність claude, codex, devin, cursor-agent, gemini, opencode, qwen, copilot, hermes, kimi, pi, kiro-cli та vibe-acp на старті. Ті, що знайдені, стають кандидатами на роль "двигуна" дизайну — вони керуються через stdio з одним адаптером на CLI, який можна змінити у виборі моделі. Натхненно multica та cc-switch. Немає встановленого CLI? Режим API використовує той самий конвеєр — виберіть Anthropic, OpenAI-сумісний, Azure OpenAI або Google Gemini, і демон передаватиме нормалізовані фрагменти SSE, з блокуванням внутрішніх мереж на краю.

2 · Навички — це файли, а не плагіни.

Згідно з конвенцією Claude Code SKILL.md, кожна навичка — це SKILL.md + assets/ + references/. Додайте папку в skills/, перезапустіть демон, і вона з'явиться у виборі. Вбудована magazine-web-ppt — це op7418/guizang-ppt-skill, додана без змін зі збереженням ліцензії та авторства.

3 · Системи дизайну — це портативний Markdown, а не JSON тем.

Схема DESIGN.md з 9 розділів від VoltAgent/awesome-design-md — колір, типографіка, відступи, макет, компоненти, рух, голос, бренд, антипатерни. Кожен артефакт базується на активній системі. Змініть систему → наступний рендер використовуватиме нові токени. Список включає Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xiaohongshu… — плюс 57 навичок дизайну з awesome-design-skills.

4 · Інтерактивна форма запитань запобігає 80% помилок.

Стек промптів OD жорстко кодує RULE 1: кожен новий бриф дизайну починається з <question-form id="discovery"> замість коду. Поверхня · аудиторія · тон · контекст бренду · масштаб · обмеження. Довгий бриф все одно залишає відкритими рішення щодо дизайну — візуальний тон, колірна позиція — саме те, що форма фіксує за 30 секунд. Вартість неправильного напрямку — один раунд чату, а не готовий проект.

Це режим Junior-Designer, взятий з huashu-design: зберіть питання заздалегідь, покажіть щось візуальне на ранній стадії (навіть вайрфрейм), дозвольте користувачеві дешево змінити напрямок. Поєднано з протоколом бренд-активів, це головна причина, чому результат виглядає як робота дизайнера, а не випадкова генерація AI.

5 · Демон дає агенту відчуття, що він на вашому ноутбуці, бо так і є.

Демон запускає CLI з робочим каталогом (cwd), встановленим у папку артефактів проекту під .od/projects/<id>/. Агент отримує справжні інструменти Read, Write, Bash, WebFetch проти реальної файлової системи. Він може читати assets/template.html навички, шукати HEX-значення у вашому CSS, писати brand-spec.md, додавати зображення і створювати файли .pptx / .zip / .pdf, які з'являються у робочому просторі. Сесії та повідомлення зберігаються у локальній БД SQLite.

6 · Стек промптів — це і є продукт.

Те, що ви компонуєте під час відправки, — це не просто "система + користувач". Це:

DISCOVERY directives  (форма 1-го ходу, бранч бренду 2-го ходу, TodoWrite, 5-вимірна критика)
  + identity charter   (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
  + active DESIGN.md   (72 системи доступні)
  + active SKILL.md    (31 навичка доступна)
  + project metadata   (тип, точність, нотатки доповідача, анімації, inspiration ids)
  + skill side files   (автоматично введені: read assets/template.html + references/*.md)
  + (тип deck, без skill seed) DECK_FRAMEWORK_DIRECTIVE   (навігація / лічильник / прокрутка / друк)

Кожен рівень можна комбінувати та редагувати. Прочитайте apps/daemon/src/prompts/system.ts та apps/daemon/src/prompts/discovery.ts, щоб побачити актуальний контракт.

Архітектура

┌────────────────────── браузер (Next.js 16) ──────────────────────┐
│  чат · робочий простір · прев'ю в iframe · налаштування · імпорт │
└──────────────┬───────────────────────────────────┬───────────────┘
               │ /api/* (переписано в dev)          │
               ▼                                    ▼
   ┌──────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  Локальний демон (Express + SQLite) │   ─→ будь-який OpenAI-сумісний
   │                                  │       ендпоінт (BYOK)
   │  /api/agents          /api/skills│       з блокуванням SSRF
   │  /api/design-systems  /api/projects/…
   │  /api/chat (SSE)      /api/proxy/{provider}/stream (SSE)
   │  /api/templates       /api/import/claude-design
   │  /api/artifacts/save  /api/artifacts/lint
   │  /api/upload          /api/projects/:id/files…
   │  /artifacts (static)  /frames (static)
   │
   │  опціонально: sidecar IPC у /tmp/open-design/ipc/<ns>/<app>.sock
   │  (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
   └─────────┬────────────────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · devin (ACP) · gemini · opencode · cursor-agent │
   │  qwen · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro (ACP) · vibe (ACP)   │
   │  читає SKILL.md + DESIGN.md, пише артефакти на диск              │
   └──────────────────────────────────────────────────────────────────┘

Рівень	Стек
Frontend	Next.js 16 App Router + React 18 + TypeScript, розгортається на Vercel
Daemon	Node 24 · Express · SSE streaming · better-sqlite3; таблиці: projects, conversations, messages, tabs, templates
Транспорт агента	child_process.spawn; типізовані парсери для claude-stream-json (Claude Code), copilot-stream-json (Copilot), json-event-stream (Codex / Gemini / OpenCode / Cursor Agent), acp-json-rpc (Devin / Hermes / Kimi / Kiro / Mistral Vibe), pi-rpc (Pi), plain (Qwen Code)
BYOK проксі	POST /api/proxy/{anthropic,openai,azure,google}/stream → специфічні API провайдерів, нормалізований SSE delta/end/error; блокує loopback / RFC1918 на краю демона
Сховище	Звичайні файли в .od/projects/<id>/ + SQLite у .od/app.sqlite (ігнорується git, автоматично створюється). Перевизначте корінь через OD_DATA_DIR для ізоляції тестів
Попередній перегляд	Ізольований iframe через srcdoc + парсер <artifact> для кожної навички (apps/web/src/artifacts/parser.ts)
Експорт	HTML (вбудовані активи) · PDF (друк браузера, deck-aware) · PPTX (через агента, через навичку) · ZIP (archiver) · Markdown
Життєвий цикл	`pnpm tools-dev start
Desktop (опц)	Electron shell — виявляє URL через sidecar IPC, без вгадування портів; той самий канал STATUS/EVAL/SCREENSHOT/CONSOLE/CLICK/SHUTDOWN керує tools-dev inspect desktop … для E2E

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

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # має вивести 10.33.2
pnpm install
pnpm tools-dev run web
# відкрийте URL у браузері, який виведе tools-dev

Вимоги до середовища: Node ~24 та pnpm 10.33.x. nvm/fnm є лише додатковими помічниками; якщо ви використовуєте один з них, запустіть nvm install 24 && nvm use 24 або fnm install 24 && fnm use 24 перед pnpm install.

Для запуску desktop/background, перезапусків з фіксованими портами та перевірок диспетчера генерації медіа (OD_BIN, OD_DAEMON_URL, apps/daemon/dist/cli.js), див. QUICKSTART.md.

Перше завантаження:

1. Виявляє, які CLI агенти ви маєте в PATH, і автоматично вибирає один.
2. Завантажує 31 навичку + 72 системи дизайну.
3. Виводить вітальне діалогове вікно, щоб ви могли вставити ключ Anthropic (потрібен лише для резервного шляху BYOK).
4. Автоматично створює ./.od/ — локальну папку для бази даних SQLite, артефактів для кожного проекту та збережених рендерів. Крок od init не потрібен; демон створює все, що йому потрібно при запуску.

Введіть промпт, натисніть Send, дочекайтеся появи форми запитань, заповніть її, дочекайтеся потоку картки завдання, дочекайтеся рендерингу артефакту. Натисніть Save to disk або завантажте як ZIP-архів проекту.

Стан першого запуску (./.od/)

Демон володіє однією прихованою папкою в корені репозиторію. Все в ній ігнорується git і є локальним для машини — ніколи не комітьте її.

.od/
├── app.sqlite                 ← проекти · розмови · повідомлення · відкриті вкладки
├── artifacts/                 ← одноразові рендери "Зберегти на диск" (з відміткою часу)
└── projects/<id>/             ← робочий каталог для кожного проекту, також cwd агента

Хочете…	Зробіть це
Перевірити, що там є	ls -la .od && sqlite3 .od/app.sqlite '.tables'
Скинути до чистого стану	pnpm tools-dev stop, rm -rf .od, запустіть pnpm tools-dev run web знову
Перемістити в інше місце	поки не підтримується — шлях жорстко закодований відносно репозиторію

Повна карта файлів, скрипти та усунення несправностей → QUICKSTART.md.

Структура репозиторію

open-design/
├── README.md                      ← цей файл
├── README.de.md                   ← Deutsch
├── README.ru.md                   ← Русский
├── README.zh-CN.md                ← 简体中文
├── QUICKSTART.md                  ← посібник із запуску / збірки / розгортання
├── package.json                   ← pnpm workspace, бінарний файл: od
│
├── apps/
│   ├── daemon/                    ← Node + Express, основний сервер
│   │   ├── src/                   ← джерельний код демона на TypeScript
│   │   │   ├── cli.ts             ← код `od` bin, компілюється у dist/cli.js
│   │   │   ├── server.ts          ← маршрути /api/* (проекти, чат, файли, експорт)
│   │   │   ├── agents.ts          ← сканер PATH + збирачі аргументів CLI
│   │   │   ├── claude-stream.ts   ← потоковий JSON-парсер stdout Claude Code
│   │   │   ├── skills.ts          ← завантажувач frontmatter SKILL.md
│   │   │   └── db.ts              ← схема SQLite (проекти/повідомлення/шаблони/вкладки)
│   │   ├── sidecar/               ← обгортка sidecar демона tools-dev
│   │   └── tests/                 ← тести пакету демона
│   │
│   └── web/                       ← Next.js 16 App Router + React клієнт
│       ├── app/                   ← точки входу App Router
│       ├── next.config.ts         ← dev rewrites + prod static export у out/
│       └── src/                   ← React + TypeScript клієнтські модулі
│           ├── App.tsx            ← маршрутизація, bootstrap, налаштування
│           ├── components/        ← чат, композер, пікер, прев'ю, скетч, …
│           ├── prompts/
│           │   ├── system.ts      ← composeSystemPrompt(base, skill, DS, metadata)
│           │   ├── discovery.ts   ← форма 1-го ходу + бранч 2-го ходу + 5-вимірна критика
│           │   └── directions.ts  ← 5 візуальних напрямків × OKLch палітра + font stack
│           ├── artifacts/         ← потоковий парсер <artifact> + маніфести
│           ├── runtime/           ← iframe srcdoc, markdown, помічники експорту
│           ├── providers/         ← транспорт SSE демона + BYOK API
│           └── state/             ← конфіг + проекти (localStorage + daemon-backed)
│
├── e2e/                           ← Playwright UI + зовнішній інтеграційний/Vitest харнес
│
├── packages/
│   ├── contracts/                 ← спільні контракти веб/daemon додатку
│   ├── sidecar-proto/             ← контракт протоколу sidecar Open Design
│   ├── sidecar/                   ← загальні примітиви sidecar рантайму
│   └── platform/                  ← загальні примітиви процесів/платформи
│
├── skills/                        ← 31 комплект навичок SKILL.md (27 prototype + 4 deck)
│   ├── web-prototype/             ← типовий для режиму prototype
│   ├── saas-landing/  dashboard/  pricing-page/  docs-page/  blog-post/
│   ├── mobile-app/  mobile-onboarding/  gamified-app/
│   ├── email-marketing/  social-carousel/  magazine-poster/
│   ├── motion-frames/  sprite-animation/  digital-eguide/  dating-web/
│   ├── critique/  tweaks/  wireframe-sketch/
│   ├── pm-spec/  team-okrs/  meeting-notes/  kanban-board/
│   ├── eng-runbook/  finance-report/  invoice/  hr-onboarding/
│   ├── simple-deck/  replit-deck/  weekly-update/   ← режим deck
│   └── guizang-ppt/               ← bundled magazine-web-ppt (типово для deck)
│       ├── SKILL.md
│       ├── assets/template.html   ← seed
│       └── references/{themes,layouts,components,checklist}.md
│
├── design-systems/                ← 72 системи DESIGN.md
│   ├── default/                   ← Neutral Modern (стартер)
│   ├── warm-editorial/            ← Warm Editorial (стартер)
│   ├── linear-app/  vercel/  stripe/  airbnb/  notion/  cursor/  apple/  …
│   └── README.md                  ← огляд каталогу
│
├── assets/
│   └── frames/                    ← спільні кадри пристроїв (використовуються між навичками)
│       ├── iphone-15-pro.html
│       ├── android-pixel.html
│       ├── ipad-pro.html
│       ├── macbook.html
│       └── browser-chrome.html
│
├── templates/
│   ├── deck-framework.html        ← база deck (навігація / лічильник / друк)
│   └── kami-deck.html             ← kami-стильований deck стартер (пергамент / ink-blue serif)
│
├── scripts/
│   └── sync-design-systems.ts     ← реімпорт upstream awesome-design-md tarball
│
├── docs/
│   ├── spec.md                    ← специфікація продукту, сценарії, диференціація
│   ├── architecture.md            ← топології, потік даних, компоненти
│   ├── skills-protocol.md         ← розширений SKILL.md od: frontmatter
│   ├── agent-adapters.md          ← виявлення + диспетчеризація для кожного CLI
│   ├── modes.md                   ← prototype / deck / template / design-system
│   ├── references.md              ← довге походження
│   ├── roadmap.md                 ← поетапна поставка
│   ├── schemas/                   ← JSON-схеми
│   └── examples/                  ← канонічні приклади артефактів
│
└── .od/                           ← дані під час виконання, ігноруються git, створюються автоматично
    ├── app.sqlite                 ← проекти / розмови / повідомлення / вкладки
    ├── projects/<id>/             ← робоча папка проекту (cwd агента)
    └── artifacts/                 ← збережені одноразові рендери

Системи дизайну

72 системи з коробки, кожна як один DESIGN.md:

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

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

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

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

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

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

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

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

Інше — apple · ibm · nvidia · vodafone · sentry · resend · spacex

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

Бібліотека продуктових систем імпортується через scripts/sync-design-systems.ts з VoltAgent/awesome-design-md. Перезапустіть для оновлення. 57 навичок дизайну беруться з bergside/awesome-design-skills та додаються безпосередньо у design-systems/.

Візуальні напрями

Коли у користувача немає специфікації бренду, агент видає другу форму з п'ятьма курованими напрямками — адаптація OD fallback "5 шкіл × 20 філософій дизайну" з huashu-design. Кожен напрямок — це детермінована специфікація (палітра в OKLch, font stack, підказки макетної позиції, референси), яку агент прив'язує дослівно у :root seed-шаблону. Один клік радіо → повністю специфікована візуальна система. Без імпровізації, без AI-slop.

Напрямок	Настрій	Референси
Editorial — Monocle / FT	Друкований журнал, чорнило + крем + тепла іржа	Monocle · FT Weekend · NYT Magazine
Modern minimal — Linear / Vercel	Холодний, структурований, мінімальні акценти	Linear · Vercel · Stripe
Tech utility	Щільність інформації, моноширинний, термінал	Bloomberg · Bauhaus tools
Brutalist	Сирий, великий шрифт, без тіней, різкі акценти	Bloomberg Businessweek · Achtung
Soft warm	Щедрий, низький контраст, персикові нейтральні тони	Notion marketing · Apple Health

Повна специфікація → apps/daemon/src/prompts/directions.ts.

Медіа генерація

OD не зупиняється на коді. Та сама поверхня чату, яка створює <artifact> HTML, також керує генерацією зображень, відео та аудіо, з адаптерами моделей у медіа-конвеєрі демона (apps/daemon/src/media-models.ts, apps/web/src/media/models.ts). Кожен рендер зберігається як реальний файл у робочому просторі проекту — .png для зображень, .mp4 для відео — і з'являється як чіп для завантаження після завершення ходу.

Сьогодні підтримуються три сімейства моделей:

Поверхня	Модель	Провайдер	Для чого
Зображення	gpt-image-2	Azure / OpenAI	Плакати, аватари профілів, карти, інфографіка, соціальні картки, розрізи продуктів
Відео	seedance-2.0	ByteDance Volcengine	15с кінематографічного відео з аудіо за текстом або зображенням — короткометражки, великі плани, хореографія
Відео	hyperframes-html	HeyGen / OSS	HTML→MP4 моушн-графіка — презентації продуктів, кінетична типографіка, діаграми, логотипи, караоке-субтитри

Зростаюча галерея промптів у prompt-templates/ поставляє 93 готові до репліки промпти — 43 зображення (prompt-templates/image/*.json), 39 Seedance (prompt-templates/video/*.json без hyperframes-*), 11 HyperFrames (prompt-templates/video/hyperframes-*.json). Кожен містить мініатюру попереднього перегляду, тіло промпту дослівно, цільову модель, співвідношення сторін та блок source для ліцензії та атрибуції. Демон обслуговує їх на GET /api/prompt-templates, веб-додаток відображає їх як сітку карток у вкладках Шаблони зображень та Шаблони відео на виді входу; один клік опускає промпт у композер з попередньо вибраною моделлю.

gpt-image-2 — галерея зображень (вибірка з 43)

3D-інфографіка «Еволюція кам'яних сходів» 3-крокова інфографіка, естетика тесаного каменю

Ілюстрована міська гастрокарта Редакційний ілюстрований від руки туристичний плакат

Кінематографічна сцена в ліфті Однокадрова редакційна модна зйомка

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

Гламурний портрет жінки в чорному Редакційний студійний портрет

Повний набір → prompt-templates/image/. Джерела: більшість запозичена з YouMind-OpenLab/awesome-gpt-image-prompts (CC-BY-4.0) зі збереженням атрибуції автора для кожного шаблону.

Seedance 2.0 — відеогалерея (вибірка з 39)

Музичний подкаст та гітарна техніка 4K кінематографічна студійна зйомка

Емоційний крупний план обличчя Кінематографічне дослідження мікроемоцій

Кінематографічний люксовий суперкар Наративний продуктовий фільм

Сатира «Кіт у Забороненому місті» Стилізований сатиричний короткометражний фільм

Японська романтична короткометражка 15-секундний наратив Seedance 2.0

Натисніть будь-яку мініатюру, щоб відтворити реальний MP4. Повний набір → prompt-templates/video/ (записи *-seedance-* та з тегом Cinematic). Джерела: YouMind-OpenLab/awesome-seedance-2-prompts (CC-BY-4.0) зі збереженням оригінальних посилань на твіти та хендлів авторів.

HyperFrames — HTML→MP4 моушн-графіка (11 готових до репліки шаблонів)

heygen-com/hyperframes — це фреймворк відео з відкритим кодом від HeyGen, нативний для агентів: ви (або агент) пишете HTML + CSS + GSAP, HyperFrames рендерить це у детермінований MP4 через headless Chrome + FFmpeg. Open Design поставляє HyperFrames як відеомодель першого класу (hyperframes-html), підключену до диспетчеризації демона, плюс навичку skills/hyperframes/, яка навчає агента контракту таймлайну, правил переходу між сценами, аудіо-реактивних патернів, субтитрів/TTS та каталог-блоків (npx hyperframes add <slug>).

Одинадцять промптів hyperframes поставляються у prompt-templates/video/hyperframes-*.json, кожен — конкретний бриф, що створює певний архетип:

5с мінімальний продукт-ревіл · 16:9 · титульна картка з push-in та шейдерним переходом	30с SaaS продукт-промо · 16:9 · стиль Linear/ClickUp з 3D-ревілами UI	TikTok караоке talking-head · 9:16 · TTS + субтитри з синхронізацією по словах	30с бренд sizzle-reel · 16:9 · кінетична типографіка під біт, аудіо-реактивна
Анімована гонка стовпчикових діаграм · 16:9 · NYT-стиль інфографіка даних	Карта польоту (місце → призначення) · 16:9 · кінематографічний ревіл маршруту в стилі Apple	4с кінематографічний logo-outro · 16:9 · збірка по частинах + bloom	Лічильник грошей $0 → $10K · 9:16 · хайп в стилі Apple з зеленою спалаху + вибухом
3-телефонна вітрина додатка · 16:9 · парящі телефони з підписами функцій	Стек соціальних оверлеїв · 9:16 · X · Reddit · Spotify · Instagram послідовно	Пайплайн сайт→відео · 16:9 · захват сайту у 3 в'юпортах + переходи

Патерн той самий, що й скрізь: виберіть шаблон, відредагуйте бриф, надішліть. Агент читає вбудований skills/hyperframes/SKILL.md (який містить OD-специфічний workflow рендерингу — композиція вихідних файлів у .hyperframes-cache/, щоб не засмічувати файловий робочий простір, демон диспетчеризує npx hyperframes render, щоб уникнути macOS sandbox-exec / Puppeteer зависання, лише фінальний .mp4 з'являється як чіп проекту), створює композицію та поставляє MP4. Мініатюри каталог-блоків © HeyGen, подаються з їхнього CDN; сам OSS фреймворк — Apache-2.0.

Також підключені, але ще не представлені як шаблони: Kling 2.0 / 1.6 / 1.5, Veo 3 / Veo 2, Sora 2 / Sora 2-Pro (через Fal), MiniMax video-01 — всі живі у VIDEO_MODELS (apps/web/src/media/models.ts). Suno v5 / v4.5, Udio v2, Lyria 2 (музика) та gpt-4o-mini-tts, MiniMax TTS (мовлення) покривають аудіо-поверхню. Шаблони для них відкриті для внесків — додайте JSON у prompt-templates/video/ або prompt-templates/audio/, і він з'явиться у пікері.

Поза чатом — що ще поставляється

Цикл чат / артефакт отримує головну увагу, але низка менш помітних можливостей вже підключені й варто знати перед тим, як порівнювати OD з чимось іншим:

• Імпорт Claude Design ZIP. Перетягніть експорт з claude.ai на вітальне діалогове вікно. POST /api/import/claude-design розпакує його у реальну .od/projects/<id>/, відкриє вхідний файл як вкладку та підготує промпт «продовжити там, де Anthropic зупинився» для вашого локального агента. Без перепромпту, без «попросіть модель відтворити те, що ми щойно мали». (apps/daemon/src/server.ts — /api/import/claude-design)
• Багатопровайдерний BYOK проксі. POST /api/proxy/{anthropic,openai,azure,google}/stream приймає { baseUrl, apiKey, model, messages }, будує специфічний для провайдера запит, нормалізує SSE-фрагменти у delta/end/error та відхиляє loopback / link-local / RFC1918 адресати для захисту від SSRF. OpenAI-сумісний покриває OpenAI, Azure AI Foundry /openai/v1, DeepSeek, Groq, MiMo, OpenRouter та self-hosted vLLM; Azure OpenAI додає deployment URL + api-version; Google використовує Gemini :streamGenerateContent.
• Збережені користувачем шаблони. Коли рендер вам подобається, POST /api/templates створює знімок HTML + метаданих у таблиці templates SQLite. Наступний проект вибере його з ряду «ваші шаблони» у пікері — та ж поверхня, що й 31 вбудована, але ваша.
• Збереження вкладок. Кожен проект запам'ятовує свої відкриті файли та активну вкладку у таблиці tabs. Відкрийте проект завтра, і робочий простір виглядатиме саме так, як ви його залишили.
• API лінтингу артефактів. POST /api/artifacts/lint запускає структурні перевірки згенерованого артефакту (пошкоджене <artifact> обрамлення, відсутні необхідні side-файли, застарілі токени палітри) та повертає знахідки, які агент може прочитати у свій наступний хід. П'ятивимірна self-critique використовує це для обґрунтування оцінки реальними доказами, а не враженнями.
• Протокол sidecar + автоматизація desktop. Процеси демона, вебу та desktop несуть типізовані п'ятипольні штампи (app · mode · namespace · ipc · source) та надають JSON-RPC IPC канал за адресою /tmp/open-design/ipc/<namespace>/<app>.sock. tools-dev inspect desktop status | eval | screenshot керує цим каналом, тому headless E2E працює проти реальної Electron shell без спеціальних харнесів (packages/sidecar-proto/, apps/desktop/src/main/).
• Windows-дружнє породження. Кожен адаптер, який інакше перевищив би ліміт argv ~32 КБ CreateProcess для довгих складених промптів (Codex, Gemini, OpenCode, Cursor Agent, Qwen, Pi), подає промпт через stdin. Claude Code та Copilot зберігають -p; демон відкатується до тимчасового файлу промпту, коли й це переповнюється.
• Дані виконання для кожного простору імен. OD_DATA_DIR та --namespace дають вам повністю ізольовані .od/-дерева, тому Playwright, бета-канали та ваші реальні проекти ніколи не ділять файл SQLite.

Механізм Anti-AI-slop

Весь наведений нижче механізм — це плейбук huashu-design, портований у стек промптів OD та зроблений обов'язковим для кожної навички через pre-flight side-файлів. Прочитайте apps/daemon/src/prompts/discovery.ts для актуального формулювання:

• Спочатку форма запитань. Хід 1 — лише <question-form> — ніякого мислення, інструментів чи описів. Користувач обирає дефолти зі швидкістю радіо.
• Екстракція бренд-специфікації. Коли користувач додає скріншот або URL, агент виконує п'ятикроковий протокол (знайти · завантажити · grep hex · кодифікувати brand-spec.md · озвучити) перед написанням CSS. Ніколи не вгадує кольори бренду з пам'яті.
• П'ятивимірна критика. Перед видачею <artifact> агент мовчки оцінює свій вихід 1–5 за філософією / ієрархією / виконанням / специфічністю / стриманістю. Все нижче 3/5 — регресія — виправити та переоцінити. Два проходи — це нормально.
• Чек-лист P0/P1/P2. Кожна навичка поставляє references/checklist.md з жорсткими воротами P0. Агент повинен пройти P0 перед видачею.
• Чорний список slop. Агресивні фіолетові градієнти, універсальні іконки-емодзі, закруглені картки з акцентною лівою рамкою, намальовані від руки SVG-люди, Inter як display шрифт, вигадані метрики — явно заборонені в промпті.
• Чесні плейсхолдери кращі за фейкові статистики. Коли агент не має реального числа, він пише — або позначений сірий блок, а не «в 10 разів швидше».

Порівняння

Вісь	Claude Design (Anthropic)	Open CoDesign	Open Design
Ліцензія	Закрита	MIT	Apache-2.0
Форм-фактор	Веб (claude.ai)	Desktop (Electron)	Веб-додаток + локальний демон
Розгортання на Vercel	❌	❌	✅
Рантайм агента	Вбудований (Opus 4.7)	Вбудований (pi-ai)	Делеговано наявному CLI користувача
Навички	Пропрієтарні	12 кастомних TS-модулів + SKILL.md	31 файлових SKILL.md комплектів, що додаються перетягуванням
Система дизайну	Пропрієтарна	DESIGN.md (дорожня карта v0.2)	DESIGN.md × 129 систем поставлено
Гнучкість провайдерів	Лише Anthropic	7+ через pi-ai	12 CLI-адаптерів + OpenAI-сумісний BYOK проксі
Початкова форма запитань	❌	❌	✅ Жорстке правило, хід 1
Вибір напрямку	❌	❌	✅ 5 детермінованих напрямків
Живий прогрес todo + потік інструментів	❌	✅	✅ (UX-патерн з open-codesign)
Попередній перегляд у пісочниці iframe	❌	✅	✅ (патерн з open-codesign)
Імпорт Claude Design ZIP	н/д	❌	✅ POST /api/import/claude-design — продовжуйте редагувати там, де Anthropic зупинився
Хірургічні редагування в режимі коментарів	❌	✅	🟡 частково — коментарі елементів прев'ю + вкладення чату; надійність хірургічних патчів ще в процесі
Панель AI-налаштувань	❌	✅	🚧 дорожня карта — виділена UX-панель налаштувань з боку чату ще не реалізована
Файлова система як робочий простір	❌	частково (Electron sandbox)	✅ Реальний cwd, реальні інструменти, збережений SQLite (проекти · розмови · повідомлення · вкладки · шаблони)
П'ятивимірна self-critique	❌	❌	✅ Ворота перед видачею
Лінтинг артефактів	❌	❌	✅ POST /api/artifacts/lint — знахідки передаються назад агенту
Sidecar IPC + headless desktop	❌	❌	**✅ Штамповані процеси + `tools-dev inspect desktop status
Формати експорту	Обмежені	HTML / PDF / PPTX / ZIP / Markdown	HTML / PDF / PPTX (через агента) / ZIP / Markdown
Повторне використання PPT-навички	Н/Д	Вбудована	guizang-ppt-skill додається (типово для режиму deck)
Мінімальний білінг	Pro / Max / Team	BYOK	BYOK — вставте будь-який OpenAI-сумісний baseUrl

Підтримувані агенти для кодування

Автоматично виявляються з PATH при старті демона. Налаштування не потрібні. Диспетчеризація потоків живе у apps/daemon/src/agents.ts (AGENT_DEFS); парсери для кожного CLI — поруч. Моделі заповнюються або через зондування <bin> --list-models / <bin> models / ACP handshake, або з курованого резервного списку, коли CLI не надає список.

Агент	Бінар	Формат потоку	Форма argv (шлях складеного промпту)
Claude Code	claude	claude-stream-json (типізовані події)	claude -p <prompt> --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions
Codex CLI	codex	json-event-stream + парсер codex	codex exec --json --skip-git-repo-check --full-auto [-C cwd] [--model …] [-c model_reasoning_effort=…] - (промпт на stdin)
Devin for Terminal	devin	acp-json-rpc	devin --permission-mode dangerous --respect-workspace-trust false acp
Gemini CLI	gemini	json-event-stream + парсер gemini	gemini --output-format stream-json --skip-trust --yolo [--model …] - (промпт на stdin)
OpenCode	opencode	json-event-stream + парсер opencode	opencode run --format json --dangerously-skip-permissions [--model …] - (промпт на stdin)
Cursor Agent	cursor-agent	json-event-stream + парсер cursor-agent	cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] - (промпт на stdin)
Qwen Code	qwen	plain (сирий stdout)	qwen --yolo [--model …] - (промпт на stdin)
GitHub Copilot CLI	copilot	copilot-stream-json (типізовані події)	copilot -p <prompt> --allow-all-tools --output-format json [--model …] [--add-dir …]
Hermes	hermes	acp-json-rpc (Agent Client Protocol)	hermes acp --accept-hooks
Kimi CLI	kimi	acp-json-rpc	kimi acp
Kiro CLI	kiro-cli	acp-json-rpc	kiro-cli acp
Mistral Vibe CLI	vibe-acp	acp-json-rpc	vibe-acp
Pi	pi	pi-rpc (stdio JSON-RPC)	pi --mode rpc --no-session [--model …] [--thinking …] (промпт надсилається як RPC-команда prompt)
Багатопровайдерний BYOK	н/д	Нормалізація SSE	POST /api/proxy/{provider}/stream → Anthropic / OpenAI-сумісний / Azure OpenAI / Gemini; захист від SSRF проти loopback / link-local / RFC1918

Додавання нового CLI — це один запис у apps/daemon/src/agents.ts. Формат потоку — один із claude-stream-json, copilot-stream-json, json-event-stream (з eventParser для кожного CLI), acp-json-rpc, pi-rpc або plain.

Посилання та лінія спадкоємності

Кожен зовнішній проект, який це сховище запозичило. Кожне посилання веде до джерела, щоб ви могли перевірити походження.

Проект	Роль тут
Claude Design	Закритий продукт, альтернативою з відкритим кодом до якого є це сховище.
alchaincyf/huashu-design	Ядро філософії дизайну. Workflow молодого дизайнера, 5-кроковий протокол бренд-активів, чек-лист anti-AI-slop, п'ятивимірна self-critique та бібліотека «5 шкіл × 20 філософій дизайну» за нашим вибором напрямку — все дистильовано у apps/daemon/src/prompts/discovery.ts та apps/daemon/src/prompts/directions.ts.
op7418/guizang-ppt-skill	Навичка magazine-web-PPT, вбудована дослівно під skills/guizang-ppt/ зі збереженням оригінальної ЛІЦЕНЗІЇ. Типова для режиму deck. Культура чек-листів P0/P1/P2 запозичена для кожної іншої навички.
multica-ai/multica	Архітектура демона + адаптерів. Виявлення агента через PATH-scan, локальний демон як єдиний привілейований процес, світогляд agent-as-teammate. Ми приймаємо модель; ми не вендоримо код.
OpenCoworkAI/open-codesign	Перша альтернатива Claude Design з відкритим кодом та наш найближчий партнер. Прийняті UX-патерни: цикл streaming-artifact, прев'ю у пісочниці iframe (вендовані React 18 + Babel), жива панель агента (todos + tool calls + переривається), п'ятиформатний список експорту (HTML/PDF/PPTX/ZIP/Markdown), локальний хаб зберігання, ін'єкція смаку через SKILL.md, та перший прох коментарів режиму прев'ю. UX-патерни, що ще в нашій дорожній карті: повна надійність хірургічних редагувань та панель AI-налаштувань. Ми навмисно не вендоримо pi-ai — open-codesign вбудовує його як рантайм агента; ми делегуємо тому CLI, який вже є у користувача.
VoltAgent/awesome-claude-design / awesome-design-md	Джерело 9-секційної схеми DESIGN.md та 70 продуктових систем, імпортованих через scripts/sync-design-systems.ts.
bergside/awesome-design-skills	Джерело 57 навичок дизайну, доданих безпосередньо як нормалізовані файли DESIGN.md під design-systems/.
farion1231/cc-switch	Натхнення для розподілу навичок через symlink між кількома CLI агентів.
Навички Claude Code	Конвенція SKILL.md, прийнята дослівно — будь-яка навичка Claude Code додається у skills/ і підхоплюється демоном.

Детальний опис походження — що ми беремо від кожного, що навмисно не беремо — живе у docs/references.md.

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

• Демон + виявлення агентів (12 CLI-адаптерів) + реєстр навичок + каталог систем дизайну
• Веб-додаток + чат + форма запитань + вибір з 5 напрямків + прогрес todo + прев'ю в пісочниці
• 31 навичка + 72 системи дизайну + 5 візуальних напрямків + 5 кадрів пристроїв
• Проекти · розмови · повідомлення · вкладки · шаблони на SQLite
• Багатопровайдерний BYOK проксі (/api/proxy/{anthropic,openai,azure,google}/stream) з захистом SSRF
• Імпорт Claude Design ZIP (/api/import/claude-design)
• Протокол sidecar + Electron desktop з IPC-автоматизацією (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN)
• API лінтингу артефактів + ворота п'ятивимірної self-critique перед видачею
• Хірургічні редагування в режимі коментарів — частково поставлено: коментарі елементів прев'ю та вкладення чату; надійне цілеспрямоване патчування ще в процесі
• UX панелі AI-налаштувань — ще не реалізовано
• Рецепт розгортання Vercel + тунель (Топологія B)
• Одна команда npx od init для скаффолдингу проекту з DESIGN.md
• Маркетплейс навичок (od skills install <github-repo>) та CLI-поверхня od skill add | list | remove | test (задрафтовано в docs/skills-protocol.md, реалізація очікує)
• Пакетна збірка Electron з apps/packaged/

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

Статус

Це рання реалізація — замкнений цикл (виявити → вибрати навичку + систему дизайну → чат → розібрати <artifact> → прев'ю → зберегти) працює наскрізь. Стек промптів та бібліотека навичок — це те, де живе більшість цінності, і вони стабільні. UI на рівні компонентів постачається щодня.

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

Якщо це зекономило вам тридцять хвилин — поставте ★. Зірки не сплачують оренду, але вони кажуть наступному дизайнеру, агенту та контриб'ютору, що цей експеримент вартий їхньої уваги. Один клік, три секунди, реальний сигнал: github.com/nexu-io/open-design.

Внесок

Питання, PR, нові навички та нові системи дизайну — всі вітаються. Найбільш впливові внески зазвичай — це одна папка, один Markdown-файл або один PR-розмірний адаптер:

• Додати навичку — додайте папку у skills/ за конвенцією SKILL.md.
• Додати систему дизайну — додайте DESIGN.md у design-systems/<brand>/ за 9-секційною схемою.
• Підключити новий CLI агент — один запис у apps/daemon/src/agents.ts.

Повний посібник, критерії злиття, стиль коду та що ми не приймаємо → CONTRIBUTING.md (Deutsch, Français, 简体中文).

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

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

Якщо ви злили свій перший PR — ласкаво просимо. Мітка good-first-issue — це точка входу.

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

SVG вище перегенерується щодня .github/workflows/metrics.yml за допомогою lowlighter/metrics. Зробіть ручне оновлення з вкладки Actions, якщо хочете швидше; для багатших плагінів (трафік, час відповіді) додайте секрет репозиторію METRICS_TOKEN з fine-grained PAT.

Історія зірок

Якщо крива вигинається вгору — це той сигнал, який ми шукаємо. ★ цей репо, щоб штовхнути її.

Кредити

Сімейство навичок HTML PPT Studio — майстер-навичка skills/html-ppt/ та обгортки для кожного шаблону під skills/html-ppt-*/ (15 шаблонів повних колод, 36 тем, 31 односторінковий макет, 27 CSS-анімацій + 20 canvas FX, клавіатурний рантайм та режим презентації з магнітними картками) — інтегровані з проекту з відкритим кодом lewislulu/html-ppt-skill (MIT). Вихідна ЛІЦЕНЗІЯ поставляється in-tree у skills/html-ppt/LICENSE, авторство належить @lewislulu. Кожна картка прикладу для шаблону (html-ppt-pitch-deck, html-ppt-tech-sharing, html-ppt-presenter-mode, html-ppt-xhs-post, …) делегує авторські вказівки майстер-навичці, щоб поведінка промпт → вихід зберігалася наскрізь при натисканні Використати цей промпт.

Потік журнал / горизонтального гортання під skills/guizang-ppt/ інтегрований з op7418/guizang-ppt-skill (MIT). Авторство належить @op7418.

Ліцензія

Apache-2.0. Вбудована skills/guizang-ppt/ зберігає свою оригінальну ЛІЦЕНЗІЮ (MIT) та атрибуцію авторства op7418. Вбудована skills/html-ppt/ зберігає свою оригінальну ЛІЦЕНЗІЮ (MIT) та атрибуцію авторства lewislulu.