Claude Code's graphic design side hustle

What it does

This is a skill for Claude Code and Codex that generates social-media card decks from raw material—articles, screenshots, product notes, or photos. It outputs static PNG carousels sized for Xiaohongshu (3:4) and WeChat (21:9 header plus 1:1 share card) by filling single-file HTML templates and rendering them headlessly via Playwright. There is no frontend build chain to babysit.

The interesting bit

Instead of asking an LLM to “make something pretty,” the project imposes two rigid visual systems—Editorial (Monocle-style narrative layouts) and Swiss International Style (grids, anchor colors, hairline rules)—across 28 locked layout skeletons and 10 preset themes. Custom hex colors are explicitly banned; the agent must pick from the curated palette, which is a refreshingly opinionated way to keep AI-generated design from looking like AI-generated design.

Key highlights

• 28 layout skeletons (16 Editorial, 12 Swiss) including KPI towers, H-bar charts, image-led covers, and before/after pipelines
• Single-file HTML → PNG via Playwright; no build tools or deployment needed
• Built-in image sourcing cascade: user uploads first, then Unsplash → Pexels → Flickr CC → Wallhaven
• Playwright-based validator checks for overflow, footer collisions, type caps, and Swiss identity violations such as bold text in a Swiss template
• MapLibre + OSM integration for travel-guide pins and routes; WebGL ink-flow backgrounds for editorial hero pages

Caveats

• Requires a file-system agent (Claude Code, Codex, or Cursor with shell); plain chatbots are explicitly unsupported
• Not a general image editor—some niches like OOTD photography or film-emulation aesthetics are explicitly out of scope
• Validation is not run automatically by default; the agent waits for user review first to avoid burning time on every iteration

Verdict

Content creators and developers who want programmatic, on-brand social graphics without touching Figma should look here; if you need free-form photo retouching or cinematic video covers, this is the wrong tool.