Sandbox
@gongnyang/deck-factory

Claude Code skill for editorial HTML decks

deck-factory gives Claude Code a deck design system for making presentation-grade HTML slides. You start with one sentence, then the skill applies its tokens, presets, and layout rules to produce a consistent editorial deck.

75 stars25 forksCSSUpdated 2mo ago
Who it's for

Builders who want Claude Code to turn a brief into a polished slide deck.

What it delivers

You can turn a one-line idea into a presentation-ready deck without hand-tuning every slide.

What it does

Dark and paper-light profiles

Uses a near-black default theme for keynote decks and a paper-light profile for reports and document-style briefs.

Editorial slide structure

Uses giant numbers, hairlines, and four-corner chrome instead of gray boxes and filler cards.

Quality gate

Includes deterministic checks for typography, structure, trust, data visualization, color, and alignment before a deck is promoted.

Real Chromium render

Layouts are built in HTML and CSS and rendered in a browser engine so export matches what you see.

Style presets

Includes presets like `apple`, `linear`, `notion`, `stripe`, `vercel`, `krds`, `toss-principles`, and `kr-pick`.

CJK-safe text handling

Adds line-breaking rules for Korean and other CJK text so words do not split badly.

README

English | 한국어

deck-factory

One line of intent → a presentation-grade dark/paper editorial HTML deck.

Stars License: MIT Claude Code Skill Made with Claude

deck-factory in motion

▶ Watch the full films: Hook · 30s · Making-of · 40s · Usage · 30s


What is this?

You know the pain: it's midnight before the review, and you're still nudging text boxes, fighting gray cards, and shrinking fonts nobody in the back row will read. deck-factory replaces that grind with a design system. Give it one sentence about what you want to say, and it builds the front-of-house — an editorial deck with giant numbers, four-corner chrome, hairline structure, and zero amateur boxes. Dark remains the keynote default; report, document, and print-oriented briefs switch to a paper-light profile.

The verified deliverable today: 12 premium slides + 3 motion-graphics films, all built from this design system. The full generation pipeline (below) is the roadmap that automates it end to end.

Quick start

# 1. Add the plugin marketplace
/plugin marketplace add kimsh-1/deck-factory

# 2. Install the skill
/plugin install deck-factory@deck-factory

# 3. Call it with one sentence
/deck-factory "Series A IR deck, 12 slides, why our retention curve wins"

# Document-style briefs auto-select the light profile
/deck-factory "Board report, 10 slides, Q2 retention analysis"

# Explicit overrides also work
/deck-factory "Proposal deck, 8 slides, profile: light"

Installation via the plugin marketplace is the intended path. The design system and skill are real and ready to use; the fully-automated one-command pipeline is being wired up (see How it works).

Features

Dark + paper-light profilesnear-black #08090A by default, paper #F7F4EC for document decks, lavender-blue accent family, Pretendard, giant stat numbers.
no_box · giant numbers · four-corner chromeno gray filler cards — structure comes from hairlines and a surface ladder. 120px+ stat numbers with value > label > context hierarchy.
Quality gate — by design47 deterministic checks across 6 weighted categories (typography, structure, trust, data-viz, color, alignment), a 90-point pass line, and 7 hard-fail thresholds. Autoscoring is calibration-pending; the gate is designed so a sub-grade deck can't quietly reach final.
Real Chromium renderslides are laid out in HTML/CSS and rendered by an actual browser engine — what you see is what exports.
Compact share PDF by defaultraw Chrome PDFs are archival; *-lite.pdf is the default shareable artifact.
8 style presetsapple · linear · notion · stripe · vercel · krds · toss-principles · kr-pick.
CJK-safekeep-all line-breaking and Hangul break rules — no text shattering mid-syllable.

Gallery

Twelve slides, one design system. This is the proof.

Slide 1Slide 2Slide 3
Slide 4Slide 5Slide 6
Show all 12 slides
Slide 7Slide 8Slide 9
Slide 10Slide 11Slide 12

How it works

Pipeline

The design system is here today. The pipeline below is the vision that turns one sentence into a finished deck automatically — a six-stage chain where each stage hands off a file the next one verifies:

  1. storyline — gather sources and claims from your one-line brief.
  2. copy — write action titles (declarative, ending in a period — never noun lists).
  3. compose — deterministically assemble slides from a fixed layout vocabulary (the model writes content; code owns coordinates, color, and z-order).
  4. grade — run the quality gate; anything below the pass line is quarantined as draft, never silently promoted.
  5. render — lay out and paint via a real Chromium engine.
  6. export — emit PNG / PDF / PPTX. Shareable PDFs default to a compact *-lite.pdf artifact.

Stages storyline through render/export exist as working code in the incubator; end-to-end autoscoring and the final polish pass are the remaining calibration work.

Design system

The whole look reduces to a few enforced tokens — the skill is the source of truth:

  • Canvas — dark uses --bg-0: #08090A (near-black, never pure black); light uses --bg-0: #F7F4EC (paper). Both use surface ladders and hairlines for depth instead of drop shadows.
  • Accent — lavender-blue #6E7BF2 and cyan #43C7F4, one accent moment per slide.
  • Ink#FFFFFF / #A1A1A6 / #6B6B70, a three-step foreground hierarchy.
  • Type — Pretendard, aggressive negative tracking on display, ≤ 3 font sizes per slide.
  • Structureno_box, alpha-white hairlines, four-corner chrome (brand chip · section · author · page), one dominant object per slide.

→ Full contract: skills/deck-factory/SKILL.md

Repository layout

deck-factory/
├── skills/deck-factory/     # the skill — SKILL.md + assets/styles.css
├── docs/
│   ├── media/               # hero.gif, pipeline.png
│   └── gallery/             # slide-01.jpg … slide-12.jpg
├── videos/                  # the three motion-graphics films
├── design/                  # DECK-STANDARD.md — the quality contract (SSOT)
└── incubator/               # pipeline code: deck-grader, deck-tokens, deck-editor

Customizing: pick a preset (/deck-factory "… preset: linear"), force a profile (/deck-factory "… profile: light"), or edit the token values in the skill's stylesheet to retune the palette. Presets change structure and signature devices; color always resolves through token variables.

Credits & license

Released under the MIT License.

  • FontPretendard (SIL Open Font License).
  • MotionGSAP and HyperFrames for the showcase films.

Built with Claude Code — powered by the deck-factory skill.

One line in. A deck worth presenting out.

Files in the repo

Repository payload10 top-level entries
  • .claude-plugin
  • docs
  • research
  • skills
  • vendor
  • work
  • .gitignore
  • LICENSE
  • README.ko.md
  • README.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop

86k