Codeck Design

Turns a content outline into a full HTML presentation with embedded CSS and slide engine. You invoke it when you want to go from structure to pixels. The interesting part is the "diagnosis" system: it reads your deck content, picks a designer archetype (Ravel, Caravaggio, Bach, Rams), then applies their formal logic to spacing, contrast, and rhythm instead of just slapping on a generic template. It handles visual references too, extracting color palettes and spatial patterns from URLs or screenshots you provide. The design lane owns all visual assets, so image work, cropping, and asset generation happen here without bouncing between skills. Built for the codeck presentation system, expects deck.md as input, writes out the assembled HTML.

skills.sh installs: 177
GitHub stars: 197
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hiyeshu/codeck --skill codeck-design --agent claude-code

Installs into .claude/skills of the current project.

Files

codeck design — @design lane

@design owns visual direction, validated design archive, design skeleton, HTML source, and assembled HTML.

Write boundaries:

May write $DECK_DIR/DESIGN.md, $DECK_DIR/custom.css, $DECK_DIR/slides.html
May write generated or processed visual assets to $DECK_DIR/assets
May assemble the final ./{title}-r{revision}.html in the user's project directory
May update $DECK_DIR/roles/design.md, $DECK_DIR/tasks/tasks.md, and $DECK_DIR/channel/YYYY-MM-DD.md
Must not rewrite deck.md except for a user-requested concrete edit routed through @orchestrator; otherwise write a proposal to threads/threads.md
Must not edit review.md, speech.md, or export files