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.

Convierta cualquier concepto, idea o descripción en un visual HTML estático pulido y luego expórtelo como una imagen PNG o SVG. Utilice esta habilidad siempre que el usuario quiera crear una representación visual de una idea y necesite un archivo de imagen (PNG o SVG). Esto incluye: infografías, diagramas conceptuales, diagramas de flujo, cuadros comparativos, imágenes de procesos, diagramas educativos, gráficos de redes sociales, visualizaciones de datos, carteles, tarjetas, insignias, íconos, bocetos de logotipos o cualquier solicitud de "hazme una imagen de X" que se pueda lograr con HTML/CSS/SVG en lugar de generación de IA fotográfica. También se activa cuando el usuario tiene un objeto visual HTML existente y desea exportarlo/convertirlo a PNG o SVG. Las frases desencadenantes incluyen: "crear una imagen de", "crear un objeto visual", "diseñar un gráfico", "exportar como PNG", "guardar como SVG", "concepto en imagen", "convertir esto en una imagen", "captura de pantalla de este HTML", "generar una infografía" o cualquier solicitud que combine una descripción de un concepto con una salida de imagen. Fuente: mathews-tom/praxis-skills.