rapid-prototyping

What this skill does

# 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:

```markdown
## 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:

```python
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:

```python
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-de