Qu'est-ce que Paper.design
Paper est fondé sur une idée simple : ce que vous concevez visuellement est un véritable code. Au lieu d'un format propriétaire (comme celui de Figma), Paper utilise du vrai HTML et CSS comme fondation.
L'outil est en alpha ouverte et a récemment lancé des ajouts géniaux comme une application de bureau et un serveur MCP puissant. Cela fait de Paper un simple outil de conception, une toile entièrement connectée que n'importe quel agent AI peut lire et écrire, et qui peut être utilisé pour la génération d'UI par IA.
Fonctionnalités de Paper.design
Canvas HTML/CSS
Fonctionnalité principale avec laquelle Paper a été lancé. Vous avez un canvas libre de type Figma où vous pouvez utiliser de vrais éléments web. Chaque élément que vous créez est rendu en HTML et CSS, ce qui signifie que le design est exporté en code sans étape de conversion.
Vous obtenez de véritables mises en page flexbox, de réelles propriétés CSS, et un rendu de police authentique.
Serveur MCP de Paper
Vous pouvez connecter le design Paper à n'importe quel agent de codage AI et l'utiliser comme un espace pour voir visuellement le front-end qu'ils génèrent.
Il existe plusieurs outils MCP qui permettent aux agents d'interagir avec vos fichiers de design à un niveau granulaire. Les agents peuvent créer des cadres, mettre à jour les styles, définir du contenu textuel, obtenir des captures d'écran, et même extraire la sortie JSX ou Tailwind de n'importe quel nœud.
Il prend en charge la lecture et l'écriture, ce qui signifie qu'il peut être utilisé pour extraire du contexte d'autres sources dans votre design. La documentation propose des exemples avec des guides pour synchroniser les tokens depuis Figma et même extraire du contenu depuis Notion!
Shaders Paper
L'un des atouts les plus distinctifs de Paper est sa bibliothèque de shaders. Ce sont des effets visuels animés et accélérés par GPU. Dégradés de maillage, métal liquide, motifs en demi-ton, verre cannelé, textures de grain, et plus encore. Vous pouvez les appliquer directement aux éléments sur le canvas.
Génération d'image
Paper intègre une génération d'image AI, alimentée par différents fournisseurs de modèles. Vous pouvez utiliser Flux 2 avec support multi-références et photoréalisme, Nano Banana Pro (propulsé par Gemini), OpenAI Image Edit 1.5, et Seedream 4.5. Vous pouvez générer des images, les éditer dans leur contexte, et les placer directement sur le canvas.
Tarification de Paper.design
Paper.design propose un abonnement Pro forfaitaire, ainsi qu'un niveau gratuit et un plan Teams personnalisé. Il coûte 16 $/mois ou 144 $/an et comprend :
1 million d'appels d'outils MCP/semaine
100x plus de générations d'images/jour
Export vidéo, stockage illimité et retour d'information prioritaire
Le niveau gratuit est suffisamment généreux pour explorer sérieusement l'outil. Le plan Pro est à un prix compétitif pour ce qu'il offre, surtout compte tenu du plafond d'appels d'outils MCP.
Alternatives à Paper.design
Banani
Banani vous permet de générer des designs UI à partir de prompts textuels et de les organiser sur un canvas, avec un export Figma en un clic ultra-simple. C'est une bonne option pour l'exploration du design, puisqu'il offre plus d'outils AI intégrés comme Variants, la génération complète de flux utilisateur, et plus encore.
Similaire à Paper, il est conçu directement avec HTML et CSS et a également récemment sorti MCP, ce qui vous permet de connecter vos agents de codage pour lire et mettre en œuvre vos designs.
Contrairement aux autres alternatives de cette liste, vous n'avez pas besoin d'un abonnement séparé pour Claude ou d'un agent AI distinct pour utiliser les fonctionnalités génératives. Elles sont intégrées et constituent une partie essentielle du produit, ne nécessitant aucune configuration.
Pencil.dev
Pencil est un outil de génération UI basé sur un canvas qui intègre Claude Code. Comme Paper, il vous offre une interface de type Figma pour travailler avec des agents AI. La principale différence est que Pencil est une couche au-dessus de Claude et ne peut pas être utilisé avec d'autres agents au moment où j'écris cet article.
Subframe
Un autre outil de design canvas-code qui génère du code React prêt à être utilisé en production. Vous concevez visuellement avec de vrais composants, et les ingénieurs récupèrent le code directement dans leur base de code avec une synchronisation CLI. Il dispose également d'un serveur MCP, ce qui vous permet de le connecter à Cursor ou Claude Code et de proposer de nouveaux designs depuis votre IDE avec un contexte complet de base de code.
Variant.ai
Variant se concentre sur la génération d'un flux de variations de design à partir d'un seul prompt. Un cas d'utilisation très différent de Paper. Si votre objectif est l'exploration visuelle rapide, Variant est convaincant. Si votre objectif est de concevoir quelque chose qui sera réellement produit, l'approche code-native de Paper est mieux adaptée.
Figma Make
La comparaison évidente. Figma est plus mature, dispose d'un écosystème plus large et est le choix par défaut pour la plupart des équipes de design. Mais le canvas de Figma est propriétaire, et ses fonctionnalités AI doivent encore rattraper le retard. L'enjeu de Paper est qu'un canvas natif code sera davantage important à mesure que les agents AI deviennent une partie plus importante du flux de travail.
Cas d'utilisation de Paper.design
Designers qui en ont assez de Figma
Designers explorant les agents de codage AI souhaitant une couche visuelle
Développeurs qui veulent prototyper l'UI
Designers qui veulent jouer avec des effets visuels et des shaders
Designers + développeurs qui veulent une source unique de vérité entre design et code
Devriez-vous essayer Paper
Si vous avez déjà ressenti la frustration de concevoir quelque chose dans Figma, de le transmettre à un développeur, et de le voir s'éloigner progressivement de la vision originale, Paper.design est une solution incroyable à ce problème.
Son canvas HTML/CSS est une approche véritablement différente, et le nouveau serveur MCP en fait l'un des outils de design les plus prêts pour les agents disponibles en ce moment.
