openpencil/README.fr.md

OpenPencil

Le premier outil de design vectoriel open-source natif IA au monde.
_{Equipes d'agents concurrents • Design-as-Code • Serveur MCP intégré • Intelligence multi-modèles}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{Cliquez sur l'image pour regarder la vidéo de démonstration}

Note : Il existe un autre projet open-source portant le même nom — OpenPencil, axé sur le design visuel compatible Figma avec collaboration en temps réel. Ce projet est axé sur les workflows AI-natifs de design vers code.

Pourquoi OpenPencil

🎨 Prompt → Canevas Décrivez n'importe quelle interface en langage naturel. Regardez-la apparaître sur le canevas infini en temps réel avec une animation en streaming. Modifiez des designs existants en sélectionnant des éléments et en conversant.	🤖 Équipes d'agents concurrents L'orchestrateur décompose les pages complexes en sous-tâches spatiales. Plusieurs agents IA travaillent simultanément sur différentes sections — hero, fonctionnalités, pied de page — le tout en streaming parallèle.
🧠 Intelligence multi-modèles S'adapte automatiquement aux capacités de chaque modèle. Claude obtient des prompts complets avec réflexion ; GPT-4o/Gemini désactivent la réflexion ; les modèles plus petits (MiniMax, Qwen, Llama) reçoivent des prompts simplifiés pour une sortie fiable.	🔌 Serveur MCP Installation en un clic dans les CLI Claude Code, Codex, Gemini, OpenCode, Kiro ou Copilot. Designez depuis votre terminal — lisez, créez et modifiez des fichiers .op via tout agent compatible MCP.
📦 Design-as-Code Les fichiers .op sont du JSON — lisibles par l'humain, compatibles Git, comparables. Les variables de design génèrent des propriétés personnalisées CSS. Export de code vers React + Tailwind ou HTML + CSS.	🖥️ Fonctionne partout Application web + bureau natif sur macOS, Windows et Linux via Electron. Mises à jour automatiques depuis GitHub Releases. Association de fichiers .op — double-cliquez pour ouvrir.
⌨️ CLI — op Contrôlez l'outil de design depuis le terminal. op design, op insert — DSL de design par lots, manipulation de nœuds. Entrée par pipe depuis des fichiers ou stdin. Fonctionne avec l'app de bureau ou le serveur web.	🎯 Export de Code Multi-Plateforme Exportez depuis un seul fichier .op vers React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native. Les variables de design deviennent des propriétés CSS personnalisées.

Démarrage rapide

# Installer les dépendances
bun install

# Démarrer le serveur de développement sur http://localhost:3000
bun --bun run dev

Ou lancer en tant qu'application de bureau :

bun run electron:dev

Prérequis : Bun >= 1.0 et Node.js >= 18

Docker

Plusieurs variantes d'images sont disponibles — choisissez celle qui correspond à vos besoins :

Image	Taille	Contenu
openpencil:latest	~226 Mo	Application web uniquement
openpencil-claude:latest	—	+ Claude Code CLI
openpencil-codex:latest	—	+ Codex CLI
openpencil-opencode:latest	—	+ OpenCode CLI
openpencil-copilot:latest	—	+ GitHub Copilot CLI
openpencil-gemini:latest	—	+ Gemini CLI
openpencil-full:latest	~1 Go	Tous les outils CLI

Exécuter (web uniquement) :

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

Exécuter avec un CLI IA (ex. Claude Code) :

Le chat IA repose sur la connexion OAuth de Claude CLI. Utilisez un volume Docker pour conserver la session de connexion :

# Étape 1 — Connexion (une seule fois)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# Étape 2 — Démarrer
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

Compiler localement :

# Base (web uniquement)
docker build --target base -t openpencil .

# Avec un CLI spécifique
docker build --target with-claude -t openpencil-claude .

# Complet (tous les CLIs)
docker build --target full -t openpencil-full .

Design natif IA

Du prompt à l'interface

• Texte vers design — décrivez une page, elle est générée en temps réel sur le canevas avec une animation en streaming
• Orchestrateur — décompose les pages complexes en sous-tâches spatiales pour une génération parallèle
• Modification de design — sélectionnez des éléments, puis décrivez les modifications en langage naturel
• Entrée vision — joignez des captures d'écran ou des maquettes pour un design basé sur des références

Support multi-agents

Agent	Configuration
Intégré (9+ fournisseurs)	Choisissez parmi les préréglages de fournisseurs avec sélecteur de région — Anthropic, OpenAI, Google, DeepSeek et plus
Claude Code	Aucune configuration — utilise le Claude Agent SDK avec OAuth local
Codex CLI	Connecter dans les Paramètres de l'agent (Cmd+,)
OpenCode	Connecter dans les Paramètres de l'agent (Cmd+,)
GitHub Copilot	copilot login puis connecter dans les Paramètres de l'agent (Cmd+,)
Gemini CLI	Connecter dans les Paramètres de l'agent (Cmd+,)

Profils de capacités des modèles — adapte automatiquement les prompts, le mode de réflexion et les délais d'attente par niveau de modèle. Les modèles de niveau complet (Claude) reçoivent des prompts complets ; le niveau standard (GPT-4o, Gemini, DeepSeek) désactive la réflexion ; le niveau basique (MiniMax, Qwen, Llama, Mistral) reçoit des prompts JSON imbriqués simplifiés pour une fiabilité maximale.

i18n — Localisation complète de l'interface en 15 langues : English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.

Serveur MCP

• Serveur MCP intégré — installation en un clic dans les CLI Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot
• Détection automatique de Node.js — si non installé, bascule vers le transport HTTP et démarre automatiquement le serveur MCP HTTP
• Automatisation du design depuis le terminal : lire, créer et modifier des fichiers .op via tout agent compatible MCP
• Workflow de design en couches — design_skeleton → design_content → design_refine pour des designs multi-sections de plus haute fidélité
• Récupération segmentée des prompts — chargez uniquement les connaissances de design nécessaires (schéma, layout, rôles, icônes, planification, etc.)
• Support multi-pages — créer, renommer, réordonner et dupliquer des pages via les outils MCP

Génération de code

• React + Tailwind CSS, HTML + CSS, CSS Variables
• Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

CLI — op

Installez globalement et contrôlez l'outil de design depuis votre terminal :

brew install zseven-w/openpencil/op

op start                     # Lancer l'app de bureau
op design @landing.txt       # Design par lots depuis un fichier
op insert '{"type":"RECT"}'  # Insérer un nœud
op import:figma design.fig   # Importer un fichier Figma
cat design.dsl | op design - # Pipe depuis stdin

Supporte trois méthodes d'entrée : chaîne en ligne, @filepath (lecture depuis un fichier), ou - (lecture depuis stdin). Fonctionne avec l'app de bureau ou le serveur de développement web. Voir le README du CLI pour la référence complète des commandes.

Compétence LLM — installez le plugin OpenPencil Skill pour apprendre aux agents IA (Claude Code, Cursor, Codex, Gemini CLI, etc.) à concevoir avec op.

Fonctionnalités

Canevas et dessin

• Canevas infini avec panoramique, zoom, guides d'alignement intelligents et magnétisme
• Rectangle, Ellipse, Ligne, Polygone, Plume (Bézier), Frame, Texte
• Opérations booléennes — union, soustraction, intersection avec barre d'outils contextuelle
• Sélecteur d'icônes (Iconify) et import d'images (PNG/JPEG/SVG/WebP/GIF)
• Auto-layout — vertical/horizontal avec gap, padding, justify, align
• Documents multi-pages avec navigation par onglets

Système de design

• Variables de design — tokens de couleur, nombre et chaîne avec références $variable
• Support multi-thèmes — plusieurs axes, chacun avec des variantes (Clair/Sombre, Compact/Confortable)
• Système de composants — composants réutilisables avec instances et substitutions
• Synchronisation CSS — propriétés personnalisées auto-générées, var(--name) dans la sortie de code
• UIKits réutilisables — import/export de kits de composants depuis des fichiers .pen

IA et agents

• Prompt-vers-canevas avec génération en streaming et décomposition spatiale pilotée par l'orchestrateur
• Équipes d'agents concurrentes — plusieurs designers travaillent sur différentes sections en parallèle, avec des indicateurs sur le canevas par membre
• Workflow en couches — design_skeleton → design_content → design_refine avec des prompts ciblés par phase
• Guides de style — plus de 50 styles intégrés (glassmorphism, brutalist, retro, etc.) avec appariement flou basé sur les tags, intégrés dans la planification et la génération
• Profils de capacités multi-modèles — adapte automatiquement le mode de réflexion, l'effort et la forme du prompt selon le niveau du modèle
• Runtime d'agent intégré (agent-native, Zig NAPI) + fournisseurs Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini
• Passthrough au format Anthropic pour les fournisseurs LLM chinois — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Intégration Git

• Assistant de clonage avec authentification SSH / HTTPS et gestion des clés SSH
• Sélecteur de branches — créer, changer, supprimer, fusionner, tout depuis le panneau Git
• Cascades pull / push avec réessai d'authentification et gestion non-fast-forward
• Fusion à trois voies en mode dossier avec suivi d'état MERGE_HEAD sur disque
• Panneau de conflits avec cartes à trois voies par nœud / champ, éditeur JSON inline, actions groupées et bloc diff inline
• UI de paramètres distants et de clés SSH ; i18n en 15 langues sur toute la surface Git

Export

• Export du canevas — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
• Export de code — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
• Pipeline de codegen MCP incrémental — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

Import Figma

• Importer des fichiers .fig en préservant la mise en page, les remplissages, les contours, les effets, le texte, les images et les vecteurs

Application de bureau

• macOS, Windows et Linux natifs via Electron
• Association de fichiers .op — double-cliquez pour ouvrir, verrouillage d'instance unique
• Mise à jour automatique depuis GitHub Releases
• Menu d'application natif avec Enregistrer sous, Ouvrir les récents et une boîte de dialogue de modifications non enregistrées à la fermeture
• Persistance des fichiers récents

Stack technique

Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
Canevas	CanvasKit/Skia (WASM, accélération GPU)
État	Zustand v5
Serveur	Nitro
Bureau	Electron 35
CLI	op — contrôle depuis le terminal, DSL de design par lots
IA	Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Runtime	Bun · Vite 7
Format de fichier	.op — basé sur JSON, lisible par l'humain, compatible Git

Pourquoi Rust

OpenPencil est en cours de réécriture complète en Rust (#129). La version TypeScript + Electron est celle qui est distribuée aujourd'hui ; la réécriture en Rust est la prochaine étape — un cœur natif unique, nettement plus léger et plus rapide, fonctionnant sur davantage de plateformes à partir d'une seule base de code.

	TypeScript + Electron (aujourd'hui)	Rust (la réécriture)
Exécution bureau	Electron — embarque Chromium + Node.js	Fenêtre native (winit + GPU Skia), sans moteur de navigateur
Empreinte bureau	Runtime Chromium complet par installation	Binaire unique autonome — 55.5 MB
Charge web	Bundle JS + WASM	8.2 MB wasm / 2.18 MB gzip sur le réseau
Rendu	CanvasKit/Skia sur le web	Un seul backend Skia accéléré GPU sur chaque cible
Mémoire	Pauses du GC JavaScript	Sans GC — ownership Rust, latence prévisible
Base de code	Stack web + Electron + agent Zig NAPI	Un workspace Rust : éditeur · CLI · MCP · AI · codegen · Figma · Git
Cibles	Web + bureau, deux stacks séparées	Bureau (macOS/Win/Linux) · mobile (iOS/Android) · navigateur — un seul cœur

Améliorations mesurées

• Empreinte minimale — l'intégralité de l'application bureau tient en un seul binaire natif de 55.5 MB, au lieu d'un moteur de navigateur embarqué et d'un runtime Node. La version web pèse 8.2 MB brut / 2.18 MB gzip après découpage du catalogue d'icônes (−48% sur le réseau).
• Passage à l'échelle sur les grands documents — un canevas en direct de 10,000 nœuds (auto-layout imbriqué, quatre niveaux de profondeur) écrit, lit et capture l'état de mise en page sans panique et avec ~0% de CPU en veille ; un snapshot complet de la mise en page des 10k nœuds est retourné en ~0.68 s.
• Interactions fluides — le panoramique/zoom ne re-sérialise plus le document à chaque frame (un correctif sur un point chaud critique a ramené le CPU lors du zoom molette de ~69% à ~0%) ; les glissés appliquent les modifications de scène de façon incrémentielle, la mesure du texte est mise en cache, et les repeints sont fusionnés en un seul par frame.
• Un cœur, chaque écran — le même état de l'éditeur et le même backend de rendu compilent vers le bureau natif, le mobile et le navigateur via WASM — sans réimplémentations parallèles à synchroniser.
• GPU Skia partout — le natif effectue le rendu via skia-safe sur un contexte GL ; le navigateur effectue le rendu via CanvasKit sur WebGL2 — le même code de dessin, le même résultat.
• Accessibilité native — AccessKit sur macOS, Windows et Linux, plus un miroir DOM sur le web, plutôt que de s'appuyer sur l'arbre a11y d'un navigateur.
• Un workspace avec vérification de types — l'hôte MCP, le CLI, les fournisseurs AI, la génération de code, l'import Figma et l'intégration Git résident tous dans un seul workspace Rust, avec filtrage de la chaîne d'approvisionnement par cargo-deny en CI.

Statut : le shell Rust est en développement actif (voir la Feuille de route ci-dessous). Jusqu'à ce qu'il atteigne la parité de fonctionnalités pour v0.8.0, les téléchargements installables ci-dessus correspondent à la version TypeScript + Electron.

Structure du projet

openpencil/
├── apps/
│   ├── web/                 Application web TanStack Start
│   │   ├── src/
│   │   │   ├── canvas/      Moteur CanvasKit/Skia — dessin, sync, mise en page
│   │   │   ├── components/  Interface React — éditeur, panneaux, boîtes de dialogue partagées, icônes
│   │   │   ├── services/ai/ Chat IA, orchestrateur, génération de design, streaming
│   │   │   ├── stores/      Zustand — canevas, document, pages, historique, IA
│   │   │   ├── mcp/         Outils serveur MCP pour l'intégration CLI externe
│   │   │   ├── hooks/       Raccourcis clavier, dépôt de fichiers, collage Figma
│   │   │   └── uikit/       Système de kits de composants réutilisables
│   │   └── server/
│   │       ├── api/ai/      API Nitro — chat en streaming, génération, validation
│   │       └── utils/       Enveloppes Claude CLI, OpenCode, Codex, Copilot
│   ├── desktop/             Application de bureau Electron
│   │   ├── main.ts          Fenêtre, fork Nitro, menu natif, mise à jour automatique
│   │   ├── ipc-handlers.ts  Dialogues fichiers natifs, sync thème, préférences IPC
│   │   └── preload.ts       Pont IPC
│   └── cli/                 Outil CLI — commande `op`
│       ├── src/commands/    Commandes design, document, export, import, nœud, page, variable
│       ├── connection.ts    Connexion WebSocket à l'app en cours d'exécution
│       └── launcher.ts      Détection automatique et lancement de l'app de bureau ou du serveur web
├── packages/
│   ├── pen-types/           Définitions de types pour le modèle PenDocument
│   ├── pen-core/            Opérations sur l'arbre du document, moteur de mise en page, variables
│   ├── pen-codegen/         Générateurs de code (React, HTML, Vue, Flutter, ...)
│   ├── pen-figma/           Parseur et convertisseur de fichiers Figma .fig
│   ├── pen-renderer/        Moteur de rendu CanvasKit/Skia autonome
│   ├── pen-sdk/             SDK parapluie (réexporte tous les packages)
│   ├── pen-ai-skills/       Moteur de compétences AI (chargement de prompts par phases)
│   └── agent/               SDK agent AI (Vercel AI SDK, multi-fournisseur, équipes d'agents)
└── .githooks/               Synchronisation de version pre-commit depuis le nom de branche

Raccourcis clavier

Touche	Action		Touche	Action
V	Sélectionner		Cmd+S	Enregistrer
R	Rectangle		Cmd+Z	Annuler
O	Ellipse		Cmd+Shift+Z	Rétablir
L	Ligne		Cmd+C/X/V/D	Copier/Couper/Coller/Dupliquer
T	Texte		Cmd+G	Grouper
F	Frame		Cmd+Shift+G	Dégrouper
P	Outil plume		Cmd+Shift+P	Exporter (PNG/JPG/WEBP/PDF)
H	Main (panoramique)		Cmd+Shift+C	Panneau de code
Del	Supprimer		Cmd+Shift+V	Panneau des variables
[ / ]	Réordonner		Cmd+J	Chat IA
Flèches	Déplacer de 1px		Cmd+,	Paramètres de l'agent
Cmd+Alt+U	Union booléenne		Cmd+Alt+S	Soustraction booléenne
Cmd+Alt+I	Intersection booléenne		Cmd+Shift+S	Enregistrer sous

Scripts

bun --bun run dev          # Serveur de développement (port 3000)
bun --bun run build        # Build de production
bun --bun run test         # Lancer les tests (Vitest)
npx tsc --noEmit           # Vérification des types
bun run bump <version>     # Synchroniser la version dans tous les package.json
bun run electron:dev       # Développement Electron
bun run electron:build     # Packaging Electron
bun run cli:dev            # Exécuter le CLI depuis les sources
bun run cli:compile        # Compiler le CLI vers dist

Contribuer

Les contributions sont les bienvenues ! Consultez CLAUDE.md pour les détails d'architecture et le style de code.

1. Forker et cloner
2. Configurer la synchronisation de version : git config core.hooksPath .githooks
3. Créer une branche : git checkout -b feat/my-feature
4. Exécuter les vérifications : npx tsc --noEmit && bun --bun run test
5. Commiter avec Conventional Commits : feat(canvas): add rotation snapping
6. Ouvrir une PR contre main

Feuille de route

• Variables de design & tokens avec synchronisation CSS
• Système de composants (instances & substitutions)
• Génération de design IA avec orchestrateur
• Intégration du serveur MCP avec workflow de design en couches
• Support multi-pages
• Import Figma .fig
• Opérations booléennes (union, soustraction, intersection)
• Profils de capacités multi-modèles
• Restructuration en monorepo avec packages réutilisables
• Outil CLI (op) pour le contrôle depuis le terminal
• SDK agent AI intégré avec support multi-fournisseurs
• i18n — 15 langues
• Intégration Git (clone, branche, push/pull, fusion à trois voies en mode dossier)
• Export raster du canevas (PNG / JPEG / WEBP / PDF)
• Édition collaborative
• Système de plugins

Contributeurs

Sponsors

OpenPencil est gratuit et open source. Le développement est financé par celles et ceux qui le trouvent utile — merci de garder le canevas ouvert.

Merci à MrQyun — vous voulez voir votre nom ici ? Devenir sponsor →

Communauté

Rejoindre notre Discord — Posez des questions, partagez vos designs, suggérez des fonctionnalités.

Star History

Évaluations

Licence

MIT — Copyright (c) 2026 ZSeven-W