concept-to-image

# Concept to Image Creates polished visuals from concepts using HTML/CSS/SVG as a refineable intermediate, then exports to PNG or SVG. ## Reference Files | File | Purpose | | ---------------------------- | ------------------------------------------------------------------------------------ | | `references/design-guide.md` | Design patterns, anti-patterns, color palettes, typography choices, layout examples | | `scripts/render_to_image.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 | ## Why HTML as intermediate 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. ## Workflow ```text Concept → HTML artifact (view + refine) → PNG or SVG export ``` 1. **Interpret** the user's concept — determine what kind of visual best fits (diagram, infographic, card, chart, etc.) 2. **Design** a self-contained HTML file using inline CSS and inline SVG — zero external dependencies 3. **Present** the HTML as an artifact so the user can preview and request refinements 4. **Iterate** on the HTML b...