Storytelling Web

Storytelling Web

Create stunning, animation-rich exploratory visual web pages from text content — choose between slide-based presentations or scroll-driven narratives.

Core Philosophy

1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
2. Show, Don't Tell — Generate visual previews, not abstract choices. People don't know what they want until they see it.
3. Distinctive Design — Avoid generic "AI slop" aesthetics. Every experience should feel custom-crafted.
4. Production Quality — Code should be well-commented, accessible, and performant.

Phase 0: Content Discovery

First, understand the user's needs and gather content:

Step 0.1: User Requirements

Understand what the user wants to achieve:

Question 1: Purpose

• Header: "Purpose"
• Question: "What is this for?"
• Options:
  • "Pitch/Investment" — Selling an idea, product, or company
  • "Teaching/Education" — Explaining concepts, tutorials, guides
  • "Story/Narrative" — Sharing experiences, journalism, creative writing
  • "Update/Report" — Status updates, project reviews, documentation

Question 2: Length

• Header: "Length"
• Question: "How much content do you have?"
• Options:
  • "Short" — Quick read, 3-5 slides or sections
  • "Medium" — Standard length, 6-15 slides or sections
  • "Long" — Comprehensive, 15+ slides or sections

Step 0.2: Content Gathering

Get the actual content from the user:

Question 1: Content Status

• Header: "Content"
• Question: "Do you have the content ready?"
• Options:
  • "I have all content ready" — Just need to design it
  • "I have rough notes" — Need help organizing
  • "I have a topic only" — Need help creating from scratch

If user has content, ask them to share it (text, bullet points, images, etc.).

Phase 1: Choose Mode

Based on the content understanding, provide helpful context about both modes, then let the user choose.

Step 1.1: Mode Analysis (Informational)

Analyze the user's content from Phase 0 and share insights:

For your content:

• Slides mode works well if: [explain why slides might fit based on their purpose/length]

  • Structured, sequential presentation
  • Speaker-led experience with navigation control
  • Content that benefits from clear boundaries between sections

• Scrolling mode works well if: [explain why scrolling might fit based on their purpose/length]

  • Exploratory, narrative-driven experience
  • Reader-controlled pacing
  • Content that flows naturally as a continuous story

Note: These are just considerations — choose whichever mode aligns with your vision. You may have a clear preference already.

Step 1.2: Mode Selection Question

Then ask:

• Header: "Experience Type"
• Question: "Which mode would you like to use?"
• Options:
  • "Slides" — Presentation with slide navigation, best for structured content.
  • "Scrolling Story" — Continuous scroll narrative, best for exploratory content.

Phase 2: Style Discovery

Step 2.1: Mood Selection

Question 1: Feeling

• Header: "Vibe"
• Question: "What feeling should the audience have?"
• Options:
  • "Impressed/Confident" — Professional, trustworthy, polished
  • "Excited/Energized" — Innovative, bold, dynamic
  • "Calm/Focused" — Clear, thoughtful, easy to follow
  • "Inspired/Moved" — Emotional, memorable, atmospheric
• multiSelect: true (can choose up to 2)

Step 2.2: Generate Style Previews

Based on their mood selection and chosen mode (Slides or Scrolling), read the corresponding reference document (references/slides-mode.md or references/scrolling-mode.md) to understand the HTML architecture and design patterns for that mode.

Also read references/style-presets.md for detailed style presets including specific font pairings, color palettes, animation approaches, and signature elements to ensure distinctive, non-generic designs.

Then generate 3 distinct style previews as mini HTML files. Each file should contain only a small portion of content, serving as a draft for users to visually select from, showing:

• Typography (font choices, heading/body hierarchy)
• Color palette (background, accent, text colors)
• Animation style (how elements enter)
• Overall aesthetic feel

Preview Styles to Consider (pick 3 based on mood):

IMPORTANT: Never use these generic patterns:

• Purple gradients on white backgrounds
• Inter, Roboto, or system fonts
• Standard blue primary colors
• Predictable layouts

Instead, use distinctive choices:

• Unique font pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.)
• Cohesive color themes with personality
• Atmospheric backgrounds (gradients, subtle patterns, depth)
• Signature animation moments

Step 2.3: Present Previews

Create the previews and present them to the user.

Each preview should be:

• Self-contained (inline CSS/JS)
• A single slide (Slides) or hero section (Scrolling) showing the aesthetic
• Animated to demonstrate motion style
• ~50-300 lines

Present to user:

Copy code
I've created 3 style previews for you to compare:

**Style A: [Name]** — [1 sentence description]
**Style B: [Name]** — [1 sentence description]
**Style C: [Name]** — [1 sentence description]

Take a look and tell me:
1. Which style resonates most?
2. What do you like about it?
3. Anything you'd change?

Then use AskUserQuestion:

Question: Pick Your Style

• Header: "Style"
• Question: "Which style preview do you prefer?"
• Options:
  • "Style A: [Name]" — [Brief description]
  • "Style B: [Name]" — [Brief description]
  • "Style C: [Name]" — [Brief description]
  • "Mix elements" — Combine aspects from different styles

If "Mix elements", ask for specifics.

Phase 3: Generate Output

Output Locations

Style Preview Outputs (Intermediate)

• Generated in Phase 2 for user to select from
• Saved to .agent-design/storytelling-web/ directory:

Copy code
.agent-design/storytelling-web/
├── style-a.html    # First style option
├── style-b.html    # Second style option
├── style-c.html    # Third style option
└── assets/         # Any shared assets

Final Output

• Location: User's working directory root (where the task was initiated)
• Filename: Based on the content title, e.g., xxx.html (use kebab-case, e.g., my-presentation.html, my-story.html)
• Requirements:
  • Single self-contained HTML file with inline CSS/JS
  • Zero external dependencies (except Google Fonts CDN)
  • All content included based on user's provided material

For Slides Mode

Read references/slides-mode.md for:

• Complete HTML architecture
• Slide type patterns (title, content, split, image, quote, closing)
• Navigation and keyboard controls
• Animation patterns for slide transitions

For Scrolling Mode

Read references/scrolling-mode.md for:

• Complete HTML architecture
• Section type patterns (hero, text, image-text, full-bleed, quote)
• Scroll-triggered animations
• Progress bar implementation

Design Principles (Both Modes)

1. Typography Hierarchy — Clear distinction between headings, body, captions
2. Color Consistency — Use CSS custom properties for easy theming
3. Accessibility — Sufficient contrast, semantic HTML, keyboard navigation
4. Mobile Consideration — Test responsiveness
5. Performance — Optimize images, efficient animations

Tips for Great Experiences

Slides Mode

• One idea per slide
• Large, readable text
• Visual variety between slides
• Strong opening and closing

Scrolling Mode

• Start with a hook
• Control pacing (some sections quick, others slow)
• Use images intentionally
• Build to key moments
• End memorably