Heb je je ooit afgevraagd hoe cool het zou zijn om gewoon iets op papier te tekenen en het tot leven te laten komen in de echte wereld? Nou, dat is precies wat Microsoft heeft bereikt met de AI-aangedreven Skletch2Code-webapp die handgeschreven tekeningen van een whiteboard naar HTML-websites kan converteren met een klik op een knop.
Sketch2Code kan elke handgetekende lay-out van een website in slechts enkele seconden omzetten in HTML. De tool gebruikt de Computer Vision AI-service van Microsoft om HTML-objecten in een tekening te detecteren en gebruikt vervolgens tekstherkenning om de handgeschreven tekst in de tekening te extraheren om HTML-fragmenten van alle ontwerpelementen in de afbeelding te combineren en te bouwen.
Dit maakt het voor webdesigners en ontwikkelaars waanzinnig snel om binnen enkele seconden HTML-prototypes van een website in veel verschillende stijlen te bouwen. Als je wilt weten hoe dit werkt in de backend, lees dan zeker de technische details over Sketch2Code op de website van Microsoft.
Hieronder vindt u een korte zelfstudie om u te laten zien hoe eenvoudig het is om Sketch2Code te gebruiken om lay-outtekeningen van websites om te zetten in echte HTML-pagina's.
Teken eerst een lay-out van uw website op een whiteboard of een wit vel. Maak er vervolgens een foto van en sla deze op uw computer op. Klik daarna op onderstaande knop om de Sketch2Code webapp in uw browser te openen.
Start Sketch2Code Web App
Zodra u de website heeft geopend, klikt u op de Ontwerp uploaden en selecteer de afbeelding van de websitelay-out die u op een whiteboard of wit vel hebt getekend.
Na het uploaden van het handgetekende website-ontwerp, kunt u achterover leunen en kijken hoe Sketch2Code AI gebruikt, automatisch een HTML-pagina genereert op basis van de lay-out in de afbeelding die u heeft geüpload.
Zodra het proces is voltooid, krijgt u een voorbeeld te zien van de vers gegenereerde HTML-pagina, samen met de optie om de volledige code te downloaden. Klik op de Download uw HTML-code om het .html-bestand van uw handgetekende websitelay-out te krijgen, zodat u het lokaal in uw webbrowser kunt testen en bekijken.
Dat is het. We hopen dat Sketch2Code u tijd bespaart bij het maken van prototypes voor een webpagina-indeling.