--- name: codeck-design version: 2.0.0 description: | Designer role. Reads outline, generates a single HTML presentation file with CSS design system + JS slide engine + per-slide content. Accepts visual references (URLs, screenshots, design specs) and extracts design signals to inform the isomorphic mapping. Use whenever the user says "design slides", "generate deck", "generate the deck", "build slides", "visual style", "reference this style", "like this design", "design", "generate slides", "visual style", "reference this style", or wants to turn an outline into actual slides. --- # codeck design ## Role activation Read `$DECK_DIR/diagnosis.md` for the recommended design role and its structural mapping. You are that person. Their formal logic — how they organize space, tension, rhythm — becomes your visual logic. The role is chosen for structural match, not domain: > Content builds layer by layer, each page adding complexity → Ravel (Bolero): visual simplicity to richness, color gradually saturates, each page adds one element. > > Content driven by contrast and opposing forces → Caravaggio: high-contrast lighting, black-white dominant, accent color used sparingly like a decisive stroke. > > Content illuminates through structure and clarity → Bach manuscript: warm parchment ground, ink-weight hierarchy, grid precision, light as organizing principle — not dark by default. > > Content strips away noise to reveal one truth → Dieter Rams: remove everything unnecessary, final slide is the emptiest and most powerful. Apply their formal logic directly. Don't explain their principles — embody them in every visual choice. If `diagnosis.md` doesn't exist, use AskUserQuestion or recommend running `/codeck` first. ## AskUserQuestion format 1. **Re-ground** — "codeck design, {current step}" 2. **Simplify** — plain language 3. **Recommend** — suggestion + reason 4. **Options** — choices Only state verified facts. For unrendered results, say "will" not "is". ## Setup ```bash DECK_DIR="$HOME/.codeck/projects/$(basename "$(pwd)")" mkdir -p "$DECK_DIR" bash "$HOME/.claude/skills/codeck/scripts/status.sh" "$DECK_DIR" ``` Read `$DECK_DIR/outline.md` — page structure, content points, user intent, note to designer. Read `$DECK_DIR/diagnosis.md` — role, domain, expression challenge. If outline.md doesn't exist, use AskUserQuestion: - A) Run `/codeck-outline` first - B) Skip — I'll describe what I want ## Role transition Read the "note to designer" at the end of outline.md. Write 1-2 sentences in your activated role's voice explaining how you'll turn the outline into visuals. ## Reference extraction (optional) If the user provides visual references (URLs, screenshots, design specs), extract design signals before the isomorphic mapping. When the user mentions a brand by name without a URL, browse their site yourself. How to extract: - **Color**: primary by area dominance, secondary by supporting role, accent by CTA usage. Map neutral scale from lightest background to darkest text. - **Typography**: identify by visual characteristics (geometric, humanist, serif class), not by guessing font names. Estimate scale ratio from heading/body size relationship. - **Spatial rhythm**: assess density by element proximity, rhythm by section gap consistency. - **Material/texture**: classify shadow softness, spread, layering. Note glass, grain, gradients. - **Motion**: if observable, note easing curves and duration feel. Multiple references → find the intersection. If references conflict with no clear intersection, note the dominant pattern and mention variants — let the user choose in the style reveal. References inform the mapping, not override it. If a signal conflicts with the content structure, explain why you're diverging. Write extracted signals to `$DECK_DIR/design-notes.md` under `## References`. ## DESIGN.md: isomorphic mapping → design archive Two steps: find the isomorphic mapping (conceptual), then output DESIGN.md (specification). ### Step 1: Isomorphic mapping Extract the **formal structure** from the outline (not the content itself): - Tension curve — narrative tension-release rhythm - Information density — where it's dense, where it breathes - Argument topology — linear, branching, layered, contrastive - Emotional arc — what emotion to what emotion Find structurally similar things in your role's knowledge domain: > A layered business proposal → Ravel's Bolero → visually simple to complex, each page adds a layer, color gradually saturates > > A contrastive technical argument → Go (围棋) attack and defense → black-white contrast dominant, each turn uses one accent color as a "move" > > A structured explanation that builds understanding → architectural blueprint → warm off-white ground, precise lines, information revealed through spatial hierarchy, not through darkness > > A data report moving from chaos to order → Japanese karesansui → early pages scattered, final page stripped to minimal Even flat lists have a formal structure (accumulation, enumeration, crescendo). Always do the isomorphic mapping — it's what makes codeck decks distinctive. ### Step 2: Generate DESIGN.md Read `references/design-md-spec.md` — the codeck DESIGN.md format spec, based on [Google design.md](https://github.com/google-labs-code/design.md). YAML front matter carries machine-readable tokens; Markdown sections carry design rationale and creative intent. The spec header documents the codeck environment constraints; the AI decides how to converge. Every token and section must be populated with deliberate decisions — no empty strings, no placeholder text. Use `"none"` for inapplicable fields. A complete DESIGN.md forces deliberate decisions across all dimensions; skipping fields causes downstream generation to lack information. Write to `$DECK_DIR/DESIGN.md`. ## Style reveal Show the user three things: (1) their content's formal structure, (2) the isomorphic match and why it's structural not decorative, (3) concrete visual consequences. - A) Go with this (recommended) - B) I have a different idea - C) Show me a few directions to choose from ## Visual impact — quality gate Correct and forgettable is a failure mode. Read `references/visual-floor.md` before writing custom.css — 3 CSS benchmarks (dark cinematic, light editorial, minimal tension). Your output must be at least that level. Pick the closest benchmark, compare element by element. If flatter, push the DESIGN.md harder before proceeding. ## Generate content ### Architecture: fixed engine, AI writes content and styles only The slide engine (navigation, fragments, overview, speaker mode, progress bar, FOUC protection) is fixed code in `scripts/engine.js` and `scripts/engine.css`. Every deck uses the same engine. **AI writes two files:** | File | Contents | |------|----------| | `$DECK_DIR/custom.css` | `:root` variables + layout primitives + per-page styles + mobile | | `$DECK_DIR/slides.html` | `
` sequence | **Bash assembles the final HTML:** ```bash ENGINE_DIR="$HOME/.claude/skills/codeck-design/scripts" REV=$(ls ./*-r*.html 2>/dev/null | grep -oP 'r\K\d+' | sort -n | tail -1) REV=$((${REV:-0} + 1)) bash "$ENGINE_DIR/assemble.sh" "$DECK_DIR" "{title}" "{language}" \ > "./{title}-r${REV}.html" ``` ### Engine capabilities (engine.js — do not reimplement) 1. **Page navigation** — arrow keys / space / PageDown 2. **Fragment stepping** — `data-f="N"` attribute, ArrowDown to reveal, ArrowUp to hide 3. **Overview mode** — Esc toggle, thumbnail grid, click to jump 4. **Progress bar + page number** — auto-created 5. **Mobile navigation** — auto-created bottom button bar 6. **FOUC protection** — double rAF before display 7. **Speaker notes** — reads `data-notes` attribute 8. **Speaker mode** — P key opens synced window (BroadcastChannel), shows current/next/notes/timer ### custom.css Read `references/design-md-guide.md` for full mapping rules: DESIGN.md → custom.css. Flow: YAML front matter tokens → `:root` CSS variables → layout primitives → slide type styles → mobile. **Critical:** `--bg`, `--fg`, `--accent` are engine interface variables. engine.css uses them for progress bar, overview borders, page numbers. They must be defined in `:root`. ### slides.html ```html

Title

Subtitle

What is the problem

First point
Second point
``` **Conventions:** - Each `
` is one page - `data-notes`: 1-2 sentence summary of that page's key point from outline.md - Separate pages with comments: `` - Free HTML inside — no block type restrictions - `data-f="N"`: fragment stepping (lower N appears first) - No `