Fix AI Slop With 21st.dev + Claude Code
10.5K views · 2026-10-12
UI Design
Try 21st.dev: https://21st.dev/go/griffin #ad
Your AI-built website works—but does it still look AI-generated? In this video, I show you how to fix generic AI design with 21st.dev and Claude Code, using real designer-made React components instead of asking AI to design everything from scratch.
We’ll browse the component library, use Copy Prompt to add an interactive password checklist, and upgrade a SaaS landing page with an animated hero background and a redesigned features section. I’ll also show you how to adapt components to your existing design system, refine readability and spacing, and connect Magic MCP so Claude can find and install a new pricing section for you.
If you’re building with Claude Code, Cursor, or other AI coding tools, this is a practical workflow for turning a generic vibe-coded project into something that feels more intentional and professionally designed.
21st.dev Magic MCP: https://21st.dev/mcp
👉🏼 My AI for Designers guide (FREE): https://griffinwooldridge.com/ai-for-designers
📩 Business:
griffin@griffinwooldridge.com
🌐 Connect with me!
https://www.x.com/GriffinWDesigns
https://www.instagram.com/griffinwooldridge1
https://www.tiktok.com/@griffin.wooldridge1
https://www.facebook.com/griffinwooldridge1
https://www.linkedin.com/in/griffinwooldridge/
https://www.griffinwooldridge.com/
🔥 My top tools (some are affiliate links – thank you!):
Mobbin – https://mobbin.com/griffin
Claude Code – https://claude.ai/referral/QKgwnTDdgw
Framer – https://framer.link/griffin-wooldridge
Granola – https://go.granola.ai/griffin-wooldridge
Anything – https://anything.link/griffin-wooldridge
0:00 Intro
0:31 Exploring 21st.dev
2:11 Copy Prompt & Password Component
4:41 Upgrading the Landing Page
6:48 Redesigning the Features Section
9:35 Setting Up Magic MCP
10:55 Redesigning Pricing with MCP
11:56 Final Thoughts
This video is sponsored by 21st.dev.
#aidesign #uidesign #claudecode #vibecoding
Your AI-built website works—but does it still look AI-generated? In this video, I show you how to fix generic AI design with 21st.dev and Claude Code, using real designer-made React components instead of asking AI to design everything from scratch.
We’ll browse the component library, use Copy Prompt to add an interactive password checklist, and upgrade a SaaS landing page with an animated hero background and a redesigned features section. I’ll also show you how to adapt components to your existing design system, refine readability and spacing, and connect Magic MCP so Claude can find and install a new pricing section for you.
If you’re building with Claude Code, Cursor, or other AI coding tools, this is a practical workflow for turning a generic vibe-coded project into something that feels more intentional and professionally designed.
21st.dev Magic MCP: https://21st.dev/mcp
👉🏼 My AI for Designers guide (FREE): https://griffinwooldridge.com/ai-for-designers
📩 Business:
griffin@griffinwooldridge.com
🌐 Connect with me!
https://www.x.com/GriffinWDesigns
https://www.instagram.com/griffinwooldridge1
https://www.tiktok.com/@griffin.wooldridge1
https://www.facebook.com/griffinwooldridge1
https://www.linkedin.com/in/griffinwooldridge/
https://www.griffinwooldridge.com/
🔥 My top tools (some are affiliate links – thank you!):
Mobbin – https://mobbin.com/griffin
Claude Code – https://claude.ai/referral/QKgwnTDdgw
Framer – https://framer.link/griffin-wooldridge
Granola – https://go.granola.ai/griffin-wooldridge
Anything – https://anything.link/griffin-wooldridge
0:00 Intro
0:31 Exploring 21st.dev
2:11 Copy Prompt & Password Component
4:41 Upgrading the Landing Page
6:48 Redesigning the Features Section
9:35 Setting Up Magic MCP
10:55 Redesigning Pricing with MCP
11:56 Final Thoughts
This video is sponsored by 21st.dev.
#aidesign #uidesign #claudecode #vibecoding