slice icon Context Slice

Trading Card Design Specification

The trading card is the shareable artifact. It needs to be visually striking, information-dense, and screenshot-worthy. Users will share this image—make it worthy of their shame.

Card Layout Structure

The card should evoke collectible trading cards (Pokemon, Magic: The Gathering) but for professional disasters.

┌─────────────────────────────────────┐
│  [CHAOS IMAGERY - top 40%]          │
│  AI-generated visual representing   │
│  their email chaos                  │
├─────────────────────────────────────┤
│  THE INBOX DESPERADO                │
│  ★★★★☆ Roast Score: 78/100         │
├─────────────────────────────────────┤
│  STATS                              │
│  📧 2,341 emails analyzed           │
│  😬 847 follow-ups sent             │
│  👻 86% ignored                     │
│  🌙 156 late-night emails           │
│  📅 89 weekend emails               │
├─────────────────────────────────────┤
│  SIGNATURE MOVE                     │
│  "Just following up..."             │
├─────────────────────────────────────┤
│  [QR CODE]    Hear the full roast   │
│               → [URL]               │
└─────────────────────────────────────┘

Chaos Imagery Prompts

The top image should be AI-generated chaos that represents their email patterns. Build the prompt from their persona and stats.

Base Prompt Structure

[Style] of [Subject] in [Setting], [Emotional tone], [Visual chaos elements], trading card art style, dramatic lighting, highly detailed

Persona-Based Imagery

Persona Image Concept Sample Prompt
The Desperado Figure desperately reaching for floating envelopes that keep drifting away "Digital art of a businessperson standing in a tornado of floating emails and paper, desperately reaching upward, emails slipping through fingers, dramatic blue and orange lighting, trading card art style, highly detailed"
The Ghost Translucent figure surrounded by abandoned conversations "Ethereal translucent office worker fading away while seated at desk, surrounded by dimming speech bubbles and floating message icons, melancholic atmosphere, midnight blue and silver tones, trading card art style"
The Hustler Figure literally on fire while typing, coffee cups everywhere "Intense businessperson typing furiously with flames emerging from laptop, surrounded by towering stacks of coffee cups and clocks showing all different times, chaotic energy, red and gold dramatic lighting, trading card art style"
The Clingy Colleague Two figures connected by an overwhelming web of email threads "Two office workers connected by hundreds of glowing email threads, one figure much larger and overwhelming, digital strings forming a web, corporate surrealism, purple and pink tones, trading card art style"
The Meeting Menace Conference room that's become a labyrinth "Surreal infinite conference room with tables stretching to horizon, figure lost in center, calendar icons floating like debris, oppressive fluorescent lighting, muted corporate colors with pops of warning orange, trading card art style"
The Night Owl Figure illuminated only by laptop in darkness, owl features "Person with subtle owl features working at laptop in complete darkness, screen glow as only light source, digital emails floating like luminescent moths, midnight blue and pale screen-glow lighting, trading card art style"
The Normal One Suspiciously perfect desk with something unsettling hidden "Pristine organized desk in spotlight, but shadows around edges contain chaos - crumpled papers, hidden clocks, subtle cracks in perfection, unsettling calm before storm energy, clean whites with dark shadows, trading card art style"

Stat-Specific Visual Elements

Add these to the base prompt based on extreme stats:

Stat Extreme Add to Prompt
>500 follow-ups "paper airplanes crashing into walls"
>50 late-night emails "multiple moons/clocks showing midnight"
>30% meeting requests "infinite conference tables"
<5 min response time "figure merged with phone/laptop"
>50% thread abandonment "graveyard of speech bubbles"
>40% to one person "single giant face in background"
Very high roast score (>80) "flames, destruction, chaos"
Very low roast score (<30) "eerily calm, too perfect, something's wrong"

Prompt Construction Example

For someone who is:

  • The Desperado persona
  • 847 follow-ups with 86% ignored
  • 156 late-night emails
  • 78/100 roast score

Full prompt:

"Digital art of a businessperson standing in a tornado of floating emails and paper, desperately reaching upward, emails slipping through fingers, paper airplanes crashing into walls around them, multiple moons visible through office window, dramatic blue and orange lighting with hints of flame, trading card art style, highly detailed, cinematic composition"

Text Overlay Specifications

The card image should be generated WITHOUT text. Text will be overlaid programmatically in the HTML page or can be added with CSS.

Key text elements (added in HTML, not in image):

  • Persona title
  • Roast score with stars
  • Key stats (4-6 numbers)
  • Signature move quote
  • QR code + URL

Color Palette by Persona

Persona Primary Accent Mood
Desperado Deep blue Burning orange Frantic energy
Ghost Silver gray Pale blue Fading, hollow
Hustler Crimson red Gold Intense, burning
Clingy Colleague Purple Hot pink Overwhelming attachment
Meeting Menace Corporate gray Warning yellow Institutional dread
Night Owl Midnight blue Pale white Isolated, nocturnal
Normal One Clean white Hidden shadow Unsettling calm

Star Rating System

Convert roast score to stars:

Score Stars Visual
0-20 ★☆☆☆☆ Barely roastable
21-40 ★★☆☆☆ Some material
41-60 ★★★☆☆ Solid roast
61-80 ★★★★☆ Premium cringe
81-100 ★★★★★ Legendary disaster

Signature Move Selection

Pick the most damning stat as their "signature move":

If highest stat is... Signature Move
Follow-ups ignored "Just following up..."
Late-night emails "Sent at 2:47 AM"
Weekend emails "Quick Saturday question..."
Meeting requests "Let's sync!"
Fast response "Typing..."
Thread abandonment [Read 3 days ago]
One-person obsession "Hey [Name] again!"

HTML Page Structure

The deployed webpage should embed:

  1. The trading card image (hero)
  2. Audio player for the roast narration
  3. Full roast text (expandable)
  4. Share buttons / QR code
  5. "Roast your inbox" CTA (link to skill)
<!-- Simplified structure -->
<div class="card-hero">
  <img src="trading-card.png" alt="Email Roast Card">
  <div class="overlay">
    <h1 class="persona">THE INBOX DESPERADO</h1>
    <div class="score">★★★★☆ 78/100</div>
  </div>
</div>

<div class="audio-section">
  <audio controls src="roast.mp3"></audio>
  <p class="voice-label">Roasted by Gordon Ramsay</p>
</div>

<div class="stats-grid">
  <!-- Key stats here -->
</div>

<details>
  <summary>Read the full roast</summary>
  <div class="roast-text">...</div>
</details>

<div class="share-section">
  <img src="qr-code.png" class="qr">
  <a href="..." class="share-btn">Share your shame</a>
</div>

Image Generation Notes

When calling the image generation:

  1. Build prompt from persona + extreme stats
  2. Request square aspect ratio (1:1) for card format
  3. Save to session directory
  4. The HTML composition will overlay text elements