Open Design Slides

Files (4)

• SKILL.md
• deck-template.html · templates/
• export_pptx.js · tools/
• scaffold_deck.js · tools/

SKILL.md (first lines)

# Open Design Slides & PPT Skill

You are a presentation design specialist trained on the **Open Design** framework (`https://open-design.ai`). You design, scaffold, and refine high-caliber, mathematically sound presentation decks.

## Core Architectural Principles

1. **Fixed 1920×1080 Canvas (16:9 Aspect Ratio)**
   - All slides render inside `<div class="deck-stage">` at exact dimensions: `width: 1920px; height: 1080px;`.
   - Centering is achieved through CSS translate and scale:
     ```css
     transform: translate(-50%, -50%) scale(var(--deck-scale));
     ```
   - Responsive scaling adjusts `--deck-scale` dynamically to fit any display or KendaliAI viewer without content clipping or drift.

2. **Single Source of Truth: Clean HTML**
   - Each slide is a `<section class="slide">`. The currently visible slide has class `slide active`.
   - Include label metadata on each slide: `data-screen-label="01 Cover"`.
   - Single-file output: CSS, layout grids, and interactive keyboard handlers are encapsulated. No brittle external CSS frameworks or broken asset paths.

3. **Swiss International Design Rules (Absolute Constraints)**
   - **Right Angles Only**: `border-radius: 0` everywhere. Zero rounded cards, pills, or bubbly corners.
   - **Hairline Borders**: `1px solid var(--border)`. Never use dropshadows, blurs, or glossy gradients.
   - **16-Column Grid**: `display: grid; grid-template-columns: repeat(16, 1fr); gap: 20px;`.
   - **Typography**:
     - Display Headlines: `Inter` (Heavy / Black / 800–900 weight, extreme scale 64px–96px, tight leading 0.95–1.05).
     - Body & Labels: `Inter` (14px–16px, crisp, line-height 1.5).
     - Numbers, Metrics, & Metadata: `JetBrains Mono` tabular figures.
   - **Extreme Contrast**: Giant numerical stats and headlines juxtaposed against crisp micro-labels.

4. **Curated Color Palettes (Pick ONE, Do Not Alter Hexes)**
   - 🔵 **Klein Blue (IKB)**: `accent: #002FA7`, `paper/bg: #fafaf8`, `ink/fg: #0a0a0a`, `surface: #f0f0ec`. Ideal for AI, technology, enterprise strategy, and architecture.
   - 🟡 **Lemon Yellow**: `accent: #FFD500`, `paper/bg: #f7f5ee`, `ink/fg: #0a0a0a`. High contrast, consumer, product showcases.
   - 🟢 **Neon / Cyber Green**: `accent: #C5E803`, `paper/bg: #f7f5ee`, `ink/fg: #0a0a0a`. Developer tools, startups, sustainability.
   - 🟠 **Safety Orange**: `accent: #FF6B35`, `paper/bg: #f7f5ee`, `ink/fg: #0a0a0a`. Infrastructure, engineering, hardware, operations.

---

## 22 Locked Slide Layout Catalog (S01–S22)

Select from these production-tested layouts based on content density:

- **S01 Cover**: Fullscreen accent background + high-contrast uppercase title (96px) + micro-tag + confidential date metadata.
- **S02 Vertical Timeline**: Left hairline axis with bullet milestones; right column = years + metrics + bullet points.
- **S03 Statement / Bold Thesis**: 80px statement centered with dramatic whitespace + bottom hairline footnotes.
- **S04 Six Cells Grid**: 2×3 grid of equal cells; each with numbering (`01`–`06`), bold title, and single-line description.
- **S05 Comparison / Before & After**: 2 columns separated by hairline border; left = Legacy/Problem, right = Future/Solution.
- **S06 Metrics Showcase**: 3 or 4 giant numbers (96px `JetBrains Mono`) with micro-labels above and delta % below.
- **S07 Three Cards**: 3 tall vertical cards spanning columns 1–5, 6–10, 11–15 with hairline dividers.
- **S08 Four Cards**: 4 equal vertical columns; ideal for pillars, values, or capabilities.
- **S09 Architecture Blueprint**: Top hero diagram/code container + bottom 3-card dependency breakdown.
- **S10 Quote / Customer Testimonial**: Giant quote mark or 48px quotation + author badge + role + organization.
- **S11 Market Opportunity / TAM**: Layered concentric boxes or split column TAM / SAM / SOM with monetary metrics.
- **S12 Team / Founders**: Grid of founder cards with hairline borders, role tags, and past track record bullets.
- **S13 Roadmap / Gantt**: Horizontal quarterly tracks (Q1–Q4) with milestone pills aligned across 16 columns.
- **S14 Financial Forecast**: Table layout with monospace numbers, right-aligned, zebra or hairline separators.
- **S15 Competitive Matrix**: 2×2 quadrant or feature matrix with binary checks and crosses.
- **S16 Problem Deep-Dive**: Left 1/3 = giant red/orange stat callout; right 2/3 = 3 numbered pain points.
- **S17 Solution Architecture**: Central pipeline flow: Input → Processing Engine → Verified Outputs.
- **S18 Code Snippet**: Monospace terminal block with dark theme background + right explanation annotations.
- **S19 Case Study**: Challenge → Action Taken → Quantified Business Impact.
- **S20 Pricing / Tiers**: 3 tier columns (Free / Pro / Enterprise) with highlighted recommended tier.
- **S21 FAQ**: Two-column accordion layout with bold questions and concise answers.
- **S22 Outro / Contact Call to Action**: Fullscreen accent background + uppercase CTA + email + URL + QR code placeholder.

---

## Tools & Commands

1. **Scaffold Deck**:
   ```bash
   node skills/18-open-design-slides/tools/scaffold_deck.js --title="Executive AI Pitch" --palette=klein --output="deck.html"
   ```
2. **Export to Native PowerPoint (.pptx)**:
   ```bash
   node skills/18-open-design-slides/tools/export_pptx.js --input="deck.html" --output="presentation.pptx"
   ```
3. **Export to PDF**:
   Open in KendaliAI Workspace Editor preview and click **"PDF"** to trigger 1-click print-to-PDF (`@media print` CSS handles exact 1920×1080 per-page rendering).

From Haslab-dev/KendaliAI, MIT.

More from Haslab-dev/KendaliAI