Fix AI Slop With 21st.dev + Claude Code

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