Premières impressions : un outil de design qui livre réellement du code
En visitant le site web de Subframe, l'accroche « L'outil de design natif IA conçu pour le code » donne immédiatement le ton. Contrairement à Figma ou Sketch, qui traitent le design et le code comme des livrables séparés, Subframe les fusionne dès le départ. Le tableau de bord présente une interface propre et minimaliste, axée sur les bibliothèques de composants et un canevas par glisser-déposer. Ce qui m'a frappé lors de l'intégration au niveau gratuit, c'est l'accent mis sur « des composants réels, pas des maquettes ». Chaque élément d'interface que vous placez sur le canevas est adossé à un composant de code — qu'il s'agisse d'un bouton (Button), d'un champ de texte (TextField) ou d'une carte (Card). L'outil affiche même un extrait de code en ligne que vous pouvez importer dans votre IDE via leur CLI : npx @subframe/cli sync. Ce n'est pas juste une aide au prototypage ; c'est un système de design prêt pour la production qui correspond un à un à votre base de code.
Flux de travail principal : du design visuel aux composants de production
Le cœur de Subframe est son approche pilotée par les composants. En testant le niveau gratuit, j'ai pu insérer, dupliquer et modifier des couches en ligne. Chaque couche dispose d'un système de mise en page automatique similaire aux contraintes de Figma, ainsi que d'un mode canevas responsive qui prévisualise les mises en page mobiles à côté du bureau. La fonctionnalité de collaboration multipo utilisateur fonctionne en temps réel : les membres de l'équipe peuvent commenter directement sur les couches, à l'instar de Figma mais avec une promesse de synchronisation de code plus forte. Ce qui distingue Subframe d'alternatives comme Framer ou Visly (désormais intégré à Vercel), c'est le pipeline d'exportation : il génère un code front-end propre et prévisible sans recourir à la médiocrité générée par l'IA, comme le dit le site. Le code exporté est un ensemble de composants React (qui semble être le défaut) que vous possédez complètement. La transition est éliminée car designers et ingénieurs travaillent sur les mêmes composants. Un designer conçoit une mise en page, l'ingénieur la récupère via CLI, puis ajoute la logique métier. En pratique, cela pourrait faire gagner des jours de reprise aux équipes.
Intégration de l'IA : assistance utile ou simple effet de mode ?
Malgré l'étiquette « natif IA », l'IA de Subframe n'est pas un générateur de code. Elle agit plutôt comme un assistant de design : vous pouvez lui demander de générer des pages, des thèmes ou des composants en ligne, ou de remixer des variations à partir de générations existantes. Pendant la période gratuite, l'utilisation de l'IA est limitée à un prototype, mais le niveau Pro débloque des requêtes IA illimitées. J'ai trouvé l'IA utile pour itérer rapidement sur les schémas de couleurs et les idées de mise en page, mais elle ne produit jamais le code final — cette partie est strictement basée sur les composants. L'outil prend également en charge l'intégration MCP avec Cursor et Claude Code, permettant aux ingénieurs de demander de nouveaux designs directement depuis leur IDE. Subframe affirme que vos designs ne sont pas utilisés pour entraîner des modèles publics, uniquement pour personnaliser vos propres projets. Cet engagement en matière de confidentialité est un signal de confiance fort pour les équipes en entreprise.
Tarifs et public cible
Subframe propose un vrai niveau gratuit : 0 $ par éditeur avec 1 projet, jusqu'à 5 pages, 1 prototype IA, nombre illimité de membres d'équipe (sièges de visualisation gratuits) et un historique des versions de 24 heures. Pour les startups et les freelances, le plan Pro à 29 $ par éditeur et par mois supprime toutes les limites, ajoute des polices personnalisées et étend l'historique des versions à 7 jours. Un niveau entreprise personnalisé existe pour les grandes équipes. Ce prix est compétitif par rapport à d'autres outils de design vers code comme Anima (qui est plus basé sur des plugins) ou Locofy (qui repose sur la conversion par IA). La force de Subframe réside dans sa synchronisation préalable des composants, ce qui le rend idéal pour les équipes produit qui utilisent React (et probablement Tailwind ou similaire) et qui veulent une source unique de vérité du design au code. Il est moins adapté pour les designers graphiques qui n'ont besoin que de maquettes haute fidélité sans préoccupations de production. Une limitation : la restriction à un seul prototype du niveau gratuit semble contraignante pour évaluer l'ensemble du flux de travail IA. Dans l'ensemble, si vous êtes un ingénieur front-end ou un propriétaire de système de design fatigué des frictions de transition, Subframe mérite un sérieux coup d'œil. Visitez Subframe pour l'explorer par vous-même.
Commentaires