Before the First Deck: How Lossless Presentations Get Built

Why Care?

The Lossless Group has built browser decks before, for fundraises, for workshops, and for client pitches. Each time we relearned the same lessons, and each time they lived only in that project.

This site is where those lessons stop being scattered. Before generating a single slide here, we wrote down the approach that actually worked. So the first deck, and every one after it, starts from a pattern instead of a blank page.

And there's now something to build: the outline for the first talk.

What's New?

• The first presentation outline: Transformative Highlights from an AI + Agents + Human Collaboration, subtitled Notes from a 2 Year Rabbit Hole. It covers:

  • the two-year journey, by the numbers

  • how fast the ground moved: Cursor's launch-to-$60B arc, "vibe coding" getting its name, and AI writing over half of what's committed to GitHub

  • Augment-It's four versions

  • what coding agents can and can't be relied on for

  • recommendations for harness engineering, and for culture

• The PageDeck pattern. A deck is one Astro page, each slide is its own component, and a small vanilla-JS player adds snapping, keyboard navigation, and a slide counter. No Reveal.js.

• A generation discipline. Generate the whole deck in one go. If it's close, iterate. If it's meh, generate a fresh version without letting the agent see the first.

• A worked example of deriving color modes for a brand that only ever had one.

The Story

The pattern already existed; it just wasn't ours to point at. calmstorm-decks shipped three full seventeen-slide versions of a fundraise teaser in one build week. fullstack-vc wrote that approach up as a spec. dididecks-ai turned it into a shell for several client decks.

We went looking through every context-v/ directory in the monorepo for the parts that proved out. The most useful finding was a lesson from calmstorm, and it cuts against intuition:

Don't peek at prior variants when inventing a new one. When asking Claude for variant N, instruct it to look only at the data files, narratives, and theme.css, not at variants 1..N−1. Otherwise the output drifts toward the existing variants instead of finding new territory.

That, plus the experience behind it, became the generation discipline. Designing slides one at a time with a coding agent turns into endless layout preference-honing. Asking for the whole deck lets the agent hold one voice across every slide, and a bad version costs one regeneration instead of a day of nudging.

These are "inspired by, pulling what works" documents, not ports. Reading calmstorm's player code for what to keep also surfaced what to fix. The sharpest find: its key handler ignores modifier keys, so Cmd+C toggles the deck chrome and blocks the copy. That's now on the new player's improvement list, along with:

• chrome colors hard-coded for light mode

• no reduced-motion support

• event listeners that may pile up across page transitions

How It Works

src/pages/presentations/{deck}/index.astro      ← one page per deck version
  └─ <PageDeck>                                 ← the player: snap, keys, counter
       ├─ <S01-Cover />                          ← one component per slide
       ├─ <S02-… />
       └─ …
src/layouts/sections/{deck}/v1/                  ← each version in its own folder
src/lib/decks.ts                                 ← registry of decks and versions

That shape is proposed, not built. Styling follows the Lossless brand, with the deck's type scale and spacing kept in one set of tokens so tuning a generated deck happens in one place.

Inline Tailwind is the encouraged way to improvise a slide. What makes that safe is a refactoring habit afterward: fold a repeating pattern into the design system, let a one-off flourish sit, or replace a reinvention with the system's version.

What's Next

• Light and vibrant modes for Lossless.

  • Light: a newspaper or vintage annual investor report, with no brand gradients.

  • Vibrant: leans into the gradients, with glassmorphic glows and radiant shadows.

• The PageDeck player, starting from calmstorm's working version plus the fixes above.

• The first generated deck from the outline, followed by the gallery card that links to it.

Related

• [[PageDeck-Pattern-for-Slide-Focused-Astro-Knots-Sites]]

• [[Generate-Whole-Decks-and-Regenerate-Fresh]]

• [[Three-Modes-Derivation]]

• [[Build-a-Fundraise-Deck-Workspace]]

• [[Build-Section-Composed-Decks-with-Live-Theme-Mode]]