Rapid Prototyping with Vibe Coding

Embrace the philosophy of "vibe coding" for rapid UI exploration. This skill covers the art of fast, disposable prototyping - knowing when to iterate quickly versus when to refine carefully, and how to build ephemeral apps that validate ideas before committing to production code.

---

When to Use This Skill

• Exploring UI concepts before committing to implementation
• Validating design hypotheses with working prototypes
• Building quick demos for stakeholder feedback
• Rapid iteration during discovery phase
• Creating throwaway experiments to test ideas
• When speed of learning matters more than code quality
• Early-stage product development

---

The Vibe Coding Philosophy

What is Vibe Coding?

Vibe coding is a development approach popularized by Andrej Karpathy where:

"You fully give in to the vibes, embrace exponentials, and forget that the code even exists."

The Core Insight: With AI assistants, the cost of generating code approaches zero. This changes the economics of prototyping - throwaway code becomes genuinely throwaway.

The Two Modes

+------------------+                    +------------------+
|   VIBE MODE      |                    |  CRAFT MODE      |
+------------------+                    +------------------+
| Speed > Quality  |                    | Quality > Speed  |
| Explore > Refine |                    | Refine > Explore |
| Throwaway code   |                    | Lasting code     |
| Learn fast       |                    | Build right      |
| Fail cheap       |                    | Succeed reliably |
+------------------+                    +------------------+
        |                                        |
        |  ← Know when to switch →               |
        |                                        |
        +--------→  Production  ←----------------+

When to Vibe

Situation	Vibe?	Why
Testing a layout idea	Yes	Cheap to try, easy to discard
Exploring color schemes	Yes	Visual, needs real rendering
Validating user flow	Yes	Interaction feedback is essential
Building a demo	Yes	Speed matters, polish doesn't
Core business logic	No	Errors are costly, needs testing
Database schema	No	Migration pain is real
Authentication	No	Security requires precision
Production component	No	Maintenance requires craft

---

Ephemeral App Patterns

Pattern 1: The 10-Minute Prototype

Build a complete throwaway app in under 10 minutes:

## 10-Minute Prototype Protocol

### Phase 1: Describe (2 min)
Write a single paragraph describing what you want to see:

"I want a dashboard with a sidebar navigation, a main content area showing
3 cards with metrics, and a header with user avatar. Dark theme. Use
placeholder data. The cards should have hover effects."

### Phase 2: Generate (3 min)
Send to Claude with:
- "Create a complete, runnable React app"
- "Use Tailwind for styling"
- "Inline all components in one file"
- "Use mock data, no API calls"

### Phase 3: Run (2 min)
- npx create-react-app temp-prototype
- Replace App.js with generated code
- npm start

### Phase 4: Evaluate (3 min)
- Does this feel right?
- What's missing?
- What's wrong?
- Is this direction worth pursuing?

### Decision Point
- Worth continuing? → Iterate (another 10-min cycle)
- Not worth it? → Delete and try different approach
- Ready for real? → Extract patterns, start craft mode

Pattern 2: The Storyboard Prototype

Generate multiple screens to visualize a flow:

class StoryboardPrototype:
    """
    Generate a sequence of screens to visualize user flow.
    """

    async def generate_flow(self, flow_description: str) -> list[str]:
        """
        Create multiple screen mockups from a flow description.
        """
        prompt = f"""
        Create a storyboard of React components for this user flow:

        {flow_description}

        For each screen:
        1. Create a complete, self-contained component
        2. Use Tailwind CSS
        3. Include realistic mock data
        4. Add navigation hints (arrows, "Next: X")

        Output format:
        - Screen 1: [Component code]
        - Screen 2: [Component code]
        - etc.

        Focus on VISUAL communication, not functionality.
        This is for rapid validation - code quality doesn't matter.
        """

        screens = await self.generate(prompt)

        # Save each screen for quick viewing
        for i, screen in enumerate(screens):
            self.save_screen(f"screen-{i}.jsx", screen)

        return screens

Pattern 3: The Variant Explosion

Generate many variants quickly to explore design space:

class VariantExplosion:
    """
    Generate many design variants rapidly.
    """

    async def explode_variants(
        self,
        base_component: str,
        dimensions: list[str]
    ) -> dict[str, str]:
        """
        Generate variants across multiple dimensions.

        Example dimensions:
        - "minimal vs dense"
        - "light vs dark"
        - "rounded vs sharp"
        - "playful vs serious"
        """
        variants = {}

        for dimension in dimensions:
            left, right = dimension.split(" vs ")

            # Generate both ends of the spectrum
            left_variant = await self.generate_variant(base_component, left)
            right_variant = await self.generate_variant(base_component, right)

            variants[f"{left}"] = left_variant
            variants[f"{right}"] = right_variant

        return variants

    async def generate_variant(self, base: str, modifier: str) -> str:
        prompt = f"""
        Take this component and make it feel "{modifier}":

        {base}

        Adjust:
        - Colors
        - Spacing
        - Typography
        - Borders/shadows
        - Any other visual properties

        Keep the same structure, change the vibe.
        """
        return await self.generate(prompt)

---

Iteration Patterns

When to Iterate (Stay in Vibe Mode)

+-------------------+
| Current Prototype |
+-------------------+
         |
         v
    Is it close?
    /          \
   No           Yes
   |             |
   v             v
Pivot?      Refine it
   |             |
  Yes            |
   |             v
   v        +-------------------+
Try new     |   Minor tweaks    |
direction   | (still vibe mode) |
            +-------------------+

Iterate when:

• You're not sure what you want yet
• Stakeholders need to "see it" to give feedback
• You're testing a hypothesis
• The cost of being wrong is low

Stop iterating when:

• You've found the right direction
• Further iteration isn't teaching you anything
• You're adding features, not exploring

When to Refine (Switch to Craft Mode)

+-------------------+
| Validated Concept |
+-------------------+
         |
         v
   Worth building?
    /          \
   No           Yes
   |             |
   v             v
Archive     Extract patterns
for later   from prototype
                |
                v
         +-------------------+
         |   Build properly  |
         | (craft mode)      |
         +-------------------+

Switch to craft when:

• The concept is validated
• You're ready to commit
• Others will maintain this code
• It touches production data
• Security/reliability matters

---

The Throwaway Mindset

Core Principle: Code Has Zero Cost

With AI-assisted development:

Old mindset: "I spent 2 hours on this, I should keep it"
New mindset: "I can regenerate this in 2 minutes"

Old mindset: "Let me refactor this to work better"
New mindset: "Let me describe what I want and get new code"

Old mindset: "How do I fix this bug?"
New mindset: "This approach isn't working, try another"

The Delete Button Test

Before refining code, ask:

"If I deleted all this code and re-described what I want, would I get something better?"

If yes → Delete and regenerate If no → You've found something worth keeping

Prototype Hygiene

Keep prototypes actually throwaway:

# Structure for vibe coding projects
~/prototypes/
  ├── 2024-01-15-dashboard-concept/    # Date-prefixed
  │   ├── attempt-1/
  │   ├── attempt-2/
  │   └── attempt-3-keeper/            # Mark what worked
  ├── 2024-01-16-onboarding-flow/
  │   └── discarded/                   # Didn't work out
  └── .gitignore                       # Don't commit prototypes

# Auto-cleanup script
find ~/prototypes -mtime +30 -type d -exec rm -rf {} \;

---

Fast Feedback Loops

The OODA Loop for UI Prototyping

Observe → Orient → Decide → Act → (repeat)
   |         |         |        |
   v         v         v        v
See the   Evaluate   Choose   Generate
result    against    next     new code
          intent     step

Optimizing each phase:

1. Observe (see the result)

   • Use hot reload for instant feedback
   • Browser open next to editor
   • Screenshot comparisons for subtle changes

2. Orient (evaluate against intent)

   • Clear success criteria before starting
   • "I'll know it's right when..."
   • Trust your gut - it's faster than analysis

3. Decide (choose next step)

   • Tweak (small change to current)
   • Pivot (try different approach)
   • Accept (good enough, move on)

4. Act (generate new code)

   • One clear instruction per iteration
   • Don't bundle multiple changes
   • Let AI do the typing

Speed Optimization Techniques

class RapidIterator:
    """
    Maximize iteration speed for vibe coding.
    """

    def __init__(self):
        self.preview_url = "http://localhost:3000"
        self.hot_reload = True

    async def fast_iterate(self, component: str, feedback: str) -> str:
        """
        Single iteration cycle, optimized for speed.
        """
        # Generate refined code
        new_code = await self.refine(component, feedback)

        # Write directly (hot reload handles the rest)
        self.write_component(new_code)

        # Return immediately - don't wait for confirmation
        return new_code

    async def refine(self, current: str, feedback: str) -> str:
        """
        Fast refinement prompt.
        """
        prompt = f"""
        Current component:
        ```jsx
        {current}
        ```

        Change requested: {feedback}

        Return only the updated component. No explanation.
        """
        return await self.generate(prompt, max_tokens=2000)

---

Prompt Patterns for Vibe Coding

The "Just Make It" Prompt

Create a [thing] that [does what].

Keep it simple. One file. Tailwind CSS. React.
Don't explain, just code.
Use realistic fake data.

The "More Like This" Prompt

Here's what I have:
[paste current code]

Make it more [adjective].

Examples of what I mean by [adjective]:
- [example 1]
- [example 2]

Just output the new code.

The "Try Something Different" Prompt

I've tried this approach:
[paste current]

It's not working because: [issue]

Give me a completely different approach to the same goal.
Don't iterate on the above - start fresh.

The "Explode Options" Prompt

I need a [component].

Give me 5 completely different approaches:
1. Minimal
2. Feature-rich
3. Unconventional
4. Classic/standard
5. Wild/experimental

Each as a complete component. Brief, no explanation.

---

When Vibe Coding Fails

Signs It's Time to Stop Vibing

1. Diminishing returns: Each iteration teaches less
2. Complexity creep: "Just add one more thing..."
3. Dependency tangles: Components need to coordinate
4. State management hell: Too many moving parts
5. Performance issues: Browser struggling

The Transition Protocol

When you're ready to build for real:

## Prototype to Production Checklist

### Extract from Prototype
- [ ] Visual patterns that worked
- [ ] Component structure (not the code)
- [ ] Spacing/sizing decisions
- [ ] Color palette used
- [ ] Typography choices

### Leave Behind
- [ ] All the actual code (it's prototype quality)
- [ ] Inline styles
- [ ] Mock data
- [ ] Missing error states
- [ ] Accessibility gaps

### Build Fresh
- [ ] Start with proper architecture
- [ ] Add proper typing
- [ ] Include error handling
- [ ] Add accessibility
- [ ] Write tests
- [ ] Document decisions

---

Tools for Vibe Coding

Recommended Stack

# Fastest path to visible output
npx create-react-app prototype --template typescript
cd prototype
npm start

# Or even faster with Vite
npm create vite@latest prototype -- --template react-ts
cd prototype
npm install
npm run dev

Useful Aliases

# In .bashrc or .zshrc

# Quick prototype starter
alias proto="cd ~/prototypes && mkdir $(date +%Y-%m-%d)-idea && cd $_ && npm create vite@latest . -- --template react-ts && npm i && code . && npm run dev"

# Clean old prototypes
alias proto-clean="find ~/prototypes -mtime +14 -type d -exec rm -rf {} \;"

# Archive a good prototype
alias proto-archive="git init && git add -A && git commit -m 'prototype snapshot'"

File Templates

// ~/templates/quick-component.jsx
// Copy this as starting point

import React from 'react';

export default function Component() {
  // Paste content here
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      {/* Your prototype here */}
    </div>
  );
}

---

Anti-Patterns

1. Polishing Prototypes

Problem: Spending time making throwaway code "nice" Solution: If it's good enough to see, ship the iteration

2. Prototype Attachment

Problem: Reluctance to delete code you've invested in Solution: Remember: regeneration is free, attachment is costly

3. Premature Production

Problem: Shipping prototype code to production Solution: Always rebuild from validated concept, never ship vibe code

4. Infinite Iteration

Problem: Endlessly tweaking without progress Solution: Set iteration limits (3-5 rounds), then decide

5. Solving the Wrong Problem

Problem: Perfect solution to wrong problem Solution: Validate the concept before perfecting the implementation

---

Quick Reference

Question	Answer
How long should a prototype take?	10-30 minutes max
When to delete and restart?	When refinement isn't working
How many iterations?	3-5 before deciding
When to switch to craft?	When concept is validated
What to keep from prototype?	Decisions and patterns, not code
What's "good enough"?	When you can see if it works

---

Integration Points

Vibe coding works with:

• agent-orchestration/ui-agent-patterns - Fast agent for generation
• llm-application-dev/prompt-engineering-ui - Prompts for quick iteration
• mcp-integrations/browser-devtools-mcp - Live preview feedback

---

"The prototype exists to be destroyed. Its only purpose is to teach you what to build next."