Open Design

Відкритий код · Локально насамперед · BYOK

Open Design

Альтернатива Claude Design з відкритим кодом.

Працює через CLI coding-agent-а, який у тебе вже стоїть — Claude Code, Codex, Cursor, Gemini, OpenCode і ще одинадцять. 110 Skills · 141 Design Systems · 5 візуальних напрямків · Apache-2.0.

Apache-2.0 · без реєстрації · твій CLI, твої ключі

Open Design · жива демонстрація
Подивитися всі 110 skill-ів

Чому це існує

Claude Design зайшов вірусно. І лишився закритим.

Claude Design від Anthropic (Opus 4.7, квітень 2026) показав, що стається, коли LLM перестає писати прозу й починає видавати дизайн-артефакти. Завірусився — і лишився закритим, лише за гроші, лише в хмарі, прив'язаним до моделі та skills Anthropic. Open Design — це альтернатива з відкритим кодом. Той самий цикл. Та сама ментальна модель «спершу артефакт». Без жодного локу.

Закрите → відкрите

Apache-2.0 згори донизу.

Кожен skill — файл. Кожен design system — Markdown. Кожен prompt — TypeScript-модуль, який ти можеш прочитати й переписати.

Вбудований agent → твій

Користуйся CLI, який у тебе вже є.

16 CLI coding-agent-ів автоматично знаходяться в PATH. Жодного CLI? Встав будь-який baseUrl + apiKey, сумісний з OpenAI.

Хмара → локалка

Працює на ноуті. Деплоїться на Vercel.

pnpm tools-dev — і вже працює локально. SQLite у .od/. Vercel-деплой опційно. Твої дані, твоя файлова система, твоє рішення.

Як промпт стає артефактом

Чотири кроки. Жодних імпровізацій.

OD не дає моделі імпровізувати жодного пікселя. Кожен brief фіксується ще до того, як починається малювання.

Спочатку форма-опитувальник

Surface · audience · tone · brand · scale. Тридцять секунд radio-кнопок краще, ніж тридцять хвилин розворотів.

Вибір напрямку

Немає brand spec? Обери з 5 кураторських візуальних напрямків — кожен це детермінована OKLch-палітра + стек шрифтів.

TodoWrite йде потоком

План агента йде живою карткою. Оновлення in_progress → completed падають у реальному часі. Можеш дешево перенаправити просто на льоту.

<artifact> рендериться

Прев'ю в sandbox-iframe. Можна редагувати на місці. Завантажується як HTML, PDF, PPTX або ZIP.

У фокусі навичка · html-ppt

Один skill. 36 themes, 31 layout, 47 анімацій, 14 deck-шаблонів.

Вбудований html-ppt skill приносить кожен прімітив, потрібний deck-агенту: presenter mode, бібліотеку layout-ів, набір кінетичних анімацій та 14 шаблонів, готових до форку. Кинь папку, перезапусти daemon — і в тебе в браузері готовий PPT-движок.

анімований огляд html-ppt — слайди, layout-и, переходи

Варіанти із замкненим смаком

Той самий движок, три смаки.

html-ppt-taste-brutalist і html-ppt-taste-editorial випущені як окремі «taste-locked» wrapper-и — той самий skill, інша захардкоджена естетика. Ще три для web-прототипів: web-prototype-taste-{brutalist,editorial,soft}.

Принеси свій agent

16 CLI, які знаходяться в PATH самі.

Які з них у тебе встановлені — ті й стають кандидатами в дизайн-движок. Перемикай одним кліком у 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

Ми не постачаємо agent. Твого досить.

+

Daemon сканує PATH у пошуках 16 відомих CLI coding-agent-ів. Які з них знайдено — ті стають кандидатами в дизайн-движок, керованими через stdio з одним adapter-ом на CLI.

02

Skills — це файли, а не плагіни.

+

Кожен skill — це SKILL.md + assets/ + references/. Кинь папку в skills/, перезапусти daemon — воно у picker-і. Вбудований magazine-web-ppt закомічено дослівно, ліцензію збережено.

03

Design Systems — це переносний Markdown, а не theme JSON.

+

Схема DESIGN.md з 9 секцій — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Кожен артефакт читає з активної системи. Зміни систему → наступний render іде з новими токенами.

04

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

+

Раунд 1 — це лише <question-form>: жодного думання, жодних інструментів, жодних монологів. Surface · audience · tone · brand · scale. Ціна неправильного напрямку — один раунд чату, а не цілий зроблений deck.

05

Daemon робить так, ніби agent сидить у тебе на ноуті.

+

Daemon запускає CLI з cwd, виставленим на папку артефактів проєкту. Agent отримує Read, Write, Bash, WebFetch — справжні інструменти на справжній файловій системі. SQLite зберігає проєкти, розмови, повідомлення, вкладки.

06

Prompt stack — це і є продукт.

+

Discovery directives + identity charter + активний DESIGN.md + активний SKILL.md + project metadata + skill side files. Кожен шар компонується. Кожен шар — файл, який ти можеш редагувати.

07

Open Design — не силос. Інші твої agent-и читають його.

+

`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)
      

Кожен шар компонується. Кожен шар — файл, який ти можеш редагувати.

Порівняти

Open Design проти решти.

Закритий хмарний продукт, відкритий 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 готових промптів.

01

gpt-image-2

Постери · аватари · ілюстровані карти · інфографіка · соц-картки в стилі журналу · ігровий UI · наративні стопкадри

3D-еволюція кам'яних сходів розгорнути

gpt-image-2

3D-еволюція кам'яних сходів

Ілюстрована карта міської їжі розгорнути

gpt-image-2

Ілюстрована карта міської їжі

Кінематографічна сцена в ліфті розгорнути

gpt-image-2

Кінематографічна сцена в ліфті

Cyberpunk-аніме-портрет розгорнути

gpt-image-2

Cyberpunk-аніме-портрет

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

gpt-image-2

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

Аніме-файтинг — Captain Ryuuga проти Kaze Renshin розгорнути

gpt-image-2

Аніме-файтинг — Captain Ryuuga проти Kaze Renshin

Три царства — Гуань Юй убиває Янь Ляна розгорнути

gpt-image-2

Три царства — Гуань Юй убиває Янь Ляна

Три царства — стрільба Лю Бу при Юаньмені розгорнути

gpt-image-2

Три царства — стрільба Лю Бу при Юаньмені

Три царства — втеча Чжао Юня з немовлям розгорнути

gpt-image-2

Три царства — втеча Чжао Юня з немовлям

HUD MMO у відкритому світі давнього Китаю розгорнути

gpt-image-2

HUD MMO у відкритому світі давнього Китаю

Дитячий малюнок воском → переробка у фоторил розгорнути

gpt-image-2

Дитячий малюнок воском → переробка у фоторил

Розбір отаку-хореографії — 16 панелей розгорнути

gpt-image-2

Розбір отаку-хореографії — 16 панелей

Сторіборд танцю сенсаційної дівчини — 8 кадрів розгорнути

gpt-image-2

Сторіборд танцю сенсаційної дівчини — 8 кадрів

02

Seedance 2.0

Кінематографічні 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 фентезі

03

HyperFrames

HTML→MP4 motion graphics · показ продуктів · кінетична типографіка · графіки даних

Кінематографічний Logo Outro розгорнути

HyperFrames

Кінематографічний Logo Outro

Огляд застосунку — 3 телефони розгорнути

HyperFrames

Огляд застосунку — 3 телефони

TikTok-караоке розгорнути

HyperFrames

TikTok-караоке

Гонка стовпчастих графіків розгорнути

HyperFrames

Гонка стовпчастих графіків

Карта маршруту польоту розгорнути

HyperFrames

Карта маршруту польоту

Хайп-лічильник грошей розгорнути

HyperFrames

Хайп-лічильник грошей

Стек соціальних оверлеїв розгорнути

HyperFrames

Стек соціальних оверлеїв

3D-розкриття UI розгорнути

HyperFrames

3D-розкриття UI

натисни esc або клікни тло, щоб закрити

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

Три команди. Без реєстрації.

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

v0.5.0 перетворює цикл артефакту з «один раз відрендерив» на «крути доти, доки не сподобається» — Inspect mode для тонких налаштувань на рівні елементів, живі дашборди як повноцінна категорія даних, гостріший rubric у Design Jury. `od mcp` з v0.4.0 досі простягає все це до кожного іншого coding agent-а на твоєму ноуті.

Налаштування на рівні елемента

Inspect mode — тицяй у будь-що в прев'ю.

Наводь, клікай, кручай обчислені стилі будь-якого елемента — колір, відступи, тип — без ходіння до agent-а й назад. Артефакт оновлюється на місці. Коли все добре, зміни перетікають у вихідні файли.

v0.5.0 · PR #362

Повноцінна категорія

Живі дашборди переходять із demo у defaults.

Три нових 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 Design Jury пропускається через system composer.

Rubric кожного панеліста тепер живе в prompt-шаблоні рівня панелі, який проходить через спільний system composer. Критика лишається злагодженою між запусками. Persistence, transcript, orchestrator з Phase 4 переїжджають далі.

v0.5.0 · PR #524

Протокол

od mcp — Open Design як MCP server.

Запусти `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

З чого Open Design зібрано.

alchaincyf

Компас філософії дизайну

huashu-design

Workflow Junior-Designer-а, 5-кроковий протокол brand-asset, anti-AI-slop checklist, 5-вимірна самокритика та «5 шкіл × 20 філософій дизайну», що стоять за direction picker-ом Open Design.

op7418

Режим Deck

guizang-ppt-skill

Лежить дослівно під skills/guizang-ppt/ зі збереженою оригінальною ліцензією. Журнальні layout-и, WebGL hero та культура checklist-у P0/P1/P2, які тепер скрізь у Open Design.

OpenCoworkAI

Найближчий партнер · UX-полярна зірка

open-codesign

Цикл streaming-артефактів, sandbox-iframe прев'ю, жива панель агента (todo + tool calls + переривання), експорт у п'ять форматів, коментарі-анотації в режимі прев'ю. Форм-фактор зумисне інший — open-codesign дає Electron + pi-ai, Open Design дає web + локальний daemon + твій CLI.

multica-ai

Архітектура daemon-а

multica

Виявлення agent-ів сканом PATH, локальний daemon як єдиний привілейований процес, світогляд «agent — це член команди». Open Design переймає архітектурну модель; код multica сам по собі не вендориться.

Постав ★

Якщо це зекономило тобі тридцять хвилин — постав ★.

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

Зірочки Форки Проблеми Останній commit
★ Постав на GitHub

Apache-2.0

Відкритий код

110

Навичок

141

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

16 + BYOK

CLI

Часті питання

Часті запитання

Що таке Open Design?

+

Open Design — це альтернатива Claude Design від Anthropic з відкритим кодом. Працює локально через pnpm tools-dev, деплоїться на Vercel і використовує як дизайн-движок той CLI coding-agent-а, який у тебе вже є (Claude Code, Codex, Cursor, Gemini, OpenCode, +11). Ліцензія Apache-2.0.

Чим Open Design відрізняється від Claude Design?

+

Claude Design — закритий, платний (Pro/Max/Team), лише в хмарі та прив'язаний до моделей і skills Anthropic. Open Design — open-source, BYOK, локально насамперед, моделі вільно перемикаються між 16 CLI-адаптерами або будь-яким endpoint-ом, сумісним з OpenAI / Azure / Google.

Чи може Open Design замінити Claude Design для моєї команди?

+

Якщо потрібен 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-конекторів.

Чи потрібна підписка Claude Pro, щоб користуватися Open Design?

+

Ні. Open Design бере той CLI coding-agent-а, який у тебе вже є в PATH, або будь-який API-ключ, сумісний з OpenAI, через BYOK proxy. Принось ключі від того провайдера, що тобі більше до душі.

Які CLI coding-agent-ів підтримує Open Design?

+

З коробки 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-а.

Як імпортувати наявний проєкт Claude Design в Open Design?

+

Кинь експортований ZIP з Claude Design у вікно вітання. POST /api/import/claude-design розпакує його в справжню папку .od/projects/<id>/, відкриє вхідний файл вкладкою і підготує continue-where-Anthropic-left-off prompt для твого локального agent-а.

Чи можна self-host-ити Open Design на Vercel?

+

Так. Web-шар — Next.js 16 + React 18 + TypeScript, деплоїться на Vercel. Локальний daemon лишається у тебе на ноуті. Топологія B (Vercel + tunnel) у roadmap-і для повністю віддалених сетапів.

Як додати власний design system в Open Design?

+

Кинь файл DESIGN.md у design-systems/<your-brand>/ за схемою з 9 секцій (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns). Перезапусти daemon — і він у picker-і.

Open Design безплатний? Яка ліцензія?

+

Apache-2.0. Вбудовані skills/guizang-ppt/ і skills/html-ppt/ зберігають свої оригінальні ліцензії MIT із атрибуцією. Ніяких платних тарифів. Жодних лімітів. Єдина вартість — те, що бере твій LLM-провайдер.

Як Open Design уникає AI-slop вигляду?

+

Форма-опитувальник на раунді 1 фіксує brief ще до того, як модель почне малювати. Picker з 5 напрямків дає детерміновані палітри, коли brand spec відсутній. 5-вимірна самокритика оцінює вихід перед випуском. Кожен skill приходить із checklist-ом P0/P1/P2, який нав'язується через pre-flight side-file injection. Агресивні фіолетові градієнти, generic-emoji-іконки та Inter як display-шрифт прямо заборонені в prompt stack-у.

Чи можна користуватися Open Design без жодного встановленого CLI?

+

Так. 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 і приватних мереж.

Як перевірити конфіг BYOK-провайдера, не запускаючи чат?

+

У Settings → Execution є кнопка Connection test (v0.5.0, PR #507). Встав baseUrl + apiKey + model, тицьни Test — Open Design стрельне мінімальним handshake до провайдера й покаже або відповідь, або точний фрейм помилки. Працює для Anthropic, OpenAI-compat, Azure і Google. Економить тобі коло чат-потім-відстежуй-помилку, коли ключ не той, ім'я моделі написане з помилкою або gateway тебе блокує.

Чи відправляються мої дані до Anthropic, коли я користуюся Open Design?

+

Лише якщо ти обираєш модель Anthropic (Claude Code або через BYOK proxy з ключем Anthropic). Сам Open Design тримає все в локальній SQLite за адресою .od/app.sqlite і у файлах окремих проєктів під .od/projects/. На сервери Open Design нічого не вивантажується — серверів Open Design просто не існує.

Чи можуть інші мої coding agent-и читати проєкти 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.

Що таке Critique Theater?

+

Design Jury з 5 панелістів, який оцінює кожен артефакт перед випуском — accessibility, brand fit, craft, content, structure. Persistence + transcript + orchestrator end-to-end від Phase 4 у v0.4.0. Нижче за налаштований поріг agent переробляє і повторно оцінює; вище — артефакт іде назовні.

Що таке live artifacts і які конектори підтримуються?

+

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, дивися, як рендериться артефакт.