Interface piloté par annotations : Comment concevoir des templates dans Figma et laisser Claude extraire les coordonnées

Un développeur créant Zinecore, une application de création de zines avec une esthétique 90s/y2k (rose fluo, contours épais, bulles de chat, flyers riot grrrl, pages style MySpace), a constaté que l'approche évidente—définir par programmation des emplacements photo dans le code—contraignait chaque modèle à une grille ennuyeuse. La solution de contournement : concevoir des modèles dans Figma (certains générés par IA, puis nettoyés), les exporter en PNG plats, et dessiner des rectangles colorés sur un calque séparé. Rouge pour les emplacements photo, bleu pour le texte. Fournir à la fois le design et l'image d'annotation à Claude.

Claude extrait les coordonnées, génère des définitions de zones modifiables et crée des cibles tactiles. Résultat : un après-midi de travail pour ce qui aurait été des semaines à construire un moteur de mise en page personnalisé. Ajouter un nouveau modèle nécessite désormais seulement de le concevoir et de dessiner des boîtes—aucune modification de code. L'ensemble du système d'outils de conception est ce pipeline d'annotation.

Le Schéma Plus Large : Conception Papier d'Abord

Le développeur met l'accent sur un changement de flux de travail :

• Faites toute la réflexion conceptuelle sur papier avant que Claude ne voie quoi que ce soit.
• Esquissez les écrans à la main, choisissez la palette de couleurs complète, décidez de la hiérarchie typographique.
• Faites des captures d'écran des applications que vous aimez et annotez les éléments spécifiques que vous voulez copier de chacune.
• Donnez les contraintes à Claude et demandez l'implémentation.

Faire l'inverse (« conçois-moi une application, donne-lui un look 90s ») conduit à trois jours d'ajustements pour obtenir quelque chose qui reste encore générique. Claude est fort pour implémenter fidèlement une vision spécifique, mais faible pour avoir la vision à votre place. Une fois que vous traitez la conception comme votre travail et l'implémentation comme celui de Claude, la qualité des résultats s'améliore.

Les Détails Ingligents

• Décrivez les problèmes visuels en termes de poids, hiérarchie et rythme au lieu de « ça cloche, améliore-le ».
• Collez des codes hexadécimaux provenant de vraies photos de référence au lieu de dire « rose chaud ».
• Soyez précis sur l'application dont vous essayez d'imiter l'espacement—ne vous contentez pas de nommer l'ambiance.

L'application (Zinecore sur l'App Store) est le résultat concret, mais la méthode d'annotation papier d'abord est la partie transférable.