Articol scris in stilul (Voice Brand) lui Ion Creanga.

Ce e cu acest OpenDesign, pe scurt și pe înțelesul tuturor

Era odată, nu demult, uneltele de design cu minte artificială: închise în turnuri de nori, plătite pe abonament, legate de-un singur model și de-un singur stăpân. OpenDesign e răspunsul deschis la povestea asta — o aplicație de birou local-first pentru macOS și Windows, sub licență Apache-2.0, care transformă agentul de codare de pe calculatorul tău într-un motor de design: prototipuri, dashboarduri, prezentări, imagini și video, toate fișiere adevărate, exportabile în HTML, PDF, PPTX și MP4. Nu vine cu agent propriu, ci se leagă de ce ai deja — Claude Code, Codex, Cursor, DeepSeek Harness și alte câteva zeci de CLI-uri — sau de orice endpoint compatibil OpenAI, prin BYOK. Și aduce cu sine peste 100 de skilluri funcționale, 151 de sisteme de design și 277 de pluginuri oficiale.

De unde a pornit povestea și de ce contează acum

Și cum stau lucrurile în gospodăria designului, așa stau și în cea a inteligenței artificiale: în aprilie 2026, Anthropic a lansat Claude Design — pentru prima dată, un model nu mai scria proză, ci livra direct artefacte de design. A făcut vâlvă, dar a rămas închis: doar cu plată, doar în nor, doar cu modelul, skillurile și suprafața celor de la Anthropic. Fără self-host, fără deploy pe Vercel, fără să-ți aduci propriul agent.

OpenDesign — OD, cum îl alintă README-ul — e varianta open-source a aceleiași bucle: descoperi brieful, fixezi direcția, primești artefactul în flux, îl critici, îl livrezi. Numai că de data asta bucla nu stă într-un serviciu închis, ci într-un sistem de fișiere plin cu skilluri funcționale, șabloane de randare, sisteme de design și pluginuri, pe care agenții de codare de pe laptopul tău le pot citi, scrie și remixa. CLI-ul devine motorul de design, laptopul devine atelierul, iar fișierul DESIGN.md al echipei devine contractul de brand.

Proiectul se prezintă și ca o alternativă Figma pentru era agenților: în loc să împingi pixeli pe o pânză, primești artefacte de o pagină în CSS adevărat, cu fonturi adevărate și componente adevărate, exportate direct în HTML, PDF, PPTX sau MP4 — deja modelate de sistemul tău de design, deja rulabile în agentul pe care îl folosești zi de zi.

Cum funcționează, pe înțelesul meșterului

Un daemon local și o armată de agenți

Arhitectura e simplă ca la gospodar: un frontend în Next.js 16 cu React 18 și TypeScript, într-un shell Electron pentru desktop, stă de vorbă cu un daemon local — Node 24, Express, streaming pe SSE și better-sqlite3. Daemonul e singurul proces privilegiat: el lansează CLI-urile de agenți, el ține registrele de skilluri, șabloane, sisteme de design și pluginuri, el expune serverul MCP pe stdio și proxy-ul BYOK.

Registrul de runtime-uri are 27 de definiții, sprijinite pe 26 de executabile CLI distincte — pentru că byok-opencode împarte executabilul cu OpenCode. DeepSeek Harness are statut de runtime nativ de primă clasă, prin CLI-ul oficial dsh, cu streaming structurat, descoperire de modele, anulare și reluare de sesiune. Pentru restul agenților, instalarea e o singură comandă:

• od mcp install claude pentru Claude Code

• od mcp install codex pentru Codex CLI

• od mcp install cursor pentru Cursor

• od agent setup deepseek-harness pentru DeepSeek Harness

• și tot așa pentru Copilot, OpenCode, OpenClaw, Antigravity, Cline, Trae, Kimi, Kiro, Pi, Mistral Vibe, Hermes, Raven și Reasonix

O chichiță vrednică de povestit: pe macOS și WSL2, /usr/bin/od e comanda de sistem pentru octal-dump și poate umbri comanda OpenDesign. Cei cu aplicația de desktop au la îndemână fragmentul din Settings → MCP server, cu căi absolute, iar cei pe WSL2 au un ghid dedicat în docs/wsl-setup.md.

BYOK, când n-ai niciun CLI instalat

Dacă n-ai niciun agent pe PATH, proxy-ul BYOK de la POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream îți dă aceeași buclă, fără proces lansat: lipești baseUrl, apiKey și model, cu preseturi pentru OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM sau orice endpoint compatibil OpenAI. La marginea daemonului stă de strajă o protecție SSRF care blochează IP-urile interne, link-local și CGNAT.

Pentru gateway-uri găzduite intern — un LiteLLM sau un Ollama pe o adresă de VPN — există OD_ALLOWED_INTERNAL_HOSTS, o listă albă strict opt-in, goală implicit, cu potrivire exactă pe host. O intrare greșită sau notația CIDR, care nu e suportată, e aruncată cu avertisment, nu acceptată pe furiș — ca la poartă, nu intri decât dacă ești pe listă.

Ce iese din atelier: artefacte, nu vorbe

În Studio-ul unui proiect, conversația, fișierele generate și previzualizarea live stau împreună, peste șase tipuri de artefacte: prototip, prezentare, aplicație mobilă, imagine, document și HyperFrame. Previzualizarea rulează într-un iframe izolat, iar exportul acoperă HTML cu resurse inline, PDF prin tipărirea browserului, PPTX printr-un skill condus de agent, ZIP, Markdown și MP4 prin HyperFrames.

Prototipuri și dashboarduri vii

Suprafața implicită e prototipul: artefacte HTML de o pagină care citesc DESIGN.md-ul activ și se randează în iframe-ul izolat. Dashboardurile vii trag date printr-un panou de tweaks — agentul emite un manifest, iar iframe-ul se re-randează fără reîncărcare. Un prototip mobil se poate preda direct în Cursor, Codex sau Claude Code, ca să devină React, Next sau Vue.

Prezentări, imagini și mișcare

Modul deck aduce șablonul guizang-ppt — machete de revistă, hero WebGL, liste de verificare P0/P1/P2 — împachetat verbatim din op7418/guizang-ppt-skill, cu licența originală păstrată, plus 15 șabloane de prezentări și 36 de teme sub design-templates/html-ppt-*/. Pentru imagini, 93 de prompturi gata de replicat stau în prompt-templates/, cu miniaturi, model țintă, raport de aspect și atribuirea sursei. Iar pentru video, HyperFrames — framework-ul open-source al celor de la HeyGen, tot Apache-2.0 — scrie HTML, CSS și GSAP și randează un MP4 determinist prin Chrome headless și FFmpeg; repo-ul aduce 11 șabloane HyperFrames și 39 de prompturi Seedance.

277 de pluginuri oficiale, 183 de exemple remixabile, 151 de sisteme de design și peste 100 de skilluri funcționale — toate livrate în repo, toate în directoare portabile și versionabile.README-ul proiectului OpenDesign

Patru plane care se compun ca uneltele în cămară

OpenDesign se compune pe patru plane, fiecare cu rostul lui:

Pluginuri

Fluxuri de lucru rulabile, ancorate de un manifest open-design.json — 277 oficiale, de la scenarii complete la șabloane de imagine și video.

Skilluri funcționale

Comportament reutilizabil de agent, după convenția SKILL.md — peste 100, în skills/.

Șabloane de design

Planuri de randare pentru prototipuri, deckuri, imagini, video și utilitare, grupate pe moduri și scenarii de public.

Sisteme de design

Contractul de brand: 151 de pachete centrate pe DESIGN.md, de la Claude și Cursor la Stripe, Shopify și Tesla, plus startere proprii.

Catalogul de șabloane are două moduri ancoră — prototype pentru artefacte de o pagină și deck pentru prezentări — iar câmpul scenario grupează pe public: design, marketing, operațiuni, inginerie, produs, finanțe, HR, vânzări, personal. Schimbi sistemul de design, și următoarea randare folosește noile tokenuri. Vrei propriul brand? Pune un DESIGN.md în design-systems/<brand>/ și selectorul îl găsește.

Cifrele pe care le poți compara

README-ul pune față în față OpenDesign cu alternativele închise, pe rândurile care contează pentru o echipă:

Tabelul e comparația proiectului, nu un audit independent — dar rândurile sunt verificabile: licența e în repo, comenzile de instalare sunt în README, iar numărătoarea pluginurilor și sistemelor de design e ancorată în directoarele plugins/_official/ și design-systems/.

Din brief în artefact, pas cu pas

Fluxul complet sună așa: brief → plugin → direcție → sistem de design → artefact → predare → memorie.

1. Un PM trimite un brief. Selectorul de pluginuri oferă landing page, pitch deck, dashboard, postare social, specificație de produs, scorcard OKR.

2. Un designer — sau agentul — fixează direcția. Fără brand, alegi din 5 direcții curate; cu brand, dai o captură sau un URL, iar agentul codifică un DESIGN.md reutilizabil.

3. Agentul creează primul livrabil. În rulări CLI cu sistem de fișiere, scrie fișierele canonice ale proiectului și previzualizarea le urmează; în rulări BYOK fără unelte de fișiere, întoarce un bloc <artifact> complet.

4. Predarea către inginerie. Artefactul e HTML/CSS adevărat — îl duci în Cursor, Codex sau Claude Code și construiești mai departe, sau exporți PPTX, PDF ori MP4 direct către marketing.

5. OpenDesign învață pe parcurs. Capturile, fonturile, paletele și artefactele confirmate se adună ca valori implicite pentru sesiunea următoare.

Există și drumul scurt: descarci aplicația de desktop pentru macOS (Apple Silicon sau Intel) sau Windows (x64) — Linux AppImage pe o linie opțională — și la pornire ea detectează singură CLI-urile de agenți de pe PATH, încarcă skillurile, șabloanele și sistemele de design și te lasă să scrii brieful. Pentru self-host, deploy/ are un flux Docker Compose cu OD_API_TOKEN generat local și autentificare Basic pe proxy, iar pentru rulare din sursă ajung corepack enable && pnpm install și pnpm tools-dev run web, pe Node ~24 și pnpm 10.33.x.

Siguranța, căci și gospodăria digitală are poartă

Serverul MCP e read-only implicit, daemonul se leagă de 127.0.0.1, iar SSRF e blocat la marginea proxy-ului. Expunerea în LAN cere explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS, iar credențialele conectorilor și rutele de previzualizare rămân doar pe loopback orice ai face. Analitica de produs și replay-ul de sesiune sunt condiționate de consimțământ; telemetria de siguranță și fiabilitate, curățată, e mereu pornită. De menționat și că OpenDesign Cloud există ca serviciu oficial de modele în aplicație — o reîncărcare pentru modele de agent și de imagine — dar nucleul rămâne local-first: totul rulează acolo unde îți stau datele.

Ce urmează și unde mai are de crescut

Foaia de parcurs arată multe căsuțe bifate — daemonul cu cele 27 de runtime-uri, aplicația web cu previzualizare izolată, piața de pluginuri din 0.8.0, OpenDesign Cloud din 0.9.0, spațiul de lucru all-in-one din 0.10.0, bazarul comunitar din 0.11.0, sistemele de design din branduri proprii din 0.12.0 și reluarea de sesiune din 0.13.0 — dar și treabă neterminată:

• Editările chirurgicale în modul comentariu sunt parțial livrate; patch-urile țintite fiabile sunt în lucru.

• Panoul de tweaks emis de AI nu e încă implementat la nivel de interfață.

• npx od init pentru schelet de proiect cu DESIGN.md e pe listă, neînceput.

• SDK-ul de pluginuri și comenzile od plugin {add,list,remove,test,publish} la fel.

• Pluginurile de migrare Figma / Pencil → React / Next / Vue sunt în stadiu alpha.

Merită pomenită și neamul din care se trage proiectul, căci README-ul îl recunoaște cinstit: alchaincyf/huashu-design pentru busola de filozofie a designului, op7418/guizang-ppt-skill și lewislulu/html-ppt-skill pentru prezentări (ambele sub MIT, cu licențele păstrate), OpenCoworkAI/open-codesign ca primă alternativă open-source la Claude Design, multica-ai/multica pentru arhitectura daemon + adaptoare, VoltAgent/awesome-design-md pentru schema originală DESIGN.md, bergside/awesome-design-skills pentru 57 de skilluri de design și heygen-com/hyperframes pentru motorul HTML→MP4.

Întrebări frecvente

Cum instalez OpenDesign în agentul meu de codare?

Cu o singură comandă: od mcp install <agent>, unde agentul poate fi claude, codex, cursor, copilot, opencode, hermes, kimi și altele — peste 16 CLI-uri suportate. Există și varianta găzduită: curl -fsSL https://open-design.ai/install.sh | sh -s <agent>. Pe macOS, atenție la /usr/bin/od, comanda de sistem care poate umbri binarul OpenDesign — folosește fragmentul din Settings → MCP server.

Pot folosi OpenDesign fără interfața grafică?

Da. OpenDesign livrează un server MCP pe stdio și scripturi de instalare per agent, deci orice agent compatibil MCP poate citi direct fișierele proiectelor tale — tokenuri CSS, componente JSX, HTML de intrare — ca pe un API structurat. Comenzile od project list --json, od files list și od plugin list --json funcționează fără UI și se pot lega în automatizări cu jq sau xargs.

Cum îmi aduc propriul brand în OpenDesign?

Creezi un director în design-systems/<brand>/ cu un fișier DESIGN.md în centru — asta e contractul de brand pe care fiecare randare îl citește. Pachetele mai noi pot adăuga manifest.json, tokens.css, componente, resurse și dovezi de proveniență. Poți porni și de la o captură de ecran sau un URL, iar agentul codifică sistemul pentru tine.

Ce licență are OpenDesign și componentele incluse?

Proiectul e sub Apache-2.0. Skillurile și șabloanele împachetate cu propriile fișiere LICENSE își păstrează licențele: design-templates/guizang-ppt/ și design-templates/html-ppt/ sunt MIT (de la @op7418, respectiv @lewislulu), la fel skills/web-clone/ (@Jane-xiaoer). Framework-ul HyperFrames de la HeyGen e tot Apache-2.0.

📊 Ce înseamnă asta pentru echipele care aleg uneltele

• Alternativă deschisă, nu doar ieftină: OpenDesign reproduce bucla agent-nativă a lui Claude Design, dar sub Apache-2.0, cu self-host pe desktop, Docker sau Vercel și fără legare de un singur model.

• Agentul tău rămâne motorul: 27 de definiții de runtime pe 26 de CLI-uri distincte, plus BYOK pentru orice endpoint compatibil OpenAI — schimbi agentul dintr-un clic, nu dintr-un contract nou.

• Brandul e cod, nu bun-simț: cele 151 de sisteme de design centrate pe DESIGN.md fac fiecare randare conformă cu contractul de brand, iar propriul brand intră cu un singur fișier.

• Livrabilul e real: HTML, PDF, PPTX, MP4 — artefacte în CSS și componente adevărate, predabile direct ingineriei sau marketingului, nu capturi de ecran dintr-un editor închis.

• Verifică înainte de producție: editările chirurgicale și panoul de tweaks emis de AI sunt încă în lucru, iar pluginurile de migrare Figma sunt alpha — planifică în consecință.

Resurse suplimentare

• nexu-io/open-design — 🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Yo

Acest articol include conținut creat cu ajutorul inteligenței artificiale.