Open Design To Open Slide

Open Design → Open Slide Template Production

Overview

This skill captures a practical workflow: use Open Design as a visual template corpus, then rebuild the result as Open Slide React slides.

Core rule: Open Design is a source of design language, not a runtime dependency. Mine its palettes, typography, page recipes, examples, and component rhythm; implement the output as Open Slide Page[] with React primitives.

This skill also bundles a ready-to-copy asset pack at templates/open-slide-template-pack/: 49 decks, 867 pages = 11 Open-Slide official/starter decks + 38 Open-Design-derived suites.

Quality baseline:

• Treat original Open-Slide official examples as the stronger visual baseline.
• Treat OD-derived suites as supplemental style expansion, not the flagship standard.
• When improving OD suites, compare them against official Open-Slide examples before shipping.

Open-Slide Official Baseline Inventory

The playground includes 11 official/starter Open-Slide decks. Use these as the first reference set when judging layout, motion, hierarchy, and polish.

Official/starter total: 11 decks, 107 pages.

Bundled template pack inventory: 49 decks, 867 pages = 11 official/starter decks + 38 standalone OD suites.

Local playground inventory may include extra kit/demo decks, but the public skill pack intentionally ships only the clean 49-deck template set.

When to Use

Use this skill when you need to:

• Convert Open Design examples or design systems into Open Slide decks.
• Create an OD-derived template kit, suite, album, or gallery.
• Expand a small template suite into a reusable 20-page presentation pack.
• Build public-facing React slide templates with screenshot QA.
• Preserve design provenance while avoiding runtime coupling.

Do not use it for:

• Importing Open Design daemon, web app, agent adapter, or navigation runtime.
• Copying raw single-file HTML decks directly into Open Slide.
• Producing .pptx files.
• Shipping public repos without credential and path audits.

Architecture Decision

Standard 20-Page Suite Structure

For OD-derived template suites, use this stable 20-page shape:

1. Cover
2. Agenda
3. Problem / Context
4. Framework
5. Content
6. Metrics / Data
7. Timeline / Roadmap
8. Diagram / Architecture
9. Closing / CTA
10. Section Divider
11. Quote / Key Insight
12. Comparison
13. Process / Workflow
14. Matrix / 2×2
15. Table / Spec
16. Case Study
17. Checklist
18. Risks / Tradeoffs
19. FAQ / Appendix
20. Thank You / Contact

Important learned preference:

• Keep the first 9 pages visually stable.
• Add coverage by appending pages 10–20.
• Do not mass-rewrite many suites into heavily scene-specific layouts unless screenshots prove the result is better.

Bundled 49-Deck Asset Pack

The skill ships a complete Open Slide template pack:

open-design-to-open-slide/templates/open-slide-template-pack/
  manifest.json
  README.md
  slides/
    getting-started/index.tsx
    open-slide-launch/index.tsx
    ...
    od-xhs-post-suite/index.tsx

Install into any Open Slide project:

bash open-design-to-open-slide/scripts/install-template-pack.sh /path/to/open-slide-project

Install only OD-derived suites:

bash open-design-to-open-slide/scripts/install-template-pack.sh /path/to/open-slide-project --od

Install only official/starter decks:

bash open-design-to-open-slide/scripts/install-template-pack.sh /path/to/open-slide-project --official

Overwrite existing same-slug decks only when explicit:

bash open-design-to-open-slide/scripts/install-template-pack.sh /path/to/open-slide-project --overwrite

Inspect the bundled manifest:

python3 open-design-to-open-slide/scripts/list-template-pack.py

Pack rules:

• Keep slides as plain Open Slide React source under slides/<slug>/index.tsx.
• Do not include Open Design runtime code.
• Do not include local deployment output, screenshots, caches, or credentials.
• manifest.json is the count source of truth for consumers.

Workflow: Create a New OD-Derived Suite

1. Pick a slug:

mkdir -p slides/od-<name>-suite

2. Inspect Open Design source candidates:

# examples only; adapt paths to your local Open Design clone
ls skills/
ls templates/
ls design-systems/

3. Extract only:

• palette
• typography
• component shape
• visual rhythm
• page archetypes
• provenance path

4. Implement in Open Slide TSX:

import type { CSSProperties, ReactNode } from 'react';
import type { DesignSystem, Page, SlideMeta } from '@open-slide/core';

export const design: DesignSystem = { /* tokens */ };
export const meta: SlideMeta = {
  title: 'OD <Name> Suite',
  description: '<Name> OD-derived 20-page Open Slide template suite.'
};
export const notes = [
  'Source: Open Design ...',
  'Runtime: Open Slide only'
];

const Cover: Page = () => /* ... */;
// ... 20 pages total
export default [
  Cover, Agenda, Problem, Framework, Content,
  Metrics, Timeline, Diagram, Closing,
  SectionDivider, QuoteInsight, Comparison, ProcessWorkflow,
  Matrix2x2, TableSpec, CaseStudy, ChecklistPage,
  RisksTradeoffs, FAQAppendix, ThankYou
];

5. Keep design helpers local and simple:

const rgba = (h: string, a: number) => {
  const x = h.replace('#', '');
  const n = parseInt(x.length === 3 ? x.split('').map(c => c + c).join('') : x, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
};

const isDarkBg = (h: string) => {
  const x = h.replace('#', '');
  const n = parseInt(x.length === 3 ? x.split('').map(c => c + c).join('') : x, 16);
  const r = (n >> 16) & 255;
  const g = (n >> 8) & 255;
  const b = n & 255;
  return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 96;
};

const dark = isDarkBg(t.bg);

dark must be global if appended pages use it. Missing global dark can build successfully but render blank at runtime. Nasty little trap.