Pencil

Qu'est-ce que Pencil ?

Pencil est un canevas de design piloté par agent construit sur un format de design ouvert qui vit directement dans votre base de code et IDE (Cursor, VS Code, Claude Code). Il élimine la passation traditionnelle design-vers-code en apportant un canevas vectoriel au pixel près dans votre environnement de développement. Les fichiers de design sont stockés comme fichiers basés sur JSON contrôlés par version (format .pen) dans votre dépôt Git, permettant aux équipes de gérer les designs en utilisant les mêmes workflows de branchement, fusion et collaboration que le code. Pencil s'intègre avec Claude Code, supporte les systèmes de design basés sur les composants, et permet des workflows bidirectionnels avec Figma via la fonctionnalité copier-coller. La plateforme utilise une architecture Model Context Protocol (MCP), permettant aux autres outils et agents de lire et écrire les designs de manière programmatique.

Fonctionnalités clés

• Canevas de Design Intégré

  Canevas WebGL infini au pixel près intégré directement dans votre IDE, éliminant les changements de contexte entre les outils de design et les éditeurs de code.

• Contrôle de Version Basé sur Git

  Les fichiers de design stockés en JSON dans votre dépôt permettent le contrôle de version, le branchement et la fusion des designs aux côtés du code en utilisant les workflows Git standard.

• Génération AI Parallèle

  Exécutez plusieurs agents de design simultanément pour explorer différentes directions de design, permettant une itération rapide et l'expérimentation sans workflows linéaires.

• Composants et Systèmes de Design

  Exploitez les bibliothèques de composants pré-construites et connectez le système de design existant de votre équipe directement depuis la base de code pour la cohérence et la réutilisabilité.

• Intégration Figma

  Importez des designs depuis Figma via un copier-coller transparent, avec les vecteurs, texte et styles transférés intacts pour une transition fluide vers les workflows intégrés au code.

• Extensibilité Alimentée par MCP

  Accès complet en lecture et écriture via Model Context Protocol permet l'intégration avec les bases de données, APIs, bibliothèques de graphiques, Playwright/Puppeteer, et agents personnalisés.

Cas d'utilisation

• Accélération Design-vers-Code : Les équipes produit peuvent designer des interfaces dans l'IDE et générer immédiatement du code prêt pour la production, effondrant la phase de passation de design et réduisant le désalignement entre l'intention de design et l'implémentation.
• Workflows de Codage Vibe : Les développeurs peuvent itérer sur l'UI/UX via des prompts de haut niveau et la manipulation visuelle sur le canevas, combinant la vitesse de la génération de code agentique avec le contrôle précis du design visuel.
• Gouvernance du Système de Design : Les organisations peuvent imposer la cohérence du design en intégrant les bibliothèques de composants approuvées et les tokens de design directement dans la base de code, rendant impossible pour les développeurs de dévier sans changements explicites de contrôle de version.
• Design et Développement Collaboratifs : Les équipes transfonctionnelles peuvent travailler de manière synchrone sur le même canevas via les fonctionnalités multijoueur, avec les designers fournissant la direction visuelle et les développeurs implémentant les composants fonctionnels en parallèle.
• Prototypage Rapide : Explorez rapidement plusieurs directions de design sur un canevas partagé, avec la capacité de brancher les designs comme le code, puis développer l'itération gagnante en application de production.

FAQ