Vous êtes-vous déjà demandé à quel point ce serait cool de simplement dessiner quelque chose sur un papier et de le laisser prendre vie dans le monde réel ? Eh bien, c'est juste quelque chose que Microsoft a réalisé avec l'application Web Skletch2Code alimentée par l'IA qui peut convertir des dessins écrits à la main d'un tableau blanc en sites Web HTML en un clic.
Sketch2Code peut convertir n'importe quelle mise en page dessinée à la main d'un site Web en HTML en quelques secondes seulement. L'outil utilise le service Computer Vision AI de Microsoft pour détecter les objets HTML dans un dessin, puis utilise la reconnaissance de texte pour extraire le texte manuscrit du dessin afin de combiner et de créer des extraits HTML de tous les éléments de conception de l'image.
Cela permet aux concepteurs et développeurs Web de créer des prototypes HTML d'un site Web dans de nombreux styles différents en quelques secondes. Si vous souhaitez savoir comment cela fonctionne dans le backend, assurez-vous de lire les détails techniques sur Sketch2Code sur le site Web de Microsoft.
Vous trouverez ci-dessous un didacticiel rapide pour vous montrer à quel point il est simple d'utiliser Sketch2Code pour convertir les dessins de mise en page de sites Web en pages HTML réelles.
Tout d'abord, dessinez une mise en page de votre site Web sur un tableau blanc ou une feuille blanche. Ensuite, prenez-en une photo et enregistrez-la sur votre ordinateur. Après cela, cliquez sur le bouton ci-dessous pour ouvrir l'application Web Sketch2Code dans votre navigateur.
Lancer l'application Web Sketch2Code
Une fois le site Web ouvert, cliquez sur le bouton Télécharger la conception et sélectionnez l'image de la mise en page du site Web que vous avez dessinée sur un tableau blanc ou une feuille blanche.
Après avoir téléchargé la conception du site Web dessinée à la main, asseyez-vous et regardez Sketch2Code utiliser l'IA pour générer automatiquement une page HTML basée sur la mise en page de l'image que vous avez téléchargée.
Une fois le processus terminé, vous verrez un aperçu de la page HTML fraîchement générée ainsi que la possibilité de télécharger le code complet. Clique sur le Téléchargez votre code HTML pour obtenir le fichier .html de la mise en page de votre site Web dessiné à la main afin que vous puissiez le tester et le prévisualiser localement dans votre navigateur Web.
C'est ça. Nous espérons que Sketch2Code vous fera gagner du temps dans le prototypage d'une mise en page Web.