AI Foundations: https://aifoundations.io
Free Resources: https://aifoundations.io/resources
The ultimate Claude Design tutorial for 2026, end to end for a single fictional roofing company. You’ll build a full branded design system, a live landing page with tweakable variants and service subpages, a motion graphic ad generator that stitches Higgsfield images and Kling 3.0 video into a 15 second Reels ad, a shingle pitch deck, and a signable contract document. Then you’ll consolidate everything into a Claude Code repo, deploy the site to Netlify in one prompt, and wire an admin sign-in that receives real form leads.
Claude Design is Anthropic’s design surface that runs on Claude Opus 4.8. It works from the web or the Claude Desktop app, and every project starts from a design system: company blurb, fonts, logos, colors, and a brand guide with logo variations, motion ideas, color ramps, and web components. From that system Claude Design generates from four templates: website, animation, slides, and document. This tutorial uses Higgsfield for supporting assets (Recraft V4.1 in vector mode for the logo, Seedream 4.5 for landing-page and ad-scene images, and Kling 3.0 for ad video). It uses Sonnet 4.6 in Claude Chat to source Google font pairings and color palettes for the brand guide. It uses Claude Code with the Netlify connector to consolidate the design system, website, slide deck, video ad, contract, and Claude skills into a single repo, and to deploy the finished site to a live Netlify URL with admin sign-in wired to environment variables. The end result is a full Apex Roofing marketing stack running on one branded system.
Chapters
0:00 The Ultimate Claude Design Tutorial For 2026
1:27 Setting Up Claude And Opening Claude Design
2:07 Using Claude Design In The Desktop App
3:07 Creating Your First Claude Design System
3:28 Naming The Company And Adding A Blurb
5:11 Generating A Logo With Higgsfield Recraft V4.1
6:17 Adding Any Other Notes To The Design System
6:34 Picking Fonts With Sonnet 4.6 In Claude Chat
8:03 Building The Brand Color Palette
8:43 The Full Brand Guide Prompt
9:43 Generating And Reviewing The Design System
11:15 Starting Your First Claude Design Project
11:26 The Full Website Prompt For Apex Roofing
13:11 Answering Claude’s Clarifying Questions
14:39 Watching Claude Build The Landing Page
14:57 Using Tweaks To Customize The Site Live
16:11 Getting Image Prompts For The Placeholders
16:24 Generating Images In Higgsfield Seedream 4.5
17:38 Inserting Higgsfield Images Into The Design
18:00 Building A Motion Graphic Ad Generator
18:39 The Ad Studio Prompt For Meta And Instagram
20:11 Writing Better Ad Prompts With Claude Chat
21:34 Generating Ad Scene Images In Higgsfield
22:56 Turning Ad Images Into Video With Kling 3.0
24:19 Piecing The Videos Into A Reels Format Ad
25:47 Reviewing The Final 15 Second Ad
26:13 Creating A Pitch Deck With Claude Design
27:33 Adding Custom Images To The Slide Deck
28:21 Generating A Signable Contract Document
30:36 Consolidating Everything Into A Claude Code Repo
32:22 Iterating On The System In Claude Code
34:01 Deploying The Website To Netlify In One Prompt
35:24 Wiring The Admin Sign In With Env Variables
36:40 Submitting A Test Lead End To End
36:56 Final Thoughts On Claude Design
#ClaudeDesign #anthropic