| name | design-talk-slide |
| description | Generate a 3-slide talk template — title slide + content slide + section-divider slide — all in a single 1920×1080 (16:9) HTML file with clearly demarcated .canvas divs so each can be screenshotted separately and assembled into a full deck. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "talk slides for X", "conference slide template", "title slide for [talk]", "/talk-slide". |
Skill: talk-slide
Produces a single self-contained HTML file containing THREE 1920×1080 slide canvases, each demarcated for individual screenshot:
- Title slide — talk title + speaker + venue/date. The cover.
- Content slide — structured content area: headline + body region (allows for prose, list, or code excerpt).
- Section-divider slide — large display type announcing a new section ("§ 02 — On Settlement"). The pause-and-breathe slide.
This skill produces the BUILDING BLOCKS for a talk deck. The user duplicates and edits content slides as needed; the title and divider patterns repeat across the deck.
When to use
- User is preparing a conference talk, internal presentation, or recorded demo
- A
DESIGN.md exists for the brand
Inputs
- Required: brand slug, talk title (sentence-case ending in period per brand voice)
- Required: speaker name + role/affiliation
- Required: venue/conference + date
- Optional: content slide headline + body content (sample for the template), section-divider section title
Output
./design/<brand-slug>/artifacts/talk-slide-YYYY-MM-DD-<slug>.html
Steps
1. Verify brand exists
test -f ./design/<brand-slug>/tokens.css
If missing, stop and tell the user to run /design-system <brand-slug> first.
2. Gather the brief
Ask in one message:
1. Talk title — sentence-case ending in period (max ~12 words)
2. Speaker — name + role/affiliation
3. Venue — conference / event + date (e.g. "Strange Loop 2026 · 09.18.2026")
4. Optional content slide headline + 2-4 short body lines (used to populate the template)
5. Optional section-divider title (e.g. "On settlement")
3. Pick variation — apply CONSISTENTLY across all 3 slides
Talks need visual continuity across slides — pick ONE variation set and apply throughout:
- Color treatment:
cream-page (warm cream throughout) | inversion-feature (cream-page slides + ONE inversion-block slide as a moment, e.g. the section-divider) | full-inversion (every slide on dark, for keynote drama)
- Type pressure:
display-led (Fraunces or brand display does the heavy lifting) | mixed-weight (display headlines + sans body per slide)
- Composition focus:
asymmetric (off-center anchoring across all slides) | symmetric (centered — the conference-talk default; use only if the talk venue is formal)
Cross-artifact rule: if a previous talk-slide artifact for this brand chose asymmetric, the next one might choose symmetric for a different talk — but within a single deck, consistency wins.
4. Generate the HTML
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Talk slides — <talk title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families>&display=swap">
<style>
<contents of tokens.css>
html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; font-family: var(--type-sans-family); }
body { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 0; }
.slide-label {
font-family: var(--type-mono-family);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
align-self: center;
}
.canvas {
width: 1920px;
height: 1080px;
background: var(--color-surface);
color: var(--color-ink);
position: relative;
overflow: hidden;
padding: 80px;
box-sizing: border-box;
display: grid;
}
.canvas--title {
grid-template-rows: auto 1fr auto;
gap: 48px;
}
.canvas--content {
grid-template-rows: auto auto 1fr auto;
gap: 24px;
}
.canvas--divider {
display: grid;
place-items: center;
}
.canvas--divider.is-inverted {
background: var(--color-ink);
color: var(--color-surface);
}
.slide-display { font-family: var(--type-display-family); font-weight: 400; font-size: 144px; line-height: 0.96; letter-spacing: -0.022em; margin: 0; }
.slide-title { font-family: var(--type-display-family); font-weight: 400; font-size: 96px; line-height: 1.0; letter-spacing: -0.02em; margin: 0; }
.slide-headline { font-family: var(--type-display-family); font-weight: 500; font-size: 56px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.slide-body { font-family: var(--type-sans-family); font-size: 28px; line-height: 1.5; max-width: 64ch; }
.slide-folio {
font-family: var(--type-mono-family);
font-size: 18px;
letter-spacing: 0.06em;
color: var(--color-ink-3);
display: inline-flex; gap: 16px; align-items: baseline;
}
.slide-folio .pos { color: var(--color-ink); }
.canvas--divider.is-inverted .slide-folio { color: rgba(251,250,249,0.55); }
.canvas--divider.is-inverted .slide-folio .pos { color: var(--color-surface); }
@page { size: 1920px 1080px; margin: 0; }
</style>
</head>
<body>
<span class="slide-label">→ Slide 1 · TITLE · 1920×1080 · screenshot this for the cover</span>
<article class="canvas canvas--title">
</article>
<span class="slide-label">→ Slide 2 · CONTENT · 1920×1080 · template for any body slide (duplicate + edit)</span>
<article class="canvas canvas--content">
</article>
<span class="slide-label">→ Slide 3 · SECTION DIVIDER · 1920×1080 · the pause-and-breathe slide</span>
<article class="canvas canvas--divider is-inverted">
</article>
</body>
</html>
5. Verify and report
Talk slides at ./design/<brand-slug>/artifacts/talk-slide-YYYY-MM-DD-<slug>.html.
Variation: <color> × <type-press> × <composition>.
Export each slide as PNG: open in browser → DevTools → device toolbar → set viewport to 1920×1080 → screenshot each .canvas element separately. Use the labels above each canvas to identify which is which.
To extend into a full deck: duplicate the content slide template, edit per-slide content, screenshot each.
Anti-Slop Rules
Governed by three shared canonical references — read them, do not restate them:
../design-anti-patterns.md — the hard floor. Wins every conflict.../design-principles.md — the craft floor (typographic hierarchy, spatial rhythm, color theory, layout logic, visual tension).../design-variation-sop.md — the named-aesthetic roster + the procedure for varying every invocation.
Forbidden (fast scan — the references hold the full list):
- Indigo/violet/purple as default accent or primary — the
hsl(230–280) family on a near-white surface. The single loudest AI tell.
- Purple→blue / "aurora" / gradient-mesh backgrounds; gradient-fill text.
- Glassmorphism without an explicit AA-contrast scrim; floating gradient "blobs" as atmosphere.
- The three-up icon-card feature grid; the "hero → 3 cards → CTA" median skeleton.
- One global border-radius on every element; timid evenly-weighted low-contrast palette.
- Inter / Roboto / Arial / Open Sans / Lato / Helvetica / system as the primary family (Space Grotesk = yellow flag). Use a category-matched stack from the variation roster.
- Value-free CTAs ("Get Started", "Learn More", "Sign Up"); the two-CTA hero. Name the real action and its value.
Required variation (every invocation):
- Make at least two intentional decisions that differ from the safe defaults (palette, layout structure, typographic voice, or spatial density) AND from the most recent artifact in this brand.
- Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1).
- Sketch three distinct directions, offer them as a one-line menu, generate the best-fit by default, all three only if asked (variation-sop Rule 3).
Authenticity: prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders.
Rules
- Pixel exactness on all 3 canvases. 1920×1080, no flex.
- Token-pure. Every visual value via
var(--*) from tokens.css. Only literal pixel values: 1px for hairlines and the canvas dimensions.
- One file produces 3 slide types. Don't bundle 10 content slides — produce the 3 templates and let the user duplicate as needed.
- Variation applies to all 3 slides. Don't pick different color treatments per slide; the deck must read as a deck.
- No animations. Static slides only. If the user wants motion, that's a different artifact (motion-frames skill, future).
- Anti-pattern compliance. This skill defers to three shared canonical references:
../design-anti-patterns.md (the hard floor — wins every conflict), ../design-principles.md (the craft floor), and ../design-variation-sop.md (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list. If you find a new tell in the output, add it there.
