Creating Marketing Collateral

Create professional marketing collateral — infographics, one-pagers, flyers, and data visualizations — using the HTML/CSS → Playwright → PNG pipeline with optional D3.js charts.

Workflow

1. Identify collateral type — Consult references/collateral-design-patterns.md for layout patterns and guidelines.

2. Create the HTML/CSS — Write a self-contained HTML file using:

   • Tailwind CSS via CDN for styling
   • Google Fonts via CDN for typography
   • D3.js via CDN for data visualizations (see references/d3-chart-patterns.md)
   • Set body dimensions to match the target output size

3. Render to PNG:

   # US Letter one-pager (default)
   node scripts/render-to-png.js collateral.html --output collateral.png