Image to UIpar UIZZE

Image to UI Skill.

Implémentez l’interface que vous voyez déjà. Image to UI traite une capture d’écran ou une maquette comme la spécification visuelle, conserve la stack existante du projet et demande à votre agent d’effectuer le rendu et la comparaison avant d’affirmer qu’il y a correspondance.

Capture d’écran vers code
Reproduction d’une référence
Implémentation d’interface

Télécharger OpenDesign Voir le guide d’utilisation

Revue de la source · image-to-uiSKILL.md

Tâche Implémentation d’interface à partir d’une capture d’écran Produit • Du code d’interface dans le projet existant • Du vrai texte et de vrais contrôles, pas une capture aplatie • Un résumé de comparaison avec les écarts restants Avant de commencer Fournissez une image de référence lisible, son viewport cible, l’accès au projet et les ressources disponibles. Un rendu dans le navigateur est nécessaire pour vérifier la correspondance visuelle. Aucun compte UIZZE ni aucune connexion MCP n’est requis.

Résumé éditorial · source examinée le 2026-10-12 · exemple non généré

01 : ce qu’elle fait

Utiliser l’image comme spécification

Cette courte skill vise à reproduire une décision visuelle existante, pas à trouver une nouvelle direction artistique. Le flux de travail ci-dessous décrit la source ; ce n’est pas une reconstruction terminée.

Flux de travail issu de la sourcePas un benchmark d’exécution

La méthode de travail

L’agent part de l’image réelle : ses dimensions, le texte visible, la hiérarchie, les proportions et les ressources. Il lit aussi le projet cible afin que l’implémentation s’intègre au framework et à l’écran existants. Une capture recadrée ne définit que la zone visible ; elle n’autorise pas à inventer le reste de la page.

L’implémentation utilise une vraie mise en page, du vrai texte et de vrais contrôles. Une fois le viewport de référence atteint, l’agent vérifie les autres tailles demandées. La dernière étape consiste à effectuer le rendu aux dimensions de la référence, attendre les polices et les images, comparer le résultat et corriger les différences visibles. Les ressources manquantes et un rendu non vérifié doivent rester explicites.

Livrables attendus

Du code d’interface modifiable, utilisant la stack du projet cible et des composants réutilisables appropriés
Les contrôles demandés reliés au comportement existant, sans fonctionnalités backend inventées
Un court compte rendu des comparaisons visuelles réellement effectuées, des différences restantes et des ressources manquantes

Voir l’exemple de brief

De la référence à la comparaison

01
Examiner l’image réelle
Lisez l’image elle-même, pas seulement son nom de fichier ou le texte extrait. Identifiez ses dimensions, la zone visible, les alignements, la typographie et les ressources avant de modifier le code.
02
Construire à la taille de la référence
Respectez la hiérarchie, les retours à la ligne, les espacements et les recadrages dans la stack existante. Réutilisez les composants lorsqu’ils peuvent reproduire la référence ; ne la forcez pas dans des valeurs par défaut sans rapport.
03
Rendre et corriger
Capturez l’écran en cours d’exécution au même viewport. Comparez d’abord les grandes différences de mise en page et de proportions, puis la typographie, les couleurs et les petits détails ; refaites un rendu après les modifications.
04
Vérifier les variantes demandées
Une fois la taille de référence établie, testez les tailles responsives demandées et les contrôles fonctionnels. Signalez les écarts restants plutôt que de promettre une fidélité au pixel près.

02 : quand l’utiliser

Quand l’utiliser

Choisissez Image to UI lorsque la direction visuelle est déjà arrêtée et que vous devez l’implémenter fidèlement.

Bien adapté

Une maquette d’écran approuvéeTransformez une image de design fournie en écran dans une application existante, en conservant la hiérarchie et le contenu visibles.
Une reconstruction à partir d’une capture d’écranRecréez une référence dont le fichier de design d’origine n’est pas disponible, en signalant clairement les polices ou images manquantes.
Une correction visuelle cibléeRapprochez une implémentation d’une référence connue à l’aide de captures au même viewport et d’une liste des différences restantes.

Limites à vérifier

Une capture d’écran ne définit pas les comportements cachésLes sections non visibles, les réponses du backend et les écrans supplémentaires sont hors de la référence. Fournissez leurs exigences plutôt que d’attendre de la skill qu’elle déduise un produit.
Les ressources exactes peuvent manquerLa skill demande de signaler les polices, icônes ou images manquantes. Elle ne peut pas établir une correspondance visuelle exacte lorsque les ressources nécessaires ne sont pas disponibles.
La fidélité exige une preuve par le renduUne implémentation plausible ou un build réussi ne prouve pas la ressemblance. Si l’environnement ne peut pas rendre l’écran, la correspondance visuelle reste non vérifiée.

Éléments à fournir

Une référence lisible et un viewportJoignez l’image réelle et indiquez les dimensions de navigateur visées. Précisez si l’image est un recadrage et quelle zone doit être implémentée.
Le projet existant et les ressourcesIndiquez la route ou le composant cible, le framework, les polices, les icônes et les fichiers d’images. Signalez les composants ou comportements existants à conserver.
Exigences d’interaction et de responsiveNommez les contrôles à relier et les largeurs supplémentaires à prendre en charge. Indiquez ce que la capture ne montre pas et ce qui doit rester hors périmètre.

03 : décisions importantes

Décisions importantes

Reproduire avant de redessiner
L’image détermine la palette, la composition et le contenu visible. Des ajouts décoratifs ou une autre direction de design nécessitent une demande distincte.
Reconstruire l’interface, pas le bitmap
Des mises en page grid et flex classiques, du vrai texte et des contrôles utilisables préservent une interface modifiable. Le positionnement absolu est réservé aux vraies superpositions, pas à tout l’écran.
Comparer ce qui est comparable
Des dimensions de viewport identiques et des ressources chargées rendent la comparaison significative. L’ordre de correction documenté commence par les proportions et la mise en page avant de peaufiner les petits détails.

04 : essayer un brief ciblé

Essayer un brief ciblé

L’exemple ci-dessous n’a pas été exécuté. Joignez votre image de référence et adaptez les détails du projet avant de l’utiliser.

Vérifier la configuration

Le README en amont documente la commande d’installation ci-dessous. Elle installe le package Image to UI natif GitHub ; ce n’est pas l’installation du service optionnel UIZZE MCP.

Commande d’installation documentée

npx skills add uizze/uizze --skill image-to-ui

Utilisez un agent capable d’examiner des images et de modifier votre projet. Exécutez le projet dans un navigateur pour la vérification visuelle. La skill elle-même ne requiert aucun compte UIZZE ni connexion MCP ; votre projet et votre agent conservent leurs propres prérequis de configuration.

Joindre un seul écran

Limitez la première tâche à un écran visible ou à un recadrage. Incluez l’image, les ressources exactes et les interactions déjà prises en charge par l’application.

Exemple de brief

Utilise image-to-ui pour implémenter dans l’application existante la référence jointe de l’écran de facturation. Commence par examiner l’image et le projet, puis confirme avec moi la route cible et le viewport de référence s’ils ne sont pas clairs. Respecte le texte visible, la hiérarchie, les espacements, les retours à la ligne et les recadrages d’images au lieu de les redessiner. Utilise les polices et ressources fournies ; liste ce qui manque au lieu de le remplacer silencieusement. Conserve le comportement existant des paiements et des factures, et n’invente ni réponses API ni sections non visibles. Effectue le rendu au viewport de référence, attends le chargement des polices et des images, compare avec l’image fournie et corrige d’abord les plus grandes différences. Vérifie ensuite les largeurs de 390 px et 320 px sans modifier l’identité visuelle. Indique les captures réellement comparées, les contrôles vérifiés et les écarts restants.

Examiner le résultat rendu

Comparez le même viewport avant de juger les variantes responsives. Vérifiez à la fois le design visible et les contrôles demandés.

La référence et la capture rendue utilisent le même viewport, avec les polices et les images chargées.
Le contenu visible et les proportions suivent l’image ; les ressources manquantes ou les différences volontaires sont nommées.
Les contrôles demandés conservent leur comportement réel, et les mises en page étroites spécifiées restent utilisables.

OpenDesign fournit un espace de design local pour les agents de code. Cette mention ne signifie pas que la skill est fournie avec lui, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 : source et licence

Source et licence

Cette page décrit la révision figée de la source liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: UIZZE
Dépôt: uizze/uizze
Fichier de la skill: skills/image-to-ui/SKILL.md
Licence: MIT · licence propre à la skill
Instantané examiné: 2026-10-12 · 146928eb50bc

Résumé éditorial de la source

Image to UI est un court flux de travail de reconstruction à partir d’une capture d’écran : examiner l’image et le projet, implémenter l’interface visible dans la stack existante, puis effectuer le rendu au viewport de référence et corriger les différences. Il s’agit d’un résumé éditorial, pas du compte rendu d’un test.

Résumé original de OpenDesign, fondé sur la source liée. La licence MIT est propre au répertoire de cette skill ; d’autres packages du dépôt peuvent avoir des mentions différentes. Les étoiles du dépôt ne sont pas des nombres d’installations.

06 : questions avant de commencer

Questions avant de commencer

Image to UI nécessite-t-il le MCP UIZZE payant ?

Non. La skill et le README en amont indiquent explicitement qu’aucun compte ni aucune connexion MCP n’est requis. Le dépôt propose aussi un service payant optionnel de recherche de références, mais il est distinct de l’implémentation de l’image que vous fournissez.

Peut-il construire le reste d’une page à partir d’une capture recadrée ?

La source indique de reproduire la zone visible et de ne pas inventer les sections non vues. Fournissez des images de référence supplémentaires ou des exigences explicites pour tout ce qui dépasse le recadrage.

Garantit-il un résultat au pixel près ?

Aucune garantie ne découle des instructions. La skill vise une reconstruction fidèle et exige une comparaison par le rendu. Les ressources manquantes et les écarts restants doivent être signalés ; sans rendu, la fidélité visuelle n’est pas vérifiée.

Image to UI

Construisez l’écran que vous avez déjà choisi

Apportez la référence lisible, le projet cible et ses ressources. Respectez le viewport d’origine, inspectez l’interface en cours d’exécution et rendez explicites les différences restantes.

Télécharger OpenDesign Parcourir les skills de design