Co-authored-by: open-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com>
71 KiB
Open Design â lâalternative open source officielle Ă Claude Design
Open Design est lâalternative open source et local-first Ă Claude Design. DĂ©ployable sur le web, BYOK Ă chaque couche : vos CLI de coding agents dĂ©tectĂ©es automatiquement dans le
PATHdeviennent le design engine, pilotĂ© par les catalogues de Skills et de Design Systems du repo. Aucune CLI ? Le proxy BYOK multi-provider exĂ©cute la mĂȘme boucle, sans spawn local.
Important
đ„
0.8.0-previewest lĂ . L'ancien monde du design s'arrĂȘte ici.Une alternative open source Ă Claude Design / Figma â 40k Ă©toiles en deux semaines nous ont menĂ©s jusqu'ici. Nous avons besoin de toi pour faire le reste du chemin.
Itération rapide sur
mainâ 0.8.0 est la prochaine phase d'Open Design. Envoie une PR, balance une idĂ©e folle, signale un bug â ce que tu apportes, c'est ce que ce mouvement devient.â Lire l'annonce · tĂ©lĂ©charger l'installateur · rejoindre le mouvement · s'installe Ă cĂŽtĂ© de votre 0.7 actuel.
English · Español · PortuguĂȘs (Brasil) · Deutsch · Français · çźäœäžæ · çčé«äžæ · íê”ìŽ Â· æ„æŹèȘ · ۧÙŰč۱ۚÙŰ© · Đ ŃŃŃĐșĐžĐč · ĐŁĐșŃаŃĐœŃŃĐșа · TĂŒrkçe
Pourquoi ce projet existe
Claude Design dâAnthropic, lancĂ© le 17 avril 2026 avec Opus 4.7, a montrĂ© ce qui se passe lorsquâun LLM cesse de produire seulement du texte et commence Ă livrer des design artifacts. Le produit est devenu viral, tout en restant closed-source, paid-only, cloud-only et liĂ© au modĂšle comme aux Skills dâAnthropic. Aucun checkout possible, aucun self-hosting, aucun dĂ©ploiement Vercel, aucun remplacement par votre propre agent.
Open Design (OD) est lâalternative open source. MĂȘme boucle, mĂȘme mental model artifact-first, sans lock-in. Nous ne livrons pas dâagent : les meilleurs coding agents vivent dĂ©jĂ sur votre machine. OD les branche sur un workflow de design pilotĂ© par des Skills, exĂ©cutable localement avec pnpm tools-dev, dĂ©ployable sur Vercel cĂŽtĂ© web, avec BYOK Ă chaque couche.
Tapez make me a magazine-style pitch deck for our seed round. Le question form interactif apparaĂźt avant que le modĂšle nâimprovise le moindre pixel. Lâagent choisit lâune des cinq directions visuelles soigneusement sĂ©lectionnĂ©es. Un plan TodoWrite live arrive dans lâUI. Le daemon crĂ©e un vrai dossier projet sur disque avec un seed template, une layout library et une checklist de self-check. Lâagent les lit, le pre-flight est obligatoire, puis il lance une critique en cinq dimensions sur sa propre sortie et Ă©met un seul <artifact>, rendu quelques secondes plus tard dans une iframe sandboxĂ©e.
Le rĂ©sultat dĂ©passe lâidĂ©e dâune IA qui tente simplement de faire du design. Le prompt stack pousse lâIA Ă se comporter comme un senior designer avec un vrai filesystem, une bibliothĂšque de palettes dĂ©terministe et une culture de checklist, au niveau fixĂ© par Claude Design, en version ouverte et sous votre contrĂŽle.
OD sâappuie sur quatre projets open source :
alchaincyf/huashu-design, la boussole de design philosophy. Le workflow Junior-Designer, le protocole en 5 Ă©tapes pour les assets de marque, la checklist anti-AI-slop, la self-critique en 5 dimensions et lâidĂ©e « 5 Ă©coles Ă 20 philosophies design » derriĂšre notre direction picker sont condensĂ©s dansapps/daemon/src/prompts/discovery.ts.op7418/guizang-ppt-skill, le mode deck. Inclus tel quel sousskills/guizang-ppt/, avec licence originale prĂ©servĂ©e ; layouts magazine, hero WebGL, checklists P0/P1/P2.OpenCoworkAI/open-codesign, notre UX north star et le projet le plus proche. Nous reprenons sa streaming-artifact loop, son pattern de preview en iframe sandboxĂ©e (React 18 + Babel vendored), son live agent panel (todos + tool calls + gĂ©nĂ©ration interruptible) et ses cinq formats dâexport (HTML / PDF / PPTX / ZIP / Markdown). Nous divergeons volontairement sur le format : ils livrent une app desktop Electron avecpi-aiintĂ©grĂ© ; nous sommes une web app + daemon local qui dĂ©lĂšgue Ă la CLI dĂ©jĂ installĂ©e chez vous.multica-ai/multica, lâarchitecture daemon et runtime. DĂ©tection des agents dans lePATH, daemon local comme seul processus privilĂ©giĂ©, vision agent-as-teammate.
En un coup dâĆil
| Ce que vous obtenez | |
|---|---|
| CLI de coding agents (16) | Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Kilo (ACP) · Mistral Vibe CLI (ACP) · DeepSeek TUI, détectées automatiquement dans PATH, interchangeables en un clic |
| BYOK fallback | Proxy API par protocole sur /api/proxy/{anthropic,openai,azure,google}/stream : collez baseUrl + apiKey + model, choisissez Anthropic / OpenAI / Azure OpenAI / Google Gemini, et le daemon normalise le SSE vers le mĂȘme chat stream. Les destinations internal IP / SSRF sont bloquĂ©es cĂŽtĂ© daemon. |
| Design Systems intégrés | Le menu déroulant charge les Design Systems depuis design-systems/*/DESIGN.md : starters écrits à la main, product systems importés depuis awesome-design-md et design skills normalisés depuis awesome-design-skills. |
| Skills intégrés | Le picker charge les Skills depuis skills/*/SKILL.md et les regroupe par mode / scenario : prototype, deck, image, video, audio, Design System, utility, puis notamment design / marketing / operations / engineering / product / finance / hr / sales / personal. |
| GĂ©nĂ©ration mĂ©dia | Les surfaces image, vidĂ©o et audio sont livrĂ©es avec la design loop. gpt-image-2 (Azure / OpenAI) pour posters, avatars, infographies et cartes illustrĂ©es ; Seedance 2.0 (ByteDance) pour du text-to-video et image-to-video cinĂ©matique de 15 s ; HyperFrames (heygen-com/hyperframes) pour des motion graphics HTMLâMP4. La galerie prompt-templates/ fournit des prompts prĂȘts Ă reproduire, avec thumbnails et attribution. MĂȘme surface de chat que le code ; les sorties deviennent de vrais fichiers .mp4 / .png dans le workspace du projet. |
| Directions visuelles | 5 écoles soigneusement sélectionnées (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental), chacune avec palette OKLch déterministe + font stack (apps/daemon/src/prompts/directions.ts) |
| Frames dâappareils | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome, pixel-accurate et partagĂ©s entre Skills sous assets/frames/ |
| Agent runtime | Le daemon local lance la CLI dans le dossier projet. Lâagent reçoit de vrais Read, Write, Bash, WebFetch sur un environnement disque rĂ©el, avec fallback Windows ENAMETOOLONG (stdin / prompt-file) sur chaque adapter |
| Imports | DĂ©posez un ZIP exportĂ© depuis Claude Design dans le welcome dialog : POST /api/import/claude-design le convertit en vrai projet pour que votre agent continue lĂ oĂč Anthropic sâest arrĂȘtĂ© |
| Persistance | SQLite dans .od/app.sqlite : projects · conversations · messages · tabs · saved templates. Rouvrez demain, la todo card et les fichiers ouverts sont au mĂȘme endroit. |
| Lifecycle | Un seul point dâentrĂ©e : pnpm tools-dev (start / stop / run / status / logs / inspect / check), qui dĂ©marre daemon + web (+ desktop) avec des typed sidecar stamps |
| Desktop | Shell Electron optionnel avec renderer sandboxĂ© + sidecar IPC (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN), utilisĂ© par tools-dev inspect desktop screenshot pour lâE2E |
| DĂ©ployable sur | Local (pnpm tools-dev) · couche web Vercel · application desktop Electron empaquetĂ©e pour macOS (Apple Silicon) et Windows (x64) â tĂ©lĂ©chargement sur open-design.ai ou la derniĂšre release |
| Licence | Apache-2.0 |
Démo
![]() Vue dâentrĂ©e : choisissez un Skill, un Design System, puis saisissez le brief. La mĂȘme surface sert aux prototypes, decks, apps mobiles, dashboards et pages Ă©ditoriales. |
![]() Question form de dĂ©couverte : avant que le modĂšle nâĂ©crive un pixel, OD verrouille le brief : surface, audience, ton, contexte de marque, Ă©chelle. 30 secondes de boutons radio valent mieux que 30 minutes dâallers-retours. |
![]() Direction picker : quand lâutilisateur nâa pas de marque, lâagent Ă©met un second formulaire avec 5 directions soigneusement sĂ©lectionnĂ©es. Un clic radio â palette + font stack dĂ©terministes, sans freestyle du modĂšle. |
![]() Progression todo live : le plan de lâagent arrive comme carte live. Les Ă©tats in_progress â completed se mettent Ă jour en temps rĂ©el. Lâutilisateur peut corriger le tir Ă faible coĂ»t pendant le travail.
|
![]() Preview sandboxée : chaque <artifact> est rendu dans une iframe srcdoc propre. Modifiable sur place via le file workspace ; téléchargeable en HTML, PDF, ZIP.
|
![]() BibliothĂšque de Design Systems : chaque product system montre sa signature en 4 couleurs. Cliquez pour le DESIGN.md complet, la grille de swatches et le showcase live.
|
![]() Mode deck (guizang-ppt) : le guizang-ppt-skill inclus fonctionne tel quel. Layouts magazine, arriĂšre-plans hero WebGL, sortie HTML single-file, export PDF.
|
![]() Prototype mobile : chrome iPhone 15 Pro pixel-accurate (Dynamic Island, SVGs de status bar, home indicator). Les prototypes multi-écrans utilisent les assets partagés /frames/.
|
Skills
Les Skills livrés avec le repo sont des dossiers sous skills/ suivant la convention SKILL.md de Claude Code, avec un frontmatter od: étendu que le daemon lit tel quel : mode, platform, scenario, preview.type, design_system.requires, default_for, featured, fidelity, speaker_notes, animations, example_prompt (apps/daemon/src/skills.ts).
Le champ mode structure le catalogue (prototype, deck, image, video, audio, design-system, utility, etc.). Le champ scenario sert au regroupement dans le picker, avec des labels comme design · marketing · operations · engineering · product · finance · hr · sales · personal, et dâautres selon les Skills.
Exemples showcase
Les Skills visuellement distinctifs que vous lancerez probablement en premier. Chacun livre un vrai example.html que vous pouvez ouvrir depuis le repo pour voir ce que lâagent produira, sans auth ni setup.
![]() dating-web · prototypeDashboard consumer dating / matchmaking : navigation gauche, ticker bar, KPIs, graphique de mutual matches sur 30 jours, typographie éditoriale. |
![]() digital-eguide · templateE-guide numérique en deux spreads : couverture (titre, auteur, teaser de sommaire) + page de leçon avec pull-quote et étapes. Ton creator / lifestyle. |
![]() email-marketing · prototypeEmail HTML de lancement produit : masthead, image hero, bloc titre, CTA, grille de specs. Colonne unique centrée, compatible fallback table. |
![]() gamified-app · prototypePrototype mobile gamifiĂ© en trois frames sur scĂšne sombre : cover, quĂȘtes du jour avec rubans XP + barre de niveau, dĂ©tail de quĂȘte. |
![]() mobile-onboarding · prototypeOnboarding mobile en trois frames : splash, value prop, sign-in. Status bar, dots de swipe, CTA principal. |
![]() motion-frames · prototypeHero motion-design single-frame avec animations CSS en boucle : anneau typo rotatif, globe animĂ©, timer. PrĂȘt pour handoff HyperFrames. |
![]() social-carousel · prototypeCarousel social 1080Ă1080 en trois cartes : panneaux cinĂ©matiques avec titres display liĂ©s entre eux, marque, affordance de boucle. |
sprite-animation · prototypeSlide explicative pixel / 8-bit animée : scÚne crÚme plein cadre, mascotte pixel animée, typographie display japonaise cinétique, keyframes CSS en boucle. |
Surfaces design & marketing (mode prototype)
| Skill | Plateforme | Scénario | Produit |
|---|---|---|---|
web-prototype |
desktop | design | HTML single-page : landings, marketing, hero pages (défaut pour prototype) |
saas-landing |
desktop | marketing | Layout marketing hero / features / pricing / CTA |
dashboard |
desktop | operations | Admin / analytics avec sidebar + data dense |
pricing-page |
desktop | sales | Page pricing autonome + tableaux de comparaison |
docs-page |
desktop | engineering | Documentation en 3 colonnes |
blog-post |
desktop | marketing | Long-form éditorial |
mobile-app |
mobile | design | Ăcran(s) app dans frame iPhone 15 Pro / Pixel |
mobile-onboarding |
mobile | design | Flow onboarding mobile multi-écrans (splash · value-prop · sign-in) |
gamified-app |
mobile | personal | Prototype mobile gamifié en trois frames |
email-marketing |
desktop | marketing | Email HTML de lancement produit (table-fallback safe) |
social-carousel |
desktop | marketing | Carousel social 1080Ă1080 en 3 cartes |
magazine-poster |
desktop | marketing | Poster single-page style magazine |
motion-frames |
desktop | marketing | Hero motion-design avec animations CSS en boucle |
sprite-animation |
desktop | marketing | Slide explicative pixel / 8-bit animée |
dating-web |
desktop | personal | Mockup dashboard dating consumer |
digital-eguide |
desktop | marketing | E-guide en deux spreads (couverture + leçon) |
wireframe-sketch |
desktop | design | Sketch dâidĂ©ation dessinĂ© Ă la main pour montrer quelque chose tĂŽt |
critique |
desktop | design | Scorecard de self-critique en cinq dimensions (Philosophie · Hiérarchie · Détail · Fonction · Innovation) |
tweaks |
desktop | design | Panneau dâajustements Ă©mis par lâIA, oĂč le modĂšle expose les paramĂštres Ă retoucher |
Surfaces deck (mode deck)
| Skill | Défaut pour | Produit |
|---|---|---|
guizang-ppt |
défaut pour deck | PPT web style magazine, inclus tel quel depuis op7418/guizang-ppt-skill |
simple-deck |
n/a | Deck HTML minimal Ă swipe horizontal |
replit-deck |
n/a | Deck walkthrough produit (style Replit) |
weekly-update |
n/a | Cadence weekly dâĂ©quipe en deck swipe (progress · blockers · next) |
Surfaces office & opérations
| Skill | Scénario | Produit |
|---|---|---|
pm-spec |
product | Spec PM avec table des matiĂšres + decision log |
team-okrs |
product | Scorecard OKR |
meeting-notes |
operations | Notes de réunion et decision log |
kanban-board |
operations | Snapshot de board |
eng-runbook |
engineering | Runbook dâincident |
finance-report |
finance | Résumé finance exécutif |
invoice |
finance | Facture single-page |
hr-onboarding |
hr | Plan dâonboarding par rĂŽle |
Ajouter un Skill revient Ă ajouter un dossier. Lisez docs/skills-protocol.md pour le frontmatter od: Ă©tendu, forkez un Skill existant, redĂ©marrez le daemon, il apparaĂźt dans le picker. Lâendpoint catalogue est GET /api/skills; lâassemblage seed par Skill est exposĂ© par GET /api/skills/:id/example.
Six idées structurantes
1 · Nous ne livrons pas dâagent. Le vĂŽtre suffit.
Au dĂ©marrage, le daemon scanne votre PATH avec les dĂ©finitions de apps/daemon/src/agents.ts : Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro CLI, Mistral Vibe CLI et les adapters ajoutĂ©s plus tard. Ceux quâil trouve deviennent des design engines candidats, pilotĂ©s via stdio avec un adapter par CLI et interchangeables depuis le model picker. InspirĂ© par multica et cc-switch. Aucune CLI installĂ©e ? Le mode API suit la mĂȘme pipeline, sans spawn local : choisissez Anthropic, OpenAI-compatible, Azure OpenAI ou Google Gemini, et le daemon renvoie les chunks SSE normalisĂ©s, avec rejet des destinations loopback / link-local / RFC1918.
2 · Les Skills sont des fichiers, pas des plugins.
Selon la convention SKILL.md de Claude Code, un Skill est au minimum un SKILL.md ; assets/ et references/ sont des side files optionnels. Déposez un dossier dans skills/, redémarrez le daemon, il apparaßt dans le picker. Le magazine-web-ppt inclus est op7418/guizang-ppt-skill committé tel quel, avec licence originale et attribution préservées.
3 · Les Design Systems sont du Markdown portable, pas du JSON de thÚme.
Le schĂ©ma DESIGN.md en 9 sections vient de VoltAgent/awesome-design-md : color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Chaque artifact lit le Design System actif. Changez de Design System, le prochain rendu utilise les nouveaux tokens. Le menu dĂ©roulant charge les dossiers design-systems/*/DESIGN.md : Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, XiaohongshuâŠ, ainsi que des design skills normalisĂ©s depuis awesome-design-skills.
4 · Le question form évite 80 % des allers-retours.
Le prompt stack dâOD impose RULE 1 : tout nouveau design brief commence par un <question-form id="discovery"> au lieu de code. Surface · audience · tone · brand context · scale · contraintes. MĂȘme un long brief laisse des dĂ©cisions design ouvertes, comme le ton visuel, la posture couleur ou lâĂ©chelle ; le formulaire les verrouille en 30 secondes. Une mauvaise direction coĂ»te un tour de chat, pas un deck terminĂ©.
Câest le mode Junior-Designer tirĂ© de huashu-design : poser les questions dĂšs le dĂ©part, montrer vite quelque chose de visible, mĂȘme un wireframe en blocs gris, et permettre Ă lâutilisateur de corriger le tir Ă faible coĂ»t. CombinĂ© au protocole brand-asset (locate · download · grep hex · write brand-spec.md · vocalise), câest la raison principale pour laquelle la sortie cesse de ressembler Ă du freestyle IA et commence Ă ressembler Ă un designer qui a observĂ© avant de peindre.
5 · Le daemon donne lâimpression que lâagent est sur votre laptop, parce quâil lâest.
Le daemon lance la CLI avec cwd pointant vers le dossier artifact du projet sous .od/projects/<id>/. Lâagent reçoit Read, Write, Bash, WebFetch, de vrais outils sur un vrai filesystem. Il peut lire le assets/template.html du skill, chercher les valeurs hex dans votre CSS, Ă©crire brand-spec.md, dĂ©poser des images gĂ©nĂ©rĂ©es, produire des .pptx / .zip / .pdf qui apparaissent dans le workspace comme download chips Ă la fin du tour. Sessions, conversations, messages et tabs persistent dans une DB SQLite locale : rouvrez le projet demain, la todo card de lâagent est encore lĂ .
6 · Le prompt stack est le produit.
Ă lâenvoi, OD compose plusieurs couches :
DISCOVERY directives (formulaire tour 1, branche marque tour 2, TodoWrite, critique 5 dimensions)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (catalogue Design Systems)
+ active SKILL.md (catalogue Skills)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (pre-flight auto-injecté : lire assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Chaque couche est composable. Chaque couche est un fichier éditable. Lisez apps/daemon/src/prompts/system.ts et apps/daemon/src/prompts/discovery.ts pour voir le contrat réel.
Architecture
âââââââââââââââââââââââ browser (Next.js 16) âââââââââââââââââââââââ
â chat · file workspace · iframe preview · settings · imports â
ââââââââââââââââŹââââââââââââââââââââââââââââââââââââŹââââââââââââââââ
â /api/* (rewritten in dev) â
⌠âŒ
ââââââââââââââââââââââââââââââââââââ /api/proxy/{provider}/stream (SSE)
â Local daemon (Express + SQLite) â ââ provider-specific APIs
â â (BYOK)
â /api/agents /api/skillsâ w/ SSRF blocking
â /api/design-systems /api/projects/âŠ
â /api/chat (SSE) /api/proxy/{provider}/stream (SSE)
â /api/templates /api/import/claude-design
â /api/artifacts/save /api/artifacts/lint
â /api/upload /api/projects/:id/filesâŠ
â /artifacts (static) /frames (static)
â
â optional: sidecar IPC at /tmp/open-design/ipc/<ns>/<app>.sock
â (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
âââââââââââŹâââââââââââââââââââââââââ
â spawn(cli, [...], { cwd: .od/projects/<id> })
âŒ
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
â claude · codex · devin (ACP) · gemini · opencode · cursor-agent â
â qwen · qoder · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro · vibe (ACP) â
â reads SKILL.md + DESIGN.md, writes artifacts to disk â
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
| Couche | Stack |
|---|---|
| Frontend | Next.js 16 App Router + React 18 + TypeScript, déployable sur Vercel |
| Daemon | Node 24 · Express · streaming SSE · better-sqlite3; tables projects · conversations · messages · tabs · templates |
| Transport agent | child_process.spawn; parseurs typed-event pour claude-stream-json, qoder-stream-json, copilot-stream-json, json-event-stream, acp-json-rpc, pi-rpc, plain |
| Proxy BYOK | POST /api/proxy/{anthropic,openai,azure,google}/stream â APIs provider-specific, SSE normalisĂ© delta/end/error ; rejet loopback / link-local / RFC1918 au bord du daemon |
| Stockage | Fichiers simples dans .od/projects/<id>/ + SQLite dans .od/app.sqlite (gitignored, auto-créé). OD_DATA_DIR permet lâisolation des tests |
| Aperçu | Iframe sandboxée via srcdoc + parser <artifact> par Skill (apps/web/src/artifacts/parser.ts) |
| Export | HTML (assets inline) · PDF (browser print, deck-aware) · PPTX (piloté par agent via Skill) · ZIP (archiver) · Markdown |
| Lifecycle | pnpm tools-dev start | stop | run | status | logs | inspect | check; ports via --daemon-port / --web-port, namespaces via --namespace |
| Desktop (optionnel) | Shell Electron, dĂ©couvre lâURL web par sidecar IPC, sans deviner le port ; le mĂȘme canal STATUS/EVAL/SCREENSHOT/CONSOLE/CLICK/SHUTDOWN alimente tools-dev inspect desktop ⊠pour lâE2E |
Quickstart
Télécharger l'application desktop (aucun build requis)
Le moyen le plus rapide d'essayer Open Design est l'application desktop prĂ©construite â pas de Node, pas de pnpm, pas de clone :
- open-design.ai â page de tĂ©lĂ©chargement officielle
- Releases GitHub
Exécuter depuis les sources
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version # should print 10.33.2
pnpm install
pnpm tools-dev run web
# open the web URL printed by tools-dev
Prérequis : Node ~24 et pnpm 10.33.x. nvm / fnm ne sont que des aides facultatives ; si vous en utilisez un, lancez nvm install 24 && nvm use 24 ou fnm install 24 && fnm use 24 avant pnpm install.
Les utilisateurs Windows peuvent suivre docs/windows-troubleshooting.md pour le chemin d'installation natif et un petit launcher en double-clic.
Pour le démarrage desktop/background, les redémarrages sur ports fixes et les checks du dispatcher de génération média (OD_BIN, OD_DAEMON_URL, apps/daemon/dist/cli.js), voir QUICKSTART.fr.md.
Au premier chargement :
- OD dĂ©tecte les CLI dâagents prĂ©sentes dans votre
PATHet en choisit une automatiquement. - Il charge les catalogues Skills + Design Systems depuis les dossiers du repo.
- Il affiche le welcome dialog pour configurer une clé API, nécessaire seulement pour le fallback BYOK.
- Il crée automatiquement
./.od/, le dossier runtime local pour la DB SQLite, les artifacts par projet et les rendus enregistrĂ©s. Pas dâĂ©tapeod init; le daemon crĂ©e ce dont il a besoin au boot.
Tapez un prompt, cliquez Send, regardez le formulaire arriver, remplissez-le, puis suivez la todo card et le rendu de lâartifact. Cliquez Save to disk ou tĂ©lĂ©chargez le projet en ZIP.
Ătat premier lancement (./.od/)
Le daemon possÚde un dossier caché à la racine du repo. Tout son contenu est gitignored et local à votre machine, ne le committez jamais.
.od/
âââ app.sqlite â projects · conversations · messages · open tabs
âââ media-config.json â credentials mĂ©dia / BYOK
âââ artifacts/ â rendus ponctuels "Save to disk" (horodatĂ©s)
âââ projects/<id>/ â dossier de travail par projet, aussi cwd de lâagent
| Besoin | Action |
|---|---|
| Inspecter ce quâil contient | ls -la .od && sqlite3 .od/app.sqlite '.tables' |
| Repartir de zéro | pnpm tools-dev stop, rm -rf .od, relancer pnpm tools-dev run web |
| Déplacer toutes les données daemon | lancer avec OD_DATA_DIR=<dir> ; utilisez OD_MEDIA_CONFIG_DIR=<dir> si vous voulez seulement déplacer media-config.json |
Carte complĂšte des fichiers, scripts et dĂ©pannage â QUICKSTART.fr.md.
Structure du dépÎt
open-design/
âââ README.md â English
âââ README.de.md â Deutsch
âââ README.zh-CN.md â çźäœäžæ
âââ README.zh-TW.md â çčé«äžæ
âââ README.ko.md â íê”ìŽ
âââ README.ja-JP.md â æ„æŹèȘ
âââ README.fr.md â ce fichier
âââ QUICKSTART.fr.md â guide run / build / deploy
âââ package.json â workspace pnpm, bin unique : od
â
âââ apps/
â âââ daemon/ â Node + Express, seul serveur
â â âââ src/ â source TypeScript du daemon
â â â âââ cli.ts â source du bin `od`, compilĂ© vers dist/cli.js
â â â âââ server.ts â routes /api/* (projects, chat, files, exports)
â â â âââ agents.ts â PATH scanner + argv builders par CLI
â â â âââ claude-stream.ts â parser JSON streaming pour stdout Claude Code
â â â âââ skills.ts â loader du frontmatter SKILL.md
â â â âââ db.ts â schĂ©ma SQLite (projects/messages/templates/tabs)
â â âââ sidecar/ â wrapper tools-dev du daemon sidecar
â â âââ tests/ â tests du package daemon
â â
â âââ web/ â Next.js 16 App Router + client React
â âââ app/ â entrypoints App Router
â âââ next.config.ts â rewrites dev + export statique prod vers out/
â âââ src/ â modules client React + TypeScript
â âââ App.tsx â routing, bootstrap, settings
â âââ components/ â chat, composer, picker, preview, sketch, âŠ
â âââ prompts/
â â âââ system.ts â composeSystemPrompt(base, skill, DS, metadata)
â â âââ discovery.ts â turn-1 form + turn-2 branch + critique 5 dimensions
â â âââ directions.ts â 5 visual directions Ă palette OKLch + font stack
â âââ artifacts/ â parser streaming <artifact> + manifests
â âââ runtime/ â iframe srcdoc, markdown, helpers dâexport
â âââ providers/ â transports daemon SSE + BYOK API
â âââ state/ â config + projects (localStorage + daemon-backed)
â
âââ e2e/ â Playwright UI + harness Vitest / intĂ©gration externe
â
âââ packages/
â âââ contracts/ â contrats app partagĂ©s web/daemon
â âââ sidecar-proto/ â contrat du sidecar protocol Open Design
â âââ sidecar/ â primitives runtime sidecar gĂ©nĂ©riques
â âââ platform/ â primitives process/platform gĂ©nĂ©riques
â
âââ skills/ â bundles SKILL.md chargĂ©s par le daemon
â âââ web-prototype/ â dĂ©faut pour le mode prototype
â âââ saas-landing/ dashboard/ pricing-page/ docs-page/ blog-post/
â âââ mobile-app/ mobile-onboarding/ gamified-app/
â âââ email-marketing/ social-carousel/ magazine-poster/
â âââ motion-frames/ sprite-animation/ digital-eguide/ dating-web/
â âââ critique/ tweaks/ wireframe-sketch/
â âââ pm-spec/ team-okrs/ meeting-notes/ kanban-board/
â âââ eng-runbook/ finance-report/ invoice/ hr-onboarding/
â âââ simple-deck/ replit-deck/ weekly-update/ â mode deck
â âââ guizang-ppt/ â magazine-web-ppt intĂ©grĂ© (dĂ©faut pour deck)
â âââ SKILL.md
â âââ assets/template.html â seed
â âââ references/{themes,layouts,components,checklist}.md
â
âââ design-systems/ â catalogues DESIGN.md chargĂ©s par le daemon
â âââ default/ â Neutral Modern (starter)
â âââ warm-editorial/ â Warm Editorial (starter)
â âââ linear-app/ vercel/ stripe/ airbnb/ notion/ cursor/ apple/ âŠ
â âââ README.md â aperçu du catalogue
â
âââ assets/
â âââ frames/ â device frames partagĂ©es entre Skills
â âââ iphone-15-pro.html
â âââ android-pixel.html
â âââ ipad-pro.html
â âââ macbook.html
â âââ browser-chrome.html
â
âââ templates/
â âââ deck-framework.html â base deck (nav / counter / print)
â âââ kami-deck.html â starter deck façon kami (parchemin / serif ink-blue)
â
âââ scripts/
â âââ sync-design-systems.ts â rĂ©importe le tarball upstream awesome-design-md
â
âââ docs/
â âââ spec.md â product spec, scenarios, diffĂ©renciation
â âââ architecture.md â topologies, data flow, composants
â âââ skills-protocol.md â frontmatter od: Ă©tendu pour SKILL.md
â âââ agent-adapters.md â dĂ©tection + dispatch par CLI
â âââ modes.md â prototype / deck / template / design-system
â âââ references.md â provenance longue
â âââ roadmap.md â livraison par phases
â âââ schemas/ â JSON schemas
â âââ examples/ â exemples dâartifacts canoniques
â
âââ .od/ â runtime data, gitignored, auto-créé
âââ app.sqlite â projects / conversations / messages / tabs
âââ projects/<id>/ â dossier de travail par projet, aussi cwd de lâagent
âââ artifacts/ â rendus ponctuels Save to disk
Design Systems
Les Design Systems livrés avec le repo sont chargés depuis design-systems/*/DESIGN.md :
Exemples du catalogue (cliquer pour ouvrir)
AI & LLM : claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai
Developer Tools : cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent
Productivity : notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast
Fintech : stripe · coinbase · binance · kraken · mastercard · revolut · wise
E-Commerce : shopify · airbnb · uber · nike · starbucks · pinterest
Media : spotify · playstation · wired · theverge · meta
Automotive : tesla · bmw · ferrari · lamborghini · bugatti · renault
Other : apple · ibm · nvidia · vodafone · sentry · resend · spacex
Starters : default (Neutral Modern) · warm-editorial
La bibliothÚque de product systems est importée depuis VoltAgent/awesome-design-md via scripts/sync-design-systems.ts. Relancez ce script pour rafraßchir le catalogue. Les design skills issus de bergside/awesome-design-skills sont ajoutés directement dans design-systems/.
Directions visuelles
Quand lâutilisateur nâa pas de brand spec, lâagent Ă©met un second formulaire avec cinq directions soigneusement sĂ©lectionnĂ©es, lâadaptation OD du fallback « 5 schools Ă 20 design philosophies » de huashu-design. Chaque direction est une spec dĂ©terministe : palette OKLch, font stack, posture layout, rĂ©fĂ©rences, que lâagent injecte tel quel dans le :root du seed template. Un clic radio â systĂšme visuel entiĂšrement spĂ©cifiĂ©. Pas dâimprovisation, pas dâAI-slop.
| Direction | Mood | Références |
|---|---|---|
| Editorial · Monocle / FT | Magazine imprimé, encre + crÚme + rouille chaude | Monocle · FT Weekend · NYT Magazine |
| Modern minimal · Linear / Vercel | Froid, structuré, accent minimal | Linear · Vercel · Stripe |
| Tech utility | DensitĂ© dâinformation, monospace, terminal | Bloomberg · Bauhaus tools |
| Brutalist | Brut, typographie oversized, pas dâombres, accents durs | Bloomberg Businessweek · Achtung |
| Soft warm | GĂ©nĂ©reux, faible contraste, neutres pĂȘche | Notion marketing · Apple Health |
Spec complĂšte â apps/daemon/src/prompts/directions.ts.
Génération média
OD ne sâarrĂȘte pas au code. La mĂȘme surface de chat qui produit du HTML <artifact> pilote aussi la gĂ©nĂ©ration image, vidĂ©o et audio, avec des adapters modĂšle reliĂ©s Ă la pipeline mĂ©dia du daemon (apps/daemon/src/media-models.ts, apps/web/src/media/models.ts). Chaque rendu arrive comme vrai fichier dans le workspace projet, .png pour lâimage, .mp4 pour la vidĂ©o, et apparaĂźt comme chip de tĂ©lĂ©chargement Ă la fin du tour.
Trois familles de modĂšles portent la charge aujourdâhui :
| Surface | ModĂšle | Fournisseur | Usage |
|---|---|---|---|
| Image | gpt-image-2 |
Azure / OpenAI | Posters, avatars, cartes illustrées, infographies, social cards style magazine, restauration photo, art produit éclaté |
| Vidéo | seedance-2.0 |
ByteDance Volcengine | t2v + i2v cinématique de 15 s avec audio, shorts narratifs, close-ups personnage, films produit, chorégraphies MV |
| Vidéo | hyperframes-html |
HeyGen / OSS | Motion graphics HTMLâMP4, product reveals, typographie cinĂ©tique, data charts, overlays sociaux, logo outros, verticaux TikTok avec captions karaoke |
Une galerie de prompts sous prompt-templates/ livre des prompts prĂȘts Ă reproduire pour les surfaces image et vidĂ©o. Chaque entrĂ©e contient un thumbnail, le prompt body exact, le modĂšle cible, le ratio dâaspect et un bloc source pour licence + attribution. Le daemon les sert via GET /api/prompt-templates, et la web app les expose comme grille de cartes dans les onglets Image templates et Video templates.
gpt-image-2 · galerie image (échantillon)
![]() Infographie évolution en escalier de pierre 3D Infographie 3 étapes, esthétique pierre taillée |
![]() Carte culinaire urbaine illustrée Poster de voyage éditorial dessiné à la main |
![]() ScĂšne dâascenseur cinĂ©matique Still mode Ă©ditorial single-frame |
![]() Portrait anime cyberpunk Avatar profil, texte néon sur le visage |
![]() Portrait glamour en noir Portrait studio éditorial |
Set complet â prompt-templates/image/. Sources : la plupart viennent de YouMind-OpenLab/awesome-gpt-image-prompts (CC-BY-4.0), avec attribution auteur conservĂ©e par template.
Seedance 2.0 · galerie vidéo (échantillon de 39)
Cliquez sur un thumbnail pour lire le MP4 rendu. Set complet â prompt-templates/video/. Sources : YouMind-OpenLab/awesome-seedance-2-prompts (CC-BY-4.0), avec liens tweets originaux et handles auteurs conservĂ©s.
HyperFrames · motion graphics HTMLâMP4 (11 templates prĂȘts Ă reproduire)
heygen-com/hyperframes est le framework vidĂ©o open source agent-native de HeyGen : vous, ou lâagent, Ă©crivez HTML + CSS + GSAP, HyperFrames rend un MP4 dĂ©terministe via Chrome headless + FFmpeg. Open Design le livre comme modĂšle vidĂ©o de premiĂšre classe (hyperframes-html) reliĂ© au dispatch daemon, plus le skill skills/hyperframes/ qui enseigne Ă lâagent le contrat de timeline, les transitions de scĂšnes, les patterns audio-rĂ©actifs, captions/TTS et les catalog blocks (npx hyperframes add <slug>).
Onze prompts hyperframes sont fournis sous prompt-templates/video/hyperframes-*.json, chacun comme brief concret pour un archétype précis :
Le pattern reste le mĂȘme : choisissez un template, Ă©ditez le brief, envoyez. Lâagent lit le skills/hyperframes/SKILL.md intĂ©grĂ©, Ă©crit la composition et livre un MP4. Les thumbnails de catalog blocks sont © HeyGen, servis depuis leur CDN ; le framework OSS est Apache-2.0.
Déjà cùblés mais pas encore exposés comme templates : Kling 2.0 / 1.6 / 1.5, Veo 3 / Veo 2, Sora 2 / Sora 2-Pro (via Fal), MiniMax video-01, tous dans
VIDEO_MODELS(apps/web/src/media/models.ts). Les modĂšles audio sont cataloguĂ©s, mais lâUI audio intĂ©grĂ©e expose aujourdâhui les providers speech pris en charge, comme MiniMax et FishAudio. La galerie de templates reste image / vidĂ©o : ajoutez un JSON dansprompt-templates/video/pour le faire apparaĂźtre dans le picker vidĂ©o.
Au-delĂ du chat
La boucle chat / artifact est la plus visible, mais plusieurs capacités moins exposées sont déjà cùblées :
- Import ZIP Claude Design. Déposez un export de claude.ai sur le welcome dialog.
POST /api/import/claude-designlâextrait dans un vrai.od/projects/<id>/, ouvre le fichier dâentrĂ©e en tab et prĂ©pare un prompt pour continuer lĂ oĂč Anthropic sâest arrĂȘtĂ©. - Proxy BYOK multi-provider.
POST /api/proxy/{anthropic,openai,azure,google}/streamprend{ baseUrl, apiKey, model, messages }, construit la requĂȘte upstream propre au provider, normalise les chunks SSE versdelta/end/erroret rejette les destinations loopback / link-local / RFC1918 pour prĂ©venir SSRF. - Templates utilisateur. Une fois un rendu validĂ©,
POST /api/templatesprend un snapshot du HTML + metadata dans la table SQLitetemplates. Le projet suivant peut le choisir depuis une ligne « your templates ». - Persistance des tabs. Chaque projet mémorise ses fichiers ouverts et son onglet actif dans la table
tabs. - Artifact lint API.
POST /api/artifacts/lintexĂ©cute des checks structurels sur un artifact gĂ©nĂ©rĂ© et renvoie des findings que lâagent peut relire au tour suivant. - Sidecar protocol + automation desktop. Les processus daemon, web et desktop portent des stamps typĂ©s Ă cinq champs (
app · mode · namespace · ipc · source) et exposent un canal JSON-RPC IPC sous/tmp/open-design/ipc/<namespace>/<app>.sock. - Spawning compatible Windows. Les adapters qui dépasseraient la limite argv de
CreateProcessenvoient le prompt via stdin ; le daemon retombe sur un fichier prompt temporaire si besoin. - Runtime data par namespace.
OD_DATA_DIRet--namespacedonnent des arbres.od/isolĂ©s, pour que Playwright, les canaux beta et vos vrais projets ne partagent jamais le mĂȘme SQLite.
Anti-AI-slop machinery
Tout le mécanisme ci-dessous est le playbook huashu-design, porté dans le prompt-stack d'OD et rendu vérifiable par Skill via le pre-flight des side files. Lisez apps/daemon/src/prompts/discovery.ts pour le texte actuel :
- Question form first. Le tour 1 est seulement
<question-form>, sans thinking, outils ni narration. Lâutilisateur choisit des valeurs par dĂ©faut Ă la vitesse de boutons radio. - Brand-spec extraction. Quand lâutilisateur attache un screenshot ou une URL, lâagent suit un protocole en cinq Ă©tapes (locate · download · grep hex · codify
brand-spec.md· vocalise) avant dâĂ©crire du CSS. Il ne devine jamais les couleurs de marque depuis la mĂ©moire. - Critique 5 dimensions. Avant dâĂ©mettre
<artifact>, lâagent attribue silencieusement un score Ă sa sortie de 1 Ă 5 sur philosophie / hiĂ©rarchie / exĂ©cution / spĂ©cificitĂ© / retenue. Tout score sous 3/5 est une rĂ©gression : il faut corriger puis Ă©valuer Ă nouveau. - Checklist P0/P1/P2. Les Skills qui fournissent des side files peuvent inclure un
references/checklist.mdavec des P0 gates strictes. Lâagent doit passer P0 avant dâĂ©mettre quand cette checklist existe. - Slop blacklist. Gradients violets agressifs, icĂŽnes emoji gĂ©nĂ©riques, cartes arrondies avec accent left-border, humains SVG dessinĂ©s Ă la main, Inter comme display face, mĂ©triques inventĂ©es : explicitement interdits dans le prompt.
- Placeholders honnĂȘtes > fausses stats. Quand lâagent nâa pas de vrai chiffre, il Ă©crit
N/Aou un bloc gris libellé, pas « 10à faster ».
Comparaison
| Axe | Claude Design (Anthropic) | Open CoDesign | Open Design |
|---|---|---|---|
| Licence | Fermé | MIT | Apache-2.0 |
| Format | Web (claude.ai) | Desktop (Electron) | Web app + daemon local |
| DĂ©ployable sur Vercel | â | â | â |
| Runtime agent | Intégré (Opus 4.7) | Intégré (pi-ai) |
DĂ©lĂ©guĂ© Ă la CLI existante de lâutilisateur |
| Skills | Propriétaires | 12 modules TS custom + SKILL.md |
Bundles SKILL.md file-based, droppables |
| Design System | Propriétaire | DESIGN.md (roadmap v0.2) |
Catalogue DESIGN.md chargé depuis design-systems/ |
| Flexibilité fournisseur | Anthropic seulement | 7+ via pi-ai |
CLI adapters + proxy BYOK multi-provider |
| Formulaire initial | â | â | â RĂšgle dure, tour 1 |
| Direction picker | â | â | â 5 directions dĂ©terministes |
| Todo progress + tool stream live | â | â | â |
| Aperçu iframe sandboxĂ© | â | â | â |
| Import ZIP Claude Design | n/a | â | â
POST /api/import/claude-design |
| Ăditions chirurgicales comment-mode | â | â | đĄ partiel |
| Panneau tweaks Ă©mis par IA | â | â | đ§ roadmap |
| Workspace file-system-grade | â | partiel | â Vrai cwd, vrais outils, SQLite persistant |
| Self-critique 5 dimensions | â | â | â Gate pre-emit |
| Artifact lint | â | â | â
POST /api/artifacts/lint |
| Sidecar IPC + desktop headless | â | â | â
Processus stampés + tools-dev inspect desktop status | eval | screenshot |
| Formats dâexport | LimitĂ©s | HTML / PDF / PPTX / ZIP / Markdown | HTML / PDF / PPTX (agent-driven) / ZIP / Markdown |
| Réutilisation Skill PPT | N/A | Built-in | guizang-ppt-skill intégré |
| Facturation minimale | Pro / Max / Team | BYOK | BYOK |
Coding agents pris en charge
Auto-dĂ©tectĂ©s depuis PATH au boot du daemon. Aucune config nĂ©cessaire. Le dispatch streaming vit dans apps/daemon/src/agents.ts (AGENT_DEFS) ; les parseurs par CLI vivent Ă cĂŽtĂ©. Les modĂšles sont peuplĂ©s soit par probe (<bin> --list-models, <bin> models, handshake ACP), soit par fallback prĂ©dĂ©fini quand la CLI nâexpose pas de liste.
| Agent | Bin | Format stream | Forme argv (chemin prompt composé) |
|---|---|---|---|
| Claude Code | claude |
claude-stream-json |
claude -p --output-format stream-json --verbose [--include-partial-messages] [--add-dir âŠ] --permission-mode bypassPermissions (prompt sur stdin) |
| Codex CLI | codex |
json-event-stream + parseur codex |
codex exec --json --skip-git-repo-check --sandbox workspace-write -c sandbox_workspace_write.network_access=true [-C cwd] [--model âŠ] [-c model_reasoning_effort=âŠ] (prompt sur stdin) |
| Devin for Terminal | devin |
acp-json-rpc |
devin --permission-mode dangerous --respect-workspace-trust false acp |
| Gemini CLI | gemini |
json-event-stream + parseur gemini |
gemini --output-format stream-json --skip-trust --yolo [--model âŠ] (prompt sur stdin) |
| OpenCode | opencode |
json-event-stream + parseur opencode |
opencode run --format json --dangerously-skip-permissions [--model âŠ] - |
| Cursor Agent | cursor-agent |
json-event-stream + parseur cursor-agent |
cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model âŠ] (prompt sur stdin) |
| Qwen Code | qwen |
plain |
qwen --yolo [--model âŠ] - |
| Qoder CLI | qodercli |
qoder-stream-json |
qodercli -p --output-format stream-json --permission-mode bypass_permissions [--cwd cwd] [--model âŠ] [--add-dir âŠ] (prompt sur stdin) |
| GitHub Copilot CLI | copilot |
copilot-stream-json |
copilot -p - --allow-all-tools --output-format json [--model âŠ] [--add-dir âŠ] (prompt sur stdin) |
| Hermes | hermes |
acp-json-rpc |
hermes acp --accept-hooks |
| Kimi CLI | kimi |
acp-json-rpc |
kimi acp |
| Kiro CLI | kiro-cli |
acp-json-rpc |
kiro-cli acp |
| Kilo | kilo |
acp-json-rpc |
kilo acp |
| Mistral Vibe CLI | vibe-acp |
acp-json-rpc |
vibe-acp |
| DeepSeek TUI | deepseek |
plain (raw stdout chunks) |
deepseek exec --auto [--model âŠ] <prompt> |
| Pi | pi |
pi-rpc |
pi --mode rpc [--model âŠ] [--thinking âŠ] |
| BYOK multi-provider | n/a | SSE normalisĂ© | POST /api/proxy/{provider}/stream â Anthropic / OpenAI-compatible / Azure OpenAI / Gemini ; protĂ©gĂ© contre loopback / link-local / RFC1918 |
Ajouter une nouvelle CLI revient Ă ajouter une entrĂ©e dans apps/daemon/src/agents.ts. Le format de stream est lâun de claude-stream-json, qoder-stream-json, copilot-stream-json, json-event-stream, acp-json-rpc, pi-rpc ou plain.
Références & lignée
Chaque projet externe dont ce repo sâinspire. Chaque lien pointe vers la source pour vĂ©rifier la provenance.
| Projet | RĂŽle ici |
|---|---|
Claude Design |
Le produit fermĂ© dont ce repo est lâalternative open source. |
alchaincyf/huashu-design |
Le cĆur philosophie design. Workflow Junior-Designer, protocole brand-asset en 5 Ă©tapes, checklist anti-AI-slop, self-critique 5 dimensions et bibliothĂšque « 5 Ă©coles Ă 20 philosophies design » â tout distillĂ© dans apps/daemon/src/prompts/discovery.ts et apps/daemon/src/prompts/directions.ts. |
op7418/guizang-ppt-skill |
Skill Magazine-web-PPT inclus tel quel sous skills/guizang-ppt/. Défaut pour le mode deck. |
multica-ai/multica |
Architecture daemon + adapter. Détection PATH, daemon local comme seul processus privilégié, vision agent-as-teammate. |
OpenCoworkAI/open-codesign |
PremiÚre alternative open source à Claude Design et pair le plus proche. Patterns UX adoptés : streaming-artifact loop, preview iframe sandboxée, panneau agent live, cinq exports, storage hub local, goût injecté par SKILL.md. |
VoltAgent/awesome-claude-design / awesome-design-md |
Source du schéma DESIGN.md en 9 sections et des product systems importés. |
bergside/awesome-design-skills |
Source des design skills ajoutés comme DESIGN.md normalisés sous design-systems/. |
farion1231/cc-switch |
Inspiration pour la distribution de Skills par symlink entre plusieurs CLI agent. |
| Claude Code skills | Convention SKILL.md adoptée telle quelle. |
Le récit long de provenance vit dans docs/references.md.
Roadmap
- Daemon + détection agents CLI + registre Skills + catalogue Design Systems
- Web app + chat + question form + 5-direction picker + todo progress + preview sandboxée
- Catalogues Skills + Design Systems + 5 directions visuelles + 5 device frames
- Projets · conversations · messages · tabs · templates sur SQLite
- Proxy BYOK multi-provider (
/api/proxy/{anthropic,openai,azure,google}/stream) avec SSRF guard - Import ZIP Claude Design (
/api/import/claude-design) - Sidecar protocol + desktop Electron avec IPC automation
- Artifact lint API + gate pre-emit de self-critique 5 dimensions
- Ăditions chirurgicales comment-mode
- UX panneau tweaks émis par IA
- Recette Vercel + tunnel deployment
npx od initen une commande pour scaffold un projet avecDESIGN.md- Skill marketplace (
od skills install <github-repo>) et surface CLIod skill add | list | remove | test - Build Electron empaqueté depuis
apps/packaged/â tĂ©lĂ©chargements macOS (Apple Silicon) et Windows (x64) sur open-design.ai et la page des releases GitHub
Livraison par phases â docs/roadmap.md.
Statut
Câest une implĂ©mentation encore jeune, mais la boucle fermĂ©e fonctionne de bout en bout : dĂ©tecter â choisir Skill + Design System â chat â parser <artifact> â preview â sauvegarder. Le prompt stack et la Skill library concentrent lâessentiel de la valeur, et ils sont stables. Les composants UI Ă©voluent tous les jours.
Star us
Si ce projet vous a Ă©conomisĂ© trente minutes, donnez-lui une â . Les stars ne paient pas le loyer, mais elles indiquent au prochain designer, agent ou contributeur que cette expĂ©rience mĂ©rite son attention : github.com/nexu-io/open-design.
Contribuer
Issues, PRs, nouveaux Skills et nouveaux Design Systems sont bienvenus. Les contributions les plus utiles sont souvent un dossier, un fichier Markdown ou un petit adapter qui tient dans une PR :
- Ajouter un Skill : déposer un dossier dans
skills/selon la conventionSKILL.md. - Ajouter un Design System : déposer un
DESIGN.mddansdesign-systems/<brand>/avec le schéma en 9 sections. - Brancher une nouvelle coding-agent CLI : une entrée dans
apps/daemon/src/agents.ts.
Guide complet, critĂšres de merge, style de code et refus frĂ©quents â CONTRIBUTING.fr.md (English, Deutsch, çźäœäžæ).
Contributeurs
Merci à toutes les personnes qui font avancer Open Design : code, docs, retours, nouveaux Skills, nouveaux Design Systems ou issues bien ciblées. Chaque vraie contribution compte.
Si vous avez livrĂ© votre premiĂšre PR, bienvenue. Le label good-first-issue/help-wanted est le point dâentrĂ©e.
Activité du dépÎt
Le SVG ci-dessus est rĂ©gĂ©nĂ©rĂ© chaque jour par .github/workflows/metrics.yml avec lowlighter/metrics. Lancez un refresh manuel depuis lâonglet Actions si vous le voulez plus tĂŽt ; pour des plugins plus riches, ajoutez un secret METRICS_TOKEN avec un PAT fine-grained.
Star History
Si la courbe monte, câest le signal que nous cherchons. â ce repo pour lâaider Ă monter.
Crédits
La famille de Skills HTML PPT Studio, le Skill maßtre skills/html-ppt/ et les wrappers par template sous skills/html-ppt-*/, est intégrée depuis le projet open source lewislulu/html-ppt-skill (MIT). La LICENSE upstream est incluse dans le repo à skills/html-ppt/LICENSE et le crédit auteur revient à @lewislulu.
Le flow deck magazine / horizontal-swipe sous skills/guizang-ppt/ est intégré depuis op7418/guizang-ppt-skill (MIT). Crédit auteur : @op7418.
Licence
Apache-2.0. Le bundle skills/guizang-ppt/ conserve sa LICENSE originale (MIT) et lâattribution Ă op7418. Le bundle skills/html-ppt/ conserve sa LICENSE originale (MIT) et lâattribution Ă lewislulu.



























