Image to UIvon UIZZE

Image to UI Skill.

Setzen Sie die Oberfläche um, die Sie bereits sehen. Image to UI behandelt einen Screenshot oder ein Mockup als visuelle Spezifikation, behält den bestehenden Stack des Projekts bei und fordert Ihren Agenten auf, vor der Behauptung einer Übereinstimmung zu rendern und zu vergleichen.

Screenshot to Code
Referenzabgleich
UI-Umsetzung

OpenDesign herunterladen Anleitung ansehen

Quellenprüfung · image-to-uiSKILL.md

Aufgabe Umsetzung von Screenshot zu UI Ergebnis • Oberflächencode im bestehenden Projekt • Echter Text und echte Bedienelemente, kein abgeflachter Screenshot • Eine Vergleichszusammenfassung mit verbleibenden Abweichungen Vor dem Start Stellen Sie ein lesbares Referenzbild, den Ziel-Viewport, Projektzugriff und verfügbare Assets bereit. Zur Prüfung der visuellen Übereinstimmung ist Browser-Rendering nötig. Ein UIZZE-Konto oder eine MCP-Verbindung ist nicht erforderlich.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-12 · kein generiertes Beispiel

01 Was er leistet

Das Bild als Spezifikation nutzen

Dieser kurze Skill konzentriert sich darauf, eine bestehende visuelle Entscheidung nachzubilden, nicht darauf, eine neue Designrichtung zu finden. Der folgende Workflow beschreibt die Quelle; er ist keine abgeschlossene Rekonstruktion.

Workflow auf Basis der QuelleKein Ausführungs-Benchmark

Die Arbeitsweise

Der Agent beginnt mit dem tatsächlichen Bild: Abmessungen, sichtbarer Text, Hierarchie, Proportionen und Assets. Er liest außerdem das Zielprojekt, damit die Umsetzung zum bestehenden Framework und Screen passt. Ein zugeschnittener Screenshot definiert nur den sichtbaren Bereich; er erlaubt nicht, den Rest der Seite zu erfinden.

Die Umsetzung nutzt echtes Layout, echten Text und echte Bedienelemente. Sobald der Referenz-Viewport getroffen ist, prüft der Agent weitere gewünschte Größen. Zuletzt wird in den Referenzabmessungen gerendert, auf Schriften und Bilder gewartet, das Ergebnis verglichen und sichtbare Unterschiede korrigiert. Fehlende Assets und nicht verifiziertes Rendering müssen ausdrücklich benannt bleiben.

Erwartete Ergebnisse

Bearbeitbarer Oberflächencode im Stack des Zielprojekts mit passenden wiederverwendbaren Komponenten
Gewünschte Bedienelemente, die mit vorhandenem Verhalten verbunden sind, ohne erfundene Backend-Funktionen
Eine kurze Darstellung der tatsächlichen visuellen Vergleiche, verbleibenden Unterschiede und fehlenden Assets

Beispiel-Briefing ansehen

Von der Referenz zum Vergleich

01
Das tatsächliche Bild prüfen
Lesen Sie das Bild selbst, nicht nur Dateinamen oder extrahierten Text. Bestimmen Sie Abmessungen, sichtbaren Bereich, Ausrichtung, Typografie und Assets, bevor Sie Code ändern.
02
In Referenzgröße bauen
Gleichen Sie Hierarchie, Umbrüche, Abstände und Zuschnitte im bestehenden Stack an. Verwenden Sie Komponenten wieder, wenn sie die Referenz abbilden können; zwingen Sie sie nicht in unpassende Standardwerte.
03
Rendern und korrigieren
Erfassen Sie den laufenden Screen im selben Viewport. Vergleichen Sie zuerst große Layout- und Proportionsunterschiede, dann Typografie, Farbe und kleine Details; rendern Sie nach Änderungen erneut.
04
Gewünschte Varianten prüfen
Testen Sie nach der Referenzgröße die gewünschten responsiven Größen und funktionierenden Bedienelemente. Nennen Sie verbleibende Abweichungen, statt pixelgenaue Treue zu versprechen.

02 Wann Sie ihn einsetzen

Wann Sie ihn einsetzen

Wählen Sie Image to UI, wenn die visuelle Richtung feststeht und Sie sie originalgetreu umsetzen müssen.

Gut geeignet

Ein freigegebenes Screen-MockupVerwandeln Sie ein vorliegendes Designbild in einen Screen in einer bestehenden App und behalten Sie sichtbare Hierarchie und Inhalte bei.
Ein Neuaufbau anhand eines ScreenshotsBilden Sie eine Referenz nach, deren ursprüngliche Designdatei nicht verfügbar ist, und benennen Sie fehlende Schriften oder Bilder ausdrücklich.
Eine gezielte visuelle KorrekturNähern Sie eine Umsetzung mithilfe von Aufnahmen im selben Viewport und einer Liste verbleibender Unterschiede einer bekannten Referenz an.

Zu beachtende Grenzen

Ein Screenshot definiert kein verborgenes VerhaltenNicht sichtbare Bereiche, Backend-Antworten und weitere Screens liegen außerhalb der Referenz. Liefern Sie dafür Anforderungen, statt zu erwarten, dass der Skill ein Produkt ableitet.
Exakte Assets können fehlenDer Skill verlangt, fehlende Schriften, Icons oder Bilder offenzulegen. Eine exakte visuelle Übereinstimmung kann er nicht herstellen, wenn die nötigen Assets fehlen.
Treue braucht gerenderte BelegeEine plausible Umsetzung oder ein erfolgreicher Build belegt keine Ähnlichkeit. Kann die Umgebung den Screen nicht rendern, bleibt die visuelle Übereinstimmung unverifiziert.

Diese Eingaben mitbringen

Eine lesbare Referenz und der ViewportHängen Sie das tatsächliche Bild an und geben Sie die vorgesehenen Browserabmessungen an. Vermerken Sie, ob das Bild ein Ausschnitt ist und welcher Bereich umgesetzt werden soll.
Das bestehende Projekt und die AssetsNennen Sie Zielroute oder -komponente, Framework, Schriften, Icons und Bilddateien. Weisen Sie auf bestehende Komponenten oder Verhaltensweisen hin, die erhalten bleiben müssen.
Interaktions- und Responsive-AnforderungenBenennen Sie die anzubindenden Bedienelemente und die zusätzlichen Breiten. Geben Sie an, was der Screenshot nicht zeigt und was außerhalb des Umfangs bleiben soll.

03 Entscheidungen, auf die es ankommt

Entscheidungen, auf die es ankommt

Erst angleichen, dann neu gestalten
Das Bild bestimmt Palette, Komposition und sichtbare Inhalte. Dekorative Ergänzungen oder eine andere Designrichtung erfordern eine gesonderte Anfrage.
Die Oberfläche rekonstruieren, nicht das Bitmap
Normale Grid- und Flex-Layouts, echter Text und nutzbare Bedienelemente erhalten eine bearbeitbare UI. Absolute Positionierung ist echten Overlays vorbehalten, nicht dem ganzen Screen.
Gleiches mit Gleichem vergleichen
Gleiche Viewport-Abmessungen und geladene Assets machen den Vergleich aussagekräftig. Die dokumentierte Korrekturreihenfolge beginnt mit Proportionen und Layout, bevor kleine Details poliert werden.

04 Ein fokussiertes Briefing testen

Ein fokussiertes Briefing testen

Das folgende Beispiel wurde nicht ausgeführt. Hängen Sie Ihr Referenzbild an und passen Sie die Projektdetails an, bevor Sie es verwenden.

Einrichtung prüfen

Die Upstream-README dokumentiert den folgenden Installationsbefehl. Er installiert das GitHub-native Image to UI-Paket; er installiert nicht den optionalen UIZZE-MCP-Dienst.

Dokumentierter Installationsbefehl

npx skills add uizze/uizze --skill image-to-ui

Verwenden Sie einen Agenten, der Bilder prüfen und Ihr Projekt bearbeiten kann. Führen Sie das Projekt zur visuellen Prüfung in einem Browser aus. Der Skill selbst erfordert kein UIZZE-Konto und keine MCP-Verbindung; Ihr Projekt und Ihr Agent behalten ihre eigenen Einrichtungsanforderungen.

Einen Screen anhängen

Beschränken Sie die erste Aufgabe auf einen sichtbaren Screen oder Ausschnitt. Fügen Sie Bild, exakte Assets und die von der App bereits unterstützten Interaktionen bei.

Beispiel-Briefing

Nutze image-to-ui, um die angehängte Referenz des Abrechnungs-Screens in der bestehenden App umzusetzen. Prüfe zuerst Bild und Projekt und kläre mit mir die Zielroute und den Referenz-Viewport, falls sie unklar sind. Gleiche sichtbaren Text, Hierarchie, Abstände, Umbrüche und Bildzuschnitte an, statt sie neu zu gestalten. Verwende die gelieferten Schriften und Assets; liste Fehlendes auf, statt es stillschweigend zu ersetzen. Erhalte das bestehende Zahlungs- und Rechnungsverhalten und erfinde weder API-Antworten noch nicht sichtbare Bereiche. Rendere im Referenz-Viewport, warte auf Schriften und Bilder, vergleiche mit dem gelieferten Bild und korrigiere zuerst die größten Unterschiede. Prüfe danach Breiten von 390 px und 320 px, ohne die visuelle Identität zu ändern. Berichte, welche Screenshots tatsächlich verglichen, welche Bedienelemente geprüft wurden und welche Abweichungen bleiben.

Das gerenderte Ergebnis prüfen

Vergleichen Sie denselben Viewport, bevor Sie die responsiven Varianten beurteilen. Prüfen Sie sowohl das sichtbare Design als auch die gewünschten Bedienelemente.

Referenz und gerenderte Aufnahme nutzen denselben Viewport, mit geladenen Schriften und Bildern.
Sichtbare Inhalte und Proportionen folgen dem Bild; fehlende Assets oder bewusste Abweichungen werden benannt.
Gewünschte Bedienelemente behalten ihr echtes Verhalten, und die angegebenen schmalen Layouts bleiben nutzbar.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agenten. Diese Auflistung bedeutet nicht, dass der Skill gebündelt ist oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: UIZZE
Repository: uizze/uizze
Skill-Datei: skills/image-to-ui/SKILL.md
Lizenz: MIT · Lizenz auf Skill-Ebene
Geprüfter Stand: 2026-10-12 · 146928eb50bc

Redaktionelle Quellenzusammenfassung

Image to UI ist ein kurzer Workflow zur Screenshot-Rekonstruktion: Bild und Projekt prüfen, die sichtbare Oberfläche im bestehenden Stack umsetzen, dann im Referenz-Viewport rendern und Unterschiede korrigieren. Dies ist eine redaktionelle Zusammenfassung, kein berichteter Testlauf.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Die MIT-Lizenz gilt speziell für dieses Skill-Verzeichnis; andere Pakete im Repository können abweichende Hinweise haben. Repository-Sterne sind keine Installationszahlen.

06 Fragen vor dem Start

Fragen vor dem Start

Benötigt Image to UI den kostenpflichtigen UIZZE-MCP?

Nein. Der Skill und die Upstream-README sagen ausdrücklich, dass weder ein Konto noch eine MCP-Verbindung erforderlich ist. Das Repository bietet außerdem einen optionalen kostenpflichtigen Dienst zur Referenzsuche an, der jedoch getrennt von der Umsetzung Ihres gelieferten Bildes ist.

Kann er den Rest einer Seite aus einem zugeschnittenen Screenshot bauen?

Die Quelle verlangt, den sichtbaren Bereich nachzubilden und keine nicht sichtbaren Abschnitte zu erfinden. Liefern Sie zusätzliche Referenzbilder oder ausdrückliche Anforderungen für alles jenseits des Ausschnitts.

Garantiert er ein pixelgenaues Ergebnis?

Aus den Anweisungen folgt keine Garantie. Der Skill zielt auf eine enge Rekonstruktion und verlangt einen gerenderten Vergleich. Fehlende Assets und verbleibende Abweichungen müssen gemeldet werden; ohne Rendering bleibt die visuelle Treue unverifiziert.

Image to UI

Den bereits gewählten Screen umsetzen

Bringen Sie die lesbare Referenz, das Zielprojekt und dessen Assets mit. Gleichen Sie den ursprünglichen Viewport an, prüfen Sie die laufende Oberfläche und machen Sie verbleibende Unterschiede explizit.

OpenDesign herunterladen Design-Skills durchsuchen