Bild zu HTML

Hochauflösende PNG- oder JPEG-Screenshots von Web-UIs, Figma-Exporte oder Design-Mockups liefern in der Regel die besten Ergebnisse. Unscharfe Fotos von Bildschirmen, handgezeichnete Wireframes oder stark komprimierte Bilder ergeben meist weniger genauen Code.

Ja — erwähne einfach dein bevorzugtes Framework im Prompt. Der Agent versucht dann, dessen Utility-Klassen oder Grid-System zu verwenden. Die Ausgabequalität kann variieren, je nachdem, wie gut das Design zu den Konventionen dieses Frameworks passt.

Der Agent verwendet in der Regel semantische HTML5-Elemente wie nav, main, section und button und versucht, grundlegende Barrierefreiheits-Attribute wie Alt-Texte und Aria-Labels einzubauen. Die vollständige WCAG-Konformität sollte jedoch vor der Veröffentlichung manuell geprüft und getestet werden.

Beides wird unterstützt. Bei Screenshots ganzer Seiten versucht der Agent in der Regel, das gesamte Layout in einem HTML-Dokument nachzubilden. Bei einer einzelnen Komponente wie einer Karte oder einem Formular erhältst du ein fokussiertes, in sich geschlossenes Snippet, das sich leicht in ein bestehendes Projekt einfügen lässt.

Ja, mobile UI-Screenshots funktionieren recht gut. Der Agent erzeugt meist ein zentriertes, schmales Layout, das das mobile Design widerspiegelt. Wenn du eine vollständig responsive Version möchtest, die sich über verschiedene Breakpoints anpasst, erwähne das explizit in deinem Prompt.

Standardmäßig konzentriert sich die Ausgabe auf HTML und CSS. Wenn dein Bild interaktive Komponenten wie Modals, Tabs oder Akkordeons enthält, bitte explizit um JavaScript oder gib eine Bibliothek wie Alpine.js an. Ohne diese Anweisung werden solche Elemente in der Regel als statische, gestylte Platzhalter dargestellt.