Open Design

Vytvořeno: 2.5.2026 | Aktualizováno: 02.05.2026 06:16

Open Design je open-source nástroj pro generování designových artefaktů pomocí AI coding agentů. Projekt se prezentuje jako lokální a otevřená alternativa ke Claude Design: místo vlastního uzavřeného agenta používá existující CLI agenty v počítači a nad nimi skládá workflow ze skills, design systémů a lokálního preview.

Open Design míří na situace, kdy je potřeba rychle vytvořit vizuální výstup, ale nechceš být zavřený v jednom cloudovém nástroji nebo jednom modelu.

Typické výstupy podle README a Quickstartu:

webové prototypy a landing pages,
dashboardy a dokumentační stránky,
mobilní obrazovky v rámech zařízení,
slide decky a webové prezentace,
marketingové výstupy jako plakáty, carousel nebo HTML e-mail,
exportovatelné artefakty jako HTML, PDF, PPTX, ZIP nebo Markdown.

Hlavní rozdíl proti čistému promptování v terminálu je v tom, že Open Design přidává nad coding agenta aplikační vrstvu: výběr skillu, design systému, discovery formulář, streamovaný plán práce, sandboxed preview a ukládání projektového stavu.

Open Design sám nedodává nový AI model ani vlastní coding agent. Lokální daemon při startu hledá podporované CLI nástroje na PATH a podle toho nabídne dostupné runtime. README uvádí například:

Claude Code,
Codex CLI,
Cursor Agent,
Gemini CLI,
OpenCode,
Qwen Code,
GitHub Copilot CLI,
Hermes,
Kimi,
Pi,
Kiro CLI.

Když je některý z těchto nástrojů dostupný, daemon ho spouští v adresáři konkrétního projektu. Agent pak pracuje s reálným filesystémem, čte šablony a zapisuje artefakty na disk.

Open Design používá skills jako běžné složky v repozitáři, typicky se souborem SKILL.md, assets a referencemi. Skill určuje typ výstupu a pravidla pro agenta. V repozitáři jsou například skills pro:

web-prototype,
saas-landing,
dashboard,
pricing-page,
docs-page,
mobile-app,
guizang-ppt,
simple-deck.

Design systémy jsou vedené jako Markdown soubory DESIGN.md. Podle README a Quickstartu jsou v projektu desítky až stovky připravených design systémů a designových skillů. Protože se počty v různých částech dokumentace liší a projekt se rychle vyvíjí, je lepší brát přesný počet jako aktuální stav repozitáře, ne jako stabilní vlastnost.

README popisuje workflow, ve kterém se agent nejdřív doptá přes formulář na důležité parametry návrhu: typ výstupu, publikum, tón, brand kontext, rozsah a omezení. Teprve potom generuje konkrétní artefakt.

Výsledek se z agentova výstupu parsuje jako <artifact> a renderuje se v sandboxovaném iframe. Díky tomu lze návrh vidět přímo v aplikaci, ukládat ho a exportovat.

Projekt je rozdělený na webovou aplikaci, lokální daemon a volitelný desktop shell.

Frontend: Next.js 16 App Router, React 18 a TypeScript.
Daemon: Node 24, Express, SSE streamování a SQLite přes better-sqlite3.
Agent runtime: spouštění CLI agentů přes child_process.spawn.
Persistence: lokální SQLite databáze v .od/app.sqlite a projektové soubory v .od/projects/<id>/.
Preview: sandboxovaný iframe nad vygenerovaným artefaktem.
Export: HTML, PDF, PPTX, ZIP a Markdown podle typu výstupu a použitého skillu.

Lokální složka .od/ je runtime stav aplikace. Quickstart výslovně uvádí, že je gitignorovaná, strojově lokální a nemá se commitovat.

Quickstart uvádí jako hlavní požadavky Node.js ~24 a pnpm 10.33.x. Primární cílové prostředí je macOS, Linux a WSL2; nativní Windows má fungovat pro většinu flow, ale WSL2 je bezpečnější základ.

Základní spuštění ve vývojovém režimu:

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

Po spuštění je potřeba otevřít webovou URL vypsanou příkazem tools-dev. První načtení podle Quickstartu detekuje dostupné lokální CLI agenty, načte skills a design systémy a vytvoří lokální runtime složku .od/.

Další užitečné příkazy:

pnpm tools-dev                 # daemon + web + desktop na pozadí
pnpm tools-dev start web       # daemon + web na pozadí
pnpm tools-dev run web         # daemon + web v popředí
pnpm tools-dev status          # stav runtime
pnpm tools-dev logs            # logy
pnpm tools-dev check           # stav + diagnostika
pnpm tools-dev stop            # zastavení runtime
pnpm build                     # produkční build
pnpm typecheck                 # TypeScript kontrola workspace

Dokumentace popisuje dva hlavní způsoby použití:

Local CLI: frontend pošle požadavek daemonu, daemon spustí lokálního agenta a streamuje výstup zpět do UI.
BYOK/API fallback: pokud není dostupný lokální CLI agent, lze použít API režim s vlastním klíčem podle nastavení v aplikaci.

V obou případech se používá stejný parser artefaktů a stejné preview v aplikaci. Liší se jen transport k modelu nebo agentovi.

Open Design je zajímavý hlavně jako mezivrstva mezi AI coding agentem a vizuálním návrhem. Prakticky dává smysl pro:

rychlé prototypování UI bez ručního zakládání projektu,
návrh landing page nebo dashboardu v konkrétním brand stylu,
generování webových slidů a export do prezentačních formátů,
testování různých design systémů nad stejným zadáním,
lokální workflow, kde má agent přístup k souborům a artefakty zůstávají na disku.

Proti čistému Claude Code nebo OpenCode session je přínos hlavně v hotové UI vrstvě okolo designového workflow. Proti Claude Design je zase zajímavé lokální spuštění, open-source kód a možnost použít různé agenty místo jednoho uzavřeného stacku.

Projekt podle README stojí na lokálním daemonu. Není to jen statická webová aplikace.
Pro nejlepší lokální workflow je potřeba mít nainstalovaný aspoň jeden podporovaný coding-agent CLI.
Pokud media generation selže kvůli proměnným typu OD_BIN nebo OD_DAEMON_URL, Quickstart doporučuje rebuild daemon CLI a restart runtime.
Při použití nginx před daemonem je potřeba nebufferovat SSE odpovědi a vypnout gzip pro /api/ routy.
Vzhledem k rychlému vývoji projektu je vhodné ověřit aktuální počty skills, design systémů a podporovaných agentů přímo v README a Quickstartu.