Learn senior design skills and more: https://uicollective.co/
Try Claude Opus 4.8 for AI design workflows: https://clau.de/UICollective
Follow me on X: https://x.com/KirkMDesign
Design with AI – Full Guide: https://youtu.be/j_ZPV10bu54
Learn how to use Claude Code as your web design partner, from research and website audits to design guardrails, building polished pages, and final QA. This complete guide walks through the full workflow for creating better websites faster with AI.
—-
Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo…trying to make design education available for all, support goes a long way!)
↪️ Need a design system? (also included in the academy): https://collectivekit.co/
🔗 OTHER SYSTEM VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Claude Design Video: https://youtu.be/eXlSgQmz02E
🔗 MORE LINKS
Let us build or fix your design system: https://designsystemlabs.co/
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
kirkland@uicollective.co
🔗 PLAYLISTS
Design with Claude Code: https://www.youtube.com/playlist?list=PLkmvmF0zhgT_cKQTLZOSlnEHtynu4JcpY
Design with AI: https://www.youtube.com/playlist?list=PLkmvmF0zhgT87wHp_KdEdmauLq3m9U5uQ
This video is sponsored by Anthropic
@claude
#ClaudePartner
0:00 An Introduction
1:39 The Claude Code Web Design Roadmap
3:16 Goal of this Workflow
4:54 Auditing Existing Websites
5:17 Past Workflow
6:38 Using Claude Code to Audit a URL
8:27 Building a Claude Skill to Enhance the Audit Output
11:18 Running an Enhanced Audit
12:12 Standardizing the Report Generation Process
13:52 Previewing Audit Report
16:03 Defining the Design Direction
17:02 Intro to Mobbin
18:23 Connecting Mobbin MCP to Claude Code
19:35 Testing MCP Connection
20:37 Building a Client Ready Moodboard
22:35 Refining the Moodboard
24:31 Additional MCP Workflow
26:34 Building the Brand Guardrails
29:55 Adding Competitive Examples to Inform Claude Code
32:53 Full Claude Skill
34:13 Quick Recap
36:08 What NOT To Do
38:12 Why We Build the Skill
39:44 Building the Website
43:22 Starting in Claude Design with Wireframes
45:13 Initial Output
50:08 Exporting to Claude Code
53:04 First Drafts inside Claude Code
55:51 Using MCP to Improve Sections
57:57 Refining the Hero Section
1:00:16 Output After Repeating Process
1:01:11 Importance of Brand Guardrails
1:02:07 Using Claude Code for QA
1:03:02 Building a Skill for QA
1:04:08 QA Report
1:04:58 Deploying Your Website
1:06:03 Pitching the Website
1:07:22 Using Claude Projects
1:09:02 Generating a Client Pitch with Claude
1:10:25 Outro