/concept-to-image

name: concept-to-image
description: 'Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML, use static-web-artifacts-builder.'
metadata:
  version: 1.2.1
  category: business
  tags: [image-generation, html-to-png, svg, visual-design]
  difficulty: intermediate

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

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 based on user feedback (colors, layout, content, sizing) 5. **Export** to PNG and/or SVG when the user is satisfied, using `scripts/render_to_image.py`

Step 1: Interpret the concept

Determine 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 |

Step 2: Design the HTML

Read `references/design-guide.md` for detailed design patterns and anti-patterns.

Core rules:

• **Single file, self-contained**: All CSS inline in `<style>`, all graphics as inline `<svg>`. No external resources.
• **Fixed viewport**: Set explicit `width` and `height` on the root container matching the intended export size. This is critical — Playwright screenshots the element at this exact size.
• **Anti-AI-slop**: Avoid centered-everything layouts, purple gradients, uniform rounded corners, and Inter/system font defaults. See design guide for alternatives.
• **SVG-first for shapes**: Use inline SVG for icons, connectors, shapes, and any element that should scale cleanly. CSS for layout and typography.
• **Color with intention**: 3-4 hues max + neutrals. Define as CSS custom properties. Every color encodes meaning.
• **Start from the template**: Use `assets/template.html` as the base structure.

Sizing guidelines

| 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.

Step 3: Present and iterate

Present the HTML file to the user. They'll see it rendered as an artifact. Common refinement requests:

• Color/theme changes → update CSS custom properties
• Layout adjustments → modify grid/flexbox
• Content changes → edit text/SVG elements
• Size changes → update `.canvas` dimensions

Each iteration is a quick HTML edit, not a full re-render. This is the key advantage over direct image generation.

Step 4: Export to image

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"]

Parameters

| 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 |

PNG export

Uses Playwright to launc