image-to-codevon Leonxlnx

Image to Code Skill.

Ein Skill für Claude Code und Codex für UI-Design: generiert und analysiert zunächst ein Designbild, implementiert dann die passende Seite.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. MANDATORY IMAGE-FIRST RULE ## 3. GENERATE ENOUGH IMAGES RULE ## 4. CODEX-SPECIFIC SECTION IMAGE RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. FRESH RE-GENERATION RULE

Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 36.361 Zeichen insgesamt

01 Was es tut

Was der image-to-code Skill in Claude Code und Codex Bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill erzwingt einen verbindlichen, bildbasierten Workflow für visuell wichtige Web-Aufgaben. Der Agent muss selbst Design-Bilder erzeugen, bevor er Code schreibt, und diese Bilder dann eingehend analysieren, um Typografie, Abstände, Buttons, Farben und Layout-Logik zu extrahieren. In Codex wird standardmäßig ein großes, gut lesbares Bild pro Abschnitt erzeugt statt komprimierter Multi-Abschnitts-Boards, und für Abschnitte oder Detailansichten werden neue, eigenständige Bilder erstellt statt zuzuschneiden.

Er vermeidet konsequent verschachtelte Box-Layouts, gefälschte UI-Labels, winzige Pills und beengte Hero-Bereiche. Der Hero-Bereich muss klar bleiben, mit maximal 1-3 Zeilen Headline. Der Skill erzwingt großzügige Abstände, reduziert visuelle Unordnung und implementiert das Frontend so, dass es den erzeugten Referenzen treu entspricht, statt in generische, codierte Layouts abzudriften.

BilderzeugungsserviceUI-Code

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Separate Abschnittsbilder in Codex Erstellen
Innerhalb von Codex erzeugt der Skill ein großes, gut lesbares Bild pro Abschnitt, statt mehrere Abschnitte in einem Board zu komprimieren.
02
Neue Bilder Erzeugen, Nie Zuschneiden
Wenn ein Abschnitt eine eigene Ansicht benötigt, erzeugt der Skill ein neues Bild, das dieselbe Designsprache beibehält, statt es aus einem zuvor erzeugten größeren Bild zuzuschneiden.
03
Alle Erzeugten Bilder Eingehend Analysieren
Der Skill extrahiert vor der Implementierung aus jedem Bild den exakten sichtbaren Text, typografische Beziehungen, Abstandslogik, Button-Details, Farbpalette, Layout-Struktur und Komponentenstil.
04
Frontend zur Übereinstimmung mit Referenzen Implementieren
Der Code setzt das analysierte Design getreu um und bewahrt dabei Layout-Logik, Abstandsrhythmus, Reihenfolge der Abschnitte, typografische Stimmung und Komponentenstil, ohne in generische Muster abzudriften.

02 Finden Sie Ihren Favoriten

Wann Sie das image-to-code Skill verwenden

Verwenden Sie den Skill image-to-code in Claude Code oder Codex, wenn es sich um UI-Design dieser Art handelt. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Hero-Bereiche, Landingpages, Marketing-Sites, Startup-Websites und redaktionelle Markenseiten, bei denen visuelle Qualität zählt
Hochwertige Multi-Abschnitts-Websites und Redesigns, bei denen visueller Geschmack und Umsetzungstreue zentral sind

Grenzen kennen

Rein technische Aufgaben, Fehlerbehebungen oder Anfragen, die bereits ein präzises Design-System liefern, bei denen eine visuelle Generierung unnötig ist
Strukturelle Aufgaben, die überwiegend technischer statt visueller Natur sind

Was Sie bereitstellen sollten

Anzahl der Abschnitte oder Website-TypDer Skill leitet die benötigte Anzahl von Abschnitten oder den Website-Typ ab (nur Hero, 4-Abschnitte-Landingpage, 8-Abschnitte-Site usw.), um zu bestimmen, wie viele Bilder erzeugt werden sollen.
Visuelle Ausrichtung oder StilpräferenzenNutzeranfragen wie „clean“, „crazy creative“, „premium SaaS“ oder „editorial“ leiten die Interpretation des Skills bei den Basiskonfigurationsparametern DESIGN_VARIANCE, ART_DIRECTION und weiteren.

03 Innerhalb des Skills

Regeln, die der image-to-code Skill Claude Code und Codex Vorgibt

6 konkrete Anweisungen, Vorgaben und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Bilderzeugung Ist Zwingend der Erste Schritt
Bei Website-Design-Anfragen, bei denen visuelle Qualität zählt, muss der Skill Design-Bilder erzeugen, bevor er Code schreibt.
Hero-Headlines Bleiben Maximal 1-3 Zeilen
Die Hero-Headline sollte idealerweise innerhalb von 1-3 Zeilen bleiben. Wird die Headline zu lang, muss der Skill die Wortanzahl reduzieren, statt mehr Zeilen zu erzwingen.
Keine Cards-in-Cards-in-Cards
Der Skill darf nicht standardmäßig auf verschachtelte Box-Layouts mit riesigen abgerundeten Section-Containern zurückgreifen, die Karten in größeren Karten in äußeren Karten verschachteln.
Micro-UI-Unordnung konsequent reduzieren
Der Skill darf Designs nicht mit unnötigen Pills, Pseudo-System-Markern, gefälschten Steuerelement-Labels, dekorativen code-artigen Tags oder bedeutungslosen kleinen Metadaten überladen, die die Klarheit nicht verbessern.
Genügend Bilder für Qualität generieren
Der Skill muss so viele Bilder generieren, wie nötig sind, damit das Design lesbar und extrahierbar ist. Es ist besser, zu viele klare Bilder zu generieren als zu wenige komprimierte.
Der erste Screen muss auf kleinen Laptops sauber sein
Der Hero- und First-View-Bereich muss auf einem kleinen Laptop benutzbar und aufgeräumt wirken.

04 In Betrieb nehmen

image-to-code in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

image-to-code zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code

Generische skills-CLI-Form für skills/image-to-code-skill/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Design me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, ob für visuell wichtige Aufgaben zuerst Design-Bilder generiert wurden, bevor eine Code-Implementierung erfolgte
Stellen Sie sicher, dass der Text lesbar bleibt, und prüfen Sie andernfalls, ob zusätzliche Detailbilder oder neue Regenerierungen erstellt wurden, statt einfach zuzuschneiden
Prüfen Sie, dass genügend Bilder generiert wurden und die Bildanzahl nicht der Bequemlichkeit halber reduziert wurde
Prüfen Sie, dass der Hero mit maximal 1–3-zeiligen Headlines übersichtlich bleibt und auf einem kleinen Laptop nicht überfüllt wirkt
Bestätigen Sie, dass unnötige verschachtelte Boxen, nutzlose Pills, Labels und gefälschte technische Mikro-Elemente entfernt wurden
Prüfen Sie, dass der implementierte Code den generierten Referenzen treu entspricht und nicht in generische Code-Layouts abdriftet

In OpenDesign importieren Sie image-to-code über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill-Datei: skills/image-to-code-skill/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit ccbc156
License: MIT Aus LICENSE.
Repository-Sterne: 86.946 GitHub-Momentaufnahme vom 14.09.2026 für das gesamte Repository Leonxlnx/taste-skill, das 11 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungsanzahl für image-to-code.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

KERNDIREKTIVE: BILDBASIERTES WEBSITE-DESIGN ZU CODEDefiniert die Aufgabe des Skills, hochwertige, implementierungsfreundliche Website-Referenzen zu generieren und sie anschließend in echtes Frontend umzuwandeln
AKTIVE BASISKONFIGURATIONLegt numerische Standardwerte für Design-Varianz, visuelle Dichte, Art Direction, Implementierungsklarheit und andere Steuerungsparameter fest
VERBINDLICHE BILD-ZUERST-REGELErfordert bei visuellen Website-Aufgaben zuerst die Bildgenerierung; Code ist die Übersetzungsebene nach der Bildanalyse
REGEL: GENÜGEND BILDER GENERIERENWeist an, so viele Bilder wie nötig für Lesbarkeit und Extraktion zu generieren; die Bildanzahl nie aus Bequemlichkeit reduzieren
CODEX-SPEZIFISCHE SECTION-BILD-REGELIn Codex bevorzugt ein großes Bild pro Section, statt viele Sections in ein unlesbares Board zu komprimieren
REGEL: ALTE BILDER NICHT ZUSCHNEIDENGenerieren Sie neue, sectionsspezifische Bilder, statt sie aus zuvor generierten größeren Bildern zuzuschneiden oder herauszuschneiden
REGEL ZUR NEUEN REGENERIERUNGIst eine Section unklar, generieren Sie sie erneut als neues eigenständiges Bild und bewahren dabei dieselbe visuelle Sprache
OPTIONALE DETAIL-/EXTRAKTIONSBILD-REGELErstellen Sie zusätzliche Nahaufnahme-Detailbilder für Sections, wenn die Extraktionsqualität größeren Text oder klarere Abstände erfordert
ANFORDERUNG AN TIEFGEHENDE BILDANALYSEBehandeln Sie generierte Bilder als Designspezifikationen; extrahieren Sie Text, Typografie, Abstände, Buttons, Farben und Layout vor der Implementierung
BILDGESTÜTZTER CODEX-WEBSITE-WORKFLOWDefiniert die Ausführungsreihenfolge: Abschnittsbilder generieren, tiefgehend analysieren, Design System extrahieren, Frontend passend implementieren
DIE KOMBINATORISCHE VARIATIONS-ENGINEBietet visuelle Richtungsoptionen für Theme, Hintergrund, Typografie, Hero-Architektur, Abschnittssystem und charakteristische Komponenten
REGELN FÜR HERO-MINIMALISMUSErzwingt klare, kinoreife Heroes mit maximal 1–3-zeiligen Headlines, ohne Überladung, lesbar auch auf kleinen Laptops

Die eigene Beschreibung des Skills

„Elite-Website-Image-to-Code-Skill für Codex. Für visuell wichtige Webaufgaben muss er zunächst selbst die Designbilder erzeugen, sie tiefgehend analysieren und dann die Website so nah wie möglich daran umsetzen. In Codex muss er große, lesbare, abschnittsspezifische Bilder bevorzugen statt winziger komprimierter Boards, frische eigenständige Bilder für Abschnitte oder Detailansichten erzeugen statt alte zuzuschneiden, träge Untergenerierung vermeiden, Cards-inside-Cards-inside-Cards-UI vermeiden und den Hero sauber, luftig, lesbar und auf einem kleinen Laptop sichtbar halten."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 36.361 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum image-to-code-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Mit welchem Coding-Agent sollte ich diesen Skill verwenden?

Der Skill ist für Codex konzipiert und verweist explizit auf Codex-spezifisches Verhalten. Er legt fest, dass innerhalb von Codex große, gut lesbare, abschnittsspezifische Bilder statt komprimierter Boards bevorzugt werden müssen, und generiert standardmäßig ein Bild pro Abschnitt. Außerhalb von Codex kann eine kompaktere Mehrabschnitts-Komposition zulässig sein.

Was passiert, wenn das generierte Design-Bild unklar ist oder Text zu klein ist?

Der Skill muss zusätzliche Detail- oder Extraktionsbilder für diesen Abschnitt erzeugen oder den Abschnitt als neues eigenständiges Bild neu generieren.

Er darf niemals aus einem zuvor generierten größeren Bild zuschneiden. Wenn mehr Bilder die Lesbarkeit oder die Extraktionsqualität verbessern würden, generiert er mehr Bilder, statt bei der Bildanzahl nachlässig zu sein.

Image to Code

Führen Sie image-to-code an einer realen UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie image-to-code von seinem SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen