Quick Start Commands
Claude Shortcuts
Claude
Analyze Resume
Analyze my resume and extract key details
Claude
Write Bio
Write a 200-word professional bio
Claude
Headlines
Create 5 headline variations
Claude
Format for Lovable
Using the content you created, now format it for Lovable
Lovable Shortcuts
Lovable
Hero Section
Build a hero section with my headshot on left, text on right
Lovable
Mobile Fix
Make this mobile responsive
Lovable
Color Change
Change primary color to #[your color]
Lovable
Contact Form
Add a contact form with Name, Email, Message fields
Before You Start
Progress0/5 completed
During Hour 1
Progress0/5 completed
During Hour 2
Progress0/5 completed
Essential Prompts
Content Creation (Claude)
Bio: "Write a 200-word bio for [your role] targeting [audience]. Professional but conversational."
Services: "Create 4-sentence descriptions for: [list services]. Include who it's for and key benefit."
Headlines: "5 compelling homepage headlines for [your profession]. Under 12 words each."
Development (Lovable)
Hero: "Hero section: headshot left, headline + subheadline right, 2 CTA buttons, [brand color] accents"
Services Grid: "3-column services grid (1-column mobile). Each card: icon, title, description, CTA button"
Contact Form: "Contact form: Name, Email, Service dropdown, Message. Validation + success message"
Design Quick Reference
Color Codes
Your Brand: #______
Good Neutrals:
- Dark:
#1F2937 - Medium:
#6B7280 - Light:
#F3F4F6 - White:
#FFFFFF
Font Pairs
Professional:
- Headings: Montserrat or Inter
- Body: Open Sans or Roboto
Creative:
- Headings: Playfair Display
- Body: Lato
Spacing
- Sections: 80-120px
- Cards: 24-32px padding
- Buttons: 12-16px padding
- Mobile: Reduce by 30-50%
Quick Fixes
"Claude doesn't see my files"
→ "Please review my uploaded resume""Layout breaks on mobile"
→ "Fix mobile: stack vertically under 768px""Colors are wrong"
→ "Change all [old color] to #[new color]""Form doesn't work"
→ "Debug contact form: check validation, submit handler, Supabase""Can't see changes"
→ Hard refresh: Ctrl+Shift+R (PC) or Cmd+Shift+R (Mac)
Mobile Testing Breakpoints
320px - Small phone375px - iPhone standard768px - Tablet1024px - Small laptop1440px - Desktop
Lovable
Test All Breakpoints
Test and fix at 320px, 768px, and 1440px
Content
Progress0/4 completed
Design
Progress0/4 completed
Functionality
Progress0/4 completed
Pro Tips
Be Specific
"Navy blue" → "#1E3A8A"
Build Incrementally
One section at a time
Test Often
Check mobile after each section
Save Good Prompts
Keep a running doc
Ask for Help
Don't struggle alone!
Need Help?
During Workshop
- • Raise hand
- • Use chat
- • Ask instructor
Common Questions
- • "How do I...?" → Check Prompt Library
- • "Why isn't this working?" → Check Troubleshooting Guide
- • "What's next?" → Check 30-Day Learning Path
Success Metrics
By end of workshop, you should have:
Live portfolio URL
Professional homepage
About page with bio
Services/work section
Working contact form
Mobile responsive site
Important URLs
The Vibe Coding Mindset
- ✦ Start with clear intent
- ✦ Iterate quickly
- ✦ Trust the AI, verify the output
- ✦ Ship imperfect over perfect
- ✦ Learn by building
You've Got This!
Created by: MXP Studio | Facing Disruption