Haben Sie sich jemals gefragt, wie cool es wäre, einfach etwas auf Papier zu zeichnen und es in der realen Welt zum Leben zu erwecken? Nun, das ist nur etwas, das Microsoft mit der KI-basierten Skletsch2Code-Web-App erreicht hat, die handschriftliche Zeichnungen von einem Whiteboard in HTML-Websites mit einem Klick umwandeln kann.
Sketch2Code kann jedes handgezeichnete Layout einer Website in Sekundenschnelle in HTML umwandeln. Das Tool verwendet den Computer Vision AI-Dienst von Microsoft, um HTML-Objekte in einer Zeichnung zu erkennen, und verwendet dann die Texterkennung, um den handgeschriebenen Text in der Zeichnung zu extrahieren, um HTML-Snippets aller Designelemente im Bild zu kombinieren und zu erstellen.
Dies macht es für Webdesigner und -entwickler wahnsinnig schnell, HTML-Prototypen einer Website in vielen verschiedenen Stilen in Sekundenschnelle zu erstellen. Wenn Sie wissen möchten, wie das im Backend funktioniert, lesen Sie unbedingt die technischen Details zu Sketch2Code auf der Microsoft-Website.
Nachfolgend finden Sie ein kurzes Tutorial, das Ihnen zeigt, wie einfach es ist, Sketch2Code zu verwenden, um Website-Layout-Zeichnungen in echte HTML-Seiten zu konvertieren.
Zeichnen Sie zunächst ein Layout Ihrer Website auf ein Whiteboard oder ein weißes Blatt. Machen Sie dann ein Foto davon und speichern Sie es auf Ihrem Computer. Klicken Sie anschließend auf die Schaltfläche unten, um die Sketch2Code-Web-App in Ihrem Browser zu öffnen.
Sketch2Code-Web-App starten
Sobald Sie die Website geöffnet haben, klicken Sie auf das Design hochladen und wählen Sie das Bild des Website-Layouts aus, das Sie auf ein Whiteboard oder ein weißes Blatt gezeichnet haben.
Lehnen Sie sich nach dem Hochladen des handgezeichneten Website-Designs zurück und sehen Sie zu, wie Sketch2Code mithilfe von KI automatisch eine HTML-Seite generiert, die auf dem Layout in dem von Ihnen hochgeladenen Bild basiert.
Sobald der Vorgang abgeschlossen ist, wird Ihnen eine Vorschau der frisch generierten HTML-Seite angezeigt, zusammen mit der Option, den vollständigen Code herunterzuladen. Klicken Sie auf Laden Sie Ihren HTML-Code herunter , um die .html-Datei Ihres handgezeichneten Website-Layouts abzurufen, damit Sie es lokal in Ihrem Webbrowser testen und in der Vorschau anzeigen können.
Das ist es. Wir hoffen, dass Sketch2Code Ihnen Zeit beim Prototyping eines Webseiten-Layouts spart.