---
name: slide-board-design
description: 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.
---

# 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).

## 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.