Open Design [Wiki]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== 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 ''<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.

===== 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/<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.

===== 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:

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

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:

<code bash>
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
</code>

===== 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]]