Pour les développeurs
Développeurs
Arrêtez de remesurer des images. Inspectez les propriétés réelles des éléments, copiez le code dans la langue de votre stack, scriptez les exports depuis la CLI — et laissez les agents IA lire le design via MCP.
- Dev Mode : espacements, typographie et variables sur chaque élément
- CSS, React, Tailwind, SwiftUI, UIKit, Compose ou Android XML
- CLI et MCP pour le scripting et les workflows IA
Pourquoi la passation gaspille d’ordinaire votre semaine
Les specs arrivent en captures d’écran fléchées ; les vraies valeurs restent verrouillées dans l’outil du designer.
Vous transcrivez couleurs, espacements et gammes typographiques à la main — et chaque transcription est une occasion de se tromper.
L’outil de design vit hors de votre chaîne : rien à scripter, rien à automatiser, rien que vos agents puissent interroger.
À la troisième révision, le code et le fichier de design ne concordent plus, et personne ne sait lequel a raison.
Les chiffres qui comptent à la passation
- 7
- formats de code générés directement depuis les propriétés des éléments en Dev Mode
- 0
- capture d’écran à remesurer — cliquez sur un élément et lisez ses valeurs réelles
- 4
- capacités via MCP : structure, propriétés, génération de code, rendu PNG
- 3
- façons de travailler : éditeur dans le navigateur, outil en ligne de commande et MCP pour les agents IA
Pensé pour ceux qui livrent du code
Inspectez la source, pas une capture d’écran
Un fichier de design est une structure de données, et Dev Mode le traite comme telle. Cliquez sur un élément et vous lisez ses propriétés réelles — dimensions, paddings, couleurs, styles de texte, et variables avec leurs modes — les valeurs mêmes avec lesquelles le design a été construit. Le code généré suit la même règle : les frames en auto-layout sortent comme le flexbox qu’elles sont déjà en pratique, et les valeurs tokenisées restent des tokens au lieu de s’effondrer en nombres magiques.
Le contexte de workflow vient avec. Les annotations Ready-for-Dev vous disent quelles frames sont des contrats et lesquelles sont des brouillons ; les commentaires portent le raisonnement ; l’historique des versions répond à « qu’est-ce qui a changé depuis la dernière fois que j’ai construit contre ce fichier ». Les jeux de devinettes qui rendent les estimations front-end malhonnêtes ont simplement moins d’endroits où se cacher.
Automatisez : CLI et MCP
L’éditeur n’est pas la seule porte. Un outil en ligne de commande rend les documents et exporte du PNG — un choix naturel pour les builds de documentation et les vérifications CI — et la génération de code automatisée tourne en pipeline depuis les mêmes designs, si bien que les valeurs générées concordent toujours avec ce que montre Dev Mode.
Pour le développement assisté par IA, MCP fait la différence entre un agent qui devine depuis des pixels et un agent qui sait : il liste les fichiers, parcourt la structure du document, lit les propriétés des éléments, génère du code et rend des PNG de référence. Pointez votre assistant compatible MCP dessus, et le fichier de design devient un contexte interrogeable dans votre éditeur.
Questions fréquentes
Quelle est la précision du code généré ?
Il est dérivé des propriétés réelles de l’élément — espacements, couleurs, typographie, variables — avec l’auto-layout exprimé en flexbox. Prenez-le comme un point de départ fidèle : il supprime les erreurs de transcription, et vous l’adaptez ensuite à vos conventions de composants et à votre gestion d’état.
Ai-je besoin d’un siège payant juste pour inspecter des designs ?
Dev Mode arrive avec les plans Professional et Organization. Consulter et commenter les designs partagés est gratuit sur tout plan — l’inspection au niveau du code et la génération sont ce qu’ajoute le palier payant.
Puis-je utiliser Tuvi depuis des scripts et la CI ?
Oui. L’outil en ligne de commande rend les documents et exporte du PNG pour les pipelines, et la génération de code automatisée couvre les formats principaux — les builds de documentation et les vérifications CI tournent sans que personne n’ouvre l’éditeur.
Que peut faire concrètement un agent IA avec un design ?
Via MCP : lister les fichiers de design, lire l’arbre du document, inspecter les propriétés des éléments, générer du code et rendre des éléments en PNG. La modification des documents n’est volontairement pas exposée — les agents lisent et génèrent, ils n’éditent pas en silence.
Suis-je obligé de travailler dans le navigateur ?
L’éditeur est dans le navigateur — zéro installation pour toute l’équipe — mais l’outillage ne s’y limite pas : l’outil en ligne de commande couvre rendu et export scriptés, et MCP amène les designs directement dans l’assistant de votre IDE.