Build Process.

Intake

Parse and validate the presentation brief. This is the foundation — good intake means clearer outputs.

Steps

1. Read the brief. Extract all provided information: topic, audience, key message, talking points, data, desired slide count.
2. Clarify gaps. If critical info is missing (e.g., no audience specified), ask for it before proceeding.
3. Confirm assumptions. State back your understanding: “I’m building a 10-slide deck on [topic] for [audience] with key message: [message].”
4. Plan structure. Based on the brief, decide the slide sequence and component types.

Structure

Design the slide sequence and choose component types for visual variety.

Typical slide sequence

1. Hero / Title slide (bg-dark): Large heading, subtitle, optional badge. Sets tone.
2. Context slide (bg-ivory): Problem statement or situation. Plain text or split layout.
3. Key point 1 + data (bg-white or bg-ivory): Talking point 1. Use stat grid or reality grid if you have numbers.
4. Key point 2 + data: Talking point 2. Different visual component than slide 3.
5. Key point 3 + data: Talking point 3. Alternate visual again (quote block or reality grid).
6. Insight / quote slide (bg-dark): A memorable statement. Often a full-screen quote.
7. Call-to-action / close (bg-ivory): Next steps, URL, contact, or takeaway message.

Visual component types

• Stat grid (3-col or 4-col): Best for numerical data. Large number, label, description.
• Reality grid (3-col): Thematic cards with title, description, optional quote below.
• Split layout: Text on left, visual / image placeholder on right. Great for concept + example pairs.
• Quote block: Large italic text with source. Full-screen impact on dark background.
• Company grid (5-col): For logos or brand mentions. Cards with name and stat.
• Q&A rows: Question + answer pairs. Good for FAQ or closing thoughts.

Build

Write each slide’s copy and assemble components. Use the component library from the golden example.

For each slide

1. Write the headline. Specific, declarative. 5-12 words.
2. Write supporting copy. 1-3 short paragraphs or bullet points. Clear and scannable.
3. Add components. If using stat grid, reality grid, or split layout, populate with actual content / data.
4. Choose background. Dark, ivory, or white. Alternate for visual flow.

Building stat grids

• Decide 3-col (three stats) or 4-col (four stats) layout.
• For each stat: large number, accent-colored label, descriptive text.
• Example: Number = “87%”, Label = “ADOPTION RATE”, Description = “of enterprises plan AI investment this year”.

Building reality grids

• 3-col layout with cards.
• Each card: number (e.g., “01”), title, description, optional quote block below.
• Example: Card 1 = “01” / “EU AI Act” / “Regulatory framework for high-risk AI systems” / (optional quote).

Building split layouts

• Left: text (headline, body, bullets).
• Right: visual (image placeholder, mockup, chart, diagram).
• Use <div class="split-layout"> with .split-text and .split-visual divs.

Section labels & sig lines

• .section-label: Small uppercase text (e.g., “KEY INSIGHTS”). 8-15px, letter-spaced.
• .sig-line: Decorative horizontal line. Rotated -3 degrees. Use between sections.

Assemble

Combine all slides into a single self-contained HTML file with the deck shell (navigation, transitions, controls).

Deck shell components

1. Slide container: Absolute positioned overlay slides. Only one visible at a time (opacity 0 → 1).
2. Slide transitions: CSS opacity + horizontal transform (translateX). 0.5s ease duration.
3. Keyboard navigation: JavaScript event listener. Left / Right arrow keys advance slides.
4. Dot navigation: Clickable dots at bottom. Active dot highlighted in accent. Shows total slide count.
5. Arrow buttons: Next / Prev buttons. Disabled when at first / last slide.
6. Slide counter: Counter (e.g., “3 / 7”) in bottom center. Updated on each slide change.
7. Progress bar: Accent-colored bar at top. Width = (current slide / total slides) * 100%.

Checklist for assembly

• All slide HTML is valid and uses component classes from the golden example.
• Each slide has a .slide div with unique ID.
• Backgrounds alternate properly: dark → ivory → white → dark, etc.
• JavaScript initializes on page load: sets slide 0 as active, updates nav dots and counter.
• Arrow key and click events work. Current slide index tracked globally.
• No external CSS or JS files. All styles inline in <style> tag.
• Google Fonts loaded via CDN (only external dependency).
• File is valid HTML5. No console errors when opened in a browser.

QC & Deliver

Verify the deck against all five quality gates, then deliver to the project folder.

Five quality gates

Gate 1 — Completeness (25%): All planned slides are present. Navigation works (dots clickable, arrows enabled). Keyboard nav functional (← → arrows change slides).

Gate 2 — Content (25%): All talking points covered. Data is accurate and sources cited if required. Narrative arc is clear: problem → solution → call-to-action.

Gate 3 — Visual design (20%): Component usage is consistent (stat grids look the same, split layouts aligned). Dark / ivory / white alternation is logical and intentional. Responsive on mobile (no overflow, readable text).

Gate 4 — Interaction (15%): Slide transitions are smooth and snappy. Dots and arrows update correctly when clicked. Progress bar moves with each slide. Keyboard nav works in all browsers.

Gate 5 — Deliverability (15%): Single self-contained HTML file. No external dependencies except Google Fonts. Opens in Chrome, Firefox, Safari, Edge without errors. File size is reasonable (<500KB).

QC process

1. Open HTML file in browser. Verify no console errors.
2. Click through all slides using dots, arrows, and keyboard arrows. Check each transition is smooth.
3. Verify progress bar moves from 0% to 100%.
4. Read each slide for typos, missing data, poor grammar.
5. Check visual flow: dark slides feel heavy, ivory / white slides feel light. No jarring color jumps.
6. On mobile, resize browser to 375px width. Verify text is readable, no horizontal scroll.
7. Confirm all stat grids have correct numbers, labels, and descriptions.
8. If quote slides exist, verify quotes are accurate and sources are cited.

Delivery

1. Save file to: /Operate/3. Marketing/3. Agents/presentation/ folder with a descriptive name.
2. Use format: [TOPIC]-[DATE].html (e.g., AI-Safety-2026-04-08.html).
3. Provide the file path and a 1-line summary: “AI Safety presentation for executives, 7 slides, ready to present.”