assafkip/claude-image/render

render

Claude generates images by writing styled HTML that fills a viewport exactly, then screenshots it with scripts/snapshot.sh. Output is a PNG. No external image API, no credits, no rate limits.

When to use this skill

Any image request: illustrations, diagrams, infographics, social banners, cover art, concept visuals, scene compositions, data charts, abstract art.

The pipeline

user prompt
  → Claude writes frame.html (self-contained, viewport-filling)
  → bash scripts/snapshot.sh frame.html output.png [width] [height]
  → python3 scripts/verify.py output.png
  → show output.png to user

Writing the HTML frame

Hard rules (break any of these = blank or broken render)

1. Fixed dimensions on html and body:

``css html, body { width: 1080px; height: 1080px; /* or the requested size */ overflow: hidden; margin: 0; padding: 0; } `` The viewport is fixed to the window size. overflow:hidden clips anything that bleeds. Never use 100vw/100vh -- the headless shell ignores viewport meta.

1. No external resources. No CDN fonts, no external images, no remote scripts.

Everything inline. Use system fonts (Georgia, Arial, monospace) or base64-encoded data URIs for custom assets. Remote fetches silently fail in the headless renderer.

1. No animations that block render. CSS animations and JS that run

immediately are fine (they freeze on screenshot). Anything gated on user interaction or setTimeout > 500ms won't be visible.

1. Self-contained single file. All CSS in <style>, all JS in <script>.

No external stylesheets, no imports, no modules.

Visual techniques by image type

Illustration / scene

• Layered position:absolute divs for sky, ground, mid-ground, foreground
• radial-gradient and linear-gradient for atmospheric color
• CSS clip-path: polygon(...) for silhouettes and shapes
• box-shadow for glow, depth, ambient light
• filter: blur() on background layers for depth of field
• border-radius for organic shapes
• SVG <path> inline for precise shapes

Diagram / flowchart

• Inline SVG with <rect>, <circle>, <path>, <text>, <marker> for arrows
• CSS Grid or Flexbox for layout
• Consistent stroke-width and color palette

Infographic / data

• CSS bar charts: div with height set to data percentage
• Inline SVG for pie/donut charts (stroke-dasharray technique)
• Large bold numbers with descriptive labels beneath

Abstract / generative art

• <canvas> with 2D context (draw in an inline <script>)
• CSS custom properties (--hue, --angle) for parameterized art
• conic-gradient, radial-gradient stacked for complex color fields

Banner / cover

• Bold typography as a CSS layer over a gradient or image background
• letter-spacing, text-transform, text-shadow for visual weight
• Rule of thirds: position the primary element at ~33% or 66% from edges

Quality checklist before running snapshot

• [ ] Does the HTML render correctly if opened in a browser? (mental model check)
• [ ] Are all fonts system fonts or inline?
• [ ] Is overflow: hidden on both html and body?
• [ ] Are fixed pixel dimensions set (not %, not vw/vh)?
• [ ] Is there meaningful visual variation (not a solid color)?
• [ ] Does the composition have a clear focal point?

Running the snapshot

# default 1080x1080
bash skills/render/scripts/snapshot.sh frame.html output.png
 
# custom size
bash skills/render/scripts/snapshot.sh frame.html banner.png 1200 628
 
# verify
python3 skills/render/scripts/verify.py output.png

verify.py checks: valid PNG magic bytes, minimum file size, non-solid-color pixel variance. A blank white or black PNG fails the variance check.

Iteration

If the image is wrong (wrong composition, wrong color, missing element):

1. Edit frame.html -- Claude rewrites the specific section
2. Re-run snapshot.sh
3. Re-run verify.py

The render is deterministic. Same HTML = same PNG every run. Iterate freely.

Output sizes

Pass width and height as the 3rd and 4th arguments to snapshot.sh.

What this is NOT

• Not a diffusion model. Claude writes code; the browser renders it.
• Not photorealistic unless you build it that way with layered CSS/SVG.
• Not random. Same prompt + same code = same output. This is a feature.

The strength is control: you can iterate on any element, fix any artifact, and reproduce any frame exactly.