🎯 How to Prompt Claude Code: Summary

The Golden Rule: Describe what you want the user to see, not the code you want Claude to write. Let Claude figure out the implementation.

My 5-Step Prompting Framework:

• Step 1: Screenshot First - Drag a UI screenshot into Claude Code and say "Build this for [your project]"
• Step 2: Describe Results - Say what you want to exist: "Clean landing page with big headline and booking link"
• Step 3: Provide Context - Use design.md files for professional styling, name fonts and colors
• Step 4: One Piece at a Time - Build homepage, get it right, then next page. Don't dump 12 features
• Step 5: Use the Interview Prompt - "You're my CTO, I'm the CEO. Interview me and build it."

Common Mistakes to Avoid:

• ❌ Describing steps: "Create HTML, add CSS, use flexbox" → ✅ Describe result: "Landing page with 4 services"
• ❌ Asking for too much: 12 features in one prompt → ✅ One deliverable per prompt
• ❌ "Make it look good" → ✅ Name font, give exact colors, ask for whitespace
• ❌ Not using screenshots → ✅ Screenshot what you like and drag it in
• ❌ Not using design.md → ✅ Use Stripe, Notion, or Claude designs

My Proven Strategy: The "Screenshot-Result-Context-Interview" technique – start with a screenshot, describe the result, provide design.md context, and use the interview prompt.

My Memory Trick: Remember the 5 Rules of Prompting:

• 📸 Screenshot: Show Claude what you want
• 📝 Result: Describe the outcome, not the steps
• 📁 Context: Use design.md for styling
• 🔄 Build: One piece at a time
• 🧠 Interview: Let Claude ask you questions