Спочатку форма-опитувальник
Surface · audience · tone · brand · scale. Тридцять секунд radio-кнопок краще, ніж тридцять хвилин розворотів.
Відкритий код · Локально насамперед · BYOK
Альтернатива Claude Design з відкритим кодом.
Працює через CLI coding-agent-а, який у тебе вже стоїть — Claude Code, Codex, Cursor, Gemini, OpenCode і ще одинадцять. 110 Skills · 141 Design Systems · 5 візуальних напрямків · Apache-2.0.
Apache-2.0 · без реєстрації · твій CLI, твої ключі
Чому це існує
Claude Design від Anthropic (Opus 4.7, квітень 2026) показав, що стається, коли LLM перестає писати прозу й починає видавати дизайн-артефакти. Завірусився — і лишився закритим, лише за гроші, лише в хмарі, прив'язаним до моделі та skills Anthropic. Open Design — це альтернатива з відкритим кодом. Той самий цикл. Та сама ментальна модель «спершу артефакт». Без жодного локу.
Закрите → відкрите
Кожен skill — файл. Кожен design system — Markdown. Кожен prompt — TypeScript-модуль, який ти можеш прочитати й переписати.
Вбудований agent → твій
16 CLI coding-agent-ів автоматично знаходяться в PATH. Жодного CLI? Встав будь-який baseUrl + apiKey, сумісний з OpenAI.
Хмара → локалка
pnpm tools-dev — і вже працює локально. SQLite у .od/. Vercel-деплой опційно. Твої дані, твоя файлова система, твоє рішення.
Як промпт стає артефактом
OD не дає моделі імпровізувати жодного пікселя. Кожен brief фіксується ще до того, як починається малювання.
Surface · audience · tone · brand · scale. Тридцять секунд radio-кнопок краще, ніж тридцять хвилин розворотів.
Немає brand spec? Обери з 5 кураторських візуальних напрямків — кожен це детермінована OKLch-палітра + стек шрифтів.
План агента йде живою карткою. Оновлення in_progress → completed падають у реальному часі. Можеш дешево перенаправити просто на льоту.
Прев'ю в sandbox-iframe. Можна редагувати на місці. Завантажується як HTML, PDF, PPTX або ZIP.
Що в коробці
Кожен Skill — папка. Кожен Design System — Markdown із 9 секцій. Кинь папку, перезапусти daemon — воно у picker-і. Зміни систему — наступний render піде з новими токенами.
У фокусі навичка · html-ppt
Вбудований html-ppt skill приносить кожен прімітив, потрібний deck-агенту: presenter mode, бібліотеку layout-ів, набір кінетичних анімацій та 14 шаблонів, готових до форку. Кинь папку, перезапусти daemon — і в тебе в браузері готовий PPT-движок.
Варіанти із замкненим смаком
html-ppt-taste-brutalist і html-ppt-taste-editorial випущені як окремі «taste-locked» wrapper-и — той самий skill, інша захардкоджена естетика. Ще три для web-прототипів: web-prototype-taste-{brutalist,editorial,soft}.
Принеси свій agent
Які з них у тебе встановлені — ті й стають кандидатами в дизайн-движок. Перемикай одним кліком у model picker-і.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
Жодного CLI не встановлено? POST /api/proxy/stream приймає будь-який baseUrl + apiKey + model, сумісний з OpenAI, Azure або Google. Anthropic-via-OpenAI shim, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, твій self-host vLLM — усі в тому самому циклі. На краю daemon-а є SSRF-захист від loopback / link-local / RFC1918 адрес.
Шість опорних ідей
01
Daemon сканує PATH у пошуках 16 відомих CLI coding-agent-ів. Які з них знайдено — ті стають кандидатами в дизайн-движок, керованими через stdio з одним adapter-ом на CLI.
02
Кожен skill — це SKILL.md + assets/ + references/. Кинь папку в skills/, перезапусти daemon — воно у picker-і. Вбудований magazine-web-ppt закомічено дослівно, ліцензію збережено.
03
Схема DESIGN.md з 9 секцій — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Кожен артефакт читає з активної системи. Зміни систему → наступний render іде з новими токенами.
04
Раунд 1 — це лише <question-form>: жодного думання, жодних інструментів, жодних монологів. Surface · audience · tone · brand · scale. Ціна неправильного напрямку — один раунд чату, а не цілий зроблений deck.
05
Daemon запускає CLI з cwd, виставленим на папку артефактів проєкту. Agent отримує Read, Write, Bash, WebFetch — справжні інструменти на справжній файловій системі. SQLite зберігає проєкти, розмови, повідомлення, вкладки.
06
Discovery directives + identity charter + активний DESIGN.md + активний SKILL.md + project metadata + skill side files. Кожен шар компонується. Кожен шар — файл, який ти можеш редагувати.
07
`od mcp` відкриває проєкт як stdio MCP server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — будь-що, що говорить MCP — читає твої артефакти, файли і metadata напряму. На краю — лише читання: file reads, search, metadata. Жодної поверхні запису, жодних викликів назовні.
Prompt stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Кожен шар компонується. Кожен шар — файл, який ти можеш редагувати.
Порівняти
Закритий хмарний продукт, відкритий desktop-партнер, відкритий web-застосунок. Ми щиро запозичуємо в open-codesign і робимо посилання на /about — інший форм-фактор, інший prompt-stack, та сама полярна зірка.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Ліцензія та вартість | |||
| Ліцензія | Закрита | MIT | Apache-2.0 |
| Мінімальний платіж | Pro / Max / Team | BYOK | BYOK — встав будь-який URL, сумісний з OpenAI |
| Форм-фактор | |||
| Форм-фактор | Web (claude.ai) | Desktop (Electron) | Web-застосунок + локальний daemon |
| Деплоїться на Vercel | — | — | Так |
| AI runtime та потік | |||
| Agent runtime | Вбудований (Opus 4.7) | Вбудований (pi-ai) | Твій наявний CLI |
| Гнучкість провайдерів | Лише Anthropic | 7+ через pi-ai | 16 CLI + BYOK proxy |
| Форма-опитувальник (раунд 1) | — | — | Жорстке правило |
| 5 візуальних напрямків | — | — | Так |
| 5-вимірна самокритика | — | — | Брама перед випуском |
| Skills, системи та міграція | |||
| Skills | Закрите | 12 TS-модулів | 110 bundle-ів SKILL.md, які можна кинути |
| Design systems | Закрите | DESIGN.md (v0.2) | 141 систем у поставці |
| Імпорт Claude Design ZIP | немає | — | Так — продовжуй з місця, де зупинилася Anthropic |
Claude Design — торговельна марка Anthropic. Open Design не пов'язаний з Anthropic і ним не схвалений.
Поза чатом
Той самий чат, що видає <artifact> HTML, керує і генерацією картинок, і відео, і звуку. Кожен render падає в робочий простір проєкту як справжній .png або .mp4. У prompt-templates/ лежать 95 готових промптів.
Постери · аватари · ілюстровані карти · інфографіка · соц-картки в стилі журналу · ігровий UI · наративні стопкадри
розгорнути gpt-image-2
3D-еволюція кам'яних сходів
розгорнути gpt-image-2
Ілюстрована карта міської їжі
розгорнути gpt-image-2
Кінематографічна сцена в ліфті
розгорнути gpt-image-2
Cyberpunk-аніме-портрет
розгорнути gpt-image-2
Гламурний студійний портрет
розгорнути gpt-image-2
Аніме-файтинг — Captain Ryuuga проти Kaze Renshin
розгорнути gpt-image-2
Три царства — Гуань Юй убиває Янь Ляна
розгорнути gpt-image-2
Три царства — стрільба Лю Бу при Юаньмені
розгорнути gpt-image-2
Три царства — втеча Чжао Юня з немовлям
розгорнути gpt-image-2
HUD MMO у відкритому світі давнього Китаю
розгорнути gpt-image-2
Дитячий малюнок воском → переробка у фоторил
розгорнути gpt-image-2
Розбір отаку-хореографії — 16 панелей
розгорнути gpt-image-2
Сторіборд танцю сенсаційної дівчини — 8 кадрів
Кінематографічні t2v + i2v на 15 с зі звуком · короткі наративи · продуктові ролики
Seedance 2.0
Музичний подкаст і гітара
Seedance 2.0
Емоційне обличчя зблизька
Seedance 2.0
Кінематографічна суперкара класу люкс
Seedance 2.0
Сатира з котом у Забороненому місті
Seedance 2.0
Японська короткометражка про кохання
Seedance 2.0
Кінематографічний політ дракона
Seedance 2.0
Погоня заводом у пустці
Seedance 2.0
Cyberpunk-трейлер гри
Seedance 2.0
Криваво-багряний горизонт sci-fi
Seedance 2.0
Сторіборд магічної академії
Seedance 2.0
Бійка вампірів у провулку
Seedance 2.0
Ретро-естетика гонконгського вусія
Seedance 2.0
Три царства — Гуань Юй убиває Янь Ляна
Seedance 2.0
Три царства — стрільба Лю Бу при Юаньмені
Seedance 2.0
Три царства — втеча Чжао Юня з немовлям
Seedance 2.0
3D-анімація: хлопчик будує Lego
Seedance 2.0
Порятунок древнього дракона-охоронця
Seedance 2.0
Древнє індійське царство — FPV
Seedance 2.0
Motion graphics для intro персонажа
Seedance 2.0
Танець рук східноазійки
Seedance 2.0
Дослідження морського біолога
Seedance 2.0
Кінематографічні вуличні гонки
Seedance 2.0
Жах із тостером-ракетою
Seedance 2.0
Вінтажний Disney: пірат і крокодил
Seedance 2.0
Hollywood haute couture фентезі
HTML→MP4 motion graphics · показ продуктів · кінетична типографіка · графіки даних
розгорнути HyperFrames
Кінематографічний Logo Outro
розгорнути HyperFrames
Огляд застосунку — 3 телефони
розгорнути HyperFrames
TikTok-караоке
розгорнути HyperFrames
Гонка стовпчастих графіків
розгорнути HyperFrames
Карта маршруту польоту
розгорнути HyperFrames
Хайп-лічильник грошей
розгорнути HyperFrames
Стек соціальних оверлеїв
розгорнути HyperFrames
3D-розкриття UI
Швидкий старт
Node ~24, pnpm 10.33.x. Працює на macOS, Windows і Linux (AppImage-збірка через `pnpm tools-pack linux build --to appimage`). Daemon створює локальну папку .od/ для SQLite + артефактів кожного проєкту. Ніякого init-кроку немає.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web Що нового · v0.5.0
v0.5.0 перетворює цикл артефакту з «один раз відрендерив» на «крути доти, доки не сподобається» — Inspect mode для тонких налаштувань на рівні елементів, живі дашборди як повноцінна категорія даних, гостріший rubric у Design Jury. `od mcp` з v0.4.0 досі простягає все це до кожного іншого coding agent-а на твоєму ноуті.
Налаштування на рівні елемента
Наводь, клікай, кручай обчислені стилі будь-якого елемента — колір, відступи, тип — без ходіння до agent-а й назад. Артефакт оновлюється на місці. Коли все добре, зміни перетікають у вихідні файли.
v0.5.0 · PR #362
Повноцінна категорія
Три нових dashboard-skill-и (`live-dashboard`, шаблон `clinic-console`, `flowai-live-dashboard-template`) плюс prompt-шаблон Notion-командного-дашборду під'єднують артефакти до справжніх Composio-конекторів. Панель прев'ю показує живі дані, а не заморожені mock-и.
v0.5.0 · PR #778 + #795 + #801 + #799
Брама якості · Phase 5
Rubric кожного панеліста тепер живе в prompt-шаблоні рівня панелі, який проходить через спільний system composer. Критика лишається злагодженою між запусками. Persistence, transcript, orchestrator з Phase 4 переїжджають далі.
v0.5.0 · PR #524
Протокол
Запусти `od mcp`, і будь-який coding-agent, що говорить MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf), напряму читає файли проєкту, search index і metadata. На краю — лише читання. Той проєкт, який відкрито в OD-застосунку, тепер бачать і всі інші agent-и.
v0.4.0 · PR #399
Родовід Open Design
alchaincyf
Компас філософії дизайну
Workflow Junior-Designer-а, 5-кроковий протокол brand-asset, anti-AI-slop checklist, 5-вимірна самокритика та «5 шкіл × 20 філософій дизайну», що стоять за direction picker-ом Open Design.
op7418
Режим Deck
Лежить дослівно під skills/guizang-ppt/ зі збереженою оригінальною ліцензією. Журнальні layout-и, WebGL hero та культура checklist-у P0/P1/P2, які тепер скрізь у Open Design.
OpenCoworkAI
Найближчий партнер · UX-полярна зірка
Цикл streaming-артефактів, sandbox-iframe прев'ю, жива панель агента (todo + tool calls + переривання), експорт у п'ять форматів, коментарі-анотації в режимі прев'ю. Форм-фактор зумисне інший — open-codesign дає Electron + pi-ai, Open Design дає web + локальний daemon + твій CLI.
multica-ai
Архітектура daemon-а
Виявлення agent-ів сканом PATH, локальний daemon як єдиний привілейований процес, світогляд «agent — це член команди». Open Design переймає архітектурну модель; код multica сам по собі не вендориться.
Постав ★
Зірочки оренду не платять, але вони кажуть наступному дизайнеру, agent-у і контриб'ютору, що цей експеримент вартий уваги.
Apache-2.0
Відкритий код
110
Навичок
141
Систем дизайну
16 + BYOK
CLI
Часті питання
Open Design — це альтернатива Claude Design від Anthropic з відкритим кодом. Працює локально через pnpm tools-dev, деплоїться на Vercel і використовує як дизайн-движок той CLI coding-agent-а, який у тебе вже є (Claude Code, Codex, Cursor, Gemini, OpenCode, +11). Ліцензія Apache-2.0.
Claude Design — закритий, платний (Pro/Max/Team), лише в хмарі та прив'язаний до моделей і skills Anthropic. Open Design — open-source, BYOK, локально насамперед, моделі вільно перемикаються між 16 CLI-адаптерами або будь-яким endpoint-ом, сумісним з OpenAI / Azure / Google.
Якщо потрібен self-hosting, гнучкі моделі або власні skills — так. Замкнений цикл (виявити agent-а → обрати skill + design system → чат → розбір <artifact> → прев'ю → збереження) працює end-to-end. У v0.4.x з'явилися Critique Theater (оцінка Design Jury перед випуском), Tweaks mode (element-picker + чат-вкладення), Manual edit mode і живі артефакти, що тягнуть дані з Composio-конекторів.
Ні. Open Design бере той CLI coding-agent-а, який у тебе вже є в PATH, або будь-який API-ключ, сумісний з OpenAI, через BYOK proxy. Принось ключі від того провайдера, що тобі більше до душі.
З коробки 16: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI і Pi. Виявляються в PATH автоматично під час запуску daemon-а.
Кинь експортований ZIP з Claude Design у вікно вітання. POST /api/import/claude-design розпакує його в справжню папку .od/projects/<id>/, відкриє вхідний файл вкладкою і підготує continue-where-Anthropic-left-off prompt для твого локального agent-а.
Так. Web-шар — Next.js 16 + React 18 + TypeScript, деплоїться на Vercel. Локальний daemon лишається у тебе на ноуті. Топологія B (Vercel + tunnel) у roadmap-і для повністю віддалених сетапів.
Кинь файл DESIGN.md у design-systems/<your-brand>/ за схемою з 9 секцій (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns). Перезапусти daemon — і він у picker-і.
Apache-2.0. Вбудовані skills/guizang-ppt/ і skills/html-ppt/ зберігають свої оригінальні ліцензії MIT із атрибуцією. Ніяких платних тарифів. Жодних лімітів. Єдина вартість — те, що бере твій LLM-провайдер.
Форма-опитувальник на раунді 1 фіксує brief ще до того, як модель почне малювати. Picker з 5 напрямків дає детерміновані палітри, коли brand spec відсутній. 5-вимірна самокритика оцінює вихід перед випуском. Кожен skill приходить із checklist-ом P0/P1/P2, який нав'язується через pre-flight side-file injection. Агресивні фіолетові градієнти, generic-emoji-іконки та Inter як display-шрифт прямо заборонені в prompt stack-у.
Так. POST /api/proxy/stream передає SSE-чанки до будь-якого endpoint-у, сумісного з OpenAI, Azure або Google. Встав baseUrl, apiKey і model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, твій self-host vLLM, shim Anthropic-via-OpenAI — усе працює. SSRF-захист від loopback і приватних мереж.
У Settings → Execution є кнопка Connection test (v0.5.0, PR #507). Встав baseUrl + apiKey + model, тицьни Test — Open Design стрельне мінімальним handshake до провайдера й покаже або відповідь, або точний фрейм помилки. Працює для Anthropic, OpenAI-compat, Azure і Google. Економить тобі коло чат-потім-відстежуй-помилку, коли ключ не той, ім'я моделі написане з помилкою або gateway тебе блокує.
Лише якщо ти обираєш модель Anthropic (Claude Code або через BYOK proxy з ключем Anthropic). Сам Open Design тримає все в локальній SQLite за адресою .od/app.sqlite і у файлах окремих проєктів під .od/projects/. На сервери Open Design нічого не вивантажується — серверів Open Design просто не існує.
Так. Запусти `od mcp`, і Open Design відкриває stdio MCP server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — будь-що, що говорить MCP — може читати файли проєкту, ганяти search і дивитися metadata. На краю інтерфейс лише на читання: file reads, search, metadata. Жодної поверхні запису, жодних дзвінків назовні. Випущено в v0.4.0.
Design Jury з 5 панелістів, який оцінює кожен артефакт перед випуском — accessibility, brand fit, craft, content, structure. Persistence + transcript + orchestrator end-to-end від Phase 4 у v0.4.0. Нижче за налаштований поріг agent переробляє і повторно оцінює; вище — артефакт іде назовні.
Live artifacts тягнуть живі дані в панель прев'ю через каталог Composio-конекторів — GitHub, Linear, Notion, Gmail і ще. Вбудовані skill-и orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion та social-media-dashboard показують повне обв'язування. Випущено в v0.4.0 (PR #381).
Випусти
Клонь репо. Запусти три команди. Напиши prompt. Дивися, як прилітає форма-опитувальник, заповни її, дивися, як стрімить картка todo, дивися, як рендериться артефакт.