Claude Code & Codex의 고충실도 HTML 디자인.

슬라이드 데크, 랜딩 페이지, 인터랙티브 프로토타입, 인터랙티브 해설, 애니메이션, 디자인 시스템 등 구조화된 디자인 사고와 내장된 품질 보호장치가 힘을 발휘합니다.

데모 · 예시 · 버그 보고

---

퀵 스타트

클로드 코드

설치 후 cc-design은 /cc-design:design 명령어로 활성화됩니다.

코덱스

설치 후 cc-design은 $cc-design 참조를 통해 활성화됩니다.

예시 프롬프트

CC-design은 맥락 수집, 설계 계획, 품질 검사, 검증을 담당합니다 — 당신이 계획을 승인하면 구축됩니다.

쇼케이스

능력

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