Learn senior design abilities and much more: https://uicollective.co/
Try Claude Opus 4.8 for AI design process: https://clau.de/UICollective
Follow me on X: https://x.com/KirkMDesign
Style with AI – Full Guide: https://youtu.be/j_ZPV10bu54
Discover exactly how to use Claude Code as your website design partner, from research study and web site audits to design guardrails, building polished pages, and last QA. This total guide goes through the full workflow for producing much better web sites much faster with AI.
–.
Why Join UI Collective Academy? Obtain access to costs programs, premium downloads, and so a lot more en route (I am greatly building this solo … attempting to make design education readily available for all, assistance goes a long way!).
↪ Need a design system? (also included in the academy): https://collectivekit.co/.
VARIOUS OTHER SYSTEM VIDEOS TO WATCH.
Construct 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.
Allow us construct or fix your style system: https://designsystemlabs.co/.
Save 20% on the Annual Mobbin strategy: http://mobbin.com/uicollective.
kirkland@uicollective.co.
PLAYLISTS.
Design with Claude Code: https://www.youtube.com/playlist?list=PLkmvmF0zhgT_cKQTLZOSlnEHtynu4JcpY.
Layout with AI: https://www.youtube.com/playlist?list=PLkmvmF0zhgT87wHp_KdEdmauLq3m9U5uQ.
This video clip is funded 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.