Sign up to save your podcasts
Or
Share How to Create Infographics with Claude in 10 Minutes or Less
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
How to Create Infographics with Claude in 10 Minutes or Less
I've spent the last week obsessed with building infographics in Claude — and I needed to show you how it works. This isn't image generation. We're not asking an AI to paint a picture of information and hope the text comes out legible. We're building these in HTML, exporting to PNG, and ending up with something you can post on Instagram, embed on your site, or hand to a client at intake. The difference matters, and I'll explain exactly why in the video.
The prompt structure here — research, confirm, build — works for any topic, any practice area. Start simple. Pick something your clients ask about constantly and build a one-page visual that answers it. The HTML is yours to edit, the PNG is ready to post, and the whole thing takes under ten minutes once you’ve done it once. This is the kind of tool that gives small firms an edge they shouldn’t have access to yet. Use it.
Here’s the prompt I used; if you’d like to use it for your own infographics, just adjust steps 1 and 2, or talk to Claude and ask it to modify it for you.
Load the frontend design skill before doing anything else.
Then follow these steps in order:
**Step 1 — Research.** Look up what assets are typically protected in bankruptcy — covering both Chapter 7 and Chapter 13 where relevant. Focus on the exemptions people most commonly misunderstand: home equity, vehicles, retirement accounts, personal property, tools of trade. Find out which chapter is more relevant for this topic and lead with that. Real exemption limits where possible.
**Step 2 — Talk to me about structure.** Propose a layout for a single 1080x1080 infographic with a myth-busting tone — the angle is "what bankruptcy actually protects." The design should use icons to represent each asset category. Show me the assets you plan to feature, the exemption amounts or rules for each, and the proposed visual layout before writing any code.
**Step 3 — Talk to me about design.** Before building, ask me for my design preferences. I will upload a photo and I want you to extract the color palette from it and use those colors as the basis for the design. Wait for my response before proceeding.
**Step 4 — Build.** Once I approve both the structure and the design direction, build it as a single HTML file at 1080x1080px. Use emoji or Unicode icons if system icons aren't available. Export a PNG at the end using Playwright.
This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit rosenadvertising.substack.com/subscribe
This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit rosenadvertising.substack.com/subscribe
View all episodes
By Toby Rosen
5
33 ratings
I've spent the last week obsessed with building infographics in Claude — and I needed to show you how it works. This isn't image generation. We're not asking an AI to paint a picture of information and hope the text comes out legible. We're building these in HTML, exporting to PNG, and ending up with something you can post on Instagram, embed on your site, or hand to a client at intake. The difference matters, and I'll explain exactly why in the video.
The prompt structure here — research, confirm, build — works for any topic, any practice area. Start simple. Pick something your clients ask about constantly and build a one-page visual that answers it. The HTML is yours to edit, the PNG is ready to post, and the whole thing takes under ten minutes once you’ve done it once. This is the kind of tool that gives small firms an edge they shouldn’t have access to yet. Use it.
Here’s the prompt I used; if you’d like to use it for your own infographics, just adjust steps 1 and 2, or talk to Claude and ask it to modify it for you.
Load the frontend design skill before doing anything else.
Then follow these steps in order:
**Step 1 — Research.** Look up what assets are typically protected in bankruptcy — covering both Chapter 7 and Chapter 13 where relevant. Focus on the exemptions people most commonly misunderstand: home equity, vehicles, retirement accounts, personal property, tools of trade. Find out which chapter is more relevant for this topic and lead with that. Real exemption limits where possible.
**Step 2 — Talk to me about structure.** Propose a layout for a single 1080x1080 infographic with a myth-busting tone — the angle is "what bankruptcy actually protects." The design should use icons to represent each asset category. Show me the assets you plan to feature, the exemption amounts or rules for each, and the proposed visual layout before writing any code.
**Step 3 — Talk to me about design.** Before building, ask me for my design preferences. I will upload a photo and I want you to extract the color palette from it and use those colors as the basis for the design. Wait for my response before proceeding.
**Step 4 — Build.** Once I approve both the structure and the design direction, build it as a single HTML file at 1080x1080px. Use emoji or Unicode icons if system icons aren't available. Export a PNG at the end using Playwright.
This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit rosenadvertising.substack.com/subscribe
This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit rosenadvertising.substack.com/subscribe