Creating Social Graphics

Generate platform-ready social media graphics using the HTML/CSS → Playwright → PNG pipeline.

Workflow

1. Identify platform and format — Consult references/platform-sizes-and-guidelines.md for exact dimensions and design guidelines.

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

   • Tailwind CSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
   • Google Fonts via CDN: <link href="https://fonts.googleapis.com/css2?family=FontName&display=swap" rel="stylesheet">
   • Inline styles for precise positioning when needed
   • The HTML document dimensions must match the target platform size exactly

3. Render to PNG — Execute the rendering script:

   node scripts/render-to-png.js graphic.html --width 1080 --height 1080 --output graphic.png