Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

codeck Design (slide visual generator)

The designer lane of codeck: reads deck.md, defines a validated design system, and assembles a single self-contained HTML presentation.

Design & UIAdvanced★ 198⑂ 19AI score 9/10Last updated: Aug 8, 2026

What it does

  • Reads deck.md (content) and diagnosis.md (assigned design role and expression challenge) to pick a visual direction.
  • Writes a full DESIGN.md archive — color, typography, spacing, shape and component tokens — and runs a validation script before any CSS is written.
  • Authors only custom.css and slides.html, then builds a self-contained title-rN.html on a fixed engine that already provides navigation, fragments, overview mode, speaker mode and mobile nav.
  • Extracts design signals from references (URLs, screenshots, brand sites): palette dominance, type characteristics, spatial rhythm, material and motion.
  • Handles image assets: crop, recolor, clean screenshots, generate or compose visuals, or skip raster entirely when CSS/SVG is more accurate.

Recommended for

  • codeck users who build presentations as HTML inside Claude Code.
  • Presenters who want browser-based decks with speaker notes, timer and overview mode instead of PPT.
  • Teams that want design decisions recorded as documents so revisions stay consistent.

Usage examples

  1. "Design the slides" → analyzes the deck's formal structure, proposes 2-3 visual directions, then generates DESIGN.md, CSS and HTML.
  2. "Match this brand's style" (URL or screenshot) → extracts palette, type feel and spacing rhythm and folds them into the skeleton.
  3. "Make slide 3 lighter" / "switch to a warm palette" → edits custom.css only and rebuilds the next revision HTML.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/hiyeshu/codeck/HEAD/skills/codeck-design/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/codeck-design folder from the GitHub repo hiyeshu/codeck into my ~/.claude/skills/codeck-design/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/hiyeshu/codeck.git && mkdir -p ~/.claude/skills && cp -r codeck/skills/* ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and go to a folder where you keep source code.
  2. Clone the repo: git clone https://github.com/hiyeshu/codeck.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy all codeck skills: cp -r codeck/skills/* ~/.claude/skills/ — this skill needs its sibling skills and scripts/ (engine, assemble, validate) to work.
  5. Restart Claude Code, open your presentation project folder, and run /codeck first to create the deck.md outline.
  6. Then say "design slides" or "generate the deck" to trigger this skill; the output lands at ./title-r1.html.
  7. If you see "codeck skill scripts not found", set export CODECK_SKILL_DIR=~/.claude/skills/codeck and retry.
View source on GitHub ↗License: MIT