Description
pen.dev est une toile de design agentique de High Agency Inc., le créateur précédemment connu sous le nom de Pencil (pencil.dev). Le produit se décrit désormais comme conçu pour construire des logiciels plutôt que de simples écrans statiques : les designers et développeurs travaillent sur une toile ouverte où les agents IA peuvent concevoir à leurs côtés, affiner le travail existant ou créer de nouveaux écrans à partir d'une invite.
Lire la suite
La toile conserve les conceptions dans un format de fichier ouvert appelé .pen, un fichier JSON simple que les personnes et les agents peuvent lire et modifier, stocké dans la même base de code que le produit qu'il décrit. Le travail se fait soit manuellement, en utilisant des outils familiers de Figma et Sketch tels que l'outil plume, les dégradés, les composants et la mise en page flexible, soit en dirigeant un agent pour esquisser, affiner ou étendre un écran. Un navigateur intégré et une extension Chrome permettent aux utilisateurs d'importer n'importe quelle page web, application ou design directement sur la toile sous forme de calques modifiables, et les fichiers Figma, y compris les vecteurs, le texte et les styles, s'importent directement.
Les utilisateurs apportent leur propre modèle à la toile : pen.dev fonctionne avec Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek et Minimax, connectés via un abonnement existant à ChatGPT ou Claude, une clé API, ou MCP, WebMCP ou la ligne de commande. Le même lien MCP permet à des outils tels que Claude Code, Codex, Cursor ou Antigravity de concevoir sans interface via le CLI de pen.dev, sans ouvrir la toile du tout.
D'autres fonctionnalités de la toile incluent des effets de shader en temps réel appelés Vibe Shaders, un dessin d'icônes et d'illustrations assisté par IA appelé AI Pen, des bibliothèques de composants partagées entre les fichiers, et un pipeline de rendu WebGL personnalisé conçu pour rester fluide avec des milliers de calques ou des dizaines de gigaoctets de contenu. Le travail terminé s'exporte en PNG, JPEG, WEBP ou PDF à n'importe quelle échelle, en HTML et CSS ou Tailwind en un clic, ou sous forme de lien partageable qui ouvre la dernière version dans n'importe quel navigateur. Un mode diaporama et présentation est intégré pour transformer le travail de la toile en un diaporama.
pen.dev est actuellement gratuit ; la société affirme qu'elle décrira tout plan payant clairement avant de facturer. Il est disponible en tant qu'application de bureau téléchargeable ainsi que des extensions de navigateur et d'éditeur pour Chrome, VS Code, Cursor et OpenVSX, et est soutenu par le programme Speedrun de a16z. Il convient aux designers de produits et aux petites équipes de logiciels qui souhaitent passer entre le design visuel et le code fonctionnel sans changer d'outils, plus qu'aux équipes à la recherche d'un produit de design graphique pur.
- CatégorieOutils de conception UI et UX IA
- Modèle tarifaireFreemium
- DéploiementBureau, Extension IDE, CLI
- PlateformesmacOS, Windows, Linux
Fonctionnalités principales de pen.dev
Format de fichier ouvert .pen que les agents peuvent lire et modifier nativement
Support de modèle apporté pour Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek et Minimax
Connexions MCP, WebMCP et CLI pour un design sans interface depuis Claude Code, Cursor ou Codex
Navigateur intégré et extension Chrome pour importer n'importe quelle page web sous forme de calques modifiables
Importation de Figma qui préserve les vecteurs, le texte et les styles
Toile WebGL personnalisée conçue pour rester fluide avec des milliers de calques
Vibe Shaders pour des effets visuels et des dégradés en temps réel
AI Pen pour générer des icônes et des illustrations avec des agents
Exportation en un clic vers HTML/CSS/Tailwind ou PNG/JPEG/WEBP/PDF
Mode diaporama et présentation pour transformer le travail de la toile en un diaporama
Comment utiliser pen.dev ?
Télécharger : Obtenez l'application de bureau pen.dev ou ajoutez l'extension Chrome, Cursor ou VS Code.
Démarrer une toile : Ouvrez une toile vierge ou importez un design depuis Figma, une page web ou votre propre base de code.
Connecter un modèle : Connectez-vous avec un abonnement Claude ou ChatGPT, ajoutez une clé API, ou liez un agent via MCP.
Concevoir ou demander : Dessinez manuellement avec l'outil plume et les composants, ou demandez à un agent de construire ou d'affiner un écran.
Ajouter des effets : Appliquez des shaders, des dégradés et des icônes dessinées par IA où nécessaire.
Exporter ou partager : Exportez vers HTML/CSS, formats d'image ou PDF, ou envoyez un lien vers la dernière version.
Cas d'utilisation de pen.dev
- Conception d'UI agentique
- Passage de la conception au code
- Clonage de pages web
- Design sans interface via MCP
