====== Open Design ====== //Vytvořeno: **2.5.2026** | Aktualizováno: **~~LASTMOD~~**// [[https://github.com/nexu-io/open-design|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 [[ai:platformy:claude-code:claude-design|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. ===== Co projekt řeší ===== 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. ===== Jak funguje ===== ==== Lokální agent jako design engine ==== 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. ==== Skills a design systémy ==== 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. ==== Discovery a preview workflow ==== 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 '''' a renderuje se v sandboxovaném iframe. Díky tomu lze návrh vidět přímo v aplikaci, ukládat ho a exportovat. ===== Architektura ===== 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//''. * **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. ===== Instalace a spuštění ===== [[https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md|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 ===== Režimy běhu ===== 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. ===== K čemu to dává smysl ===== 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. ===== Praktické poznámky a limity ===== * 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. ===== Zdroje ===== * [[https://github.com/nexu-io/open-design|Open Design – GitHub repozitář]] * [[https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md|Open Design – Quickstart]]