cc-design

Name: cc-design
Author: zeroz-lab

byzeroz-lab· 2 skills

Stars

817

Forks

How to install cc-design?

zeroz-lab/cc-design

$npx -y skills add zeroz-lab/cc-design --skill cc-design

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/zeroz-lab/cc-design" --skill "zeroz-lab/cc-design"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/zeroz-lab/cc-design" that are relevant to the current task. Run `npx skills add "https://github.com/zeroz-lab/cc-design"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# cc-design
2
3	High-fidelity HTML design for Claude Code & Codex.
4
5	Slide decks, landing pages, interactive prototypes, interactive explainers, animations, design systems, and more — powered by structured design thinking and built-in quality guardrails.
6
7	[Demo](https://cc-design-demo.vercel.app) · [Examples](./EXAMPLES.md) · [Report Bug](https://github.com/ZeroZ-lab/cc-design/issues)
8
9	---
10
11	## Quick Start
12
13	### Claude Code
14
15	```bash
16	# 1. Add the cc-design marketplace
17	/plugin marketplace add ZeroZ-lab/cc-design
18
19	# 2. Install the plugin
20	/plugin install cc-design@cc-design
21
22	# 3. Reload plugins to activate
23	/reload-plugins
24	```
25
26	After installation, cc-design activates via `/cc-design:design` command.
27
28	### Codex
29
30	```bash
31	# 1. Add the cc-design marketplace from GitHub
32	/plugin marketplace add ZeroZ-lab/cc-design
33
34	# 2. Install the plugin
35	/plugin install cc-design@cc-design
36
37	# 3. Reload plugins to activate
38	/reload-plugins
39	```
40
41	After installation, cc-design activates via `$cc-design` reference.
42
43	### Example prompts
44
45	```
46	"Design a landing page for our SaaS product"
47	"Create a 10-slide pitch deck for the Q3 board meeting"
48	"Build an interactive prototype of the checkout flow"
49	"Create an interactive explainer showing how our RAG pipeline works"
50	"Make a comparison explainer for React vs Vue"
51	"Build a decision tree for tech stack selection"
52	"Animate this logo reveal with the Pentagram style"
53	"Export the deck as editable PPTX"
54	```
55
56	cc-design handles context gathering, design planning, quality checks, and verification — you approve the plan, it builds.
57
58	## Showcase
59
60	[![Demo Gallery](./screenshots/previews/cc-design-home-preview.png)](./screenshots/previews/cc-design-home-preview.png)
61
62	<p align="center">
63	<a href="./screenshots/previews/cc-design-enterprise-preview.png"><img src="./screenshots/previews/cc-design-enterprise-preview.png" alt="Enterprise Hero" width="32%"></a>
64	<a href="./screenshots/previews/cc-design-scifi-preview.png"><img src="./screenshots/previews/cc-design-scifi-preview.png" alt="Sci-Fi Website" width="32%"></a>
65	<a href="./screenshots/previews/cc-design-tesla-preview.png"><img src="./screenshots/previews/cc-design-tesla-preview.png" alt="Tesla 3D" width="32%"></a>
66	</p>
67	<p align="center">
68	<a href="./screenshots/previews/cc-design-aether-preview.png"><img src="./screenshots/previews/cc-design-aether-preview.png" alt="AETHER" width="32%"></a>
69	<a href="./screenshots/previews/cc-design-glass-preview.png"><img src="./screenshots/previews/cc-design-glass-preview.png" alt="Glass Dashboard" width="32%"></a>
70	<a href="./screenshots/previews/cc-design-banking-preview.png"><img src="./screenshots/previews/cc-design-banking-preview.png" alt="Banking App" width="32%"></a>
71	</p>
72
73	## Capabilities
74
75	\| Category \| What you get \|
76	\|---\|---\|
77	\| Design outputs \| Landing pages, slide decks, interactive prototypes, interactive explainers (flow, compare, decision tree), wireframes, animations, design systems, motion studies \|
78	\| Design thinking \| 8-layer framework (Goal → Validation), 10 core principles, 20 philosophy schools \|
79	\| Brand cloning \| Progressive loading of 68+ brand design systems from [getdesign.md](https://getdesign.md) \|
80	\| 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 \|
81	\| Variations \| 3+ design directions across layout, interaction, visual intensity, and motion \|
82	\| Export \| PDF (multi-file + single-file), PPTX (image + editable), MP4 video, inline HTML \|
83	\| Audio \| Dual-track audio (SFX + BGM), 37 SFX catalog, ffmpeg mixing \|
84	\| Design review \| 5-dimension scoring: philosophy, hierarchy, craft, functionality, originality \|
85	\| Animation \| Stage+Sprite timeline engine, easing library, Seek-First numerical verification (`__seek` + `getComputedStyle`), signal protocol, pitfall guardrails \|
86	\| Prototyping \| React + Babel inline JSX, device frames (iOS, Android, macOS, browser) \|
87
88	## Design Styles
89
90	Mention a philosophy school to set the direction:
91
92	```
93	"Use the Pentagram style for this infographic"
94	"Apply Experimental Jetset minimalism to this poster"
95	"Mix Takram restraint with Locomotive motion for the hero"
96	```
97
98	20 schools across 5 traditions — Information Architects, Motion Poets, Minimalists, Experimental Vanguard, Eastern Philosophy. See `references/design-styles.md`.
99
100	### Brand Style Cloning
101
102	Mention a brand name to load its design system:
103
104	```
105	"Create a pricing page with Stripe's aesthetic"
106	"Notion-style kanban board"
107	"Mix Vercel's minimalism with Linear's purple accents"
108	```
109
110	## How It Works
111
112	```
113	Understand → Route → Plan → Approve → Build → Verify → Deliver
114	```
115
116	1. Understand — cc-design asks targeted questions to lock the output type, audience, and constraints
117	2. Plan — presents a visible execution plan with goals, facts, and assumptions
118	3. Approve — you approve before any code is written
119	4. Build — per-section prev

6 picks

Type

Run `npx skills use "https://github.com/zeroz-lab/cc-design" --skill "zeroz-lab/cc-design"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/zeroz-lab/cc-design" that are relevant to the current task. Run `npx skills add "https://github.com/zeroz-lab/cc-design"` and select the relevant skills, then follow their instructions.

cc-design

How to install cc-design?

Related

cc-design

How to install cc-design?

Related