Najpierw formularz
Surface · odbiorca · ton · marka · skala. Trzydzieści sekund radio-buttonów bije trzydzieści minut poprawek.
Open source · Local-first · BYOK
Open Design
Open-source'owa alternatywa dla Claude Design.
Napędzane przez coding-agent CLI, które już masz — Claude Code, Codex, Cursor, Gemini, OpenCode, plus jeszcze jedenaście. 110 Skills · 141 Design Systems · 5 kierunków wizualnych · Apache-2.0.
Apache-2.0 · bez rejestracji · twoje CLI, twoje klucze
Open Design · live demo
Przejrzyj wszystkie 110 skills Po co to istnieje
Claude Design poszedł viralem. I został zamknięty.
Claude Design od Anthropic (Opus 4.7, kwiecień 2026) pokazał, co się dzieje, gdy LLM przestaje pisać prozę i zaczyna dostarczać artefakty designu. Poszedł viralem — i został zamknięty, płatny, tylko w chmurze, przykuty do modelu Anthropic i ich skills. Open Design jest open-source'ową alternatywą. Ten sam loop. Ten sam model myślenia «artefakt na pierwszym miejscu». Bez lock-inu.
Zamknięte → otwarte
Apache-2.0, od góry do dołu.
Każdy skill to plik. Każdy design system to plik Markdown. Każdy prompt to moduł TypeScript, który możesz przeczytać i zmienić.
Wbudowany agent → twój
Użyj CLI, które już masz.
16 CLI coding-agentów wykrywanych automatycznie w twoim PATH. Bez CLI? Wklej dowolny baseUrl + apiKey kompatybilny z OpenAI.
Chmura → lokalnie
Działa na twoim laptopie. Wdraża się na Vercel.
pnpm tools-dev i jedzie lokalnie. SQLite w .od/. Vercel deploy opcjonalny. Twoje dane, twój system plików, ty decydujesz.
Jak prompt zmienia się w artefakt
Cztery kroki. Bez improwizacji.
OD nie pozwala modelowi improwizować ani jednego piksela. Każdy brief jest zablokowany, zanim ruszy pędzel.
Picker kierunku
Brak brand spec? Wybierz spośród 5 wykuratowanych kierunków wizualnych — każdy z deterministyczną paletą OKLch i stackiem fontów.
TodoWrite leci streamem
Plan agenta przychodzi jako żywa karta. in_progress → completed aktualizuje się w czasie rzeczywistym. Korekta kursu w locie wychodzi tanio.
<artifact> renderuje
Podgląd w iframe sandbox. Edycja na miejscu. Pobranie jako HTML, PDF, PPTX lub ZIP.
Co jest w pudełku
110 Skills × 141 Design Systems.
Każdy Skill to folder. Każdy Design System to plik Markdown z 9 sekcjami. Wrzuć folder, zrestartuj daemon i jest w pickerze. Zmień system, kolejny render odpala nowe tokeny.
Skill spotlight · html-ppt
Jeden skill. 36 motywów, 31 layoutów, 47 animacji, 14 szablonów decka.
Wbudowany skill html-ppt niesie każdą prymitywę, której potrzebuje agent decka: tryb prezentera, bibliotekę layoutów, zestaw animacji kinetycznych i 14 szablonów gotowych do forkowania. Wrzuć folder, zrestartuj daemon — masz engine PPT w przeglądarce.
Warianty «taste-locked»
Ten sam engine, trzy taste.
html-ppt-taste-brutalist i html-ppt-taste-editorial wychodzą jako samodzielne wrappery «taste-locked» — ten sam skill, estetyka wbita na sztywno. Plus jeszcze trzy dla web prototypów: web-prototype-taste-{brutalist,editorial,soft}.
Bring your own agent
16 CLI wykrywanych automatycznie w twoim PATH.
Te, które masz zainstalowane, stają się kandydatami na engine designu. Przełącz jednym kliknięciem w pickerze modelu.
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
Brak CLI? POST /api/proxy/stream przyjmuje dowolny baseUrl + apiKey + model kompatybilny z OpenAI, Azure lub Google. Shim Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, twój self-hosted vLLM — wszystkie w tym samym loopie. Z guardami SSRF na krawędzi daemona, blokujące loopback, link-local i RFC1918.
Siedem pomysłów nośnych
W co wierzymy, w siedmiu linijkach.
01
Nie dostarczamy agenta. Twój wystarczy.
+
01
Nie dostarczamy agenta. Twój wystarczy.
Daemon skanuje twój PATH za 16 znanymi CLI coding-agentów. Te, które znajdzie, stają się kandydatami na engine designu, sterowane przez stdio z jednym adapterem na CLI.
02
Skills to pliki, nie pluginy.
+
02
Skills to pliki, nie pluginy.
Każdy skill to SKILL.md + assets/ + references/. Wrzuć folder do skills/, zrestartuj daemon i jest w pickerze. Wbudowany magazine-web-ppt leży w repo dosłownie, z zachowaną licencją.
03
Design Systems to przenośny Markdown, a nie JSON-owy theme.
+
03
Design Systems to przenośny Markdown, a nie JSON-owy theme.
Schemat DESIGN.md z 9 sekcjami — kolor, typografia, spacing, layout, komponenty, motion, voice, marka, anti-patterny. Każdy artefakt czyta z aktywnego systemu. Zmień system → kolejny render odpala nowe tokeny.
04
Interaktywny formularz wycina 80 % poprawek.
+
04
Interaktywny formularz wycina 80 % poprawek.
Tura 1 to tylko <question-form>: bez myślenia, bez narzędzi, bez narracji. Surface · odbiorca · ton · marka · skala. Cena złego kierunku to jedna runda chatu, a nie skończony deck.
05
Daemon sprawia, że agent czuje się jak na twoim laptopie.
+
05
Daemon sprawia, że agent czuje się jak na twoim laptopie.
Daemon spawnuje CLI z cwd ustawionym na folder artefaktów twojego projektu. Agent dostaje Read, Write, Bash, WebFetch — prawdziwe narzędzia na prawdziwym systemie plików. SQLite trzyma projekty, konwersacje, wiadomości i zakładki.
06
Prompt stack to produkt.
+
06
Prompt stack to produkt.
Discovery directives + identity charter + aktywny DESIGN.md + aktywny SKILL.md + metadane projektu + side-file'y skilla. Każda warstwa jest composable. Każda warstwa to plik, który możesz edytować.
07
Open Design nie jest silosem. Twoje inne agenty go czytają.
+
07
Open Design nie jest silosem. Twoje inne agenty go czytają.
`od mcp` wystawia projekt jako stdio MCP-serwer. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — wszystko, co mówi MCP — czyta twoje artefakty, pliki i metadane wprost. Read-only na krawędzi: czytanie plików, search, metadane. Bez powierzchni zapisu, bez wywołań zewnętrznych.
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)
Każda warstwa jest composable. Każda warstwa to plik, który możesz edytować.
Porównanie
Open Design kontra reszta.
Zamknięty produkt cloud, otwarty peer desktopowy, otwarta web app. Pożyczamy sporo z open-codesign i kredytujemy go na /about — inny format, inny prompt-stack, ta sama gwiazda polarna.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Licencja i koszt | |||
| Licencja | zamknięta | MIT | Apache-2.0 |
| Minimalny rachunek | Pro / Max / Team | BYOK | BYOK — dowolny URL kompatybilny z OpenAI |
| Format | |||
| Format | Web (claude.ai) | Desktop (Electron) | Web app + lokalny daemon |
| Wdrażalne na Vercel | — | — | tak |
| Runtime AI i flow | |||
| Runtime agenta | wbudowany (Opus 4.7) | wbudowany (pi-ai) | twoje istniejące CLI |
| Elastyczność providera | tylko Anthropic | 7+ przez pi-ai | 16 CLI + proxy BYOK |
| Formularz (tura 1) | — | — | twarda zasada |
| 5 kierunków wizualnych | — | — | tak |
| Autokrytyka 5-wymiarowa | — | — | bramka przed emit |
| Skills, systemy i migracja | |||
| Skills | własnościowe | 12 modułów TS | 110 bundli SKILL.md do wrzucenia |
| Design systems | własnościowe | DESIGN.md (v0.2) | 141 systemów w komplecie |
| Import ZIP Claude Design | n/d | — | tak — pracuj dalej tam, gdzie skończył Anthropic |
Claude Design jest znakiem towarowym Anthropic. Open Design nie jest powiązany ani wspierany przez Anthropic.
Poza chatem
Obraz, wideo, audio — ten sam interfejs.
Ten sam czat, który produkuje HTML <artifact>, napędza też generowanie obrazów, wideo i audio. Każdy render ląduje jako prawdziwy .png lub .mp4 w workspace twojego projektu. 95 promptów gotowych do odtworzenia w prompt-templates/.
01
gpt-image-2
Plakaty · awatary · ilustrowane mapy · infografiki · social cardy w stylu magazynowym · UI gier · narracyjne stille z gier
powiększ gpt-image-2
Ewolucja kamiennych schodów 3D
powiększ gpt-image-2
Ilustrowana miejska mapa kulinarna
powiększ gpt-image-2
Kinowa scena w windzie
powiększ gpt-image-2
Cyberpunkowy portret anime
powiększ gpt-image-2
Glamourowy portret studyjny
powiększ gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
powiększ gpt-image-2
Three Kingdoms — Guanyu zabija Yanlianga
powiększ gpt-image-2
Three Kingdoms — łuczne starcie Lyubu pod Yuanmen
powiększ gpt-image-2
Three Kingdoms — Zhaoyun ucieka z kołyską
powiększ gpt-image-2
HUD MMO open-world starożytnych Chin
powiększ gpt-image-2
Dziecięcy rysunek kredką → fotorealistyczne odtworzenie
powiększ gpt-image-2
Rozkład choreografii otaku — 16 paneli
powiększ gpt-image-2
Storyboard sensacyjnego tańca — 8 ujęć
02
Seedance 2.0
15 s kinowego t2v + i2v z audio · narracyjne shorty · filmy produktowe
Seedance 2.0
Music Podcast & gitara
Seedance 2.0
Emocjonalny zbliżenie twarzy
Seedance 2.0
Luksusowy supersamochód kinowo
Seedance 2.0
Satyra z kotem z Zakazanego Miasta
Seedance 2.0
Japoński romance short
Seedance 2.0
Kinowy lot smoka
Seedance 2.0
Pościg w postapokaliptycznej fabryce
Seedance 2.0
Zwiastun cyberpunkowej gry
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Storyboard magicznej akademii
Seedance 2.0
Walka wampirów w zaułku
Seedance 2.0
Retro estetyka HK wuxia
Seedance 2.0
Three Kingdoms — Guanyu zabija Yanlianga
Seedance 2.0
Three Kingdoms — łuczne starcie Lyubu pod Yuanmen
Seedance 2.0
Three Kingdoms — Zhaoyun ucieka z kołyską
Seedance 2.0
Animowany 3D chłopiec składa Lego
Seedance 2.0
Ratunek starożytnego smoka strażnika
Seedance 2.0
Starożytne królestwo indyjskie — FPV
Seedance 2.0
Motion graphics intro postaci
Seedance 2.0
Wschodnioazjatycki taniec rąk
Seedance 2.0
Biolog morski na eksploracji
Seedance 2.0
Uliczny wyścig w klimacie kinowym
Seedance 2.0
Jumpscare z toster-rakietą
Seedance 2.0
Vintage Disneyowski pirat z krokodylem
Seedance 2.0
Hollywoodzka fantazja haute couture
03
HyperFrames
Motion graphics HTML→MP4 · reveale produktów · kinetyczna typografia · wykresy danych
powiększ HyperFrames
Kinowe outro logo
powiększ HyperFrames
Showcase appki na trzech telefonach
powiększ HyperFrames
TikTok karaoke
powiększ HyperFrames
Wyścig słupków
powiększ HyperFrames
Trasa na mapie lotu
powiększ HyperFrames
Hype'owy licznik kasy
powiększ HyperFrames
Stack overlayów social
powiększ HyperFrames
UI 3D-reveal
Quickstart
Trzy komendy. Bez rejestracji.
Node ~24, pnpm 10.33.x. Działa na macOS, Windows i Linux (build AppImage przez `pnpm tools-pack linux build --to appimage`). Daemon tworzy lokalny folder .od/ na SQLite i artefakty per projekt. Bez kroku init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run webCo nowego · v0.5.0
Cztery zmiany od czasu v0.4.0.
v0.5.0 podnosi loop artefaktu z 'wyrenderowane i już' do 'piłujesz dalej' — Inspect mode do regulacji stylu element po elemencie, live dashboards awansują do pierwszorzędnej kategorii artefaktu, rubryka Design Jury bardziej wyostrzona. `od mcp` z v0.4.0 wciąż siedzi i nadal nawleka to wszystko na pozostałe coding agents na twoim laptopie.
Regulacja per element
Inspect mode — kliknij cokolwiek w preview.
Hover, klik, regulujesz computed style elementu — kolor, odstęp, rozmiar fontu — bez zawracania do agenta. Artefakt aktualizuje się na miejscu. Gdy pasuje, zmiany wracają do plików źródłowych.
v0.5.0 · PR #362
Pierwszorzędna kategoria
Live dashboards wskakują z demo do standardu.
Trzy nowe skille dashboard (`live-dashboard`, szablon `clinic-console` pod `live-artifact`, `flowai-live-dashboard-template`) plus prompt template team-dashboard w stylu Notion — wszystkie wpinają artefakty w prawdziwe konektory Composio. W panelu preview kręcą się dane na żywo, nie zamrożone mocki.
v0.5.0 · PR #778 + #795 + #801 + #799
Bramka jakości · Faza 5
Rubryka Design Jury idzie teraz przez system composer.
Rubryka każdego panelisty mieszka teraz w prompt template na poziomie panel, wstrzykiwana przez wspólny system composer. Z biegu na bieg oceny pozostają spójne. Persistencja, transcript i orkiestrator z Fazy 4 jadą dalej.
v0.5.0 · PR #524
Protokół
od mcp — Open Design jako MCP-serwer.
Odpal `od mcp` i każdy coding-agent mówiący MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) czyta wprost pliki, indeks search i metadane twojego projektu. Read-only na krawędzi. Projekt otwarty w aplikacji OD to teraz ten sam, który widzą wszystkie inne agenty.
v0.4.0 · PR #399
Rodowód Open Design
Z czego złożono Open Design.
alchaincyf
Kompas filozofii designu
huashu-design ↗
Workflow Junior-Designer, 5-krokowy protokół brand-asset, checklista anty-AI-slop, autokrytyka 5-wymiarowa oraz 5 szkół × 20 filozofii designu stojących za pickerem kierunku w Open Design.
op7418
Tryb deck
guizang-ppt-skill ↗
Włączone dosłownie pod skills/guizang-ppt/ z zachowanym oryginalnym LICENSE. Layouty w stylu magazynowym, hero WebGL i kultura checklist P0/P1/P2 przesiąkły do każdego innego skilla w Open Design.
OpenCoworkAI
Najbliższy krewny · gwiazda polarna UX
open-codesign ↗
Streamingowy artifact-loop, podgląd w sandboxowanym iframe, panel agenta na żywo (todos + tool calls + przerywalny), eksport do pięciu formatów, adnotacje w trybie komentarza. Format rozszedł się celowo — open-codesign dostarcza Electron + pi-ai, Open Design dostarcza web + lokalny daemon + twoje CLI.
multica-ai
Architektura daemona
multica ↗
Wykrywanie agenta przez skan PATH, lokalny daemon jako jedyny uprzywilejowany proces, spojrzenie na agenta jak na członka teamu. Open Design adoptuje model architektoniczny; samego kodu multica nie podpina.
Daj nam gwiazdkę
Jeśli to oszczędziło ci pół godziny — daj ★.
Gwiazdki nie płacą za czynsz, ale mówią kolejnemu designerowi, agentowi i contributorowi, że ten eksperyment wart jest ich uwagi.
Apache-2.0
Open source
110
Skills
141
Design Systems
16 + BYOK
CLI
FAQ
Częste pytania
Co to jest Open Design?
+
Open Design to open-source'owa alternatywa dla Claude Design od Anthropic. Działa lokalnie z pnpm tools-dev, wdraża się na Vercel i używa coding-agent CLI, które już masz (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 więcej) jako engine designu. Na licencji Apache-2.0.
Czym Open Design różni się od Claude Design?
+
Claude Design jest zamknięty, płatny (Pro/Max/Team), tylko cloud i przykuty do modelu i skills Anthropic. Open Design jest open source, BYOK, local-first i pozwala swobodnie zmieniać modele wśród 16 adapterów CLI lub dowolnego endpointa kompatybilnego z OpenAI / Azure / Google.
Czy Open Design może zastąpić Claude Design dla mojego teamu?
+
Jeśli potrzebujesz self-hostingu, elastyczności modeli lub własnych skills — tak. Pełny loop (wykryj agenta → wybierz skill + design system → czat → parse <artifact> → preview → save) jedzie od końca do końca. v0.4.x dodała Critique Theater (ocenę Design Jury przed wypuszczeniem), Tweaks mode (picker elementu + załączniki do czatu), Manual edit mode oraz live artifacts ciągnące dane na żywo z konektorów Composio.
Czy potrzebuję subskrypcji Claude Pro do używania Open Design?
+
Nie. Open Design używa coding-agent CLI, które już masz w PATH, lub dowolnego API key kompatybilnego z OpenAI przez proxy BYOK. Przynieś własne klucze providera, którego wolisz.
Jakie CLI coding-agentów wspiera Open Design?
+
16 z pudełka: 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 i Pi. Wykrywane automatycznie w PATH przy starcie daemona.
Jak zaimportować istniejący projekt Claude Design do Open Design?
+
Upuść ZIP eksportu Claude Design na dialog powitalny. POST /api/import/claude-design rozpakuje go do prawdziwego folderu .od/projects/<id>/, otworzy plik wejściowy jako zakładkę i przygotuje continue-prompt dla twojego lokalnego agenta.
Mogę self-hostować Open Design na Vercel?
+
Tak. Warstwa web to Next.js 16 + React 18 + TypeScript, wdrażalna na Vercel. Lokalny daemon zostaje na twoim laptopie. Topologia B (Vercel + tunel) dla w pełni zdalnych setupów jest w roadmapie.
Jak dodać własny design system do Open Design?
+
Wrzuć plik DESIGN.md do design-systems/<twoja-marka>/ zgodnie ze schematem 9 sekcji (kolor, typografia, spacing, layout, komponenty, motion, voice, marka, anti-patterny). Zrestartuj daemon — pojawia się w pickerze.
Czy Open Design jest darmowy? Jaka licencja?
+
Apache-2.0. Wbudowane skills/guizang-ppt/ i skills/html-ppt/ zachowują swoje oryginalne licencje MIT z zachowaną atrybucją. Bez płatnych planów. Bez limitów użycia. Jedyny koszt to to, co pobiera twój provider LLM.
Jak Open Design unika wyglądu AI-slop?
+
Formularz w turze 1 blokuje brief, zanim model zacznie malować. Picker 5 kierunków daje deterministyczne palety, gdy nie ma brand spec. Autokrytyka 5-wymiarowa ocenia output przed emitem. Każdy skill niesie checklistę P0/P1/P2 wymuszaną przez injection side-file'i w pre-flight. Agresywne fioletowe gradienty, generyczne emoji-ikony i Inter w roli display są jawnie zakazane w prompt stacku.
Czy mogę używać Open Design bez instalowania żadnego CLI?
+
Tak. POST /api/proxy/stream przekazuje chunki SSE do dowolnego endpointa kompatybilnego z OpenAI, Azure lub Google. Wklej baseUrl, apiKey i model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, twój self-hosted vLLM, shim Anthropic-via-OpenAI — wszystko działa. Z guardami SSRF na loopback i sieciach prywatnych.
Jak zwalidować konfig providera BYOK bez otwierania chatu?
+
Settings → Execution dostały przycisk Connection test (v0.5.0, PR #507). Wklej baseUrl + apiKey + model, kliknij Test — Open Design wysyła do providera minimalny handshake i pokazuje albo odpowiedź, albo dokładny error frame. Działa dla Anthropic, OpenAI-kompatybilnych, Azure i Google. Oszczędza objazd 'otwórz chat, śledź awarię', kiedy klucz jest zły, nazwa modelu z literówką albo gateway blokuje.
Czy moje dane lecą do Anthropic, kiedy używam Open Design?
+
Tylko jeśli wybierzesz model Anthropic (Claude Code lub przez proxy BYOK z kluczem Anthropic). Sam Open Design trzyma wszystko w lokalnym SQLite w .od/app.sqlite i w plikach per projekt pod .od/projects/. Nic nie leci na serwery Open Design — nie ma serwerów Open Design.
Czy moje inne coding-agenty mogą czytać projekty Open Design?
+
Tak. Odpal `od mcp` i Open Design wystawia się jako stdio MCP-serwer. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — każde narzędzie mówiące MCP — może czytać pliki twojego projektu, odpalać search i sprawdzać metadane. Interfejs read-only na krawędzi: czytanie plików, search, metadane. Bez powierzchni zapisu, bez wywołań zewnętrznych. Wypuszczone w v0.4.0.
Co to jest Critique Theater?
+
5-osobowa Design Jury, która ocenia każdy artefakt przed wypuszczeniem — dostępność, dopasowanie do marki, craft, treść, struktura. Persistencja + transcript + orkiestrator są od końca do końca od Phase 4 w v0.4.0. Poniżej skonfigurowanego progu agent przerabia i przelicza ocenę; powyżej — artefakt wychodzi.
Czym są live artifacts i jakie konektory są wspierane?
+
Live artifacts ciągną dane na żywo do panelu preview przez katalog konektorów Composio — GitHub, Linear, Notion, Gmail i więcej. Wbudowane skille orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion oraz social-media-dashboard pokazują pełne podpięcie. Wypuszczone w v0.4.0 (PR #381).
Wypuść
Wypuść swój pierwszy artefakt w trzy minuty.
Sklonuj repo. Odpal trzy komendy. Wpisz prompt. Patrz, jak przychodzi formularz, wypełnij go, patrz, jak streamuje się karta todo, patrz, jak renderuje się artefakt.