Le design sans verrouillage.

Ouvrez ce que vous avez déjà

OpenPencil lit directement les fichiers .fig : pages, composants, instances, variables et auto layout arrivent en calques modifiables, et vous pouvez réenregistrer en .fig. Collez du SVG ou ouvrez du HTML et du CSS, et ils deviennent aussi des calques, disposés comme un navigateur les dispose.

Voici la visite de l’app elle-même, un vrai fichier .fig. Ouvrez un chapitre dans les calques et explorez.

Concevez avec de vrais outils

Auto layout, contraintes, remplissages, contours, effets et typographie, avec les réglages là où vous les attendez. Les composants ont des slots : une instance garde le design et apporte son propre contenu. Tout s’annule, et rien n’attend un serveur.

Survolez la pochette sélectionnée et faites glisser un coin pour l’arrondir. Les autres lecteurs apportent leur pochette par le slot Artwork.

Des composants qui fonctionnent

Donnez un comportement à un composant, comme un interrupteur, une case à cocher, un curseur, des onglets ou un champ de texte, et l’aperçu l’exécute comme un vrai contrôle Reka UI. Les variantes deviennent ses états, et les mêmes composants s’exportent vers Storybook avec des contrôles cliquables.

Ce canevas est en aperçu : lancez la lecture, faites glisser la barre de progression, activez la lecture aléatoire. Quittez l’aperçu pour modifier.

Les variables sont des design tokens

Couleurs, espacements et typographie vivent dans des collections avec des modes et se modifient comme des tokens. Le code exporté écrit les valeurs liées comme propriétés personnalisées CSS, si bien que le code reprend les noms du design.

Chaque lecteur lit la collection Theme dans son propre mode. Changez la valeur d’un token et les deux suivent.

Des remplissages qui bougent

Un shader est un remplissage comme un autre : choisissez-le dans le sélecteur de remplissage, empilez des effets, réglez leurs curseurs ou collez un preset de shaders.com. Les fichiers en gardent une image fixe, pour s’ouvrir partout, et l’aperçu le joue.

Ce canevas est en aperçu, c’est pourquoi les shaders bougent. Quittez l’aperçu, sélectionnez un carré et ouvrez son remplissage.

Linting

OpenPencil vérifie le design pendant que vous travaillez : contraste, texte trop petit, noms par défaut, calques masqués et vides, groupes superflus. Les problèmes sont signalés sur le canevas, beaucoup se corrigent en un clic, et les mêmes règles tournent dans la CLI et pour les agents.

Cliquez sur un repère du canevas, ou appliquez une correction depuis la liste.

Concevez avec l’AI, avec vos clés

Demandez en langage courant : l’agent modifie le document avec les mêmes outils que vous et affiche son travail sur le canevas au fil de la génération. Connectez le fournisseur de votre choix avec votre propre clé, ou utilisez l’agent de code que vous employez déjà.

Un échange enregistré passe par la vraie boucle de l’agent. Regardez le canevas se construire au fil du flux.

Compatible avec

• Claude Code
• Cursor
• Windsurf
• Codex
• Gemini CLI
• et tout client MCP

Travailler ensemble, humains et agents

Partagez un lien et tout le monde modifie le même document, de pair à pair, avec curseurs en direct, mode suivi, commentaires épinglés aux calques et appels vocaux. Les agents d'IA rejoignent la salle de la même façon : tout le monde les regarde construire pendant qu'ils diffusent.

Les deux écrans sont à vous. Faites glisser un calque sur l’un et regardez-le bouger sur l’autre, puis sollicitez l’agent.

Du design au code

Chaque sélection est un composant Vue ou React, avec les variantes en props et Reka UI ou Radix derrière les composants interactifs, ou du HTML, du Tailwind et du design JSX avec les variables écrites en tokens. Les composants s'exportent en stories Storybook, et le design JSX reste lié au canevas : modifiez-le et le canevas suit.

Passez à React, HTML ou design JSX, ou sélectionnez un autre calque.

Tout piloter par script

La CLI openpencil travaille sur un fichier sans que l’application soit lancée, ou pilote l’application ouverte. Inspectez un document, interrogez-le en XPath, vérifiez-le avec le linter, exportez-le ou exécutez du code de plugin Figma avec eval. Le serveur MCP donne aux agents la même portée via stdio ou HTTP.

Lancez une commande et observez le canevas.

24 commandes

• analyze
• convert
• diff
• documents
• eval
• export
• find
• fonts
• formats
• import
• info
• libraries
• lint
• node
• pages
• query
• redo
• selection
• settings
• tokens
• tool
• tree
• undo
• variables

122 outils MCP

Créer, styliser, mettre en page, inspecter et exporter. Chacun est aussi disponible pour l’agent intégré.

Intégrez-le à votre propre produit

OpenPencil est autant une boîte à outils qu’une application : un moteur indépendant de tout framework, un SDK Vue sans interface et des paquets distincts pour le graphe de scène et les formats de fichier. Intégrez un canevas à votre produit, générez et vérifiez des designs en CI, ou construisez un autre éditeur sur le même moteur. Chaque canevas de cette page est ce SDK, exécuté dans un site de documentation.

Le code à côté du canevas suffit pour en monter un.

Vos fichiers restent les vôtres

Local d’abord

Les documents sont des fichiers sur votre disque. Pas de compte, pas de serveur, pas besoin d’internet.

Votre stockage

Synchronisez via votre propre bucket compatible S3 quand vous le souhaitez.

Formats ouverts

Exportez en .fig, PDF, PPTX, SVG, HTML et JSX. Partir reste toujours possible.

Sous licence MIT

L’éditeur, le moteur de rendu, le codec .fig et la CLI.

OpenPencil Cloud

L'espace de design de votre équipe, hébergé pour vous. Tout le monde modifie les mêmes fichiers en direct, les partage par lien et conçoit avec l'IA, sans rien à installer ni à faire tourner. Vos fichiers restent ouverts : exportez-les en .fig quand vous voulez.

OpenPencil Cloud se paie en $OPENPENCIL — sièges, synchro en direct, bibliothèques partagées et IA puisent dans un seul solde de tokens. Le paiement ouvre avec l'adresse du contrat dans la bande $OPENPENCIL.

Synchronisation d'équipe en temps réel

Chaque modification parvient à toute l’équipe dès qu’elle a lieu, sur tous les appareils.

Liens de partage et commentaires

Envoyez un lien pour relire un design et en discuter directement sur le canevas.

Bibliothèques d'équipe

Publiez composants, styles et tokens une fois et utilisez-les dans chaque fichier.

IA hébergée

Des agents qui conçoivent avec vous, sans clés d’API à gérer.

SSO et contrôles d'administration

Authentification unique, rôles et contrôle de qui voit quoi.

Feuille de route

1. Livré

   • Composants interactifs et aperçu

   • Variables comme design tokens

   • Linting avec corrections en un clic

   • Agents AI comme collaborateurs, avec mode suivi

   • Annuler, régénérer et modifier les échanges avec l’AI

   • Code relié aux calques

   • Diff visuel et correctifs

   • Commentaires et appels vocaux dans les salles partagées

   • Composants Vue et React dans l'onglet Code

   • Import SVG et HTML en calques modifiables

   • Remplissages par shaders

   • Design tokens W3C

   • Une visite guidée de l’éditeur

   • Listes et styles pour n’importe quelle portion de texte

2. En cours

   • Storybook à partir de vrais composants

     Des stories qui utilisent Reka UI pour Vue et Radix UI pour React.

   • Création de composants

     Modification des variantes plus rapide et sélection dans les composants.

3. Ensuite

   • OpenPencil auto-hébergé

     Tout l’espace de travail dans votre propre réseau : synchronisation, partage, commentaires et bibliothèques d’équipe, sans envoyer un fichier à qui que ce soit.

     Votre stockage

     Les documents restent dans votre bucket, dans votre région.

     Votre identité

     Connexion via votre fournisseur OIDC ou SSO, avec des rôles.

     Votre réseau

     Un relais de collaboration qui fonctionne derrière votre pare-feu.

     Votre exploitation

     Déploiement guidé, mises à niveau, sauvegardes et rétention.

   • OpenPencil Cloud

     L'espace hébergé pour les équipes : synchronisation en direct, partage, bibliothèques et IA, sans rien à faire tourner.

     OpenPencil Cloud se paie en $OPENPENCIL — sièges, synchro en direct, bibliothèques partagées et IA puisent dans un seul solde de tokens. Le paiement ouvre avec l'adresse du contrat dans la bande $OPENPENCIL.

   • Historique des versions

     Instantanés automatiques, points de contrôle nommés et restauration.

4. Plus tard

   • Design systems gouvernés

     Proposer, relire, publier et migrer.

   • Éditeur intégrable

     Placez l’éditeur de cette page dans votre propre produit.

Le token $OPENPENCIL

OpenPencil est open source ; le réseau qui le fait tourner ne l'est pas. Tours d'IA, rendus cloud et registre de plugins sont des rails payants, et $OPENPENCIL est la seule monnaie acceptée. Lancement sur Solana.

Tours d'IA et rendus cloud

Chaque tâche facturée sur OpenPencil Cloud — tours d'IA, rendus headless, exports — est tarifée et payée en $OPENPENCIL. Pas de paiement fiat, pas de licence par siège.

Marché de plugins et de modèles

Plugins, jeux d'icônes et modèles de documents se règlent en $OPENPENCIL : l'acheteur paie le token, l'auteur est payé on-chain.

Staking pour les bibliothèques gouvernées

Stakez $OPENPENCIL pour débloquer les design systems gouvernés : revue et publication, pistes d'audit, bibliothèques d'équipe partagées.

Les frais rachètent le token

Tous les frais collectés par le réseau alimentent un rachat on-chain de $OPENPENCIL : l'usage de l'éditeur renvoie au token qui le paie.

Solana · token SPL. Lancement imminent — rien ici n'est une offre ni un titre ; $OPENPENCIL paie l'usage du réseau. L'adresse du contrat arrivera dans la bande ci-dessus le jour du lancement.

Emportez vos designs avec vous.