open-design/README.fr.md

Open Design

L’alternative open source à Claude Design. Local-first, déployable sur le web, BYOK à chaque couche : vos CLI de coding agents détectées automatiquement dans le PATH deviennent 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.

English · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська

---

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 dans apps/web/src/prompts/discovery.ts.
• op7418/guizang-ppt-skill, le mode deck. Inclus tel quel sous skills/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 avec pi-ai inté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 le PATH, daemon local comme seul processus privilégié, vision agent-as-teammate.

En un coup d’œil

	Ce que vous obtenez
CLI de coding agents	Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Mistral Vibe CLI (ACP), 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/web/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 · Electron empaqueté (placeholder, en cours)
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 · prototype Dashboard consumer dating / matchmaking : navigation gauche, ticker bar, KPIs, graphique de mutual matches sur 30 jours, typographie éditoriale.	digital-eguide · template E-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 · prototype Email HTML de lancement produit : masthead, image hero, bloc titre, CTA, grille de specs. Colonne unique centrée, compatible fallback table.	gamified-app · prototype Prototype 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 · prototype Onboarding mobile en trois frames : splash, value prop, sign-in. Status bar, dots de swipe, CTA principal.	motion-frames · prototype Hero motion-design single-frame avec animations CSS en boucle : anneau typo rotatif, globe animé, timer. Prêt pour handoff HyperFrames.
social-carousel · prototype Carousel social 1080×1080 en trois cartes : panneaux cinématiques avec titres display liés entre eux, marque, affordance de boucle.	sprite-animation · prototype Slide 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, 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/web/src/prompts/system.ts et apps/web/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 · 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, 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

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.

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 :

1. OD détecte les CLI d’agents présentes dans votre PATH et en choisit une automatiquement.
2. Il charge les catalogues Skills + Design Systems depuis les dossiers du repo.
3. Il affiche le welcome dialog pour configurer une clé API, nécessaire seulement pour le fallback BYOK.
4. Il crée automatiquement ./.od/, le dossier runtime local pour la DB SQLite, les artifacts par projet et les rendus enregistrés. Pas d’étape od 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/web/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)

Podcast musique & technique guitare Film studio cinématique 4K

Close-up émotionnel Étude cinématique de micro-expression

Supercar de luxe cinématique Film produit narratif

Satire à la Cité interdite Court stylisé satirique

Court métrage romance japonaise Narration Seedance 2.0 de 15 s

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 :

Product reveal minimal 5 s · 16:9 · title card push-in avec transition shader	Promo produit SaaS 30 s · 16:9 · style Linear/ClickUp avec reveals UI 3D	Talking-head TikTok karaoke · 9:16 · TTS + captions synchronisées mot à mot	Brand sizzle reel 30 s · 16:9 · typographie cinétique beat-sync, audio-réactive
Bar-chart race animé · 16:9 · infographie data style NYT	Carte de vol (origine → destination) · 16:9 · reveal de route cinématique style Apple	Logo outro cinématique 4 s · 16:9 · assemblage progressif + bloom	Compteur $0 → $10K · 9:16 · hype style Apple avec flash vert + burst
Showcase app 3 phones · 16:9 · téléphones flottants avec callouts feature	Stack d’overlays sociaux · 9:16 · X · Reddit · Spotify · Instagram en séquence	Pipeline website-to-video · 16:9 · capture le site en 3 viewports + transitions

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 dans prompt-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-design l’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}/stream prend { baseUrl, apiKey, model, messages }, construit la requête upstream propre au provider, normalise les chunks SSE vers delta/end/error et rejette les destinations loopback / link-local / RFC1918 pour prévenir SSRF.
• Templates utilisateur. Une fois un rendu validé, POST /api/templates prend un snapshot du HTML + metadata dans la table SQLite templates. 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/lint exé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 CreateProcess envoient le prompt via stdin ; le daemon retombe sur un fichier prompt temporaire si besoin.
• Runtime data par namespace. OD_DATA_DIR et --namespace donnent 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 vient du playbook huashu-design, porté dans le prompt stack d’OD et rendu vérifiable par Skill via le pre-flight des side files :

• 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.md avec 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/A ou 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 --full-auto -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 …] -
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
Mistral Vibe CLI	vibe-acp	acp-json-rpc	vibe-acp
Pi	pi	pi-rpc	pi --mode rpc --no-session [--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, 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 ».
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 init en une commande pour scaffold un projet avec DESIGN.md
• Skill marketplace (od skills install <github-repo>) et surface CLI od skill add | list | remove | test
• Build Electron empaqueté depuis apps/packaged/

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 convention SKILL.md.
• Ajouter un Design System : déposer un DESIGN.md dans design-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 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.