Content
Plugin
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.
Plugin Signal65/100Solid
maintained81
capable23
documented100
adopted62
Install on Claude Code
> /plugin marketplace add zeroz-lab/cc-design> /plugin install cc-design@cc-design
Stats
821
Stars
83
Forks
Maintained
Maintenance
JavaScript
Language
1mo ago
Last commit
3mo ago
Created
Repo: zeroz-lab/cc-design
What's inside
Skills
2/cc-designHigh-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use/cc-designHigh-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use
README
1cc-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
| Category | What you get |
|---|---|
| Design outputs | Landing pages, slide decks, interactive prototypes, interactive explainers (flow, compare, decision tree), 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 | Always-loaded core-constraints.md layer (Iron Law + 12-item anti-slop quick-ref + delivery checklist), 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, Seek-First numerical verification (__seek + getComputedStyle), 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
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
| Platform | Activation | Integration |
|---|---|---|
| Claude Code | /design command | Commands + SKILL.md |
| Codex / OpenAI | $cc-design reference | agents/openai.yaml |
Contributing
- Fork the repo, create a feature branch
- Keep
SKILL.mdunder 200 lines — move technical content toreferences/ - Add new references to
load-manifest.jsonand the routing table inSKILL.md - Run
node scripts/lint-load-manifest.mjsandnode scripts/generate-bundle-catalog.mjs - If changing first-turn behavior: update
VERSION,SKILL.md,README.md,references/workflow.md, then run./scripts/check-behavior-contract.sh <base-ref>
License
MIT
File tree
367zeroz-lab/cc-designView on GitHub
.agents/
plugins/
marketplace.json
.claude-plugin/
marketplace.json
plugin.json
.codex-plugin/
plugin.json
.gitignore
agents/
openai.yaml
assets/
bgm-ad.mp3
bgm-educational.mp3
bgm-tech-alt.mp3
bgm-tech.mp3
bgm-tutorial-alt.mp3
bgm-tutorial.mp3
CHECKSUMS.sha256
personal-asset-index.example.json
sfx/
CHECKSUMS.sha256
container/
card-flip.mp3
card-snap.mp3
modal-open.mp3
stack-collapse.mp3
feedback/
achievement.mp3
error-tone.mp3
notification-pop.mp3
success-chime.mp3
impact/
brand-stamp.mp3
drop-thud.mp3
logo-reveal-v2.mp3
logo-reveal.mp3
keyboard/
delete-key.mp3
enter.mp3
space-tap.mp3
type-fast.mp3
type.mp3
magic/
ai-process.mp3
sparkle.mp3
transform.mp3
progress/
complete-done.mp3
generate-start.mp3
loading-tick.mp3
terminal/
command-execute.mp3
cursor-blink.mp3
output-appear.mp3
transition/
dissolve.mp3
slide-in.mp3
swipe-horizontal.mp3
whoosh-fast.mp3
whoosh.mp3
ui/
click-soft.mp3
click.mp3
focus.mp3
hover-subtle.mp3
tap-finger.mp3
toggle-on.mp3
CLAUDE.md
docs/
brainstorm-interactive-explainer.md
features/
20260426-audio-system/
01-spec.md
02-plan.md
20260427-plugin-hooks/
01-spec.md
02-plan.md
20260511-explainer-extensions/
01-spec.md
02-design.md
03-plan.md
design-review-comments.md
external-scan-results.md
plan-ceo-review.md
plan-design-review.md
plan-eng-review.md
plan-security-review.md
scout-ceo-feedback.md
scout-design-feedback.md
scout-eng-feedback.md
20260511-interactive-explainer/
01-spec.md
02-design.md
03-plan.md
design-review-comments.md
external-scan-results.md
plan-design-review.md
plan-eng-review.md
scout-ceo-feedback.md
scout-design-feedback.md
20260518-animation-verification/
01-spec.md
02-design.md
03-plan.md
04-review.md
05-ship.md
state.json
idea-brief.md
plugin-publishing.md
superpowers/
plans/
2026-07-04-cc-design-skill-optimization.md
specs/
2026-07-04-cc-design-skill-optimization-design.md
timeline.md
EXAMPLES.md
load-manifest.json
plugins/
cc-design/
.claude-plugin/
plugin.json
.codex-plugin/
plugin.json
agents/
openai.yaml
assets/
bgm-ad.mp3
bgm-educational.mp3
bgm-tech-alt.mp3
bgm-tech.mp3
bgm-tutorial-alt.mp3
bgm-tutorial.mp3
CHECKSUMS.sha256
personal-asset-index.example.json
sfx/
CHECKSUMS.sha256
container/
card-flip.mp3
card-snap.mp3
modal-open.mp3
stack-collapse.mp3
feedback/
achievement.mp3
error-tone.mp3
notification-pop.mp3
success-chime.mp3
impact/
brand-stamp.mp3
drop-thud.mp3
logo-reveal-v2.mp3
logo-reveal.mp3
keyboard/
delete-key.mp3
enter.mp3
space-tap.mp3
type-fast.mp3
type.mp3
magic/
ai-process.mp3
sparkle.mp3
transform.mp3
progress/
complete-done.mp3
generate-start.mp3
loading-tick.mp3
terminal/
command-execute.mp3
cursor-blink.mp3
output-appear.mp3
transition/
dissolve.mp3
slide-in.mp3
swipe-horizontal.mp3
whoosh-fast.mp3
whoosh.mp3
ui/
click-soft.mp3
click.mp3
focus.mp3
hover-subtle.mp3
tap-finger.mp3
toggle-on.mp3
EXAMPLES.md
load-manifest.json
README.md
references/
animation-best-practices.md
animation-pitfalls.md
animations.md
anti-patterns/
color.md
interaction.md
layout.md
typography.md
asset-acquisition.md
audio-design-rules.md
brand-emotion-theory.md
case-studies/
mobile-apps/
ios-onboarding.md
presentations/
keynote-style.md
pitch-deck-example.md
product-pages/
linear-features.md
notion-landing.md
stripe-homepage.md
README.md
color-theory.md
content-guidelines.md
core-constraints.md
critique-guide.md
data-visualization.md
design-adr.md
design-checklist.md
design-common-sayings.md
design-context.md
design-excellence.md
design-handoff.md
design-iron-law.md
design-patterns.md
design-philosophy.md
design-principles.md
design-red-flags.md
design-styles.md
design-system-creation.md
design-thinking-framework.md
editable-pptx.md
exit-conditions.md
explainer-interaction-patterns.md
explainer-node-graph-visuals.md
failure-mode-handling.md
form-design.md
frontend-design.md
getdesign-loader.md
information-design-theory.md
interaction-design-theory.md
interactive-prototype.md
junior-designer-mode.md
knowledge-artifact-spec.md
layout-systems.md
motion-contract.md
platform-tools.md
principle-review.md
react-setup.md
responsive-design.md
scene-templates.md
sfx-library.md
slide-decks.md
starter-components.md
system-design-theory.md
tweaks-system.md
typography-design-system.md
typography-spacing-examples.md
typography-spacing-quick-ref.md
usability-testing.md
user-research-methods.md
ux-writing.md
verification-protocol.md
video-export.md
visual-design-theory.md
workflow.md
scripts/
add-music.sh
add-sfx-to-video.sh
check-behavior-contract.sh
convert-formats.sh
export_deck_pdf.mjs
export_deck_pptx.mjs
export_deck_stage_pdf.mjs
generate-bundle-catalog.mjs
html2pptx.js
lib/
parse_args.js
lint-load-manifest.mjs
package.json
render-video.js
resolve-load-bundles.mjs
super_inline_html.js
skills/
cc-design/
SKILL.md
templates/
android_frame.jsx
animations.jsx
audio-controls.jsx
audio-engine.jsx
browser_window.jsx
compare_explainer.jsx
decision_tree.jsx
deck_stage.js
design_canvas.jsx
flow_explainer.jsx
ios_frame.jsx
macos_window.jsx
typography-system.css
VERSION
README.md
references/
animation-best-practices.md
animation-pitfalls.md
animations.md
anti-patterns/
color.md
interaction.md
layout.md
typography.md
asset-acquisition.md
audio-design-rules.md
brand-emotion-theory.md
case-studies/
creative-works/
portfolio-site.md
mobile-apps/
android-dashboard.md
ios-onboarding.md
presentations/
data-story.md
keynote-style.md
pitch-deck-example.md
product-pages/
linear-features.md
notion-landing.md
stripe-homepage.md
README.md
color-theory.md
content-guidelines.md
core-constraints.md
critique-guide.md
data-visualization.md
design-adr.md
design-checklist.md
design-common-sayings.md
design-context.md
design-excellence.md
design-handoff.md
design-iron-law.md
design-patterns.md
design-philosophy.md
design-principles.md
design-red-flags.md
design-styles.md
design-system-creation.md
design-thinking-framework.md
editable-pptx.md
exit-conditions.md
explainer-interaction-patterns.md
explainer-node-graph-visuals.md
failure-mode-handling.md
form-design.md
frontend-design.md
getdesign-loader.md
information-design-theory.md
interaction-design-theory.md
interactive-prototype.md
junior-designer-mode.md
knowledge-artifact-spec.md
layout-systems.md
motion-contract.md
platform-tools.md
principle-review.md
question-first-delivery-examples.md
react-setup.md
responsive-design.md
scene-templates.md
sfx-library.md
slide-decks.md
starter-components.md
system-design-theory.md
tweaks-system.md
typography-design-system.md
typography-spacing-examples.md
typography-spacing-quick-ref.md
usability-testing.md
user-research-methods.md
ux-writing.md
verification-protocol.md
video-export.md
visual-design-theory.md
workflow.md
screenshots/
previews/
cc-design-aether-preview.png
cc-design-banking-preview.png
cc-design-enterprise-preview.png
cc-design-glass-preview.png
cc-design-home-preview.png
cc-design-llm-sketch-preview.png
cc-design-mars-preview.png
cc-design-mechops-preview.png
cc-design-retro-preview.png
cc-design-scifi-preview.png
cc-design-spacex-preview.png
cc-design-tesla-preview.png
cc-design-thermo-preview.png
scripts/
add-music.sh
add-sfx-to-video.sh
check-behavior-contract.sh
... 34 moreFAQ
cc-design is a Claude Code plugin with 2 hand-picked skills for content work, indexed on Flowy. Install it with the command on its page. It includes cc-design, cc-design. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is 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.
- How do I install cc-design?
- Run these in Claude Code: /plugin marketplace add zeroz-lab/cc-design then /plugin install cc-design@cc-design. Then prompt normally.
- Does cc-design auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is cc-design free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.