concept-to-image

Creates polished visuals from concepts using HTML/CSS/SVG as a refineable intermediate, then exports to PNG or SVG.

| references/design-guide.md | Design patterns, anti-patterns, color palettes, typography choices, layout examples | | scripts/rendertoimage.py | Playwright-based export script — takes HTML in, PNG or SVG out | | assets/template.html | Base HTML template with .canvas container and CSS custom properties pre-configured |

HTML is the refineable layer between idea and image. Unlike direct canvas rendering, the user can see the HTML artifact, request changes ("make the title bigger", "swap the colors", "add a third column"), and only export once satisfied. This makes the workflow iterative and controllable.

Verwandeln Sie jedes Konzept, jede Idee oder jede Beschreibung in ein ausgefeiltes statisches HTML-Bild und exportieren Sie es dann als PNG- oder SVG-Bild. Verwenden Sie diese Fähigkeit immer dann, wenn der Benutzer eine visuelle Darstellung einer Idee erstellen möchte und eine Bilddateiausgabe (PNG oder SVG) benötigt. Dazu gehören: Infografiken, Konzeptdiagramme, Flussdiagramme, Vergleichsdiagramme, Prozessvisualisierungen, Bildungsdiagramme, Social-Media-Grafiken, Datenvisualisierungen, Poster, Karten, Abzeichen, Symbole, Logoskizzen oder jede „Mach mir ein Bild von X“-Anfrage, die mit HTML/CSS/SVG statt mit fotografischer KI-Generierung erreicht werden kann. Wird auch ausgelöst, wenn der Benutzer über ein vorhandenes HTML-Visual verfügt und es in PNG oder SVG exportieren/konvertieren möchte. Zu den Triggerphrasen gehören: „Bild erstellen von“, „Bild erstellen“, „Grafik entwerfen“, „Als PNG exportieren“, „Als SVG speichern“, „Konzept in Bild umwandeln“, „in ein Bild umwandeln“, „Screenshot dieses HTML erstellen“, „Infografik erstellen“ oder jede Anfrage, die eine Konzeptbeschreibung mit einer Bildausgabe kombiniert. Quelle: mathews-tom/praxis-skills.