cc-design
High-fidelity HTML design for Claude Code & Codex.
Slide decks, landing pages, interactive prototypes, 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"
"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
| Category | What you get |
|---|
| Design outputs | Landing pages, slide decks, interactive prototypes, wireframes, animations, design systems, motion studies |
| Design thinking | 8-layer framework (Goal → Validation), 10 core principles, 20 philosophy schools |
| Brand cloning | Progressive loading of 68+ brand design systems from getdesign.md |
| Quality guardrails | Anti-AI slop rules, typography system, spacing scale, mandatory screenshot verification |
| Variations | 3+ design directions across layout, interaction, visual intensity, and motion |
| Export | PDF (multi-file + single-file), PPTX (image + editable), MP4 video, inline HTML |
| Audio | Dual-track audio (SFX + BGM), 37 SFX catalog, ffmpeg mixing |
| Design review | 5-dimension scoring: philosophy, hierarchy, craft, functionality, originality |
| Animation | Stage+Sprite timeline engine, easing library, signal protocol, pitfall guardrails |
| Prototyping | React + Babel inline JSX, device frames (iOS, Android, macOS, browser) |
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
- Understand — cc-design asks targeted questions to lock the output type, audience, and constraints
- Plan — presents a visible execution plan with goals, facts, and assumptions
- Approve — you approve before any code is written
- Build — per-section preview pattern; you approve section by section
- Verify — three-phase self-check (structural, visual, design excellence)
- Deliver — screenshot-verified artifact ready to use