Claude Code = $10,000 Beautiful Slides
Jack demonstrates a GitHub-based system using Claude Code to generate professional slide decks from any website URL by codifying 20 universal design principles. The system uses Firecrawl to extract brand DNA from websites and can integrate AI-generated images via APIs like Krea.ai. The result is polished, brand-consistent HTML presentations created in minutes with minimal input.
Summary
The video presents a workflow for generating high-quality slide decks programmatically using Claude Code, underpinned by 20 codified universal design principles. Jack argues that most AI-generated design looks generic ('AI slop') because users don't give the model a structured rule set to follow — essentially getting garbage out because they put garbage in.
The 20 design principles Jack references are research-backed and cover concepts like: one idea per slide, 3-second glanceability, maximum 7 elements per slide (ideally 3-5), 40% white space minimum, a 5% safe zone from edges (borrowed from TV production), the golden ratio (1.618) for sizing, four type sizes maximum per slide, 28pt minimum body text, 60-character line length cap, 60-30-10 color ratios, one accent color per design, 8px grid alignment, proximity-based grouping, and data-ink ratio principles (no 3D, no decorative gradients).
The practical workflow involves: cloning a GitHub repo ('Power Design,' forked from 'Vault Design'), inputting a target website URL, using Firecrawl to extract brand assets (colors, logos, typography, visual style), and then prompting Claude to generate HTML slide decks following the design rules. Jack demonstrates this with ClickUp and Stripe, showing that Claude reproduces brand-specific details like gradient text effects and logo placement in a single generation pass.
For enhanced visual impact, Jack shows how to integrate AI image generation by passing a Krea.ai API key to Claude, specifying a visual style (e.g., a Pinterest illustration style), and having Claude generate and embed contextually appropriate images directly into slides. The final step involves deploying the HTML deck publicly via GitHub and Vercel CLI, making it shareable as a hosted web page.
Key Insights
- Jack argues that AI design fails not because of model capability but because users provide no design rule infrastructure — the model is treated like a '500 IQ intern' without a brief, producing generic defaults instead of principled output.
- Jack claims that codifying design into 20 measurable, checkable rules (e.g., golden ratio, 40% whitespace, 60-30-10 color split) gives Claude a 'rule book' it can execute against, producing results indistinguishable from human professional design.
- Jack demonstrates that Firecrawl can extract a full brand spec from any website URL — including SVG logos, color palettes, and visual screenshots — in seconds, enabling Claude to generate brand-accurate slides without manual asset collection.
- Jack shows that by uploading a reference image from Pinterest or Midjourney alongside a Krea.ai API key, Claude will both generate on-style images and integrate them into slides, replicating the reference aesthetic without explicit style prompting.
- Jack asserts that the 5% edge rule — no critical content within 5% of any slide border — originates from TV production standards and is one of the key principles that makes AI-generated slides feel professionally crafted rather than algorithmically placed.
Topics
Full transcript available for MurmurCast members
Sign Up to Access