slide-creator

# Google Slide Creator Create professional, presentation-ready slides as standalone HTML files matching Google's internal presentation style. This skill is organized as a **component library** — pick a layout template, populate it with components, and wrap it in the presentation shell. --- ## 1. Output Format The full presentation is a **single HTML file** containing all slides. Each slide is 1280×720px (16:9). The file includes built-in keyboard navigation (← → arrow keys), a slide counter, and smooth transitions. Open in any browser for presenting or screenshotting. --- ## 2. Mandatory Design System Every slide MUST use these exact specifications. ### Presentation Shell Wrap all slides in a presentation container. Each `.slide` is hidden by default; only `.slide.active` is visible. ```html <div class="presentation"> <div class="slide active"><!-- slide 1 --></div> <div class="slide"><!-- slide 2 --></div> </div> <div class="slide-counter">1 / 2</div> ``` ```css body { background: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } .presentation { position: relative; } .slide { width: 1280px; height: 720px; background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06); padding: 48px 56px 40px; position: absolute; top: 0; left: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; flex-direction: column; } .slide.active { position: relative; opacity: 1; pointer-events: auto; } .slide::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #4285f4, #34a853, #fbbc04, #ea4335); } ``` ### Navigation JavaScript Always include at the bottom of `<body>`: ```javascript <script> const slides = document.querySelectorAll('.slide'); const counter = document.querySelector('.slide-counter'); let current = 0; function showSlide(n) { slides[current].classList.remove('active'); current = (n + slides.length) % slides.length; slides[current].classList.add('active'); counter.textContent = (current + 1) + ' / ' + slides.length; } document.addEventListener('keydown', e => { if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1); if (e.key === 'ArrowLeft') showSlide(current - 1); }); </script> ``` ### Typography - **Font**: Google Sans (headings, labels) + Google Sans Text (body). Load via Google Fonts: ```html <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Text:wght@400;500&display=swap" rel="stylesheet"> ``` - **Add Google Sans Mono** when slides contain code blocks - **Title (h1)**: 32–42px, font-weight 500, color `#202124` - **Speaker line**: 14px, color `#5f6368`, placed above h1 - **Subtitle**: 15–17px, color `#5f6368` - **Body text**: 14–18px, color `#3c4043` - **Section labels**: 12–13px, uppercase, letter-spacing 0.5px, font-weight 500 ### Color Palette | Token | Value | Usage | |-------|-------|-------| | text-primary | `#202124` | Headings, bold text | | text-secondary | `#3c4043` | Body text | | text-tertiary | `#5f6368` | Subtitles, labels, descriptions | | text-muted | `#9aa0a6` | Captions, annotations | | google-blue | `#1a73e8` | Links, highlighted labels, active states | | google-green | `#34a853` | Success, positive, SOTA badges | | google-yellow | `#fbbc04` | Caution, secondary highlights | | google-red | `#ea4335` | Alerts, important badges | | orange | `#e37400` | v2/future labels | | border | `#e8eaed` | Card borders, dividers | | border-light | `#dadce0` | Bullet dots, subtle borders | | surface | `#f8f9fa` | Card backgrounds, diagram containers | ### Icons Use **inline SVG heroicons** (outline style, stroke-based). Never use emojis. Standard icon size: 15–18px for chips, 18–22px for cards. Match stroke color to the section color context. --- ## 3. Layout Templates Pick a layout template for each slide. These define the structural grid — components fill the zones. ### Template A: Title + Left/Right Split The most common layout. Left column has text, right column has a visual component. ``` ┌─────────────────────────────────────────────────────┐ │ Speaker line │ │ Title (h1) │ │ │ │ ┌─ left-col (flex:1) ─┐ ┌─ right-col (400-460) ─┐│ │ │ Bullets / text / │ │ Diagram / code / ││ │ │ comparison cards │ │ chart / mockup ││ │ └──────────────────────┘ └───────────────────────┘│ │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │ └─────────────────────────────────────────────────────┘ ``` - `.left-col { flex: 1 }` — `.right-col { flex: 0 0 400–460px }` - Gap between columns: 44–60px ### Template B: Title + Full-Width Body Full-width visual below the header. Use for grids, timelines, architecture diagrams. ``` ┌─────────────────────────────────────────────────────┐ │ Speaker / Title │ │ │ │ ┌───────────── full-width body ──────────────────┐ │ │ │ Grid / Timeline / Tool cards / Architecture │ │ │ └────────────────────────────────────────────────┘ │ │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │ └─────────────────────────────────────────────────────┘ ``` ### Template C: Hero Title (No Header) No header bar. Title + subtitle + list on the left, right visual. Use for opening/closing slides. ``` ┌─────────────────────────────────────────────────────┐ │ │ │ ┌─ left-col ──────────┐ ┌─ right-col ───────────┐│ │ │ Big Title (42px) │ │ Code examples / ││ │ │ Subtitle │ │ hero visual ││ │ │ Feature list │ │ ││ │ └─────────────────────┘ └───────────────────────┘│ │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │ └─────────────────────────────────────────────────────┘ ``` ### Template D: Side-by-Side Panels Two equal-width panels for comparisons, before/after, or dual content. ``` ┌─────────────────────────────────────────────────────┐ │ Speaker / Title │ │ │ │ ┌─ panel-left ────┐ ⟶ ┌─ panel-right ──────────┐│ │ │ OLD / Before │ │ NEW / After ││ │ │ (tinted bg) │ │ (tinted bg) ││ │ └─────────────────┘ └─────────────────────────┘│ │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │ └─────────────────────────────────────────────────────┘ ``` --- ## 4. Component Library Pick components to fill the layout zones. Mix and match freely. ### 4.1 Diagram Components #### Vertical Flow (Pipeline) Numbered steps stacked vertically with CSS arrows connecting them. Best for: sequential processes, API lifecycles. ```html <div class="flow"> <div class="flow-step stage-1"> <div class="step-icon">1</div> <div class="step-text"> <div class="step-title">Step Name</div> <div class="step-desc">Brief description</div> </div> </div> <div class="flow-arrow"></div> <div class="flow-step stage-2">...</div> </div> ``` - Wrap in `.diagram-container` (surface bg, border, rounded) - Step icons: 36px circle, Google colors per stage (`.stage-1` blue, `.stage-2` yellow, `.stage-3` green, `.stage-4` red) - Arrows: `::before` for line (2px), `::after` for triangle - Optional: `.loop-badge` positioned absolute for agentic loops - See: [example-bullets-flow-diagram.html](references/example-bullets-flow-diagram.html) #### Horizontal Pipeline Circular icon nodes connected by horizontal arrows. Best for: request lifecycles, data flows. ```html <div class="pipeline"> <div class="pipeline-step step-blue"> <div class="step-circle"><svg>...</svg></div> <div class="step-label">Input</div> <div class="step-sublabel">Description</div> </div> <div class="pipeline-arrow"></div> <div class="pipeline-step step-green">...</div> </div> ``` - Circle: 64px, 3px colored border, white bg, SVG icon inside - Arrow: `::before` for line (36px wide), `::after` for triangle pointing right - Hover: `scale(1.08)` + subtle box-shadow - See: [example-horizontal-pipeline.html](references/example-horizontal-pipeline.html) #### Hub & Spoke (Radial) Central hub with nodes radiating outward. Best for: ecosystem views, tool relationships. ```html <div class="hub-spoke"> <svg class="spoke-lines"><!-- dashed lines from center to each node --></svg> <div class="hub">Central Label</div> <div class="spoke-node spoke-1"><!-- positioned absolute --></div> <div class="spoke-node spoke-2">...</div> </div> ``` - Hub: 120px circle, gradient bg, centered absolutely - Spokes: SVG `<line>` elements with `stroke-dasharray="4 4"` - Nodes: 130×68px cards, positioned with `top/left/right/bottom`, 6 positions around center - See: [example-hub-spoke.html](references/example-hub-spoke.html) #### Layered Architecture (Stacked Tiers) Horizontal tiers stacked vertically with blocks inside each. Best for: system architecture, stack overviews. ```html <div class="architecture"> <div class="arch-layer layer-app"> <div class="layer-label">APP</div> <div class="layer-content"> <div class="arch-block"> <div class="block-icon icon-blue"><svg>...</svg></div> <div class="block-text"> <div class="block-name">SDK Name</div> <div class="block-desc">Description</div> </div> </div> </div> </div> <div class="layer-connector"></div> <div class="arch-layer layer-api">...</div> </div> ``` - Layer: colored bg + border (blue/green/yellow/red), rotated side label via `writing-mode: vertical-rl` - Blocks: white cards inside each layer, flex items - Connector: down-pointing triangle centered between layers - See: [example-layered-architecture.html](references/example-layered-architecture.html) #### Swimlane Sequence Multi-column sequence diagram with activity blocks crossing lanes. Best for: API call flows, interaction patterns, protocol sequences. ```html <div class="swimlane-container"> <div class="lane-headers"> <div class="lane-header client">Client</div> <div class="lane-header server">Server</div> <div class="lane-header tools">Tools</div> </div> <div class="seq-rows"> <div class="seq-row"> <div class="seq-step step-blue"><div class="step-num">1</div></div> <div class="seq-lanes"> <div class="seq-lane"> <div class="activity activity-blue">Action description</div> </div> <div class="seq-lane"></div> </div> </div> </div> </div> ``` - Headers: colored bottom border per lane - Grid: left label column (140px) + lanes (flex) - Activities: colored blocks with monospace code, positioned in the relevant lane - Arrows: absolute-positioned triangles between lanes (`.arrow-right`, `.arrow-left`) - See: [example-swimlane-sequence.html](references/example-swimlane-sequence.html) #### Horizontal Timeline Event dots along a horizontal track with content below each stop. Best for: evolution, roadmap, release history. ```html <div class="timeline"> <div class="timeline-item"> <div class="timeline-dot dot-blue"><svg>...</svg></div> <div class="timeline-content"> <div class="timeline-date">2024</div> <div class="timeline-title">Milestone</div> <div class="timeline-desc">Description</div> <span class="badge badge-ga">GA</span> </div> </div> </div> ``` - Track: `::before` pseudo on `.timeline` (3px line, full width, `top: 24px`) - Dots: 48px circle with SVG icon, colored shadow, positioned above content - Content: centered text block below each dot - See: [example-horizontal-timeline.html](references/example-horizontal-timeline.html) ### 4.2 Card Components #### Numbered Card Grid (2×2 or 3-col) Cards with big colored number badges. Best for: step-by-step guides, feature highlights. ```html