Mit KI vom Design zum Code: Bilder in bearbeitbare Website-Layouts verwandeln

Verringern Sie Ihre Abhängigkeit von einem Entwicklungsteam mit Tools, die Sie vom fertigen Design bis zur implementierten Benutzeroberfläche begleiten. Der Weg vom Designprototyp oder einer einfachen Skizze zur fertigen Website oder Web-App ist heute einfacher, als Sie denken. Ein einfaches Figma-Design oder ein Screenshot davon, wie Ihr Endprodukt aussehen soll, genügt für den Einstieg und erspart Ihnen einen Großteil der manuellen Programmierung.

KI-Tools zur Umwandlung von Designs in Code können anhand einer visuellen Vorlage eine erste bearbeitbare Version erstellen. In TeleportHQ können Sie dem KI-Assistenten ein Bild hinzufügen, Ihren Bedarf beschreiben und die generierten Elemente im Editor verfeinern. So gehen Sie dabei vor und führen die nötigen Prüfungen vor der Veröffentlichung durch.

Was KI-gestützte Design-zu-Code-Umwandlung leistet#

Bei der KI-gestützten Design-zu-Code-Umwandlung erstellt die KI anhand einer visuellen Vorlage und schriftlicher Anweisungen ein Website-Layout. Als Vorlage kann ein Screenshot deiner bestehenden Website oder ein Mockup für eine neue Seite dienen. Das Ergebnis enthält bearbeitbare Elemente wie Überschriften und Schaltflächen sowie Stile, die ihr Aussehen bestimmen.

Die KI interpretiert, was sichtbar ist. Details, die das Bild nicht enthält, muss sie erschließen – etwa, wie sich Spalten auf kleineren Bildschirmen neu anordnen sollen. Eine überzeugende Desktop-Vorschau muss daher noch überprüft werden. Du entscheidest weiterhin, ob die Reihenfolge der Inhalte sinnvoll ist und ob jedes Bedienelement die gewünschte Aktion ausführt.

Für ein Marketingteam kann dieser Ansatz den wiederkehrenden Aufwand zwischen einem freigegebenen Konzept und einer Seite, die zur Überprüfung bereit ist, verringern. Eine Agentur kann denselben Arbeitsablauf nutzen, um einen Kundenprototyp zu erstellen. Entscheidend ist, wie viel Nachbearbeitung das Ergebnis erfordert – nicht nur, wie schnell die erste Vorschau erscheint.

Das passende Ausgangsmaterial auswählen#

Das Ausgangsmaterial beeinflusst, wie du die Seite erstellen solltest. Ein Screenshot besteht aus Pixeln, während eine Figma-Datei auch strukturierte Design- und Informationsdaten enthält. TeleportHQ bietet separate Arbeitsabläufe für diese Eingaben.

Eine grobe Skizze lässt mehr Entscheidungen offen als ein detailliertes Mockup. Wenn dein Wireframe ein Feld mit der Bezeichnung „Formular“ enthält, gib die Felder und an, was nach dem Absenden geschieht. Andernfalls erhältst du möglicherweise ein plausibles Layout, das nicht den tatsächlichen Anforderungen entspricht.

Für ein Projekt, das mit einer Unternehmensbeschreibung beginnt, bietet der KI-Website-Builder einen direkteren Einstieg. Verwende Bildreferenzen, wenn die visuelle Anordnung bereits Teil der Aufgabenstellung ist.

Erstelle ein Layout anhand eines Screenshots#

Beginne mit einem vollständigen Abschnitt, zum Beispiel einem Hero- oder Preisbereich. Schneide irrelevante Inhalte weg, damit die gewünschte Struktur leicht zu erkennen ist. Wähle ein klares Bild mit gut lesbarem Text. Ein größerer Screenshot ist nicht automatisch hilfreicher, wenn er mehrere konkurrierende Layouts enthält.

Der Leitfaden zur Umwandlung von Screenshots in Layouts beschreibt die Unterstützung für PNG, JPEG, GIF und WebP, mit einer Größenbeschränkung von 20 MB pro Bild und bis zu drei Bildern pro Nachricht. Bildanfragen verbrauchen KI-Tokens.

1. Öffne dein Projekt und wähle oberhalb der Arbeitsfläche KI-Assistent aus.
2. Wähle den Bereich aus, in dem du das neue Layout erstellen möchtest.
3. Wähle Bild anhängenaus oder ziehe den Screenshot in den Chat.
4. Beschreibe das Layout und die gewünschten Änderungen und sende anschließend deine Anfrage.

Zum Beispiel:

Verwende diese Vorlage für den Hero-Bereich einer Software-Landingpage. Platziere den Text links und das Produktbild rechts. Übernimm die vorhandenen Farben und Schriftarten des Projekts. Auf Smartphones soll der Text über dem Bild stehen. Verknüpfe die Hauptschaltfläche mit /contact.

Vergleiche den erstellten Abschnitt mit der Vorlage. Prüfe die Abstände getrennt von den Inhalten, damit du erkennen kannst, ob das Problem an der Struktur oder lediglich an abweichendem Text liegt.

Verfeinern Sie das Layout mit konkreten Anweisungen#

Eine allgemeine Anweisung wie „Verbessere diesen Abschnitt“ überlässt der KI die Entscheidung, was eine Verbesserung bedeutet. Beschreiben Sie stattdessen das sichtbare Problem. Wenn die Überschrift ungünstig umbricht, geben Sie die Bildschirmgröße an und erklären Sie, wie das Ergebnis aussehen soll.

Zum Beispiel: „Reduziere bei Smartphone-Breite die Schriftgröße der Überschrift, sodass sie höchstens vier Zeilen einnimmt. Lass die Überschrift auf dem Desktop unverändert.“ So erhalten Sie ein klares Kriterium, anhand dessen Sie das Ergebnis nach der Änderung überprüfen können. Außerdem sinkt die Wahrscheinlichkeit, dass sich ein anderer Teil der Seite unbeabsichtigt ändert.

Die Anleitung zum Prompting mit KI von TeleportHQ empfiehlt, das zu ändernde Element auszuwählen und jeweils nur einen Abschnitt zu bearbeiten. Beginnen Sie einen neuen Chat, wenn Sie zu einer anderen Aufgabe wechseln. Fassen Sie zusammengehörige Korrekturen zusammen, damit die Anweisung verständlich bleibt.

Legen Sie gemeinsame Stile frühzeitig fest. Wenn Sie für Buttons oder Überschriften in jedem Abschnitt andere Anweisungen geben, lassen sich visuelle Inkonsistenzen später nur schwer korrigieren. Prüfen Sie die Farben und Schriftstile des Projekts, bevor Sie die übrigen Abschnitte erstellen.

Figma-Designs über das Plugin importieren#

Wenn Sie über die ursprüngliche Figma-Datei verfügen, verwenden Sie den Figma-Importvorgang. Wählen Sie die benötigten Frames aus, öffnen Sie TeleportHQ – Design to Code, und wählen Sie Als neues Projekt exportieren. Um ein Design zu einem bestehenden Projekt hinzuzufügen, verwenden Sie Objekte in die Zwischenablage kopieren und fügen Sie es in den Editor ein.

Bereiten Sie die Frames möglichst mit Auto-Layout vor. Auto-Layout beschreibt, wie Elemente innerhalb eines Containers angeordnet sind, einschließlich ihrer Abstände und ihres Größenänderungsverhaltens. Bei Frames mit festen Positionen sind nach dem Import oft mehr Korrekturen nötig, besonders wenn sich die verfügbare Breite ändert.

Prüfen Sie vor dem Export die Auto-Layout-Bewertung des Plugins. Importieren Sie große Designs abschnittsweise und kontrollieren Sie jedes Ergebnis. Wenn Sie responsive Frames gemeinsam importieren möchten, verwenden Sie in den Desktop- und Mobilversionen einheitliche Ebenennamen.

Gemeinsame Stile ohne KI bearbeiten#

Sie benötigen nicht für jede Anpassung einen neuen Prompt. Mit TeleportHQ können Sie eine von KI generierte Website manuell bearbeiten, ohne KI-Tokens zu verbrauchen. Ändern Sie gemeinsame Farben oder Abstände im Bereich „Design Language“, bearbeiten Sie eine gemeinsam genutzte CSS-Klasse oder wählen Sie ein einzelnes Element aus und passen Sie dessen Stile an.

Gemeinsame Werte sind hilfreich, wenn dasselbe Problem auf der gesamten Website auftritt. Benötigen alle sekundären Schaltflächen einen dunkleren Rahmen, ändern Sie den gemeinsamen Stil, statt jede einzelne anzupassen. Prüfen Sie anschließend die betroffenen Seiten, um sicherzustellen, dass das Ergebnis zu den Hintergründen und den umliegenden Inhalten passt.

Kleine manuelle Anpassungen lassen sich oft einfacher kontrollieren als wiederholte Generierungen. Wählen Sie die Methode, mit der sich die gewünschte Änderung am klarsten umsetzen lässt.

Funktionen und mobile Layouts testen#

Eine Seite kann der Vorlage ähneln und dennoch schwierig zu bedienen sein. Testen Sie sie mit echten Texten, einschließlich längerer Überschriften und Schaltflächenbeschriftungen. Platzhaltertexte können Layoutprobleme verbergen, die erst mit den endgültigen Texten sichtbar werden.

Prüfen Sie vor der Veröffentlichung folgende Bereiche:

• Prüfen Sie auf schmalen Bildschirmen, ob horizontales Scrollen oder abgeschnittene Inhalte auftreten.
• Testen Sie alle Navigationslinks und primären Schaltflächen.
• Füllen Sie Formulare aus und überprüfen Sie die Erfolgs- und Fehlermeldungen.
• Prüfen Sie die Tastaturbedienbarkeit und die sichtbaren Fokusindikatoren.
• Prüfen Sie die Überschriftenreihenfolge und aussagekräftige Alternativtexte für Bilder.

Prüfen Sie das endgültige mobile Layout nach Änderungen am Inhalt erneut. Eine längere Überschrift kann eine Schaltfläche aus dem sichtbaren Bereich verschieben oder benachbarte Karten ungleichmäßig erscheinen lassen. Passen Sie die betreffenden Stile an und wiederholen Sie anschließend die betroffene Prüfung.

Entscheiden Sie, wie Sie Ihr Projekt veröffentlichen möchten#

Der Design-to-Code-Workflow von TeleportHQ umfasst die visuelle Bearbeitung und Veröffentlichung. Sie können über die Plattform veröffentlichen oder geeignete Website-Projekte herunterladen und extern hosten. Welche Option die richtige ist, hängt von den Funktionen Ihres Projekts ab.

Laut der aktuellen Dokumentation zum Codeexportunterstützen Pro und Premium den Download von Websites. Test-Workspaces bieten zehn Codeansichten, ermöglichen jedoch keinen Code-Download. Zu den verfügbaren Formaten gehören HTML und mehrere JavaScript-Frameworks. Bei verbundenen Datenquellen ist der Code-Download jedoch auf Next.js beschränkt. Auch andere Funktionen unterliegen formatspezifischen Einschränkungen.

Für Web-Apps gelten andere Regeln. Funktionen wie die Anmeldung von Nutzern und serverseitige Workflows erfordern die Serverfunktionen von TeleportHQ. Solche Projekte werden über TeleportHQ veröffentlicht und können nicht als Code heruntergeladen werden. Informieren Sie sich über den Unterschied zwischen Websites und Web-Apps , bevor Sie Funktionen hinzufügen, wenn externes Hosting erforderlich ist.

Vergleichen Sie Tools anhand Ihres Projekts#

Wenn Sie Design-to-Code-Tools vergleichen, verwenden Sie bei jeder Bewertung denselben repräsentativen Abschnitt. Wählen Sie einen Abschnitt mit echten Inhalten und mindestens einer Interaktion. Ein einfacher dekorativer Header sagt möglicherweise wenig darüber aus, wie das Tool mit einer funktionalen Seite umgeht.

Dokumentieren Sie die Korrekturen, die nach der Generierung nötig sind. Prüfen Sie, ob sich gemeinsame Stile anpassen lassen, ohne Änderungen wiederholen zu müssen, und ob andere Personen die resultierende Struktur nachvollziehen können. Berücksichtigen Sie dabei auch die Anforderungen an die Veröffentlichung. Ein visuell überzeugendes Ergebnis ist nur von begrenztem Nutzen, wenn Sie es nicht im von Ihrem Team erwarteten Workflow pflegen können. Legen Sie die ursprüngliche Aufgabenbeschreibung neben die Vorschau, damit Sie das Ergebnis anhand der vereinbarten Anforderungen beurteilen können.

Bereiten Sie die Seite für Besucher vor#

Die abschließende Prüfung sollte den Inhalt ebenso sorgfältig berücksichtigen wie das Layout. Ersetzen Sie Platzhalterangaben durch korrekte Informationen und vergewissern Sie sich, dass jede Schaltfläche ihr Ziel beschreibt. Prüfen Sie Seitentitel und Beschreibung, bevor Sie die Seite veröffentlichen.

TeleportHQ bietet integrierte SEO-Einstellungen, darunter Seitenmetadaten und die Erstellung von Sitemaps. Diese Einstellungen unterstützen die Veröffentlichung, doch die Seite benötigt weiterhin nützliche Inhalte, die zur Aufgabe der Besucher passen.

Beginnen Sie mit einem repräsentativen Abschnitt und prüfen Sie das Ergebnis. Sobald Layout und Verhalten stimmen, verwenden Sie dieselben gemeinsamen Stile für den Rest der Seite