promptschat
Gives Claude Code access to the prompts.chat library, letting you search, retrieve and improve AI prompt templates, and find and install Agent Skills from its registry.
2 skills2 agents2 commands1 MCP+3+2+2+2+1+1+1+1175k
@gh-fContent
Plugin
cc-design
Turns a request for a visual artifact into finished HTML, such as a slide deck, landing page, interactive prototype or animation, so you can skip hand-building each layout. Built-in quality checks keep the output consistent with a design system.
Plugin Signal50/100Fair
maintained48
capable14
documented100
adopted62
Claude Code
> /plugin marketplace add zeroz-lab/cc-design> /plugin install cc-design@cc-design
Codex
$ npx skills add zeroz-lab/cc-design -a codex
Cursor
$ npx skills add zeroz-lab/cc-design -a cursor
Gemini CLI
$ npx skills add zeroz-lab/cc-design -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add zeroz-lab/cc-design$ copilot plugin install cc-design@cc-design
OpenCode
$ npx skills add zeroz-lab/cc-design -a opencode
Windsurf
$ npx skills add zeroz-lab/cc-design -a windsurf
Stats
831
Stars
80
Forks
Maintained
Maintenance
JavaScript
Language
Last commit
Created
What's inside
README
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
| 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
Stars on GitHub
Momentum
- stars in total
- 831
File tree
Similar plugins.
@gh-fppt-master
A Claude Code skill for generating editable PPTX presentations and slides from a workflow, with reusable brand, style, layout, and deck workspaces, native charts, speaker notes, and template filling.
1 skill75k
@hugohe3officecli
Gives AI agents control over Word, Excel and PowerPoint files, with skills for building .docx reports, academic papers, Excel dashboards and Morph-style animated slides.
11 skills33k
@iofficeaifrontend-slides
A skill that builds animation-rich HTML presentations from scratch or converts PowerPoint files to web slides. Useful for anyone turning a deck into a web presentation.
1 skill32k
@zarazhangruiQuestions about cc-design.
Turns a request for a visual artifact into finished HTML, such as a slide deck, landing page, interactive prototype or animation, so you can skip hand-building each layout. Built-in quality checks keep the output consistent with a design system. Install it with the command on its page. It includes cc-design. Its skills do not fire on their own yet. Free and open source.
- What is cc-design?
- Turns a request for a visual artifact into finished HTML, such as a slide deck, landing page, interactive prototype or animation, so you can skip hand-building each layout. Built-in quality checks keep the output consistent with a design system.
- 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.
- Is cc-design free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use cc-design's skills?
- cc-design installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it