# Slide Board Design

> Core design system for building horizontal infographic "explainer boards" used to explain concepts to a team. Use when the user asks to create an explainer slide/board/infographic/presentation slide, or a single-canvas picture that explains a concept, strategy, or flow across left-to-right panels, and when producing that style in Figma or as code (React/HTML). Defines color, font, spacing, and component tokens plus the production workflow.

- Skill: `jassonbla/slide-board-design` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add jassonbla/slide-board-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jassonbla/slide-board-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: jassonbla (https://skillmd.com/u/jassonbla)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jassonbla/slide-board-design

---


# Slide Board Design (Explainer Board Core Design)

A core design system for producing **horizontal infographic slides** ("explainer boards") in a consistent style.
A single-canvas board where 3–5 left-to-right panels form one narrative (problem → goal → concept → how-it-works → result).

## When to use
- "Make an explainer slide/board", "a single-canvas picture that explains this concept", "a strategy/flow infographic"
- When producing the above style **in Figma** or **as code**
- When adapting/extending an existing board to fit this system

## Do this first
Read `references/DESIGN.md` to load the color/typography/spacing/component tokens. **Treat that document as the single source of truth for every value** (no arbitrary colors, fonts, or spacing).

Select the output profile before layout: the existing compact board remains the default; for a 16:9 Figma Slides deck, use the presentation profile in DESIGN.md instead of scaling the compact board into the slide. For Slides, also read `references/figma-slides.md` for production and verification. The selected profile overrides the compact dimensions summarized below.

## Choosing an output method (accuracy trade-off)
| Goal | Method |
|---|---|
| **Pixel fidelity first** | Build in Figma first, then extract with `get_design_context` → exact coordinates/sizes. Note: code becomes verbose (absolute Tailwind). |
| **Clean, maintainable code** | Write flex/grid code directly from the `references/DESIGN.md` tokens. Regular layout makes this accurate enough. |
| **Mini diagrams (in-panel schematics)** | Figma is always better (absolute-coordinate art). Even in a code-first flow, reference Figma for this part. |

Default recommendation: **keep Figma as the visual source of truth**, build the overall cards/grid as token-based code, and extract diagrams faithfully from Figma.

## Workflow
1. Load `references/DESIGN.md`.
2. Content design: 3–5 panels, narrative order (problem → goal → core concept → how-it-works → result). Each panel heading is one sentence ending in a verb; body is 2–3 sentences (~60 chars). Use `★ Key` on only 1–2 panels.
3. Assemble the skeleton: header (Eyebrow/H1/Subtitle) → panel row (equal N columns, h408, gap24) → bottom flow-summary band (dark band linking headings with →).
4. When generating in Figma: load the `figma-use` skill, then author with `use_figma`. Use token values exactly as in DESIGN.md.
5. When producing code: build components from the DESIGN.md cheat-sheet tokens. Use the Inter font and the specified radius/spacing.

## Core rules (summary)
- Color: neutral base + one `primary #2663eb` accent. Use `orange #f58021` only when contrasting two subjects. Green `#29a666` for completion signals only.
- Font: Inter. H1 38/Bold, subtitle 17/Reg, panel heading 18/Bold, body 13/Reg.
- Layout: board pad 64/56/64, gap 40, radius board28/card18/band14/diagram12/chip8. Panel pad22/24 gap14, diagram box h176.
- Flat design (no shadows), cards = white background + thin gray border.

See `references/DESIGN.md` for the full tokens, recipes, and template.