Pencilfichier .pen dans le dépôtriviera.penfichier de canevas vectoriel, versionné avec GitKit UIcomposants intégrésÉdition : titre plus calmeéditez sur le canevas ou le bloc de prompt
Pencil 
OpenDesign Alternative à Pencil.dev entièrement open-source : OpenDesign
OpenDesign et Pencil sont inhabituellement proches : tous deux sont pilotés par agent et conservent le design sous forme de fichiers dans votre dépôt sous Git. OpenDesign est l'alternative gratuite, entièrement open-source et neutre vis-à-vis des fournisseurs — Apache-2.0 pour l'application entière, BYOK avec n'importe quel agent de codage majeur, et des résultats qui couvrent l'interface utilisateur, les présentations, les prototypes et un système de design. Cette page explique où ils se chevauchent, où le canevas de Pencil gagne véritablement, et comment passer de l'un à l'autre.
Verdict, par tâche12 / Pencil
OpenDesign vs Pencil, trois besoins différents
Commencer au bon endroit
Cette page · choisir
OpenDesign ou Pencil ?
Un verdict par situation, un bref essai dans les deux outils, une comparaison de fonctionnalités datée et les conditions qui inversent la réponse.
Lire le verdict Déjà sur PencilDéplacer un design .pen vers OpenDesign
Les deux conservent les fichiers dans le dépôt, donc rien n'est perdu lors d'une exportation vers le cloud. Ce qui se déplace, ce qui reste sur le canevas, et les quatre étapes.
Voir ce qui se déplace Une question différenteQuitter Figma, pas Pencil ?
Si le canevas que vous quittez est celui de Figma, cette comparaison couvre également la collaboration et le Dev Mode.
Lire OpenDesign vs FigmaSur cette page Aperçu
Ce qu'est chacun
Pencil vs OpenDesign : ce qu'est chaque outil
Pencil et OpenDesign partagent la grande idée — un design piloté par agent conservé sous forme de fichiers dans votre dépôt — et diffèrent sur ce qui est ouvert, quels agents sont de première classe, et jusqu'où va le résultat. OpenDesign écrit cette comparaison sur son propre produit et n'est pas affilié à Pencil.
Réponse courte. OpenDesign est une alternative à Pencil gratuite, entièrement open-source (Apache-2.0) et axée sur le local : la même idée de fichiers dans le dépôt pilotés par agent, avec toute l'application ouverte plutôt que seulement le format de fichier, BYOK neutre vis-à-vis des fournisseurs à travers Claude, Codex, Cursor, Gemini, OpenCode et Qwen, et des résultats qui couvrent l'interface utilisateur, les pages de destination, les présentations, les prototypes et un système de design DESIGN.md. Il n'a pas de canevas vectoriel ; si l'édition manuelle d'un canevas de type Figma à l'intérieur de votre IDE avec un collage natif de Figma est ce que vous appréciez, gardez Pencil.
Pencil
Pencil (pencil.dev) est "design on canvas, land in code" : un canevas de design vectoriel infini qui vit à l'intérieur de votre IDE et de votre base de code, soutenu par a16z Speedrun. Les fichiers de design utilisent un format JSON .pen ouvert et documenté qui se trouve dans votre dépôt sous Git, et un serveur MCP local permet aux agents d'IA de les lire et de les écrire. Il est livré avec des kits d'interface utilisateur intégrés et un copier-coller natif de Figma, et est gratuit pendant l'accès anticipé.
- S'exécuteApplication de bureau locale, extension IDE et serveur MCP local
- ModèleMCP avec plusieurs agents, optimisé pour Claude Code
- SortieFichiers JSON .pen dans votre dépôt ; écrans d'interface utilisateur et composants vers le code
- CoûtGratuit en accès anticipé ; forfaits payants signaléspas de limites publiées
OpenDesign
OpenDesign est un agent de design open-source axé sur le local vers lequel vous pointez votre propre agent de codage. Les compétences et une marque portable vivent sous forme de fichiers dans votre dépôt ; l'application de bureau rend et examine le résultat.
- S'exécuteApplication de bureau et démon local sur votre machine
- AgentLe vôtre : Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen et plus
- SortieFichiers dans le répertoire de votre projet
- CoûtApache-2.0 ; vous payez votre propre fournisseur pour l'utilisation de l'API
Où ils se chevauchent
Fichiers de design pilotés par agent dans le dépôt sous Git, et interface utilisateur qui devient du code. C'est la majeure partie de ce que font les deux outils, et l'intégralité de ce que le reste de la page compare.
Ce que cette page ne prétend pas
Qu'OpenDesign possède un canevas vectoriel, un panneau de calques, des kits d'interface utilisateur intégrés ou un collage natif de Figma, ou que les fichiers .pen se convertissent automatiquement. Si le canevas est le travail, le verdict ci-dessous dit de garder Pencil.
Verdict
Pencil ou OpenDesign ? Le verdict par situation
Choisissez Pencil si…
Voir le scénario correspondant
- Vous souhaitez éditer manuellement un canevas vectoriel mature de type Figma, à l'intérieur de Cursor ou VS Code.
- Vous collez souvent depuis Figma et avez besoin que les calques et la mise en page automatique restent intacts.
- Les kits d'interface utilisateur intégrés et une expérience d'agent axée sur Claude sont ce que vous appréciez le plus.
Choisissez OpenDesign si…
- Vous voulez que l'outil entier soit open source — pour le forker, l'auditer, l'auto-héberger — pas seulement un format documenté.
- Vous voulez que le « gratuit » reste gratuit, sans plafond de fournisseur après l'accès anticipé ; vous ne payez que vos propres dépenses de modèle.
- Vous voulez un BYOK neutre vis-à-vis des fournisseurs : Claude, Codex, Cursor, Gemini, OpenCode et Qwen sont tous de premier ordre.
- Vous voulez des interfaces utilisateur, des présentations, des prototypes et un design system générés à partir d'un seul DESIGN.md.
Utilisez les deux si…
Voyez ce qui bouge, ce qui reste
- Les designers dessinent dans le canevas de Pencil ; le reste des artefacts est généré à partir de la même marque dans OpenDesign.
- Vous voulez une solution de repli ouverte au cas où la tarification de l'accès anticipé ou l'optimisation axée sur Claude cesseraient de vous convenir.
- Les deux conservent les fichiers dans le dépôt, donc les exécuter côte à côte coûte peu.
Même brief, deux résultats
Le même brief dans Pencil et OpenDesign
Une comparaison n'est honnête que si ses données d'entrée le sont. Le même brief et la même marque sont fournis à Pencil et à OpenDesign ; ce qui en ressort, la façon dont c'est édité et ce que vous pouvez en tirer d'autre est ce que vous comparez. Les panneaux ci-dessous sont des illustrations, pas des captures d'écran ; le test de 20 minutes vous permet d'exécuter le brief vous-même.
Brief · identique dans les deux outils
Concevez une page de destination pour un petit studio qui réserve des séjours de slow-travel. Un hero avec un titre fort, trois lieux mis en avant, une courte note sur le fonctionnement de la réservation et un appel à l'action final. Bureau et téléphone.
- Marque
- Fond papier, Albert Sans, un accent vert, rayon de 8px
- Points de rupture
- 1440 bureau, 390 mobile ; pas de défilement horizontal
- Test d'édition
- Après le premier résultat : « rends le titre plus calme, échange le deuxième lieu »
- Enregistrement
- Modèle, date, temps jusqu'au premier résultat, modifications nécessaires, format d'exportation
Pencilfichier .pen dans le dépôtOpenDesign + votre agentfichiers dans le dépôtriviera-landing.htmlnouveau · v2DESIGN.mdliéÉdition : titre plus calmepointez sur l'élément, l'agent révise
IllustratifLes deux panneaux sont des illustrations dessinées pour cette page, et non des captures d'écran de l'un ou l'autre outil, et le verdict ne repose pas sur eux. Exécutez le brief vous-même avec le test de 20 minutes ci-dessous et notez les points énumérés ici afin que les deux résultats puissent être comparés équitablement.
Ce qu'il faut noter · les deux outils
Modèle et version, date d'exécution, temps jusqu'au premier résultat utilisable, nombre de modifications pour atteindre « terminé », ce que l'exportation contenait.
Ce qu'il faut noter · Pencil
Quel agent s'est exécuté sur MCP et comment il s'est comporté en dehors de Claude, si le fichier .pen a fait l'aller-retour vers le code proprement, ce que le collage Figma a préservé.
Ce qu'il faut noter · OpenDesign
Agent et clé utilisés, si DESIGN.md a été respecté sans relancer le prompt, les deux points de rupture vérifiés, les versions conservées sous forme de fichiers.
Fonctionnalité par fonctionnalité
OpenDesign vs Pencil, fonctionnalité par fonctionnalité
Neuf dimensions sur lesquelles OpenDesign et Pencil diffèrent dans la pratique : licence, environnement d'exécution, fichiers de design, compte, coût, modèle, surface principale, gamme de résultats et maturité. Les faits concernant Pencil ont été vérifiés à partir de sources publiques le 2026-09-06 ; les conditions d'accès anticipé peuvent changer.
| Dimension | OpenDesign | Pencil |
|---|---|---|
| Licence | Apache-2.0 ; l'application entière est open source | Application à source fermée ; seul le format .pen est documenté |
| Environnement d'exécution | Démon local et application de bureau | Application de bureau locale, extension IDE et serveur MCP local |
| Fichiers de design | Fichiers dans votre dépôt : DESIGN.md et artefacts | Fichiers JSON .pen dans votre dépôt |
| Compte | Aucun requis | Connexion, accès anticipé |
| Coût | Gratuit et open source ; vos propres dépenses de modèle | Gratuit en accès anticipé ; forfaits payants signalésles conditions peuvent changer |
| Modèle | BYOK neutre vis-à-vis des fournisseurs : Claude, Codex, Cursor, Gemini, OpenCode, Qwen | MCP avec plusieurs agents, optimisé pour Claude Code |
| Surface principale | Piloté par agent : du brief aux artefacts, plus une interface de révision | Canevas vectoriel de type Figma que vous éditez directement ; agent via MCP |
| Gamme de sorties | Interfaces utilisateur, pages de destination, présentations, prototypes, design systems | Écrans d'interface utilisateur et composants vers le code |
| Auto-hébergement / fork | Oui | Non ; l'application est à source fermée |
Où Pencil gagne
Le canevas pratique : une surface mature de type Figma que vous éditez directement, avec un collage Figma natif qui conserve les calques et l'auto-layout, des kits d'interface utilisateur intégrés, et tout cela à l'intérieur de votre IDE. Un développeur qui conçoit ne quitte jamais l'éditeur.
Où OpenDesign gagne
Propriété et portée : l'application entière est open source, le BYOK est neutre vis-à-vis des fournisseurs au lieu d'être axé sur Claude, le gratuit reste gratuit car il n'y a pas de fournisseur pour vous monétiser, et la sortie s'étend bien au-delà de l'interface utilisateur vers le code.
Décision
Quand OpenDesign est la bonne alternative à Pencil
Développeur qui conçoit dans l'IDE
Dessinez l'écran à la main, à côté du code, avec Claude Code
PencilLe canevas dans Cursor ou VS Code, le collage natif de Figma et l'ajustement axé sur Claude sont exactement le flux de travail de cette personne. OpenDesign n'a pas de canevas à leur offrir.
Ne convient pas quand l'équipe utilise Codex, Gemini ou Qwen plutôt que Claude.
Équipe avec une politique open-source
L'outil entier doit être auditable et forkable
OpenDesignApache-2.0 pour l'agent, la bibliothèque de compétences et le moteur de rendu ; le fait que le format .pen soit documenté n'est pas la même chose.
Ne convient pas quand la politique est satisfaite par un format de fichier ouvert seul.
Marque à travers de nombreux types d'artefacts
Présentations, pages de destination, prototypes et UI d'une seule marque
OpenDesignUn seul DESIGN.md les rend tous sans avoir à relancer de prompt ; la portée de Pencil est de l'UI au code. Voir la solution de système de design.
Ne convient pas quand les écrans UI sont le seul livrable.
Utilisateur de Pencil se protégeant de l'accès anticipé
Gratuit aujourd'hui, forfaits payants annoncés
Exécuter les deuxContinuez à dessiner dans Pencil ; extrayez la marque dans DESIGN.md et rendez le reste dans OpenDesign pour que rien ne dépende de la tarification d'un seul fournisseur. Les deux conservent les fichiers dans le dépôt.
Ne convient pas quand vous vous attendez à ce que les fichiers .pen et DESIGN.md restent synchronisés automatiquement ; ce n'est pas le cas.
Transférer un design, ou exécuter les deux
Comment transférer un design de Pencil à OpenDesign
Les deux outils conservent le design sous forme de fichiers dans votre dépôt, il n'y a donc pas d'exportation cloud avec perte à combattre. Ce qui est transféré, c'est la marque et le brief, via une extraction unique à partir d'une exportation Pencil ; les fichiers de canevas .pen restent modifiables dans Pencil.
| Ce qui est transféré | |
|---|---|
| La marque | Pointez votre agent sur une exportation Pencil, un collage Figma ou une capture d'écran ; il extrait les couleurs, la typographie, l'espacement et le ton dans DESIGN.md. |
| Les prompts | Texte brut. Les blocs de prompt du canevas se collent tels quels dans un brief OpenDesign. |
| Le code généré | Le code produit par Pencil à partir d'un fichier .pen peut servir de référence structurelle ; l'agent effectue un nouveau rendu sous DESIGN.md plutôt que de le patcher. |
| Ce qui reste dans Pencil | |
| Les fichiers de canevas .pen | Les calques vectoriels ne se convertissent pas ; effectuez un nouveau rendu à partir du brief et de DESIGN.md. |
| Les kits UI intégrés | Les kits de style Shadcn sont réexprimés via DESIGN.md et vos propres composants. |
| Le collage natif de Figma | Si un coéquipier continue de coller depuis Figma, cette étape reste dans Pencil. |
-
Installer OpenDesign et ouvrir le même dépôt
Téléchargez l'application de bureau et ouvrez le dépôt qui contient déjà vos fichiers .pen en tant que projet. Le démarrage rapide couvre le chemin de construction à partir des sources séparément.
-
Exporter un écran Pencil comme référence
Exportez un PNG (ou le code généré) de l'écran dont vous souhaitez conserver l'apparence et ajoutez-le au projet.
-
Demander à l'agent d'extraire la marque dans DESIGN.md
Révisez le fichier manuellement : une couleur d'accentuation, les bonnes polices, le bon rayon. C'est la seule étape de migration qui nécessite du jugement.
-
Rendre le brief original avec la nouvelle marque
Choisissez une compétence et rendez ; à partir d'ici, chaque compétence — UI, présentations, prototypes — est rendue dans votre marque sans avoir à relancer de prompt, et chaque version est un fichier.
Exécuter les deux
Gardez Pencil pour l'édition manuelle de l'UI sur le canevas ; utilisez OpenDesign pour tout ce qui est rendu à partir de la marque. Les deux vivent dans le même dépôt ; mettez à jour DESIGN.md lorsque le canevas change. Rien ne se synchronise automatiquement.
Solution de repli et perte
On perd peu à essayer : les fichiers .pen restent dans le dépôt de toute façon. Si un rendu OpenDesign échoue, la dernière version reste sur le disque et le brief est inchangé ; réessayez avec le même agent ou un autre.
Un test de 20 minutes
Essayer OpenDesign sur un écran que vous avez déjà dessiné dans Pencil
Prenez un écran que vous avez dessiné dans Pencil et reconstruisez-le dans OpenDesign avec l'agent de votre choix. Si le résultat n'est pas utilisable en vingt minutes, cette comparaison vous aura appris quelque chose d'utile.
1La tâche
Voici une exportation PNG d'un écran que j'ai conçu dans Pencil. Extrais sa marque dans DESIGN.md, puis reconstruis le même écran à partir de ce brief en utilisant mes règles de design, et ajoute une couverture de présentation d'une diapositive dans la même marque. Vérifie l'écran aux largeurs de bureau et mobile.
- 01Écran Pencil en entréeUne exportation PNG de l'écran .pen dont vous souhaitez conserver l'apparence.
- 02DESIGN.md en sortieVotre marque extraite dans un fichier à côté des fichiers .pen — révisez-le manuellement.
- 03Écran et couverture de présentation, rendusL'écran sur bureau et téléphone plus une couverture de présentation dans la même marque, puis une modification en pointant sur un élément.
2Cela a fonctionné si…
- DESIGN.md est commité à côté des fichiers .pen et vous valideriez ses tokens.
- L'écran est rendu à 1440 et 390 sans défilement horizontal, et la couverture de présentation partage la marque.
- Une modification ("titre plus calme") appliquée en pointant sur l'élément, avec un agent autre que Claude si vous le souhaitez.
- Deux versions se trouvent côte à côte en tant que fichiers ; rien n'a été écrasé silencieusement.
Si cela n'a pas fonctionné : vérifiez que votre agent est connecté et authentifié pour le mode choisi, puis réessayez avec un brief plus petit avant de juger l'outil.
Autres options
Autres alternatives à Pencil.dev
FAQ
Alternative à Pencil.dev : FAQ
Pencil (pencil.dev) est-il open source ?
Pas l'application. Pencil est un produit à code source fermé soutenu par a16z ; ce qui est ouvert, c'est le format de fichier .pen, qui est documenté mais peut changer. OpenDesign est entièrement open source sous Apache-2.0 — l'application entière, pas seulement un format.
Pencil.dev est-il gratuit ?
Il est gratuit aujourd'hui, explicitement en accès anticipé, et les fondateurs ont signalé des forfaits payants et des limites. OpenDesign est gratuit car il est open source ; vous apportez votre propre clé d'agent, de sorte que les dépenses du modèle vous sont facturées sans plafond du fournisseur.
Quelle est la différence entre OpenDesign et Pencil ?
Ils sont proches : tous deux sont pilotés par des agents et conservent le design sous forme de fichiers dans votre dépôt sous Git. OpenDesign est entièrement open source, neutre quant au fournisseur BYOK plutôt qu'orienté Claude en priorité, et rend l'interface utilisateur, les présentations, les prototypes et un système de design ; Pencil est une toile vectorielle dans votre IDE axée sur l'interface utilisateur vers le code. Le verdict liste les conditions pour chacun.
Pencil fonctionne-t-il avec d'autres agents que Claude ?
Oui, il connecte plusieurs agents via MCP, mais il est optimisé pour Claude Code et les évaluateurs signalent une expérience plus faible ailleurs. OpenDesign traite Claude, Codex, Cursor, Gemini, OpenCode et Qwen comme des éléments de premier ordre.
Puis-je continuer à utiliser Pencil aux côtés d'OpenDesign ?
Oui. Les deux conservent les fichiers dans le même dépôt, donc les exécuter côte à côte coûte peu : dessinez dans Pencil, rendez tout le reste à partir de DESIGN.md dans OpenDesign. Voir ce qui bouge et ce qui reste.
OpenDesign est-il vraiment open source ?
Oui. Il se trouve sur github.com/nexu-io/open-design sous Apache-2.0 et peut être auto-hébergé.
OpenDesign est-il affilié à Pencil ?
Non. OpenDesign est un projet open source indépendant. Pencil est un produit distinct soutenu par a16z sur pencil.dev ; il s'agit d'une comparaison non affiliée rédigée par l'équipe d'OpenDesign.
Essayez OpenDesign sur un vrai écran
Reconstruisez un écran que vous avez dessiné dans Pencil avec n'importe quel agent de codage, jugez l'aller-retour, puis décidez. Choisissez la situation qui vous correspond ; la page ne détecte pas votre configuration.