Summary

CC Design is a high-fidelity HTML design and prototype skill for AI agents, enabling them to function as expert product designers. It addresses the need for structured, context-aware design generation, benefiting users by streamlining the creation of polished UI artifacts, from wireframes to interactive prototypes and slide decks, by leveraging existing design systems and patterns.

How It Works

This project embeds a structured design workflow into AI environments like Claude Code, prioritizing "Context-first design" by reusing existing brand systems and component libraries. It employs "Progressive disclosure" to manage context window usage by loading technical references on demand. The workflow follows an Understand → Route → Acquire Context → Design Intent → Build → Verify → Deliver sequence, using a three-phase verification protocol (structural, visual, design excellence) via Playwright MCP for quality assurance.

Quick Start & Requirements

• Installation: Clone the repository: git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design.
• Dependencies: Requires Node.js, npm, and Playwright. Install export scripts with cd ~/.claude/skills/cc-design/scripts && npm install && cd -. Install Playwright browsers via npx playwright install chromium.
• Platform: Primarily targets Claude Code (CLI).

Highlighted Details

• Output Formats: Supports interactive prototypes, slide decks, landing pages, UI mockups, animated motion studies, wireframes, and design systems.
• Brand Style Cloning: Integrates 68+ brand design systems (e.g., Stripe, Vercel, Notion, Apple) loaded from getdesign.md.
• Design Patterns: Features a curated catalog of proven layout and component patterns with case studies.
• Verification: Employs a three-phase verification protocol (structural, visual, design excellence) using Playwright MCP.
• Export Options: Generates PPTX, PDF, and self-contained inline HTML artifacts.

Maintenance & Community

Contributions are welcomed via forking the repository and submitting pull requests. New technical content should be added to references/, case studies to references/case-studies/, and routing table entries updated in SKILL.md. No specific community links or roadmap details are provided.

Licensing & Compatibility

• License: MIT.
• Compatibility: Primarily targets Claude Code. Supported on OpenAI-compatible platforms via prompt metadata. The MIT license permits commercial use and linking with closed-source projects.

Limitations & Caveats

The skill's primary target platform is Claude Code, with other AI platform compatibility relying on prompt metadata configuration. Specific details regarding alpha/beta status, known bugs, or performance benchmarks beyond the described features are not elaborated upon in the README.