Haben Sie sich jemals gefragt, wie cool es wäre, etwas einfach auf Papier zu zeichnen und es in der realen Welt zum Leben zu erwecken? Genau das ist Microsoft mit der KI-gestützten Web-App Skletch2Code gelungen, mit der handschriftliche Zeichnungen auf einem Whiteboard per Mausklick in HTML-Websites umgewandelt werden können.
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 extrahiert dann mithilfe der Texterkennung den handgeschriebenen Text in der Zeichnung, um HTML-Ausschnitte aller Designelemente im Bild zu kombinieren und zu erstellen.
Damit können Webdesigner und Entwickler in Sekundenschnelle HTML-Prototypen einer Website in vielen verschiedenen Stilen erstellen. Wenn Sie wissen möchten, wie dies im Backend funktioniert, lesen Sie unbedingt die technischen Details zu Sketch2Code auf der Website von Microsoft.
Nachfolgend finden Sie ein kurzes Tutorial, das Ihnen zeigt, wie einfach es ist, mit Sketch2Code Website-Layoutzeichnungen in echte HTML-Seiten umzuwandeln.
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.
Sobald Sie die Website geöffnet haben, klicken Sie auf die Schaltfläche „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 künstlicher Intelligenz automatisch eine HTML-Seite basierend auf dem Layout des von Ihnen hochgeladenen Bildes generiert.
Sobald der Vorgang abgeschlossen ist, wird Ihnen eine Vorschau der neu generierten HTML-Seite angezeigt und Sie haben die Möglichkeit, den vollständigen Code herunterzuladen. Klicken Sie auf die Schaltfläche „HTML-Code herunterladen“, 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 alles. Wir hoffen, dass Sketch2Code Ihnen beim Prototyping eines Webseiten-Layouts Zeit spart.
Verwandte Artikel:
Nahtlose Verwaltung von Bluesky-, Mastodon- und Threads-Konten mit Openvibe
7:51
Beheben des Fehlers „Ungültiger Handle“ bei Bluesky: Eine Schritt-für-Schritt-Anleitung
11:49
Die 5 wichtigsten Methoden zum Starten des Datei-Explorers als Administrator in Windows 11
14:55
Schreibe einen Kommentar