The Architect's Cheat Sheet: Vibe Coding

A quick reference guide to the core concepts, workflows, and frameworks from the "Vibe Coding: Building Apps with AI Conversation" course. Keep this handy to turn your ideas into reality.

1. The Core Philosophy: Architect & Builder

Your role and the AI's role in the creative process.

• You are the Architect: You hold the vision, the blueprint, and the "vibe." Your job is to communicate the what and the why.
• The AI is the Builder: Your brilliant, fast construction crew. Its job is to execute the how based on your clear instructions.

Remember: Your most valuable skill is clear communication, not writing perfect code.

2. The 5-Step Iterative Workflow

The safest and most effective way to build. Never ask for the whole app at once.

1. Define the Goal (The "Vibe"): State your objective in one clear sentence.
2. Break it Down (The Blueprint): List the smallest, most essential visual components (MVP).
3. Prompt Iteratively (The Build): Ask the AI to build one tiny piece at a time.
4. Assemble & Test (The Inspection): Put the code into a test environment (like CodePen) and see if it works as expected.
5. Refine with Feedback (The Revision): Continue the conversation with your AI, asking for changes or the next piece.

3. The Architect's Prompt Framework

The single most important skill for getting high-quality results from your AI partner.

Formula: [Persona] + [Task] + [Context & Constraints] + [Output Format]

• Persona: "Act as an expert web developer specializing in accessible UI."
• Task: "Write the HTML for a user signup form."
• Context & Constraints: "This is for a gardening app. It must include fields for email and username. Do not use any JavaScript yet."
• Output Format: "Provide the complete HTML in a single, formatted code block with comments."

4. The AI Debugging Workflow

When things go wrong, follow this process.

1. Reproduce the Bug: What specific action causes the error?
2. Check the Console: Open Browser Dev Tools (Cmd/Ctrl + Option/Shift + J) and look for red error messages.
3. Copy the Evidence: Copy the exact error message.
4. Talk to Your AI: Use the debugging prompt framework below.

The Perfect Debugging Prompt

Formula: [Context] + [Problem] + [Error Message] + [Code] + [Question]

Remember: Always ask the AI to explain the fix, not just provide it. This turns every bug into a learning opportunity.

5. The House Analogy: Core Tech Concepts

• HTML (The Skeleton): Provides the fundamental structure and content.
• CSS (The Interior Design): Controls the visual presentation, look, and feel.
• JavaScript (The Plumbing & Electricity): Adds interactivity and functionality, making the app do things.