Featured Image

Author a 1280×720 HTML card, render it to a 2× PNG with headless Chromium. HTML-first gives full layout control and pixel-perfect brand fidelity; the PNG is the deliverable the user uploads.

Workflow

1. Locate the project's image directory. Default infographics/ at the repo root. Confirm or detect it.

2. Check whether the project is configured. Configured = the image dir contains export.mjs, featured-image.json, and a brand-template.html.

   • If not configured → follow references/setup.md to set it up. Do this once per project, then continue.

3. Compose the post's card. Copy brand-template.html to <post-slug>-featured.html in the image dir, then edit:

   • Headline — short, fits two lines.
   • Subhead — optional, one line.
   • Visual — one supporting graphic that illustrates the post's core idea. Replace the template's example visual.
   • Put the brand accent color on the one key phrase only.

4. Preview in the browser BEFORE rendering. Always open <post-slug>-featured.html so the user sees the live HTML card and can request tweaks. Wait for their go-ahead (or apply their tweaks and re-open) before exporting the PNG. Never skip straight to the render.