Visuals and lead magnets, rendered from code

Why the visual is an HTML file

You leave with two things: a post visual rendered from a file in your repo, and a live lead-magnet page with a shareable link, both made without leaving Claude Code. The trick behind the first one: Claude can't paint, but it writes HTML, CSS, and SVG with exact control over type, color, spacing, and layout. Render that HTML in a headless browser and you get a pixel-perfect PNG. The visual becomes a file you can diff, fix one line of, and re-render in two seconds, and your brand lives in brand/visual-style.md (hex palette, fonts, logo rules) instead of in a designer's head.

import puppeteer from "puppeteer";
import { resolve } from "node:path";
import { pathToFileURL } from "node:url";

// usage: node scripts/render.mjs visuals/post.html visuals/post.png
const [html, out] = process.argv.slice(2);
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 4:5 portrait at 2x, the shape our own post visuals render at
await page.setViewport({ width: 1080, height: 1350, deviceScaleFactor: 2 });
await page.goto(pathToFileURL(resolve(html)).href);
await page.evaluate(() => document.fonts.ready);  // no fallback-font renders
await page.screenshot({ path: out });
await browser.close();

• Inline or locally load every font. A render that races a web-font download can ship in the fallback font, and you won't notice until it's posted.
• Render through a script like the one above, not a one-line headless screenshot command: the script waits for fonts and gives you the exact viewport.
• For animated posters, freeze each frame with a negative CSS animation delay, render a frame sequence, and stitch an MP4 or GIF with ffmpeg.
• For charts, load the bundled /dataviz skill first, so bar charts and stat tiles follow one consistent method instead of whatever Claude improvises.

The poster rules: never a text wall

The default failure is a card with three sentences on it. It looks like AI output because it is AI output. We learned this by getting five versions of one poster rejected in a row, the verdict on the prose version being that all-text is how you give out AI slop. The rules that came out of it:

• A poster is logos, real names, counts, and connectors. No sentence with a verb and an object on the canvas. The post carries the words; the visual carries the evidence.
• Real logos, bare. No chip or tile behind a mark. The color comes from the real brands, not from filled accent blocks.
• Deliberately uneven: different card widths, one group pushed off-center. A tidy grid reads as a template.
• Every element is connected to something. A card floating unwired is decoration.
• Open the reference you're imitating before you design, every time. Every one of our rejections came from designing off a memory of the reference instead of the reference.

Lead magnets as Artifacts

Artifacts let Claude Code publish an HTML or Markdown page from your session to a private claude.ai URL that updates in place when you republish. That turns a lead magnet from a PDF someone designs next week into a page you publish in the same session you researched it in. It's on Pro, Max, Team, and Enterprise with a claude.ai login; it isn't available through Bedrock, Vertex, or Foundry.

1. Write the Monday lead-magnet post with its offer ('comment X and I'll send it').
2. For each person who asks, have Claude research their industry first and use their own website only as a hint (sites go stale), then build the page: the checklist, playbook, or teardown the post promised, in your visual style.
3. Ask Claude to publish it as an Artifact. /artifacts lists everything you've published; o opens one and c copies its link.
4. Read the page yourself before the link goes anywhere. The same folder rule applies: Claude drafts the page, a human sends the link.

Do this now

Sources and further reading

• Claude Code Artifacts docs
• Puppeteer docs
• Claude Code skills docs