Slides

A slide in Pitch Smith is a self-contained HTML file generated by AI from your plan and theme. Each slide is a standalone index.html with embedded CSS, rendered at a fixed 1920x1080 pixel canvas. Rather than using a proprietary format, Pitch Smith produces standard web content -- which means your slides can be viewed in any browser, edited with any text editor, and styled with familiar CSS.

What is a slide?

Every Pitch Smith slide is a single HTML file that contains both the content structure (headings, text, lists, images) and the visual styling (layout, colors, typography, spacing). The HTML is generated by the AI build process based on three inputs: your slide plan (content and design direction), your theme (brand tokens), and a template (layout pattern).

The slide canvas is always 1920x1080 pixels -- standard HD presentation dimensions. Within that canvas, text elements are marked as contenteditable, which enables live text editing directly in the viewer. This means you can fine-tune wording after a slide is built without running the edit command for every small change.

Slides are designed to be disposable and regenerable. Because the plan captures your intent and the theme captures your brand, you can rebuild any slide at any time. If you change your theme colors and rebuild, the slide updates to match. If you edit your plan's talking points and rebuild, the content updates. The slide file itself is an output artifact -- the plan and theme are the source of truth.

The build process

Building a slide is the core creative act in Pitch Smith. The build process takes your plan, theme, and a template, and produces a finished HTML slide. Here is how the pipeline works:

1. Read the plan -- The build command reads the slide plan entry (from either a full deck plan or a single slide plan). This gives the AI the slide's description, key points, design plan, storyline role, and template selection.

2. Load the theme -- Your theme.json is loaded, providing all brand tokens: colors, typography, shapes, component styles, gradients, workflow rules, and personality traits. These become CSS variables that the generated slide will reference.

3. Select the template -- The suggested_template field in the plan points to a template from your catalog. The template provides an HTML starting structure that the AI uses as a layout pattern. If no matching template is found, the AI generates a custom layout from scratch.

4. AI generation -- The plan content, theme tokens, and template structure are combined into a prompt. The AI generates a complete HTML file with inline CSS. The CSS references theme variables (e.g., var(--color-primary), var(--font-heading)), ensuring brand consistency without hardcoded values.

5. Write the output -- The generated HTML is saved as index.html in the slide's output directory. The build process also updates the deck manifest with the slide's metadata.

The build process runs one slide at a time (via /pitchsmith:build-one) or across all pending slides in a deck plan (via /pitchsmith:build-all). Each slide is independent -- building slide 5 does not require slides 1 through 4 to be built first.

Output directory structure

When you build slides, Pitch Smith creates a structured output directory. Each deck gets its own folder, and each slide gets a subfolder containing its HTML file. Here is the typical structure:

output/
  my-product-launch/
    plan.yaml
    manifest.json
    slides/
      slide-01/
        index.html
      slide-02/
        index.html
      slide-03/
        index.html
      ...

Path	Purpose
output/<deck-name>/	Top-level deck folder, named after your deck
plan.yaml	Copy of the deck plan used to build the slides
manifest.json	Metadata file that tracks slide titles, order, and build status
slides/	Contains all slide subdirectories
slides/slide-NN/	Individual slide folder (zero-padded numbering)
slides/slide-NN/index.html	The actual slide file -- self-contained HTML with embedded CSS

For single slides (built with /pitchsmith:plan-one and /pitchsmith:build-one in single mode), the output goes to output/singles/ instead of a named deck folder. The structure inside is the same.

This flat, predictable structure makes it easy to navigate your output. Each slide is isolated in its own folder, which keeps assets organized and makes it straightforward to rebuild individual slides without affecting others.

How slides use theme CSS variables

The key to Pitch Smith's brand consistency is CSS variables. When a slide is built, the theme's design tokens are injected as CSS custom properties into the slide's <style> block. The slide's layout CSS then references these variables rather than hardcoding color values, font names, or spacing.

For example, a theme with colors.primary: "#3a61ff" and typography.fonts.heading: "Fraunces" produces CSS variables like:

:root {
  --color-primary: #3a61ff;
  --color-secondary: #334155;
  --color-accent: #8455ff;
  --color-bg-default: #f8fafc;
  --color-bg-dark: #131023;
  --color-text-heading: #131023;
  --color-text-body: #334155;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius-medium: 10px;
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.08);
  /* ... additional variables from theme */
}

The slide's HTML elements then reference these variables:

<h1 style="
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  font-size: 48px;
">Product Launch</h1>

<div style="
  background: var(--color-primary);
  border-radius: var(--radius-medium);
  padding: 24px;
">
  <p style="color: var(--color-text-onPrimary);">Key statistic here</p>
</div>

This variable-based approach means that updating your theme and rebuilding your slides propagates changes everywhere automatically. Change your primary color from blue to green, rebuild, and every heading, button, and accent element reflects the new color -- without touching the slide HTML.

The workflowRules section of your theme adds another layer of brand control. It defines rhythm rules (how many consecutive dark or light slides are allowed) and narrative defaults (which background mode to use for opening, closing, and data slides). These rules guide the AI during generation, ensuring your deck has visual variety while staying on-brand.

Manifest file

Every deck includes a manifest.json file that tracks metadata about the deck's slides. The viewer, presenter, and export tools all read the manifest to understand the deck's structure without parsing individual HTML files.

The manifest contains:

• Slide list -- An ordered array of slide entries with titles, file paths, and build status
• Deck metadata -- The deck name, creation date, and total slide count
• Build state -- Which slides are built and which are still pending

The manifest is automatically generated and updated by the build process. When you build a new slide, its entry is added to the manifest. When you rebuild an existing slide, its entry is updated. You typically do not need to edit the manifest directly -- it is maintained by Pitch Smith's build and management commands.

Related resources

• Themes -- How brand identity is encoded as CSS variables that slides consume
• Templates -- The layout patterns that guide AI slide generation
• Plans -- The YAML blueprints that define slide content before building
• Directory Structure reference (coming in Story 4.6) -- Complete documentation of the output directory conventions
• Build Slides guide (coming in Story 4.3) -- Step-by-step instructions for building slides from plans