cc-design

High-fidelity HTML design for Claude Code & Codex.

Slide decks, landing pages, interactive prototypes, interactive explainers, animations, design systems, and more — powered by structured design thinking and built-in quality guardrails.

Demo · Examples · Report Bug

Quick Start

Claude Code

# 1. Add the cc-design marketplace
/plugin marketplace add ZeroZ-lab/cc-design

# 2. Install the plugin
/plugin install cc-design@cc-design

# 3. Reload plugins to activate
/reload-plugins

After installation, cc-design activates via /cc-design:design command.

Codex

# 1. Add the cc-design marketplace from GitHub
/plugin marketplace add ZeroZ-lab/cc-design

# 2. Install the plugin
/plugin install cc-design@cc-design

# 3. Reload plugins to activate
/reload-plugins

After installation, cc-design activates via $cc-design reference.

Example prompts

"Design a landing page for our SaaS product"
"Create a 10-slide pitch deck for the Q3 board meeting"
"Build an interactive prototype of the checkout flow"
"Create an interactive explainer showing how our RAG pipeline works"
"Make a comparison explainer for React vs Vue"
"Build a decision tree for tech stack selection"
"Animate this logo reveal with the Pentagram style"
"Export the deck as editable PPTX"

cc-design handles context gathering, design planning, quality checks, and verification — you approve the plan, it builds.

Showcase

Capabilities

Design Styles

Mention a philosophy school to set the direction:

"Use the Pentagram style for this infographic"
"Apply Experimental Jetset minimalism to this poster"
"Mix Takram restraint with Locomotive motion for the hero"

20 schools across 5 traditions — Information Architects, Motion Poets, Minimalists, Experimental Vanguard, Eastern Philosophy. See references/design-styles.md.

Brand Style Cloning

Mention a brand name to load its design system:

"Create a pricing page with Stripe's aesthetic"
"Notion-style kanban board"
"Mix Vercel's minimalism with Linear's purple accents"

How It Works

Understand → Route → Plan → Approve → Build → Verify → Deliver

1. Understand — cc-design asks targeted questions to lock the output type, audience, and constraints
2. Plan — presents a visible execution plan with goals, facts, and assumptions
3. Approve — you approve before any code is written
4. Build — per-section preview pattern; you approve section by section
5. Verify — three-phase self-check (structural, visual, design excellence)
6. Deliver — screenshot-verified artifact ready to use

Key behavioral guarantees:

• Never builds without an approved plan
• Never delivers without screenshot verification
• Never uses AI slop patterns (banned gradients, emoji spam, generic layouts)
• Follow-ups and minor edits skip the full discovery flow

Optional Dependencies

Core installation has no extra dependencies. For export features:

# Playwright browser (for export and verification)
npx playwright install chromium

# Video and audio export
brew install ffmpeg          # macOS
sudo apt install ffmpeg      # Ubuntu/Debian
choco install ffmpeg         # Windows

Platform Integration

Contributing

1. Fork the repo, create a feature branch
2. Keep SKILL.md under 200 lines — move technical content to references/
3. Add new references to load-manifest.json and the routing table in SKILL.md
4. Run node scripts/lint-load-manifest.mjs and node scripts/generate-bundle-catalog.mjs
5. If changing first-turn behavior: update VERSION, SKILL.md, README.md, references/workflow.md, then run ./scripts/check-behavior-contract.sh

License

MIT