Turn any concept, idea, or description into a polished static HTML visual, then export it as a PNG or SVG image file. Use this skill when the user explicitly needs an image file output (PNG or SVG). This includes: concept diagrams, flowcharts, comparison charts, process visuals, educational diagrams, social media graphics, data visualizations, posters, cards, badges, icons, logo sketches, or any "make me an image of X" request achievable with HTML/CSS/SVG rather than photographic AI generation. Also trigger when the user has an existing HTML visual and wants to export/convert it to PNG or SVG. Trigger phrases: "create an image of", "export as PNG", "save as SVG", "concept to image", "turn this into an image", "screenshot this HTML", "design a graphic for export". For interactive HTML visuals opened in a browser, use static-web-artifacts-builder instead.
Creates polished visuals from concepts using HTML/CSS/SVG as a refineable intermediate, then exports to PNG or SVG.
| 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 |
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.
Concept → HTML artifact (view + refine) → PNG or SVG export
scripts/render_to_image.pyDetermine the best visual format:
| User intent | Visual format | Approach |
|---|---|---|
| Explain a process/flow | Flowchart or pipeline diagram | SVG paths + boxes |
| Compare items | Side-by-side or matrix | CSS Grid |
| Show hierarchy | Tree or layered diagram | Nested containers + SVG connectors |
| Present data | Chart or infographic | SVG shapes + data labels |
| Social/marketing graphic | Card or poster | Typography-forward HTML/CSS |
| Icon, logo, badge | Compact symbol | Pure SVG |
| Educational concept | Annotated diagram | SVG + positioned labels |
Read references/design-guide.md for detailed design patterns and anti-patterns.
Core rules:
<style>, all graphics as inline <svg>. No external resources.width and height on the root container matching the intended export size. This is critical — Playwright screenshots the element at this exact size.assets/template.html as the base structure.| Use case | Recommended size |
|---|---|
| Social media graphic | 1200×630 |
| Infographic (portrait) | 800×1200 |
| Presentation slide | 1920×1080 |
| Square post | 1080×1080 |
| Icon/badge | 256×256 or 512×512 |
| Wide diagram | 1600×900 |
Set the .canvas container to the chosen size. The export script captures this element.
Present the HTML file to the user. They'll see it rendered as an artifact. Common refinement requests:
.canvas dimensionsEach iteration is a quick HTML edit, not a full re-render. This is the key advantage over direct image generation.
Once the user is satisfied, run the export script:
python3 scripts/render_to_image.py <input.html> <output.png|.svg> [--width 1200] [--height 630] [--scale 2] [--selector ".canvas"]
| Param | Default | Description |
|---|---|---|
input | (required) | Path to HTML file |
output | (required) | Output path. Extension determines format (.png or .svg) |
--width | auto | Viewport width (overrides HTML-defined size) |
--height | auto | Viewport height (overrides HTML-defined size) |
--scale | 2 | Device scale factor for PNG (2 = retina quality) |
--selector | .canvas | CSS selector for the element to capture |
--full-page | false | Capture the full page instead of a specific element |
Uses Playwright to launch headless Chromium and screenshot the .canvas element at the specified scale factor. Scale 2 produces retina-quality output (e.g., 1200×630 CSS pixels → 2400×1260 PNG).
Two strategies, chosen automatically:
.canvas element contains a single root <svg>, extracts it directly as a clean SVG file. This produces a true vector SVG.Present the output file to the user. Always deliver both the HTML (for future editing) and the image (final output).
| Error | Cause | Resolution |
|---|---|---|
playwright not found | Playwright package not installed | Run npx playwright install chromium or pip install playwright && playwright install chromium |
| Browser launch failure | Headless Chromium fails to start | Verify --headless mode is supported; check available memory (Chromium needs ~200 MB) |
.canvas selector not found | HTML does not contain an element matching .canvas | Verify assets/template.html was used as the base; check the root container has class="canvas" |
| Render timeout | Complex HTML takes too long to render before screenshot | Increase the timeout via --timeout flag in the script, or simplify the HTML (reduce DOM depth, inline fewer SVGs) |
| SVG export falls back to PNG | .canvas element contains HTML/CSS content, not a root SVG | See SVG export section; redesign with a single root <svg> if vector output is required |
<svg> as the .canvas child.--scale to achieve higher effective resolution within this limit.After a successful export, the script prints the output path and file stats:
Exported: concept-diagram.png
Size: 2400 × 1260 px (2× scale from 1200 × 630 canvas)
File size: ~180 KB
Format: PNG (RGBA)
Filename pattern follows whatever was passed as the output argument. Typical file sizes:
These produce generic "AI-generated" looking output:
Since this environment has limited font access, use web-safe font stacks with intentional fallbacks:
'Courier New', 'Consolas', monospace'Helvetica Neue', 'Arial', sans-serif'Georgia', 'Times New Roman', serif