cris-achiardi/claude-skills/crazy-8s

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

1. Timer starts - Claude creates React timer artifact (8:00 countdown)
2. You rapid-fire ideas - Short phrases describing solution directions

• "Card-based feed layout"
• "Timeline view with filters"
• "Conversational interface"
• etc.

1. Claude captures - Confirms each idea (✅ or numbered acknowledgment)
2. Timer ends - Either automatic or you say "done"
3. Claude generates - HTML/CSS prototypes for all 8 ideas in grid layout
4. 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

1. Timer starts - Claude creates React timer artifact (8:00 countdown)
2. You sketch on paper - Fold paper into 8 sections, sketch one idea per section
3. Timer ends - Put pen down
4. You photograph - Take photo(s) of your sketches
5. You upload - Share images with Claude
6. Claude analyzes - Interprets each sketch
7. Claude generates - Descriptions + optional HTML/CSS prototypes
8. 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