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.

Trasforma qualsiasi concetto, idea o descrizione in un raffinato oggetto visivo HTML statico, quindi esportalo come immagine PNG o SVG. Utilizza questa capacità ogni volta che l'utente desidera creare una rappresentazione visiva di un'idea e necessita di un file immagine di output (PNG o SVG). Ciò include: infografiche, diagrammi concettuali, diagrammi di flusso, grafici comparativi, immagini di processi, diagrammi didattici, grafica per social media, visualizzazioni di dati, poster, cartoline, badge, icone, schizzi di loghi o qualsiasi richiesta "fammi un'immagine di X" che può essere ottenuta con HTML/CSS/SVG anziché con la generazione di intelligenza artificiale fotografica. Si attiva anche quando l'utente dispone di un oggetto visivo HTML esistente e desidera esportarlo/convertirlo in PNG o SVG. Le frasi trigger includono: "crea un'immagine di", "crea un'immagine", "progetta un elemento grafico", "esporta come PNG", "salva come SVG", "da concetto a immagine", "trasformalo in un'immagine", "esegui uno screenshot di questo HTML", "genera un'infografica" o qualsiasi richiesta che combini la descrizione di un concetto con l'output di un'immagine. Fonte: mathews-tom/praxis-skills.