Claude Design Masterclass: Websites, Videos & More (2 Hours)

The video is a comprehensive two-hour masterclass on Claude Design, a separate Anthropic product distinct from Claude Chat and Claude Code, specifically built for designing websites, slide decks, prototypes, animations, and videos. It is powered by Claude Opus 4.7, which has advanced vision capabilities allowing it to visually verify its own outputs. The instructor emphasizes that Claude Design requires a paid plan and operates on its own weekly session limit, separate from regular Claude usage, making token efficiency a central theme throughout the video.

The instructor begins by demonstrating how to build a design system, which he describes as the most important first step. Rather than starting from scratch inside Claude Design (which would consume the session limit), he brainstorms a fictional brand called 'Tally' — a minimalist personal finance app — inside regular Claude chat. He generates the brand concept, color palette, typography, avatar profiles, and logo ideas there first, then imports that markdown documentation into Claude Design to generate a full design system. He notes that Claude Design has a persistent weakness with logo rendering, often altering logos from their original uploaded form.

The instructor then walks through four sequential build projects, all using the Tally design system for visual consistency. First, he builds a pitch deck by doing market research and outlining slide structure in regular Claude chat, then importing that refined markdown into Claude Design's slide deck mode. He demonstrates the tweaks panel, which allows non-destructive visual experimentation with backgrounds, cover styles, and accents. Second, he builds a landing page, starting with a wireframe exploration (which he later admits was an inefficient use of his session limit) before switching to a high-fidelity prototype. He incorporates an MP4 animation created in Kling AI as a hero section background element, and again heavily uses the tweaks panel for iteration. Third, he builds a mobile app prototype by first generating an 800-line app specification document in regular Claude chat, then feeding it into Claude Design's prototype mode with interactive screens, dark and light mode variants, and onboarding flows. Fourth, he creates a launch video using the Hyperframes framework — a downloadable markdown skill that teaches Claude Design how to create rendered HTML motion graphics and animations.

Throughout the video, the instructor provides detailed token management advice. He recommends doing all brainstorming, research, outlining, and planning in regular Claude chat before touching Claude Design. He advises using Opus 4.7 for initial builds and complex iterations, then switching to Sonnet or Haiku for minor tweaks. He warns against long, multi-change prompts, recommending one visual change per prompt for better results. He also advises against building multiple design systems, and cautions that very long conversation threads pollute the context window and accelerate session consumption.

The second half of the video includes a live build of a separate brand called 'LOL' (a sleep wellness drink), demonstrating the same workflow with a different aesthetic. He uses Kling AI and Krea AI to generate a looping background video for the hero section, imports it into Claude Design, and builds a full landing page. He then exports the project as a ZIP file, imports it into Claude Code within VS Code, pushes it to a private GitHub repository, and deploys it live using Vercel — walking through the entire deployment pipeline step by step, including debugging a 404 error caused by incorrect file path naming. He also covers mobile responsiveness as a post-deployment consideration and briefly introduces MotionSites.ai and 21st.dev as sources for animated background and component inspiration that can be directly prompted into Claude Design.