# cc-design: A Structured HTML Design and Prototype Plugin for Claude Code

> cc-design is a plugin for Claude Code and Codex that guides an AI agent through producing high-fidelity HTML designs using a seven-step approval workflow, twenty design philosophy schools, and built-in quality guardrails. It covers landing pages, slide decks, interactive prototypes, explainers, animations, and design systems.

**ZeroZ-lab/cc-design** — High-fidelity HTML design and prototype guidance skill for AI agents

- Repository: https://github.com/ZeroZ-lab/cc-design
- Stars: 829 · Forks: 80
- Language: JavaScript
- License: not declared
- Published: 2026-09-10 · Updated: 2026-09-10 · Language: en
- Canonical page: https://hysenlabs.com/projects/zeroz-lab-cc-design

## What cc-design Does Inside Claude Code

cc-design is a plugin that loads a structured design instruction layer into a Claude Code or Codex session. Once installed, it responds to the /cc-design:design command in Claude Code or the $cc-design reference in Codex. The agent then applies a set of design frameworks, quality rules, and export workflows that are not part of Claude Code's default behavior.

The outputs it targets include landing pages, slide decks, interactive prototypes, interactive explainers (flow diagrams, comparison pages, decision trees), wireframes, animations, and design systems. The README also lists motion studies as an output type. All outputs are HTML, either inline or as multi-file artifacts. Export to PDF, PPTX, and MP4 video is available through optional dependencies.

The core claim of cc-design is that the quality of AI-generated HTML design improves when the agent works from a structured plan rather than generating code immediately. This is why the plugin enforces a plan-and-approve cycle: the agent asks questions, proposes a plan, waits for approval, then builds section by section. Screenshot verification runs before delivery.

## The Seven-Step Workflow: Understand, Plan, Approve, Build, Verify, Deliver

The README documents the cc-design workflow as seven steps: Understand, Route, Plan, Approve, Build, Verify, and Deliver. Each step has a defined gate.

In the Understand step, the agent asks targeted questions to identify the output type, target audience, and constraints. In Route, it selects the appropriate workflow branch (slide deck vs. landing page vs. prototype, for example). In Plan, it presents a visible execution plan with goals, facts, and assumptions for the user to review. Nothing is coded until the user approves the plan.

In Build, the agent follows a per-section preview pattern: it builds one section, the user approves it, then moves to the next. This means errors can be caught section by section rather than after the entire page is generated. The Verify step runs a three-phase self-check covering structural correctness, visual accuracy, and design excellence criteria. Deliver produces a screenshot-verified artifact.

The README lists three behavioral guarantees: the agent never builds without an approved plan, never delivers without screenshot verification, and never uses a list of banned design patterns the documentation calls AI slop patterns, which includes generic gradient backgrounds, emoji spam, and generic layouts.

Follow-ups and minor edits skip the full discovery flow. Once a page is established, the agent can receive incremental change requests without restarting the Understand step.

## Installing cc-design and Its Optional Dependencies

Installation requires three commands inside Claude Code:

```bash
/plugin marketplace add ZeroZ-lab/cc-design
/plugin install cc-design@cc-design
/reload-plugins
```

The same three-step sequence applies for Codex. After installation and reload, the plugin is active. The README notes that the core installation has no external dependencies.

For export features, Playwright must be installed for screenshot verification and PDF or HTML export:

```bash
npx playwright install chromium
```

For video and audio export, ffmpeg is required. Installation varies by platform:

```bash
brew install ffmpeg
```

On Ubuntu or Debian, the equivalent is:

```bash
sudo apt install ffmpeg
```

On Windows:

```bash
choco install ffmpeg
```

Without Playwright, the Verify step cannot take screenshots, so the delivery guarantee about screenshot verification cannot be met. Without ffmpeg, the audio mixing pipeline and MP4 export are unavailable. The HTML output itself works without either dependency.

## Twenty Design Philosophy Schools and Brand Style Cloning

cc-design includes a references/design-styles.md file that defines twenty design philosophy schools across five traditions: Information Architects, Motion Poets, Minimalists, Experimental Vanguard, and Eastern Philosophy. A user can invoke any school by name in a prompt: the README examples include Pentagram style, Experimental Jetset minimalism, Takram restraint, and Locomotive motion.

Brand style cloning is handled through progressive loading of over sixty design systems from getdesign.md. Mentioning a brand name in a prompt causes the agent to load that brand's design system. The README examples include Stripe aesthetic, Notion-style layouts, Vercel minimalism, and Linear's purple accents.

The 8-layer design thinking framework runs from Goal (what outcome the design achieves) through Validation (verifying the design actually achieves it). The README does not expand on all eight layers but lists them as part of the quality structure that drives the Plan step.

v0.dev by Vercel is a comparable tool for text-to-UI generation. It generates React and Next.js components from text prompts and runs as a web service outside the editor. cc-design differs in that it generates HTML rather than React components, runs inside Claude Code or Codex without leaving the development environment, and applies the structured approval workflow rather than generating output in one pass.

## Quality Guardrails and the Anti-Slop Layer

The README describes an always-loaded core-constraints.md layer that contains what it calls an Iron Law, a 12-item anti-slop quick-reference, and a delivery checklist. The anti-slop rules prohibit a specific set of design patterns that AI systems tend to default to: generic gradient backgrounds, emoji spam, and non-specific layouts that look like template output rather than purposeful design.

Animation is handled through a Stage+Sprite timeline engine with an easing library. The Seek-First numerical verification method uses a __seek internal marker and getComputedStyle to verify that animated properties compute to the expected values before delivery. This addresses a common failure mode in AI-generated animations where the code looks correct but the visual output does not match the intent.

Prototyping support includes React with Babel inline JSX, which means the agent can generate interactive React prototypes as self-contained HTML files without requiring a build step. Device frames for iOS, Android, macOS, and browser viewports are available for wrapping prototype output.

Design review uses a five-dimension scoring system: philosophy, hierarchy, craft, functionality, and originality. The README describes this as part of the Verify step, not as a separate manual review process.

## What cc-design Is Not Good For

cc-design produces HTML files. It is not a source of production-ready components for a React or Vue application, nor does it produce design tokens or component libraries in a format that integrates with Figma, Storybook, or a CSS-in-JS system. Engineers who need an output that slots directly into an existing component architecture will need to adapt or rewrite the generated HTML.

The plugin depends on Claude Code's plugin system. As Claude Code's plugin API evolves, the behavior of cc-design will depend on whether the SKILL.md instruction layer remains compatible with the current plugin loader. The README includes a check-behavior-contract.sh script and version tracking to manage this, and the contribution rules require updating VERSION, SKILL.md, and README.md together when first-turn behavior changes. This is a maintenance surface that pure npm packages do not have.

For designers who prefer to work in a visual canvas, cc-design is entirely text-driven. All design direction comes through prompts, and there is no visual editor for adjusting spacing, color, or layout after generation. Adjustments require follow-up prompts.

## Maintenance Status and License

The repository is not archived. The last push was on 2026-07-04. The repository has no GitHub releases. The README states the license is MIT. The top-level structure includes a SKILL.md file (the core instruction layer), a VERSION file for behavior tracking, a load-manifest.json that routes references to content files, and a references/ directory holding design-styles.md and other reference documents. The scripts/ directory holds lint-load-manifest.mjs and generate-bundle-catalog.mjs for maintaining the plugin's internal structure.

## Conclusion

cc-design suits engineers and product teams who are already using Claude Code or Codex and want to generate polished HTML deliverables, prototypes, or slide decks without switching to a separate design tool or service. It is not suited for teams who need production React components that integrate into a component library, or who want to design in a visual canvas rather than through text prompts. Before adopting it, check that the SKILL.md instruction layer is compatible with your Claude Code version, since the plugin's behavior depends on that instruction file being loaded correctly.

## FAQ

### Does cc-design work with Claude Code?

Yes. After installation with /plugin marketplace add ZeroZ-lab/cc-design, /plugin install cc-design@cc-design, and /reload-plugins, cc-design activates via the /cc-design:design command inside Claude Code.

### What types of HTML output can cc-design produce?

According to the README, cc-design can produce landing pages, slide decks, interactive prototypes, interactive explainers, wireframes, animations, and design systems. Export to PDF, PPTX, and MP4 video is available when Playwright and ffmpeg are installed.

### What happens if I skip the approval step in cc-design?

The README states that cc-design never builds without an approved plan: the Approve step is a hard gate in the workflow. The agent will not generate code until the user confirms the plan presented at the end of the Plan step.

## Sources

- [Issues](https://github.com/ZeroZ-lab/cc-design/issues)
- [README](https://github.com/ZeroZ-lab/cc-design/blob/master/README.md)
- [ZeroZ-lab/cc-design on GitHub](https://github.com/ZeroZ-lab/cc-design)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/zeroz-lab-cc-design