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}

`), plus un point de terminaison HTTP en direct (`127.0.0.1:/mcp`) depuis l'application en cours d'exécution - 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 : ```bash brew install zseven-w/openpencil/op ``` ```bash op start # Lancer l'app de bureau op start --headless --file design.op # Lancer le serveur headless op design @landing.txt # Design par lots depuis un fichier op design @ui.js # JavaScript isolé avec boucles op insert '{"type":"rectangle"}' # Insérer un nœud op import:figma design.fig # Importer un fichier Figma cat design.dsl | op design - # Pipe depuis stdin ``` Prend en charge les chaînes en ligne, `@filepath` et stdin (`-`). Fonctionne avec l'app de bureau, le serveur web ou le serveur headless adossé à un fichier. Consultez la [référence des commandes CLI](./crates/op-cli/src/usage.txt). **Compétence LLM** — installez le plugin [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) pour apprendre aux agents IA à concevoir avec `op`. Utilisez `op install` pour les agents détectés ou `op install --target codex` pour une cible précise. ## 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é (Rust) + 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 — un binaire unique autonome (winit + GPU Skia, sans Electron) - Association de fichiers `.op` — double-cliquez pour ouvrir, verrouillage d'instance unique - Vérification des mises à jour en arrière-plan auprès de 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 | | | | --------------------- | ------------------------------------------------------------------------------------------- | | **Cœur** | Workspace Rust (`crates/`) — état de l'éditeur, widgets, hôtes, MCP, IA, codegen | | **Rendu** | GPU Skia partout — `skia-safe` (GL) en natif, CanvasKit (WASM/WebGL2) dans le navigateur | | **Framework UI** | jian — framework UI GPU-Skia en Rust pur vendored : widgets, layout, événements, rechargement à chaud (`vendor/jian`) | | **Fenêtrage** | winit (fork vendored `casement`) | | **Bureau** | Binaire natif `openpencil-desktop` — sans moteur de navigateur | | **SDK web** | `op-web-sdk` + adaptateurs React 19 / Vue 3 — visualiseur `.op` en lecture seule (TypeScript) | | **CLI** | `op` — contrôle depuis le terminal, DSL de design par lots | | **IA** | Runtime d'agent Rust intégré · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (SDK web) | | **Format de fichier** | `.op` — basé sur JSON, lisible par l'humain, compatible Git | ## Écosystème OpenPencil fait partie d'une famille d'outils en Rust pur, natifs IA, développés par **[ZSeven-W](https://github.com/ZSeven-W)**. Ils se composent : `jian` effectue le rendu d'OpenPencil, `agent-rs` exécute ses agents, `noema` mémorise, et `zode` conçoit depuis le terminal. | Projet | De quoi il s'agit | | ------ | ----------------- | | **[Zode](https://github.com/ZSeven-W/zode)** | Assistant de code open-source natif IA pour votre terminal — une TUI Rust rapide (`ratatui`) qui lit votre code, exécute des commandes, recherche des fichiers et gère git. Pilote OpenPencil via MCP. | | **[agent-rs](https://github.com/ZSeven-W/agent-rs)** | Un runtime asynchrone en Rust pur pour déployer des agents LLM — multi-fournisseurs, capable d'utiliser des outils de bout en bout, permissions structurées, vrai MCP, zéro `unsafe`. Alimente le runtime d'agent intégré d'OpenPencil (`vendor/agent`) et Zode. | | **[jian](https://github.com/ZSeven-W/jian)** | Framework UI GPU-Skia en Rust pur — widgets, layout, événements et rechargement à chaud dans une seule stack. Transforme un document déclaratif `.op` en une app native, contrôlable par IA, sans runtime JS, sans DOM, sans Electron. Le framework UI d'OpenPencil (`vendor/jian`). | | **[noema](https://github.com/ZSeven-W/noema)** | Système de mémoire local-first et non vectoriel pour les agents de code. Mémoire durable sous forme de fichiers inspectables, une file de revue pour les nouvelles entrées, et un rappel lexical (sans embedding) — fonctionne avec Zode, Codex, Claude Code et les runtimes MCP. | ## Pourquoi Rust OpenPencil a été réécrit intégralement en **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). La réécriture est terminée — l'éditeur TypeScript + Electron a été retiré en `v0.7.5`, et le workspace Rust de ce dépôt est le produit : 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 (retiré, `v0.7.5`) | Rust (aujourd'hui) | | -------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------- | | **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 | 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 :** l'éditeur TypeScript a été retiré en `v0.7.5` et ne subsiste que dans l'historique Git ; ce dépôt est le workspace Rust. Le produit Rust est en développement actif (voir la Feuille de route ci-dessous). ## Structure du projet ```text openpencil/ ├── crates/ Workspace Rust — le produit │ ├── op-editor-core/ État canonique de l'éditeur `.op` (PenDocument) + EditorCommand + variables de design │ ├── op-editor-ui/ Widgets indépendants de la plateforme + façade RenderBackend (wasm32-clean) │ ├── op-editor-host-core/ Machines à états d'hôte sans transport, partagées par tous les hôtes │ ├── op-host-native/ Bibliothèque hôte native — winit + skia-safe GL (bureau + mobile) │ ├── op-host-web/ Bundle navigateur — cdylib wasm32, rendu CanvasKit │ ├── op-host-desktop/ Binaire de bureau `openpencil-desktop` ; aussi le daemon `--serve-web` │ ├── op-host-services/ Bibliothèque daemon serve-web / MCP headless │ ├── op-host-web-server/ Binaire web-server léger, sans GL │ ├── op-cli/ Outil CLI — commande `op` │ ├── op-mcp/ Serveur MCP — outils, design par lots, workflow en couches │ ├── op-ai/ Fournisseurs IA, runtime de chat, streaming │ ├── op-ai-skills/ Moteur de compétences de prompts IA (chargement piloté par phases) │ ├── op-orchestrator/ Orchestration d'équipes d'agents concurrentes │ ├── op-codegen/ Générateurs de code (React, HTML, Vue, Flutter, ...) │ ├── op-figma/ Parseur et convertisseur de fichiers Figma .fig │ ├── op-git/ Intégration Git — clone, branche, push/pull, fusion │ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n / │ op-config-store / op-process-io / op-acp / op-smoke / ... ├── packages/ Workspace SDK web (Bun) │ ├── op-web-sdk/ SDK visualiseur web `.op` en lecture seule (enveloppe le bundle wasm) │ ├── op-web-sdk-react/ Adaptateur React 19 │ └── op-web-sdk-vue/ Adaptateur Vue 3 ├── vendor/ Sous-systèmes vendored (sous-modules git) │ ├── jian/ Framework UI GPU-Skia — widgets/rendu/événements │ ├── casement/ Fork de winit │ └── agent/ Runtime d'agent Rust transversal (agent-rs) └── .githooks/ Vérification pre-commit des écarts de version ``` ## 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 ```bash # Product (Rust — run from the repo root) cargo build --workspace # Build all crates (add --release for prod) cargo test --workspace # Run all tests cargo check --workspace # Type check cargo clippy --workspace --all-targets -- -D warnings # Lint cargo fmt --all # Format bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host) cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop) cargo run -p op-cli -- # CLI (binary: op) # Web SDK / JS tooling (run from packages/) cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets # Synchronisation des versions (à exécuter depuis la racine du dépôt) scripts/sync-version.sh # Sync all managed versions from root Cargo.toml tools/check-version-sync.sh # Verify all managed versions match root Cargo.toml ``` ## Contribuer Les contributions sont les bienvenues ! Consultez [CLAUDE.md](./CLAUDE.md) pour les détails d'architecture et le style de code. 1. Forker et cloner 2. Activer la vérification des écarts de version : `git config core.hooksPath .githooks` 3. Créer une branche : `git checkout -b feat/my-feature` 4. Exécuter les vérifications : `cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings` 5. Commiter avec [Conventional Commits](https://www.conventionalcommits.org/) : `feat(canvas): add rotation snapping` 6. Ouvrir une PR contre `main` ## Feuille de route - [x] Variables de design & tokens avec synchronisation CSS - [x] Système de composants (instances & substitutions) - [x] Génération de design IA avec orchestrateur - [x] Intégration du serveur MCP avec workflow de design en couches - [x] Support multi-pages - [x] Import Figma `.fig` - [x] Opérations booléennes (union, soustraction, intersection) - [x] Profils de capacités multi-modèles - [x] Workspace Cargo avec crates Rust et packages de SDK web réutilisables - [x] Éditeur Rust pour bureau et web - [x] Outil CLI (`op`) pour le contrôle depuis le terminal - [x] Runtime d'agents Rust intégré avec support multi-fournisseurs - [x] i18n — 15 langues - [x] SDKs de visualisation basés sur wasm pour JavaScript, React et Vue - [x] Style Guides avec correspondance par tags et outils MCP - [x] Agent Teams concurrents avec délégation et indicateurs sur le canevas - [x] Intégration Git (clone, branche, push/pull, fusion à trois voies en mode dossier) - [x] Export du canevas (SVG / 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](https://github.com/mrqyun)** — vous voulez voir votre nom ici ? **[Devenir sponsor →](https://github.com/sponsors/ZSeven-W)** ## Communauté Rejoindre notre Discord — Posez des questions, partagez vos designs, suggérez des fonctionnalités. **Communauté reconnue : [LINUX DO](https://linux.do/)** ## Star History ## Évaluations [](https://mseep.ai/app/zseven-w-openpencil) ## Licence [MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W