Pencil

C'EST QUOI ?

Pencil est un outil de design vectoriel disponible en extension IDE (VS Code, Cursor) ou en app desktop standalone (macOS, Linux, Windows). Il apporte un canvas de design infini avec génération de composants HTML/CSS/React pixel-perfect pilotée par IA. Les fichiers .pen vivent dans votre repo et se versionnent avec Git comme n'importe quel fichier source.

POURQUOI C'EST INTÉRESSANT ?

• Design dans l'IDE : Plus besoin de jongler entre Figma et votre éditeur. Le canvas est à un onglet de votre code, zéro friction.
• MCP bidirectionnel : Pencil expose un serveur MCP local avec lecture ET écriture. Vous pouvez brancher d'autres MCPs, des bases de données, des APIs ou des agents externes directement sur le canvas.
• Format ouvert : Les fichiers .pen sont lisibles, debuggables et extensibles. Pas de boîte noire, pas de vendor lock-in. Tout vit dans le repo.
• IA multiplayer : Lancez plusieurs agents en parallèle pour générer des écrans ou explorer des directions de design simultanément.
• Import Figma : Copiez-collez vos designs depuis Figma. Vecteurs, textes et styles arrivent intacts.
• Brand kits intégrés : Des kits de composants design prêts à l'emploi, ou branchez votre propre design system depuis le codebase.

CAS D'USAGE

• Prototyper des interfaces directement dans Cursor ou VS Code sans quitter le contexte de développement
• Générer du code React/HTML/CSS production-ready à partir de maquettes vectorielles
• Versionner les fichiers de design avec Git au même titre que le code source
• Connecter des sources de données externes (APIs, BDD) au canvas via MCP pour des maquettes dynamiques