AI Tool Atlas

ProgrammationPrésentation documentéeDernière vérification Sep 29, 2026

pen.dev (formerly pencil.dev) : tarifs, fonctions et meilleurs usages

Canevas de design agentique où des agents IA et des outils manuels construisent des interfaces ; application de bureau, extensions d'IDE et CLI.

Capture d'écran de la page d'accueil de pen.dev (formerly pencil.dev), outil d'IA programmation

Notre avis : pen.dev (anciennement pencil.dev) convient aux développeurs qui font du design et aux équipes qui utilisent des agents de code IA et veulent un canevas de design WebGL avec import Figma et HTML, pilotage MCP et CLI, et export HTML/Tailwind, actuellement gratuit.

Principale limite : L'éditeur indique que des offres payantes pourraient être introduites plus tard, et les fonctions IA nécessitent votre propre abonnement de modèle ou clé API.

Par la rédaction d'AI Tool Atlas. D'après la documentation officielle de l'éditeur ; nous n'avons pas testé ce produit en pratique. Ce que signifie « aperçu documenté »

Pour qui convient pen.dev (formerly pencil.dev)

pen.dev (anciennement pencil.dev) convient aux développeurs qui font du design et aux équipes qui utilisent des agents de code IA et veulent un canevas de design WebGL avec import Figma et HTML, pilotage MCP et CLI, et export HTML/Tailwind, actuellement gratuit. D'après la documentation de l'éditeur, absent d'un test pratique.

Idéal pour : Développeurs qui font du design

Convient aussi pour

  • Équipes qui utilisent des agents de code IA

Choisissez un autre outil si les prix pourraient changer à l'avenir

Ou si

  • Version Windows ARM64 annoncée comme bientôt disponible
  • Nécessite votre propre abonnement de modèle ou clé API pour l'IA

Tarifs et limites d'utilisation de pen.dev (formerly pencil.dev)

Prix vérifiés le Sep 29, 2026 sur la page de tarifs officielle américaine. Tarifs officiels ↗ Les prix et limites changent souvent.

pen.dev (formerly pencil.dev) page de tarifs avec offres et prix — capture d'écran de l'outil d'IA programmation, Oct 1, 2026
La page de tarifs officielle de pen.dev (formerly pencil.dev) telle que nous l'avons vue. pen.dev, relevé Oct 1, 2026

Accès gratuit et conditions d'essai

pen.dev est actuellement gratuit.

Pas d'essai ; gratuit pour l'instant.

Offres payantes : ce qui change quand vous passez à l'offre supérieure

Current free access desktop

Gratuit source (s'ouvre dans un nouvel onglet)

Inconnu

Site says paid features or plans may be introduced later with terms described beforehand

Pour : Developers who design and agent-assisted teams

Limites

  • Bring your own model subscription or API key
  • Windows ARM64 build coming soon

Comprend

  • Agent design on canvas
  • Figma and HTML import
2 plus
  • MCP, WebMCP and CLI
  • HTML/Tailwind export

API incluse

Plafonds d'usage, crédits et coûts supplémentaires

Votre propre abonnement ChatGPT ou Claude ou vos clés API pour l'IA ; les fonctions de génération d'images passent par des fournisseurs tiers.

Non précisé.

Qu'est-ce que pen.dev (formerly pencil.dev) et comment ça marche ?

pen.dev, anciennement pencil.dev, est un canevas agentique pour concevoir des sites web, des applications mobiles et des visuels sociaux. Les utilisateurs peuvent concevoir manuellement ou avec des agents IA directement sur le canevas, et importer des pages web, du HTML ou du contenu Figma. Il fonctionne avec des modèles via un abonnement ChatGPT ou Claude, des clés API, ou MCP, WebMCP et une CLI, et propose des extensions pour Cursor, VS Code, Windsurf et Antigravity.

pen.dev (formerly pencil.dev) page d'accueil — capture d'écran de l'outil d'IA programmation, Oct 1, 2026
Site officiel de pen.dev (formerly pencil.dev) : comment le produit se présente. pen.dev, relevé Oct 1, 2026

Ce que vous fournissez et ce que vous obtenez

Comment fonctionne pen.dev (formerly pencil.dev) : ce que vous fournissez, où il s'exécute et ce que vous obtenezVOUS FOURNISSEZVotre saisiePrompts vers des agents sur le ca…Pages web et HTML via le navigate…Fichiers Figma .fig ou contenu Fi…Dessin manuel avec l'outil plume…PROGRAMMATIONpen.dev (formerly pencil.dev)Ordinateuroffre gratuite, prix payant non p…offre gratuite disponiblecompte requisvérifié Sep 29, 2026VOUS RECEVEZLe résultatDesigns au format JSON ouvert .penHTML avec CSS/TailwindExports PDF, PNG, JPEG, WEBPLiens partageables et présentatio…input → pen.dev (formerly pencil.dev) → output · d'après les pages de l'éditeur, sans test pratique sauf mention
Ce que vous donnez à pen.dev (formerly pencil.dev) et ce que vous obtenez, d'après sa documentation

Ce que vous fournissez

  • Prompts vers des agents sur le canevas ou connectés via MCP
  • Pages web et HTML via le navigateur intégré ou l'extension Chrome
  • Fichiers Figma .fig ou contenu Figma collé
  • Dessin manuel avec l'outil plume et les calques

Ce que vous obtenez

  • Designs au format JSON ouvert .pen
  • HTML avec CSS/Tailwind
  • Exports PDF, PNG, JPEG, WEBP
  • Liens partageables et présentations

Où vous pouvez l'utiliser

Plateformes
Ordinateur
Compte
Obligatoire
Plateformes
macOS, Windows x64, Linux (Windows ARM64 bientôt)
Import
Figma .fig, HTML, pages web, extension Chrome
Export
PDF, PNG, JPEG, WEBP, HTML/CSS/Tailwind
Accès des agents
MCP, WebMCP, CLI
Format de fichier
.pen JSON

À quoi servent pen.dev (formerly pencil.dev)

Les scénarios sont élaborés par nos éditeurs à partir de la documentation ; le résultat réel dépend de votre saisie et de votre offre.

Concevoir des sites web et des applications

Qui
Développeurs qui font du design
Ce que vous fournissez
Prompt ou mise en page manuelle sur le canevas
Résultat attendu
Conceptions de site web, d'application mobile ou de visuel social avec composants et variables
Offre requise
Free
Limite
L'IA nécessite votre propre accès à un modèle source (s'ouvre dans un nouvel onglet)

Importer des pages existantes sur un canevas

Qui
Designers qui retravaillent des sites en ligne
Ce que vous fournissez
Page web via le navigateur intégré ou l'extension Chrome, ou un fichier Figma
Résultat attendu
Calques modifiables au lieu de captures d'écran
Offre requise
Free
Limite
L'import d'application web charge la page via les serveurs de l'éditeur source (s'ouvre dans un nouvel onglet)

Design piloté par agent dans le terminal

Qui
Équipes qui utilisent Claude Code, Codex ou Cursor
Ce que vous fournissez
Connexion MCP ou commandes CLI pen.dev
Résultat attendu
Modifications de design sans interface par des agents de code
Offre requise
Free
Limite
Nécessite un agent compatible MCP source (s'ouvre dans un nouvel onglet)

Exporter les designs vers du code

Qui
Développeurs front-end
Ce que vous fournissez
Un cadre terminé
Résultat attendu
HTML et CSS/Tailwind en un clic
Offre requise
Free
Limite
Le code généré doit encore être relu source (s'ouvre dans un nouvel onglet)

Fonctionnalités clés et leurs limites pratiques

pen.dev (formerly pencil.dev) page d'accueil — capture d'écran de l'outil d'IA programmation, Oct 1, 2026
Présentation des fonctionnalités sur le site officiel. pen.dev, relevé Oct 1, 2026

Design par agent sur le canevas

Permet aux agents IA de dessiner et modifier des calques directement sur le canevas avec des modèles de Claude, OpenAI, Gemini et d'autres. Premiers jets plus rapides.

Accès : FreeLimite : Nécessite votre propre abonnement ou clé API source (s'ouvre dans un nouvel onglet)

Canevas WebGL

Affiche des milliers de calques avec un pipeline WebGL sur mesure. Panoramique, zoom et édition fluides sur de gros fichiers.

Accès : FreeLimite : Les chiffres de performance (10 000 photos à 60 fps) sont des chiffres de l'éditeur source (s'ouvre dans un nouvel onglet)

Import HTML et Figma

Amène des pages web, du HTML et des fichiers .fig sur le canevas sous forme de calques modifiables. Ne partez jamais de zéro.

Accès : FreeLimite : La fidélité des imports complexes n'est pas documentée source (s'ouvre dans un nouvel onglet)

Composants, variables et slots

Fournit des composants réutilisables avec surcharges, variables nommées et slots de contenu. Construisez des design systems.

Accès : FreeLimite : Les bibliothèques d'UI ne se synchronisent entre fichiers que dans votre configuration source (s'ouvre dans un nouvel onglet)

Format .pen ouvert avec MCP et CLI

Stocke les designs en JSON lisible par les agents et expose le pilotage via MCP, WebMCP et CLI. Le design comme du code.

Accès : FreeLimite : Le schéma et les outils ne sont décrits que dans la documentation source (s'ouvre dans un nouvel onglet)

pen.dev (formerly pencil.dev) : points forts et limites

Où pen.dev (formerly pencil.dev) est performant

Limites à vérifier avant de payer

Comment utiliser pen.dev (formerly pencil.dev) pour concevoir une landing page avec un agent IA

pen.dev (formerly pencil.dev) documentation — capture d'écran de l'outil d'IA programmation, Oct 1, 2026
Documentation pen.dev (formerly pencil.dev) : d'où viennent les étapes ci-dessous. docs.pen.dev, relevé Oct 1, 2026

Configurer pen.dev (formerly pencil.dev)

  1. Téléchargez pen.dev pour macOS, Windows x64 ou Linux depuis la page de téléchargements.
  2. Connectez-vous avec votre compte.
  3. Connectez un modèle via votre abonnement ChatGPT ou Claude, une clé API ou MCP.
  4. Créez un nouveau fichier .pen et choisissez le modèle Website ou un canevas vierge.

Exemple : concevoir une landing page avec un agent IA

  1. Demandez à l'agent du canevas de rédiger une section hero pour votre produit.
  2. Importez votre page d'accueil actuelle via le navigateur intégré pour réutiliser ses calques.
  3. Affinez les espacements avec la mise en page flex et les variables.
  4. Exportez le cadre en HTML avec Tailwind.

Vérifier et exporter le résultat

  1. Ouvrez le HTML exporté dans un navigateur et comparez-le avec le canevas.
  2. Partagez un lien et confirmez qu'il ouvre la dernière version.
Exemple de prompt proposé par nos éditeurs (pas une sortie enregistrée du produit)
Design a landing page hero for a budgeting app with a headline, subhead, two buttons and a phone mockup, using a dark blue palette.

pen.dev (formerly pencil.dev) intégrations et API

pen.dev (formerly pencil.dev) documentation — capture d'écran de l'outil d'IA programmation, Oct 1, 2026
Documentation pen.dev (formerly pencil.dev) (suite). docs.pen.dev, relevé Oct 1, 2026

Intégrations natives et formats d'export

Exporter : HTML, CSS/Tailwind, PDF, PNG, JPEG, WEBP, .pen JSON

Accès à l'API et facturation séparée

pen.dev (formerly pencil.dev) n'a pas d'API publique dans sa documentation officielle. CLI et MCP ; aucune API REST listée Documentation de l'API ↗

Confidentialité, usage des données et droits commerciaux

Résumé des politiques actuelles de l'éditeur ; ce n'est pas un avis juridique et le badge d'un éditeur n'est pas un audit indépendant.

Comment vos entrées et sorties sont traitées

Les fonctions IA texte avec vos propres clés de fournisseur vont directement de votre appareil au fournisseur ; les fonctions image/SVG passent par les serveurs de l'éditeur vers les fournisseurs.

Le contenu des modèles pen.dev Pro n'est ni stocké ni utilisé pour entraîner des modèles d'IA.

Les imports de pages web sont traités en temps réel et ne sont pas stockés sur des serveurs.

Contrôles pour les utilisateurs professionnels

  • Rôles d'organisation et d'espace de travail

Politiques : pen.dev/privacy-policy

Meilleures alternatives à pen.dev (formerly pencil.dev) selon les besoins

« Mieux adapté » repose sur les fonctionnalités et les tarifs documentés, pas sur un test comparatif direct.

Cursor: mieux adapté à

Lovable: mieux adapté à

Canva: mieux adapté à

Alternatives
AlternativeQuand le choisirTarifsLimite
Cursor——Comparer
Lovable——Comparer
Canva——

Explorer pen.dev (formerly pencil.dev) plus loin

Meilleures alternatives à pen.dev (formerly pencil.dev)Des outils pour la même tâche, selon le besoin et le prix de départ.Les meilleurs outils de code IA en 2026Nos sélections de cette catégorie, comparées par prix et formules gratuites.Prompts pour pen.dev (formerly pencil.dev)Prompts prêts à copier, avec leurs sources.

Lié à pen.dev (formerly pencil.dev)

pen.dev (formerly pencil.dev) avis d'utilisateurs

Pas encore d'avis d'utilisateurs.

Utilisé pen.dev (formerly pencil.dev)? Soyez le premier à partager votre expérience.

Écrire un avis

Les avis sont vérifiés par un modérateur avant d'apparaître. Votre e-mail n'est jamais publié. Texte brut uniquement.

Votre note (obligatoire)

Montrez ce que vous avez créé ou ce qui a mal tourné. Les images ne sont publiées que si l'avis est approuvé ; les données de localisation sont supprimées.

    FAQ pen.dev (formerly pencil.dev)

    pen.dev est-il gratuit ?

    Oui, pen.dev est actuellement gratuit, bien que l'éditeur indique pouvoir introduire des fonctions ou offres payantes plus tard et en décrire les conditions avant toute facturation. source (s'ouvre dans un nouvel onglet)

    Quels modèles d'IA pen.dev prend-il en charge ?

    Vous pouvez utiliser Claude, OpenAI, Grok, Qwen, Gemini, Kimi, Deepseek, Minimax et d'autres via un abonnement ChatGPT ou Claude, des clés API ou MCP. source (s'ouvre dans un nouvel onglet)

    pen.dev peut-il importer depuis Figma ?

    Oui, il importe les fichiers .fig avec mises en page, styles et images, ou vous pouvez copier-coller directement depuis Figma. source (s'ouvre dans un nouvel onglet)

    Avec quels IDE pen.dev s'intègre-t-il ?

    Des extensions sont proposées pour Cursor, VS Code, Windsurf et Antigravity, et des agents comme Claude Code et Codex se connectent via MCP. source (s'ouvre dans un nouvel onglet)

    Dans quel format pen.dev enregistre-t-il les designs ?

    Le format ouvert .pen, un fichier JSON au schéma ouvert que les agents peuvent lire nativement. source (s'ouvre dans un nouvel onglet)

    Sources et méthodologie d'évaluation

    Sources officielles et dates de vérification

    Non vérifié : Tarifs futurs; Disponibilité aux États-Unis; Conservation des données de compte.

    Comment nous avons documenté et maintenons cette page

    Chaque information sur pen.dev (formerly pencil.dev) ci-dessus provient des 6 pages officiels listés ici, comparés pour la dernière fois le Sep 29, 2026 ; nous n'avons pas testé pen.dev (formerly pencil.dev) nous-mêmes, il n'a donc pas de note éditoriale. Comment nous vérifions et revérifions les pages.

    Article mis à jour Oct 10, 2026; prix vérifiés Sep 29, 2026. Les liens sortants vers les éditeurs sont de simples liens ; nous ne touchons aucune commission. Comment nous évaluons · Signaler une erreur