TL;DR
Jack Roberts demonstrates how to use Claude Code with a GitHub design system called Power Design to generate professional, brand-accurate slide decks from any website URL in minutes. The system is built on 20 codified universal design principles and can also integrate AI image generation via Krea.ai for visually rich slides.
Key points
1
A GitHub repo called Power Design provides a design rule system that Claude Code uses to generate slides programmatically from any website URL using Firecrawl to extract brand DNA (colors, logos, typography)
2
20 universal design principles are codified into the system, including: one idea per slide, 40% white space minimum, 60-30-10 color ratio, golden ratio (1.618) for sizing, max 4 type sizes, 5% edge safe zone, and proximity-based grouping
3
Firecrawl API extracts brand assets from any URL automatically, enabling one-shot slide generation that matches the source brand without manual input
4
AI image generation via Krea.ai (using ChatGPT image model) can be integrated by passing an API key and a reference style image, producing on-brand illustrated slides automatically
5
Finished slide decks (HTML-based) can be hosted and shared publicly via GitHub and Vercel CLI, both connectable through Claude Code
Actionable insights
→
Clone the Power Design GitHub repo, open it in your IDE (Jack uses Antig ravity), paste a target website URL, add your Firecrawl API key, and prompt Claude to generate slides - the entire process takes roughly 3 minutes
→
Use the 20 design rules as a prompt constraint layer rather than relying on Claude defaults - specifically enforce: 40% white space, golden ratio scaling, 60-30-10 color split, one accent color, and no content within 5% of edges
→
For image-rich slides, get a Krea.ai API key, find a reference illustration style on Pinterest or Midjourney Explore, upload the reference image, and prompt Claude to generate additional slides using the ChatGPT image generation model via the Krea.ai API
Notable quotes
“White space isn't where the design ends. It's where the design lives.”
“We order Picasso and Mr. Bean shows up.”
“If you can't get the point across in three seconds, you don't have a slide. You have a document.”
Worth watching?
✅
Worth watching the full video?
Watch if you want to see the live build process and the actual slide outputs - the written summary captures the system and principles, but seeing the one-shot ClickUp and Stripe results render in real time makes the capability more convincing.
Saved you some time? The creator still deserves a like.
Get summaries like this for your own YouTube channels
Every new video from your channels — summarised and in your inbox before you even knew it dropped.
Try it free