Create Visual Card

Generate magazine-quality visual information cards as self-contained HTML files, then render them to a shareable PNG.

Output

A single .html file with embedded CSS, rendered to a .png. The card width must equal the screenshot width argument (default 1024px) so the .card element fills the frame with no uneven margins — keep .card { width }, the screenshot command's width arg, and this value in sync.

For the final handoff format, read references/output-template.md after generating and checking the card, and fill every field it lists.

Design System

The font <link>, :root color variables, and noise-texture SVG live in the Template Skeleton below (the copy-pasteable artifact). This section holds only the decisions the skeleton can't encode: type scale, spacing, and density intent.

Type Scale