Pull a brand from a URL, then animate it: Jack Roberts' Claude Design levels
Scrape the real logo, colours and fonts with Firecrawl first, so the agent animates the brand instead of inventing one.
Jack Roberts walks through seven uses of Claude Design with Opus 5.5. He says every example in the video came from a single prompt. Level 1 is animated slides: give Claude an idea and ask for a 5–20 second looping graphic in your brand palette instead of a still slide.
Level 2 is the key step. In Firecrawl, scrape a URL with the branding format instead of markdown, and you get the site's logo, colours and fonts. Then give Claude your Firecrawl API key and a prompt containing your references, the URL and the idea, and it builds on the real brand. His example turned his speech-to-text product's site into a looping hero graphic, with a blue character whose speech became birds that became text, plus a footer with draggable physics.
Level 3 is for talking-head reels. Record yourself, and have Opus build graphics and captions above you, timed to what you say, in 9:16. His own critique of his first attempt: too crowded, and the default font 'has Claude's fingerprints on it', so pick your own typeface. Level 4 is reformatting: the same graphic rebuilt for each aspect ratio rather than cropped.
Level 5 is logo reveals. Ask Claude to use Firecrawl to grab a brand's identity and logo, then build a three-second animated logo with a jingle. He showed Notion, Duolingo, Spotify and Nike as demos. Level 6 is style transfer from a reference graphic found on a design-inspiration site or Pinterest. Results were mixed: font consistency was strong, but one example needed an image or video model to match. Level 7 is scale: he says he ran logo animations for about 100 brands in one batch.
His companion website video adds the hybrid version. Find references on Refero, Mobbin or X. Connect Higgsfield to Claude through MCP. Prompt Claude to use the references, a design loop and the Higgsfield connection to generate footage and photos, then layer code-driven motion on top. His 'X-ray' toggle shows which pixels are generated video and which are code. For seamless loops, use one render function per section and make the last frame match the first.
He also runs every script through SlopMonster, his AI-tell linter. Note that both videos promote his paid community, and the website video has a MongoDB-sponsored segment.