Build a Claude Code sub-agent that lays out blog cover images
Idea + starter prompt, not run by us yet
For: Bloggers who need a cover and a share image for every post
The blogger made a sub-agent inside Claude Code with the /agents command, and fed it a post title to see what came out. It produced one HTML page with a wide main cover and a square share cover, built with Tailwind and Google Fonts, plus a button that saves the layout as a PNG. One run finished in 42.6 seconds.
Steps
- Type /agents in Claude Code and create a new sub-agent. Describe the job, the cover sizes and the look you want.
- Run it with one post title and open the HTML page it makes, for example with Live Preview in VS Code.
- Click the download button and check that the PNG matches what the page shows.
- Expect rough early results. The author says the agent gets better as you keep iterating on it.
- The author shares his agent's system prompt on GitHub, in a folder named .claude/agents. Copy it and adapt it to your own blog.
Starter prompt
Help me create a Claude Code sub-agent for blog covers. It takes a post title and builds one HTML page with two layouts, a wide main cover and a square share cover, using Tailwind and a Google Font. Add a button that saves each layout as a PNG. First show me the system prompt you propose and the file path under [project folder]/.claude/agents. Don't write anything until I approve. Then test with the sample title [post title] and put the output in a new folder called [test output folder]. Don't change any of my blog files.
Original post: cnblogs.com · found via agentusecases.ai. Written up in our own words. We haven't run it, so test it on made-up data first.