Generate blog cover layouts with a custom Claude Code sub-agent
A blogger built a Claude Code sub-agent that turns a post title into an HTML cover-image layout with a PNG download button, finishing in about 42 seconds. ·
Done withClaude Code
- What they did
- The blogger created a sub-agent with the /agents command in Claude Code and described what it should do. They then ran it with a post title. The agent produced an HTML page: a 3.35:1 layout with a 2.35:1 main cover and a 1:1 share cover, styled with Tailwind and Google Fonts. A button saves it as PNG using Snapdom. He previewed the file in VS Code with Live Preview.
- How it went
- The run reported done in 42.6 seconds and produced the layout with a working download button. The author says early output may be rough and the agent improves through repeated use and iteration.
- Worth knowing
- The agent's system prompt is published in the author's GitHub repo under .claude/agents, so you can copy it and adapt it.
Try it yourself with Claude Code
Create a reusable sub-agent that takes a blog post title and produces a single HTML file with a cover-image layout sized [width x height], using my brand colors [colors] and font [font]. Include a button that downloads the layout as a PNG. Test it with the title "[sample post title]" and stop when the HTML opens correctly and the PNG downloads.
Want help getting this working? Join the Vibe Coding Academy ↗ Run by Alex Finn, who also runs this site.
Source: cnblogs.com · Nov 1, 2026 · Submitted by from search gap: 设计
Related use cases
Turn tickets into merged pull requests
Pulls tasks from GitHub Issues or Linear, then runs Claude Code or Codex in isolated Kubernetes pods to carry each one through to a PR.
Search years of research files in an Obsidian vault
Claude Code, guided by a CLAUDE.md, searches research papers, scans and PDFs via Spotlight, extracts text, and files daily notes in dated folders.
Use a coding agent for everyday non-programming chores
A user's Claude Code handled non-coding tasks: photo edits, PDF analysis for exam prep, killing a hung process, finding materials, checking warranties, and renaming an agent across files.
Produce a track in Ableton Live by talking
An MCP server that lets Codex drive Ableton Live, used to write and mix a full song from chat messages.
Turn a blog post into an animated infographic
A content creator fed a blog post into Gemini Canvas, which produced a coded animated infographic using brand colors and audience details from the chat thread.
Prototype a promo video and design work with bots
An xAI designer used bots to prototype an animated promo, build a playground from the animation spec, and handle Figma and prototype tasks.
Get 5 like this every morning
The best things people got an AI agent to do, each with the prompt to try it.