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.

Transformez n'importe quel concept, idée ou description en un visuel HTML statique raffiné, puis exportez-le sous forme d'image PNG ou SVG. Utilisez cette compétence chaque fois que l'utilisateur souhaite créer une représentation visuelle d'une idée et a besoin d'une sortie de fichier image (PNG ou SVG). Cela inclut : des infographies, des diagrammes conceptuels, des organigrammes, des tableaux de comparaison, des visuels de processus, des diagrammes pédagogiques, des graphiques de médias sociaux, des visualisations de données, des affiches, des cartes, des badges, des icônes, des croquis de logos ou toute demande « faites-moi une image de X » qui peut être réalisée avec HTML/CSS/SVG plutôt qu'avec la génération d'IA photographique. Se déclenche également lorsque l'utilisateur dispose d'un visuel HTML existant et souhaite l'exporter/convertir en PNG ou SVG. Les expressions de déclenchement incluent : "créer une image de", "créer un visuel", "concevoir un graphique", "exporter au format PNG", "enregistrer au format SVG", "concept en image", "transformer ceci en image", "capturer ce code HTML", "générer une infographie" ou toute demande combinant une description de concept avec une sortie d'image. Source : mathews-tom/praxis-skills.