Menu
Locks visual design style. Decides layout, color palette, font family and saves design_spec.md. Can analyze reference URLs/images. Responds to "lock design", "pick colors/fonts", "make design spec" . Stage 4 of the workflow.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Runs the full project sync pipeline — lifecycle update, audit, L0→L1 publish, commit, push, and PR creation.
Runs the full project sync pipeline — lifecycle update, audit, L0→L1 publish, commit, push, and PR creation.
Turn a topic or your own materials into a single self-contained, interactive HTML report — top tabs, clickable reference drawers, dense tables, comparison heatmaps, inline SVG, in-page search, a light/dark theme toggle, and multilingual support. Use when: user says "/explain-me", "/reportme", "make a report", "create report", "explain this topic". Inspired by beret21/reportme.
Document Production Workflow for co-deck — generates searchable, themed handbooks as static sites (GitHub Pages). Three modes: standalone handbook, lecture companion (reads co-deck slide_deck.md), full course site. Responds to "make handbook", "create handbook", "build course site", "companion handbook" (triggered by Korean phrases too). H-Stage pipeline (H-0 through H-7). Independent from the 11-Stage slide pipeline.
Turn a topic or your own materials into a single self-contained, interactive HTML report — top tabs, clickable reference drawers, dense tables, comparison heatmaps, inline SVG, in-page search, a light/dark theme toggle, and multilingual support. Use when: user says "/explain-me", "/reportme", "make a report", "create report", "explain this topic". Inspired by beret21/reportme.
Pre-edit fact-forcing quality gate. Ensures agents investigate a file's importers, schemas, and scope constraints before making changes. Part of the 3-layer enforcement model (Hook → Prompt → Skill).
| name | design |
| scope | co-deck |
| version | 1.2.0 |
| description | Locks visual design style. Decides layout, color palette, font family and saves design_spec.md. Can analyze reference URLs/images. Responds to "lock design", "pick colors/fonts", "make design spec" . Stage 4 of the workflow. |
| status | active |
| owner | design |
| last_reviewed | "2026-06-19T00:00:00.000Z" |
| prerequisites | storyline |
Locks the visual design — layout, colors, and fonts — into design_spec.md. This file is the shared reference for HTML generation and PDF export. Invoked at Stage 4, after Gate 2 (content approval) is passed.
Confirm with the user (skip anything already mentioned):
If a reference URL is provided, open it in Claude in Chrome and analyze colors and fonts.
Decide on at least 8 role-based colors:
| Role | Name | HEX | RGB |
|---|---|---|---|
| Slide background | slide-bg | ||
| Header / dark bg | bg-dark | ||
| Title text | title-color | ||
| Body text | body-color | ||
| Accent | accent | ||
| Muted text | muted | ||
| Border | border | ||
| Visual panel bg | vis-bg |
Decide in CSS px (HTML). Auto-converted to pt during PDF export.
| Element | CSS px | Note |
|---|---|---|
| Slide title | ||
| Bullet text | ||
| Header section label | ||
| Right panel title | ||
| Right panel body | ||
| Divider part number | ||
| Divider title | ||
| Divider description | ||
| Cover main title | ||
| Cover subtitle |
Save the decisions above as design_spec.md in the workspace.
Bundling CSS variables makes the HTML stage directly consumable:
:root {
--slide-bg: ; /* slide background */
--bg-dark: ; /* header / dark elements */
--accent-color: ; /* accent highlights */
--primary-color: ; /* title text */
--text-muted: ; /* muted / secondary text */
--border-color: ; /* borders */
--vis-bg: ; /* visual panel background */
--font-family: , serif; /* Korean-compatible font */
}
presentations/<project>/design_spec.md containing: layout decisions, 8-color palette table (with HEX/RGB), font family and size table, CSS variables block.
storyline — provides slide_deck.md that drives layout decisionshtml-build — consumes design_spec.md CSS variablesmeasure — uses font/color info from design_spec.md for PDF preparation