Make blog cover mockups with a Claude Code agent

A blogger set up a Claude Code agent to generate an HTML cover mockup from a post title and add a PNG download button in 42.6 seconds.

Done with Claude Code· Intermediate· Nov 2026

What they did
They used the /agents command in Claude Code to define a custom helper, then fed it a blog post title. The agent built a single HTML page with a wide overall canvas, plus separate main and square share versions, styled with Tailwind and Google Fonts. It also added a button that uses Snapdom to save the result as a PNG, and the file was checked in VS Code with Live Preview.
How it went
The run completed in 42.6 seconds and the download control worked. The author says the first output may need cleanup, and the agent improves as they keep using it and adjusting it.
Tips
If you want to reuse the setup, the agent prompt is published in the author’s GitHub repo under .claude/agents. Review the generated page in your editor before relying on it.

Try it yourself with Claude Code

Set up a reusable Claude Code agent for blog cover art. When I give it [post title], have it create one HTML file for a cover layout at [overall dimensions], with both a [main cover size] version and a [square social size] version. Apply [brand colors] and [font], and include a button that exports the design as a PNG. After it generates the file, open it for inspection and wait for my approval before any step that would overwrite files, save files, send anything, delete anything, or submit anything. Test it with "[sample post title]" and stop once the HTML renders correctly and the PNG export works.

Fill in the [brackets]. Agents can make mistakes, so review anything before it is sent, paid or deleted.

Read the original on cnblogs.com ↗

Get 3 agent uses like this every morning

With the day's top AI news. Free, and one click to unsubscribe.