Make Infographics MoveWith Claude Opus 5.5

I build the infographics for the founders I ghostwrite for with Claude, each in that founder's own brand, and now they move. By the end you'll have an infographic in your brand, a GIF of it that loops cleanly, and a way to fix any part of it with one sentence.

Claude doesn't draw your infographic. It writes it as one web page with your real text, fonts and colors at 1080 × 1350 (LinkedIn's 4:5), and a headless browser screenshots it at 2x, which gives you a sharp 2160 × 2700 PNG.

Why a page and not an image generator. Image models garble text, and an infographic is mostly text. A page shows the words you gave it, letter for letter.

How the still becomes a GIF. The same page gets a clock: give it a second and it draws that frame. A small script screenshots the loop 30 times a second and stitches the frames into an MP4 and a GIF with ffmpeg.

So every fix is one sentence. You tell Claude what's wrong, and it changes the page and renders again.

You need

• A Claude plan with code execution on (skills work on every plan).
• Claude Opus 5.5, selected in the model menu.
• Your website, your logo file (SVG or PNG) and your headshot if it goes on the graphic.
• The content: the headline and every line, with the real numbers.

Turn on code execution

1. Open Claude.
2. Go to Settings > Capabilities.
3. Turn on Code execution and file creation.

On Team or Enterprise, an owner turns it on in Organization settings.

Your brand is already on your website. Claude can read it off a screenshot, as long as it measures the colors with code. A color picked by eye drifts: one client's orange came out yellow until we sampled it.

Do these steps

1. Screenshot the top of your homepage on a computer.
2. In a new Claude chat, attach the screenshot and your logo file, and paste the prompt below.
3. Check the hex codes against your brand guide, if you have one.
4. Save the answer as brand.md.

I attached a screenshot of my homepage and my logo file. Build my brand file for LinkedIn infographics.

1. Sample the exact hex values from the screenshot with code, not by eye: background, main text, secondary text, card color, borders and the one accent color.
2. Name the fonts. My website is {yoursite.com}. If you can't confirm a font, say so and give me the closest Google Font.
3. Describe the shapes the site uses: corner radius, card style, buttons, lines and any texture.
4. Write the rules: one accent color only, and what never appears (emoji, stock photos, icon sets, extra colors).
5. Keep my logo file exactly as it is. Never redraw it.

Give it back as one markdown file called brand.md.

If Claude cannot confirm a font

1. In Chrome, right-click a headline on your site and click Inspect.
2. Read the font-family line in the Styles panel.

Don't ask Claude to "design an infographic" from nothing, or you get the average of every infographic it has seen. Give it one reference you like and it rebuilds that layout in your brand. Use the reference for its layout only, never its words, colors or art.

A spine fits 5 to 6 rows on a 1080 × 1350 canvas. If you have more, cut rows, not type size.

Do these steps

1. In a new chat with Claude Opus 5.5, attach brand.md, your logo, your headshot and the layout reference.
2. Paste the prompt below and change the parts in curly brackets.
3. Read the PNG Claude sends back, and write each fix as one sentence.

Build a LinkedIn infographic. Use brand.md for every color, font and shape. Use the attached reference for the layout only.

Content, word for word:
Headline: {Make infographics move}
Second line: {with Claude Opus 5.5}
{Item 1: title, then one line}
{Item 2: title, then one line}
{Item 3: title, then one line}
{Item 4: title, then one line}
{Item 5: title, then one line, optional}
{Item 6: title, then one line, optional}
Footer: {Your Name}, {Your role}, with my headshot and my logo
Call to action: {Comment KEYWORD for the guide}

How to build it:
- Write it as one HTML page at 1080 x 1350. Do not use an image generator.
- Screenshot it with a headless browser at 2x, so the PNG is 2160 x 2700.
- Paste my real logo and headshot files. Never redraw them.
- One accent color, used on purpose. Everything else comes from brand.md.
- Every line people need to read is 26px or larger.
- Use only the numbers I gave you.
- If a row needs an icon, draw a small picture of the actual idea. No icon libraries.
- No em dashes and no emoji on the graphic.

Before you send it, look at the PNG yourself. Fix any text that overflows, wraps badly or touches another element.

Fixes I've sent on my own graphics

• "The colors look random. Use one accent and keep everything else grey."
• "The logo is hard to see. Give it a white outline."
• "Use real numbers on the example posts, and make them easier to read."

Make the next one faster. When a graphic looks right, ask Claude: "Turn this page into a template with the content as slots, and save my brand rules as a skill."

With code execution on, Claude renders the PNG itself and sends it back. You don't need this section unless that fails.

If Claude cannot render the PNG

1. Ask Claude for the HTML file and open it in Chrome.
2. Open DevTools (Cmd+Option+I on a Mac, Ctrl+Shift+I on Windows), then the device toolbar (Cmd+Shift+M or Ctrl+Shift+M).
3. Set the size to 1080 × 1350.
4. In the ⋮ menu, click Add device pixel ratio and set it to 2.
5. In the ⋮ menu, click Capture screenshot.

Result: Chrome downloads a 2160 × 2700 PNG.

The motion comes from one Claude skill. It holds the method, the build notes for each motion and the renderer, so Claude doesn't start from scratch every time.

Install the skill in the Claude app

1. Download infographic-motion.zip above. Don't unzip it.
2. In Claude, go to Customize > Skills, click +, then + Create skill > Upload a skill.
3. Select infographic-motion.zip.

Result: infographic-motion shows in your skills list, toggled on.

Install the skill in Claude Code

1. Unzip it and move the infographic-motion folder into ~/.claude/skills/.
2. Start Claude Code and type /infographic-motion.

Result: Claude Code loads the skill. A skill uploaded in the Claude app also loads in Claude Code 2.1.273 or later with the same account.

Pick one motion

Use one per graphic. Two motions compete, and the reader watches neither.

The skill has build notes for 16 motions, modeled on Charlie Hills' board of motion graphics made with Opus 5.5. Text to layout is the safe default.

Do these steps

1. In the chat where you built the still, paste the prompt below and change the parts in curly brackets.
2. Read the states Claude lists. Reply OK, or correct one state in one sentence.
3. Check the contact sheet and frames against the checklist, then download the GIF and MP4.

Use the infographic-motion skill to animate the infographic page you just built.

Motion: {flowing path down the steps}.
Loop: {9} seconds. Hold the finished infographic for at least 2.5 seconds, and start the loop on the finished frame.
Keep every color, font and position from the still. The finished frame of the motion is the still.

First, list every state with its start time and wait for my OK.
Then render it, and show me the contact sheet and two frames from the middle of each move before you give me the GIF and the MP4.

If the render fails in the Claude app

Some sandboxes can't download the headless browser. Run it on your computer:

1. Ask Claude for the HTML file and render.py, and save both in one folder.
2. In a terminal in that folder, run pip install playwright and python3 -m playwright install chromium.
3. Install ffmpeg. On a Mac, run brew install ffmpeg.
4. Run python3 render.py infographic.html --gif-width 1080 --gif-fps 25.

Result: the folder contains the MP4, the GIF, a poster PNG and a contact sheet.

Every one has come up on a real graphic, mine or a client's. Each comes with the sentence that fixes it.

1. Text from an image generator

What you see: misspelled words, melted letters, numbers that change between two mentions.

Say: "Rebuild this as an HTML page with real text."

2. Colors that look random

What you see: three accent colors fighting, tiles that alternate colors for no reason.

Say: "Use one accent color only, on the call to action and one highlight. Everything else grey."

3. Stock icons

What you see: the same duotone icon set every AI graphic uses.

Say: "Replace the icons with small drawings of what each row is about, in one style."

4. A redrawn logo

What you see: a logo that's almost right. Slightly different letters, slightly off color.

Say: "Use my logo file exactly as it is. Do not redraw it."

5. Text too small for a phone

What you see: fine on a laptop, grey lines on a phone. A 1080px graphic shows at about 37% in the mobile feed, so 24px text lands at about 9px.

Say: "Make every line people need to read 26px or larger. Cut words if it doesn't fit."

6. Motion that moves wrong

What you see: everything moving at once, things sliding at one flat speed and stopping dead, cards bouncing like jelly, and a visible snap when the GIF restarts.

Say: "One thing moves at a time. Ease every move. Make the last frame match the first."

Run it on every graphic. The automated checks catch timing mistakes. Your eyes catch the rest.

The still

• Every number matches your source.
• No text overflows, wraps badly or touches another element.
• The logo and headshot are the real files, and there's one accent color.
• Every line that people need to read is 26px or larger.
• No em dashes, no emoji, no typos. Read every word once, out loud.
• You looked at the graphic on your phone.

The GIF

• The loop line from the renderer says clean. If it says near-clean, look inside the box that it gives.
• The fonts line lists your fonts. If it says system fallback, the fonts did not load.
• Two frames from the middle of each move look intentional: no blank boxes, overlapping text or cut-off edges.
• The first frame is the finished infographic.
• The GIF is under 5 MB. 2 MB is my target.

To see a mid-move frame: ask Claude for "the frames at 2.4s and 3.1s", or save frame 90 (3.0s) yourself:

ffmpeg -v error -y -i infographic.mp4 -vf "select='eq(n\,90)'" -frames:v 1 check.png

This is the page behind the GIF on my post, with placeholders for my photo and logo.

The timeline

Make it yours

1. Unzip infographic-motion-example.zip and open infographic-motion-example.html in a text editor.
2. Change the six steps in the STEPS list.
3. Change the title (<div class="top">), the keyword (<div class="cta">) and the name, role, photo and logo (<div class="foot">).
4. Run python3 render.py infographic-motion-example.html --gif-width 1080 --gif-fps 25.

Result: you have the GIF, the MP4 and the poster PNG with your content.

Or let Claude do it. Attach the file and say: "Use the infographic-motion skill. Swap in my brand from brand.md, my six steps, my photo, my logo and my keyword, then render it."

Run it yourself. Pull your brand, pick one layout, paste the prompt from Step 3, and run the checklist before you post.