🎨 Claude Design Cheat Code

DEMO

• Premium SaaS Landing Page 1 - https://claude.ai/public/artifacts/f891e2f5-57cd-4134-8d52-058ac693218d
• Premium SaaS Landing Page 2 - https://claude.ai/public/artifacts/aa7c80e1-425b-44fa-81b0-9dc03e508e35
• Premium SaaS Dashboard (Forest Night Theme) - https://claude.ai/public/artifacts/314f32c4-2d93-498c-bebe-0cadbc057024
• Social Media Dashboard (Social Media Dashboard - Ocean Depth Theme) - https://claude.ai/public/artifacts/1f56739a-ea8c-4be2-bcb7-7ed7283a2e0c

🔥 The Magic Prompt Formula

"Create a [PROJECT TYPE] that looks like it belongs on Awwwards/Dribbble. 

**Visual Style:**
- [AESTHETIC CHOICE]: Modern/Minimalist/Bold/Futuristic/Elegant
- [COLOR MOOD]: Dark mode with [COLOR] accents / Light with vibrant [COLOR] / Monochrome with [COLOR] highlights
- [DESIGN TREND]: Glassmorphism/Neumorphism/Gradient backgrounds/Floating elements/Bento grids

**Make it premium enough that I'd screenshot and share it. Add:**
- Smooth hover animations and micro-interactions
- Bold typography with proper hierarchy  
- Perfect spacing and visual flow
- High contrast and accessibility
- Current 2024/2025 design trends

**Reference sites:** [PASTE URLS OR SAY: "Think Stripe/Linear/Framer quality"]

Don't make it functional but boring - make it STUNNING."

---

🎯 Quick Design Styles

Dark & Premium

"Dark gradient background (slate-900 to purple-900), glassmorphism cards, 
purple/pink accent gradients, bold white typography"

Clean & Modern

"Light background, subtle shadows, blue/green accents, 
plenty of whitespace, clean sans-serif fonts"

Bold & Vibrant

"Bright gradient backgrounds, high contrast colors, 
oversized typography, neon accents, playful animations"

Minimal & Elegant

"Neutral backgrounds, single accent color, 
refined typography, subtle interactions, premium spacing"

---

🎨 Premium Color Combinations

Dark Mode Palettes

Purple Dream

• Background: slate-900 to purple-900
• Accents: purple-500 to pink-500
• Text: white / gray-300

Ocean Depth

• Background: slate-900 to blue-900
• Accents: cyan-400 to blue-500
• Text: white / blue-100

Forest Night

• Background: gray-900 to emerald-900
• Accents: emerald-400 to teal-400
• Text: white / emerald-100

Sunset Glow

• Background: slate-900 to orange-900
• Accents: orange-400 to red-500
• Text: white / orange-100

Light Mode Palettes

Sky Fresh

• Background: white to blue-50
• Accents: blue-600 to indigo-600
• Text: gray-900 / blue-800

Nature Clean

• Background: white to green-50
• Accents: green-600 to emerald-600
• Text: gray-900 / green-800

Warm Professional

• Background: white to amber-50
• Accents: amber-600 to orange-600
• Text: gray-900 / amber-800

---

⚡ Power Phrases to Use

For Bold Designs:

• "Make it bold enough to stop someone mid-scroll"
• "Premium feel that screams quality"
• "Add visual wow factor with gradients and animations"

For Interactions:

• "Smooth micro-interactions that make it feel alive"
• "Hover effects that surprise and delight"
• "Buttery smooth transitions"

For Layout:

• "Perfect visual hierarchy and spacing"
• "Bento grid layout with floating cards"
• "Asymmetrical but balanced composition"

---

🛠️ Component-Specific Requests

Hero Sections:

"Create a hero that makes visitors say 'wow' immediately. 
Bold headline with gradient text, compelling subtitle, 
dual CTAs (primary + secondary), background animation/gradient"

Cards:

"Design cards that float above the background with subtle shadows,
glassmorphism effects, hover animations that lift/glow,
perfect internal spacing and typography hierarchy"

Buttons:

"Buttons with gradient backgrounds, subtle shadows, 
smooth hover effects (scale/glow), perfect padding,
and satisfying click animations"

---

🎭 Aesthetic Keywords

Modern: Glassmorphism, backdrop-blur, floating elements, subtle shadows Bold: Vibrant gradients, high contrast, oversized typography, neon accents Minimal: Whitespace, single accent color, clean lines, refined typography Premium: Dark themes, gold/purple accents, luxurious spacing, smooth animations Playful: Bright colors, rounded corners, bouncy animations, fun illustrations

---

🚀 Copy-Paste Color Classes

Gradients:

/* Purple Magic */
bg-gradient-to-r from-purple-600 to-pink-600
bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900

/* Ocean Vibes */
bg-gradient-to-r from-blue-600 to-cyan-600
bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900

/* Forest Energy */
bg-gradient-to-r from-emerald-600 to-teal-600
bg-gradient-to-br from-gray-900 via-emerald-900 to-gray-900

/* Sunset Power */
bg-gradient-to-r from-orange-500 to-red-500
bg-gradient-to-br from-slate-900 via-orange-900 to-slate-900

Text Colors:

/* Gradient Text */
text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400
text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400

/* Standard Colors */
text-white text-gray-300 text-gray-400
text-purple-400 text-blue-400 text-emerald-400

---

💡 Pro Tips

1. Always mention specific reference sites (Stripe, Linear, Framer, etc.)
2. Ask for multiple variations ("Show me 3 different approaches")
3. Be specific about interactions ("Add hover effects that...")
4. Mention the emotional goal ("Make users want to screenshot this")
5. Push for boldness ("Don't be safe, be stunning")

---

🎯 Example Perfect Request

"Create a SaaS landing page that looks like Stripe's homepage but with 
a dark theme and purple/pink gradients. Make it bold enough that I'd 
want to screenshot and share it.

Style: Dark glassmorphism with floating cards, smooth hover animations, 
bold typography with gradient text effects.

Include: Hero with dual CTAs, feature cards that lift on hover, 
testimonial section, and footer. 

Make it feel premium and modern - something that belongs on Awwwards."

---

Remember: The key is being specific about the vibe, referencing quality sites, and pushing for visual excellence over just functionality!