crazy-8s - SKILL.md Agent Skill

name: crazy-8s version: 1.0.0 description: Solo rapid ideation method based on Google Design Sprint Crazy 8's exercise. Generates 8 distinct solution ideas in 8 minutes through rapid-fire ideation or sketch documentation. Use when working alone and need to explore multiple solution directions quickly, push beyond first obvious ideas, or generate variety before converging. Includes creativity warm-up questions, built-in timer, optional creative constraints, and generates visual HTML/CSS prototypes plus comparison table. NOT for team sessions (traditional Crazy 8's works better for teams).

Crazy 8's (Solo Version)

Rapid ideation method that pushes you to generate 8 distinct solution ideas in 8 minutes. Based on Google Design Sprint's Crazy 8's exercise, adapted for solo work with AI assistance.

What This Skill Does

Facilitates solo rapid ideation sessions with 8-minute timer
Offers optional creativity warm-up with provocative questions
Supports two modes: rapid-fire ideation or sketch documentation
Generates HTML/CSS prototypes for quick visualization
Creates comparison table for decision-making
Pushes beyond first obvious ideas through speed and constraints

What This Skill Does NOT Do

Facilitate team Crazy 8's (traditional physical method works better for teams)
Make decisions about which ideas are best (you decide)
Create high-fidelity designs (these are rough prototypes)
Guarantee all 8 ideas are good (quantity over quality is the goal)

Core Principle

Speed kills the inner critic. You don't have time to overthink. The goal is divergent thinking - weird, impractical, and bold ideas often spark the truly innovative ones. Not all 8 ideas will be winners, and that's perfect.

Workflow Decision Tree

Start: "I want to do a Crazy 8's session"

Step 1: Claude asks about the design challenge → You describe the problem and context

Step 2: Claude asks: "Want a quick creativity warm-up? (adds ~2 minutes)" → Yes: Claude asks 2-3 provocative questions to spark ideas → No: Skip directly to mode selection

Step 3: Claude asks: "Which mode?" → Rapid Ideation: You rapid-fire ideas, Claude generates prototypes → Sketch Documentation: You sketch on paper, then share photos

Step 4: Claude asks: "What are you designing?" → Mobile app, web app, dashboard, feature, etc.

Step 5: Claude asks: "Want creative constraints for more variety?" → Optional constraints based on Google methodology

Step 6: Claude creates timer artifact and session begins

Creativity Warm-Up (Optional)

If you choose the warm-up, Claude asks 2-3 fast questions (30 seconds each) to activate divergent thinking. These are provocative, brain-stretching questions selected from references/icebreaker-questions.md based on your problem.

Example Warm-Up Flow

Claude: "Let me spark some ideas with quick questions - answer instinctively!"

Question examples:

"What if this was designed for your most impatient user?"
"What if this felt more like a game than a [product type]?"
"What would the most delightful version look like?"

You answer quickly (no overthinking - 20-30 seconds each)

Claude captures responses and says: "Perfect! Keep that energy. Ready for the timer?"

Benefits

Activates divergent thinking before time pressure
Seeds unexpected directions
Reduces blank-page anxiety
Takes only 2 minutes but increases idea variety

Note: If you skip warm-up, jump straight to mode selection. The warm-up is helpful but optional.

Mode 1: Rapid Ideation

Best for speed, remote work, and when you think better by talking than sketching.

How It Works

Timer starts - Claude creates React timer artifact (8:00 countdown)
You rapid-fire ideas - Short phrases describing solution directions
- "Card-based feed layout"
- "Timeline view with filters"
- "Conversational interface"
- etc.
Claude captures - Confirms each idea (✅ or numbered acknowledgment)
Timer ends - Either automatic or you say "done"
Claude generates - HTML/CSS prototypes for all 8 ideas in grid layout
Claude creates - Comparison table for review

During the Session

Your role:

Don't stop to explain - just name the idea
Don't judge ideas as you go - save critique for later
Keep moving - if you get 8 before time ends, keep going
Embrace weird ideas - they often spark great ones

What to say:

Short descriptive phrases (3-7 words)
"Split-screen dashboard"
"Gesture-based navigation"
"Voice-first interface"
"Minimalist card design"

What NOT to do:

Don't elaborate during the 8 minutes
Don't ask Claude to develop ideas yet
Don't critique your own ideas
Don't slow down to sketch (that's the other mode)

After Timer Ends

Claude generates:

1. Visual Prototypes

Single HTML artifact with 8-grid layout
Each idea rendered as quick HTML/CSS prototype
Mobile or web viewport based on your context
Rough but concrete enough to evaluate

2. Comparison Table

All 8 ideas listed with descriptions
Key features for each
Patterns and themes observed
Recommendations for next steps

Mode 2: Sketch Documentation

Best when you think spatially, want traditional Crazy 8's feel, or prefer drawing to typing.

How It Works

Timer starts - Claude creates React timer artifact (8:00 countdown)
You sketch on paper - Fold paper into 8 sections, sketch one idea per section
Timer ends - Put pen down
You photograph - Take photo(s) of your sketches
You upload - Share images with Claude
Claude analyzes - Interprets each sketch
Claude generates - Descriptions + optional HTML/CSS prototypes
Claude creates - Comparison table

Sketching Tips

Materials:

One sheet of paper, folded into 8 rectangles
Thick marker or pen (forces simplicity)
Timer visible while you work

Sketching approach:

Rough rectangles and basic shapes
Label key elements
Use arrows for interactions
Don't worry about beauty - communication over art

What makes a good sketch:

Clear enough that someone else could understand it
Shows the key differentiator of this idea
Includes 2-3 UI elements minimum

After Upload

Claude analyzes each sketch and provides:

1. Written Descriptions

What Claude sees in each sketch
Key UI patterns identified
Interaction suggestions based on arrows/annotations
Metaphors or inspirations detected

2. Optional Prototypes

HTML/CSS versions of your sketches
Best-effort interpretation
You can request refinements

3. Comparison Table

Same as Rapid Ideation mode

Creative Constraints (Optional)

Before timer starts, you can add constraints to push for more variety. Based on Google Design Sprint methodology.

Claude asks: "Want creative constraints to increase variety?"

Options:

Interaction Types:

Vary: touch, voice, gesture, AI-assisted, mixed modality
Example: "Make ideas 1-3 touch-based, 4-6 voice-first, 7-8 gesture"

User Contexts:

Vary: desktop, mobile, tablet, AR/VR, wearable
Example: "Explore mobile-first, desktop, and one AR idea"

Emotional Tones:

Vary: calm, data-driven, playful, serious, energetic
Example: "Try playful, professional, and meditative approaches"

Metaphors:

Vary: timeline, gallery, chat, map, game, tool, etc.
Example: "What if it was organized like: a chat, a map, a game?"

When to use constraints:

When your first few ideas feel similar
When you want to force variety
When exploring a new problem space

When to skip:

When you already have diverse ideas in mind
When constraints feel limiting rather than liberating

The Timer Artifact

Claude creates a React component featuring:

┌─────────────────────────┐
│   CRAZY 8'S TIMER       │
│                         │
│  📖 How It Works [+]    │
│                         │
│        08:00            │
│    [progress bar]       │
│                         │
│  Ideas Generated 0/8    │
│  [■ ■ ■ ■ ■ ■ ■ ■]     │
│   ✓ Idea Captured       │
│                         │
│      [START] [RESET]    │
│                         │
│  💡 Dynamic tips here   │
└─────────────────────────┘

Features:

Countdown from 8:00 to 0:00
Collapsible "How It Works" instructions
Start/Pause/Reset controls
Ideas counter with "Idea Captured" button
Visual indication when time ends
Clean, minimal interface with gradient design

Smart Urgency System: Each of the 8 idea blocks represents a 1-minute window and blinks red during the last 30 seconds of its window:

Block 1 blinks: 7:30 → 7:00 (time for first idea!)
Block 2 blinks: 6:30 → 6:00 (second idea!)
Block 3 blinks: 5:30 → 5:00
...and so on through all 8 blocks

This creates a rolling wave of urgency and provides visual pacing feedback. You can tell at a glance if you're ahead or behind the "1 minute per idea" target. Once you capture an idea, its block turns solid purple/blue.

Timer ends when:

Countdown reaches 0:00, OR
You say "done" or "finished"

Time's Up Message: When timer hits 0:00, a large animated alert appears:

"⏰ TIME'S UP!"
"👉 Tell Claude 'done' in the chat"
Explains Claude will generate prototypes and comparison table

Visual Prototypes Output

After ideation, Claude generates one artifact with 8 prototypes in grid:

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;">
  <!-- 8 prototype blocks -->
  <div class="idea-1">
    <h3>1. [Idea Name]</h3>
    <div class="prototype">
      [HTML/CSS mockup]
    </div>
  </div>
  <!-- ... repeat for all 8 -->
</div>

Each prototype includes:

Idea number and name
Visual representation (HTML/CSS)
Mobile or desktop viewport
Basic interactivity where relevant

Quality level:

Quick and rough (not production-ready)
Concrete enough to evaluate and discuss
Shows key differentiators between ideas
Takes 2-3 minutes to generate all 8

Comparison Table Output

After prototypes, Claude generates structured comparison:

# Crazy 8's Results: [Your Challenge]

## The 8 Ideas

### 1. [Idea Name]
**Description:** [What it is]
**Key Features:**
- Feature A
- Feature B
- Feature C
**Interaction Pattern:** [How users interact]
**Visual Approach:** [Layout/style]
**Unique Angle:** [What makes this different]

[Repeat for all 8 ideas]

---

## Quick Comparison Matrix

| # | Idea | Complexity | Novelty | User Value | Feasibility |
|---|------|-----------|---------|-----------|-------------|
| 1 | [Name] | Low/Med/High | Low/Med/High | Low/Med/High | Low/Med/High |
...

---

## Patterns Observed

**Common Themes:**
- [Pattern across multiple ideas]
- [Recurring approach]

**Unique Approaches:**
- [Standout idea 1 and why]
- [Standout idea 2 and why]

**Interesting Tensions:**
- [Competing philosophy A vs B]

---

## Recommended Next Steps

**For Prototyping:**
- [Top 2-3 ideas with rationale]

**For Combining:**
- [Ideas that could be merged]

**For Research:**
- [Ideas that need user validation]

Best Practices

For All Sessions

Before starting:

Have your design challenge clearly defined
Know your target platform (mobile/web/etc)
Remove distractions - focus for 8 minutes

During the 8 minutes:

Speed over quality - first idea to mind
Don't critique as you go
Embrace weird/impractical ideas
If stuck, make something up and keep moving

After timer ends:

Review all ideas before judging any
Look for patterns across ideas
Notice which ideas excite you most
Consider combinations of ideas

For Rapid Ideation Mode

Effective idea phrases:

✅ "Dashboard with real-time activity feed"
✅ "Gesture-controlled navigation"
✅ "Conversational onboarding flow"

Less effective:

❌ "Something with cards" (too vague)
❌ "Like Instagram but different" (need more specificity)
❌ Full sentences explaining rationale (too slow)

Pacing:

Aim for ~1 minute per idea
First 3 come fast, ideas 4-6 require push, ideas 7-8 are often surprisingly good

For Sketch Documentation Mode

Good sketches:

Show layout and key elements
Include labels for clarity
Use arrows to show interactions
One clear concept per rectangle

Common issues:

Too much detail (wastes time)
Too abstract (Claude can't interpret)
Forgetting to label elements
Sketching too small

Common Pitfalls

❌ Stopping to elaborate during 8 minutes ✅ Capture the core idea and keep moving

❌ Judging ideas as "too crazy" and censoring them ✅ Write everything down - evaluate later

❌ Only getting 3-4 ideas and calling it done ✅ The magic happens in ideas 6-8 when you're forced to think differently

❌ Making all 8 ideas variations of the same concept ✅ Use constraints or warm-up questions to push variety

❌ Expecting polished, production-ready outputs ✅ These are rough explorations to spark discussion

What Happens Next

After Crazy 8's, you typically:

Review and discuss - Look at all 8 ideas without judgment first
Vote or prioritize - Which 2-3 ideas are most promising? (use design-critique skill)
Combine ideas - Can you merge the best parts of multiple concepts?
Prototype further - Take top ideas to higher fidelity
User test - Validate assumptions with actual users

Crazy 8's is for divergence. The next steps are about convergence and validation.

Tips for Success

When you're stuck:

Use creative constraints to force different thinking
Do the warm-up questions (even mid-session)
Think about extreme users (5-year-old vs expert)
Ask "what would the opposite look like?"

When all ideas feel the same:

You're probably not going fast enough
Add interaction type constraints
Try a different metaphor for each idea

When you're not feeling creative:

That's exactly when to use this method
The timer forces you past the mental block
Quantity over quality - ideas 7-8 are often best

For best results:

Do this early in the process (before settling on direction)
Do it alone first, then share with team
Do multiple rounds if first round felt too similar
Trust the process - speed is your friend

Ready to Start?

Say: "I want to do a Crazy 8's session"

Claude will guide you through the full process.