Web graphics

Build graphics in code (SVG, CSS, canvas) by default. Code-built assets stay editable, theme with tokens, scale cleanly, diff in review and can be regenerated by the next agent. Use image generation only for what code cannot do well (photographic or painterly texture), and say so.

<skill-dir> below means this skill's own folder. Run its scripts from the project root so output lands in the project, not in the installed skill.

1. Define the job

Before drawing, write:

• What it must explain or make recognisable, in one sentence. "Three inboxes merge into one sorted queue" beats "a hero image".
• Where it sits: container size at 390 and 1440, background, what text is next to it.
• Truth constraints: labels, numbers and UI shown must be real or clearly marked as examples. An illustrative route is not a map. A diagram of a flow is not a picture of the product. When the graphic shows a screen that exists, that region is a capture placed as an image, and the drawing is only the frame around it.

2. Set a visual grammar

Pick and write down (and add to DESIGN.md if the project has one):

• Medium and projection: isometric, flat front-on, ASCII, halftone, line diagram.
• Stroke: one weight (e.g. 1.5px at 1x) and join style for the whole set.
• Palette: three to five token colours. Planes are told apart by flat token fills, not gradients or invented lighting.
• Detail density: what is drawn and what is left out at the smallest size.

Illustration has defaults too: cream-and-terracotta flat scenes, pastel isometric SaaS offices, blobby people with tiny heads. Pick the grammar from the product's own world instead.

A set of graphics shares this grammar. Variants change a few meaningful objects on shared geometry rather than relabelling the same drawing.

3. Build with the right technique

Read the relevant section of techniques:

• Animated stickers (playful slab icons that move: onboarding, empty states, rewards, feature icons): follow stickers. Draw on the bundled kit, animate only with its keyframe presets, and check with scripts/fi.mjs (check, sheet, frame, export to alpha video). It needs no install beyond Chrome and ffmpeg.
• Isometric: write the scene as JSON and compile with scripts/iso.mjs (node <skill-dir>/scripts/iso.mjs --example shows the format). It handles projection, face shading and draw order, which is where hand-written isometric SVG breaks.
• Flat and icons: a 24-unit grid, shared corner radius and stroke; check silhouettes at 16px.
• ASCII and halftone: deterministic generation, never Math.random() during render.
• Diagrams: real labels, arrows that start and end on edges, one direction of flow.
• Social cards and raster exports: render an HTML/SVG source to PNG with a script so the raster can be rebuilt. If the card shows the product, the product is a screenshot in an <img>. Draw the frame in code. Do not draw the product's UI, and do not typeset a number that is not in the brief.

4. Inspect in place

node <skill-dir>/scripts/shoot.mjs http://localhost:3000/ --widths 390,1440       # light + dark
node <skill-dir>/scripts/shoot.mjs art/hero.svg --widths 400 --height 300 --themes light,dark

For anything with fixed sizes, brand tokens or supplied words (social cards, slides, hero art with text), render and gate every size in one go:

node <skill-dir>/scripts/render-gate.mjs card/card.html --size 1200x630 --size 1080x1350 --design DESIGN.md --expect "Exact card headline" --out card

Each size is a fresh load, so the layout recomposes instead of scaling. It fails on fallen-back fonts, changed copy, clipped or edge-cropped text and off-token colours. Exit 2 means it could not check.

Look at each capture at the smallest real size first. Check: does the focal point read; are strokes consistent; does dark mode invert or clash; is text in the graphic legible; does texture turn to noise when small; is anything cropped on mobile. Fix the specific defect and re-shoot. Do not regenerate from scratch without a diagnosis.

5. Deliver

• Editable source (SVG or the JSON scene) committed beside the export.
• Standalone SVG exports resolve tokens to literal fills; JSX that depends on Tailwind classes is not an asset.
• Inline SVG gets role="img" and an aria-label or <title> when it carries meaning, aria-hidden="true" when decorative.
• Responsive: viewBox without fixed width/height in CSS contexts; width: 100%; height: auto.
• Size: SVG under ~30 KB unless it is the hero; strip editor metadata.
• Anything that moves has a still: reduced motion shows a frame where the graphic reads whole, and an exported video ships with its poster.
• Before a set ships, score it with web-design's review rubric if it is installed: idea, hierarchy, copy, craft, brand and fit for place, with a ship / fix / rework verdict.
• Report the grammar, files, sizes inspected, gate results and anything unverified.

Refuse

• Stock icon packs standing in for a bespoke illustration.
• Gradients, glows and fake 3D lighting to make flat art look "premium".
• Fake dashboards, invented numbers or real-looking personal data inside illustrations. A bento or device frame does not make a drawn screen true.
• Texture or low-contrast art behind legal, pricing or operational text.
• Prompt text delivered as if it were the asset.
• Hand-written sine wobbles or CSS keyframe jiggles on illustrations. Motion comes from a preset or a spring with a reason.