Discover elderly design abilities and much more: https://uicollective.co/
Attempt Claude Opus 4.8 for AI design operations: https://clau.de/UICollective
Follow me on X: https://x.com/KirkMDesign
Design with AI – Full Guide: https://youtu.be/j_ZPV10bu54
Find out just how to utilize Claude Code as your internet design partner, from study and site audits to develop guardrails, constructing brightened pages, and final QA. This total guide goes through the complete operations for developing much better web sites quicker with AI.
–.
Why Join UI Collective Academy? Obtain accessibility to premium training courses, costs downloads, and so far more on the way (I am mostly building this solo … attempting to make design education and learning readily available for all, support goes a long way!).
↪ Need a style system? (likewise consisted of 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.
Allow us construct or fix your design system: https://designsystemlabs.co/.
Conserve 20% on the Annual Mobbin plan: http://mobbin.com/uicollective.
kirkland@uicollective.co.
PLAYLISTS.
Layout with Claude Code: https://www.youtube.com/playlist?list=PLkmvmF0zhgT_cKQTLZOSlnEHtynu4JcpY.
Style with AI: https://www.youtube.com/playlist?list=PLkmvmF0zhgT87wHp_KdEdmauLq3m9U5uQ.
This video 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.