{"id":50057537,"url":"https://github.com/ZeroZ-lab/cc-design","last_synced_at":"2026-05-25T13:01:44.346Z","repository":{"id":352329929,"uuid":"1214741287","full_name":"ZeroZ-lab/cc-design","owner":"ZeroZ-lab","description":"High-fidelity HTML design and prototype guidance skill for AI agents","archived":false,"fork":false,"pushed_at":"2026-05-11T14:16:34.000Z","size":47689,"stargazers_count":757,"open_issues_count":1,"forks_count":78,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-05-11T16:19:52.447Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZeroZ-lab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-19T01:35:57.000Z","updated_at":"2026-05-11T14:21:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ZeroZ-lab/cc-design","commit_stats":null,"previous_names":["zeroz-lab/cc-design"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ZeroZ-lab/cc-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeroZ-lab%2Fcc-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeroZ-lab%2Fcc-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeroZ-lab%2Fcc-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeroZ-lab%2Fcc-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZeroZ-lab","download_url":"https://codeload.github.com/ZeroZ-lab/cc-design/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeroZ-lab%2Fcc-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33475746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T06:32:55.349Z","status":"ssl_error","status_checked_at":"2026-05-25T06:32:35.322Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-21T15:00:44.304Z","updated_at":"2026-05-25T13:01:44.331Z","avatar_url":"https://github.com/ZeroZ-lab.png","language":"JavaScript","funding_links":[],"categories":["AI开源项目","🧠 Agent Skills"],"sub_categories":["AI 工具"],"readme":"# cc-design\n\n**High-fidelity HTML design for Claude Code \u0026 Codex.**\n\nSlide decks, landing pages, interactive prototypes, interactive explainers, animations, design systems, and more — powered by structured design thinking and built-in quality guardrails.\n\n[Demo](https://cc-design-demo.vercel.app) · [Examples](./EXAMPLES.md) · [Report Bug](https://github.com/ZeroZ-lab/cc-design/issues)\n\n---\n\n## Quick Start\n\n### Claude Code\n\n```bash\n# 1. Add the cc-design marketplace\n/plugin marketplace add ZeroZ-lab/cc-design\n\n# 2. Install the plugin\n/plugin install cc-design@cc-design\n\n# 3. Reload plugins to activate\n/reload-plugins\n```\n\nAfter installation, cc-design activates via `/cc-design:design` command.\n\n### Codex\n\n```bash\n# 1. Add the cc-design marketplace from GitHub\n/plugin marketplace add ZeroZ-lab/cc-design\n\n# 2. Install the plugin\n/plugin install cc-design@cc-design\n\n# 3. Reload plugins to activate\n/reload-plugins\n```\n\nAfter installation, cc-design activates via `$cc-design` reference.\n\n### Example prompts\n\n```\n\"Design a landing page for our SaaS product\"\n\"Create a 10-slide pitch deck for the Q3 board meeting\"\n\"Build an interactive prototype of the checkout flow\"\n\"Create an interactive explainer showing how our RAG pipeline works\"\n\"Make a comparison explainer for React vs Vue\"\n\"Build a decision tree for tech stack selection\"\n\"Animate this logo reveal with the Pentagram style\"\n\"Export the deck as editable PPTX\"\n```\n\ncc-design handles context gathering, design planning, quality checks, and verification — you approve the plan, it builds.\n\n## Showcase\n\n[![Demo Gallery](./screenshots/previews/cc-design-home-preview.png)](./screenshots/previews/cc-design-home-preview.png)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./screenshots/previews/cc-design-enterprise-preview.png\"\u003e\u003cimg src=\"./screenshots/previews/cc-design-enterprise-preview.png\" alt=\"Enterprise Hero\" width=\"32%\"\u003e\u003c/a\u003e\n  \u003ca href=\"./screenshots/previews/cc-design-scifi-preview.png\"\u003e\u003cimg src=\"./screenshots/previews/cc-design-scifi-preview.png\" alt=\"Sci-Fi Website\" width=\"32%\"\u003e\u003c/a\u003e\n  \u003ca href=\"./screenshots/previews/cc-design-tesla-preview.png\"\u003e\u003cimg src=\"./screenshots/previews/cc-design-tesla-preview.png\" alt=\"Tesla 3D\" width=\"32%\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./screenshots/previews/cc-design-aether-preview.png\"\u003e\u003cimg src=\"./screenshots/previews/cc-design-aether-preview.png\" alt=\"AETHER\" width=\"32%\"\u003e\u003c/a\u003e\n  \u003ca href=\"./screenshots/previews/cc-design-glass-preview.png\"\u003e\u003cimg src=\"./screenshots/previews/cc-design-glass-preview.png\" alt=\"Glass Dashboard\" width=\"32%\"\u003e\u003c/a\u003e\n  \u003ca href=\"./screenshots/previews/cc-design-banking-preview.png\"\u003e\u003cimg src=\"./screenshots/previews/cc-design-banking-preview.png\" alt=\"Banking App\" width=\"32%\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Capabilities\n\n| Category | What you get |\n|---|---|\n| **Design outputs** | Landing pages, slide decks, interactive prototypes, interactive explainers (flow, compare, decision tree), wireframes, animations, design systems, motion studies |\n| **Design thinking** | 8-layer framework (Goal → Validation), 10 core principles, 20 philosophy schools |\n| **Brand cloning** | Progressive loading of 68+ brand design systems from [getdesign.md](https://getdesign.md) |\n| **Quality guardrails** | Anti-AI slop rules, typography system, spacing scale, mandatory screenshot verification |\n| **Variations** | 3+ design directions across layout, interaction, visual intensity, and motion |\n| **Export** | PDF (multi-file + single-file), PPTX (image + editable), MP4 video, inline HTML |\n| **Audio** | Dual-track audio (SFX + BGM), 37 SFX catalog, ffmpeg mixing |\n| **Design review** | 5-dimension scoring: philosophy, hierarchy, craft, functionality, originality |\n| **Animation** | Stage+Sprite timeline engine, easing library, Seek-First numerical verification (`__seek` + `getComputedStyle`), signal protocol, pitfall guardrails |\n| **Prototyping** | React + Babel inline JSX, device frames (iOS, Android, macOS, browser) |\n\n## Design Styles\n\nMention a philosophy school to set the direction:\n\n```\n\"Use the Pentagram style for this infographic\"\n\"Apply Experimental Jetset minimalism to this poster\"\n\"Mix Takram restraint with Locomotive motion for the hero\"\n```\n\n20 schools across 5 traditions — Information Architects, Motion Poets, Minimalists, Experimental Vanguard, Eastern Philosophy. See `references/design-styles.md`.\n\n### Brand Style Cloning\n\nMention a brand name to load its design system:\n\n```\n\"Create a pricing page with Stripe's aesthetic\"\n\"Notion-style kanban board\"\n\"Mix Vercel's minimalism with Linear's purple accents\"\n```\n\n## How It Works\n\n```\nUnderstand → Route → Plan → Approve → Build → Verify → Deliver\n```\n\n1. **Understand** — cc-design asks targeted questions to lock the output type, audience, and constraints\n2. **Plan** — presents a visible execution plan with goals, facts, and assumptions\n3. **Approve** — you approve before any code is written\n4. **Build** — per-section preview pattern; you approve section by section\n5. **Verify** — three-phase self-check (structural, visual, design excellence)\n6. **Deliver** — screenshot-verified artifact ready to use\n\nKey behavioral guarantees:\n- Never builds without an approved plan\n- Never delivers without screenshot verification\n- Never uses AI slop patterns (banned gradients, emoji spam, generic layouts)\n- Follow-ups and minor edits skip the full discovery flow\n\n## Optional Dependencies\n\nCore installation has no extra dependencies. For export features:\n\n```bash\n# Playwright browser (for export and verification)\nnpx playwright install chromium\n\n# Video and audio export\nbrew install ffmpeg          # macOS\nsudo apt install ffmpeg      # Ubuntu/Debian\nchoco install ffmpeg         # Windows\n```\n\n## Platform Integration\n\n| Platform | Activation | Integration |\n|---|---|---|\n| **Claude Code** | `/design` command | Commands + hooks + SKILL.md |\n| **Codex / OpenAI** | `$cc-design` reference | `agents/openai.yaml` |\n\n## Plugin Hooks (v0.5.0)\n\ncc-design includes 3 lifecycle hooks that fire automatically on both **Claude Code** and **Codex** (v0.125.0+):\n\n| Hook | Trigger | Behavior |\n|------|---------|----------|\n| **SessionStart** | Session start, clear, compact | Auto update check + design context recovery + Iron Law injection |\n| **PreCompact** | Before context compression | Preserves design tokens (colors, fonts, CSS vars) to `.claude/design-context.json` |\n| **Stop** | Session end | Cleans stale `.playwright-mcp/console-*.log` files (\u003e7 days) |\n\n**Opt-out**: Set any of these env vars to `off` to disable individual hooks:\n\n```bash\nexport CCDESIGN_HOOK_SESSION_START=off\nexport CCDESIGN_HOOK_PRE_COMPACT=off\nexport CCDESIGN_HOOK_STOP=off\n```\n\nAll hooks log activity to `.claude/hook-log.txt` and gracefully degrade if `python3` is unavailable.\n\n## Contributing\n\n1. Fork the repo, create a feature branch\n2. Keep `SKILL.md` under 200 lines — move technical content to `references/`\n3. Add new references to `load-manifest.json` and the routing table in `SKILL.md`\n4. Run `node scripts/lint-load-manifest.mjs` and `node scripts/generate-bundle-catalog.mjs`\n5. If changing first-turn behavior: update `VERSION`, `SKILL.md`, `README.md`, `references/workflow.md`, then run `./scripts/check-behavior-contract.sh \u003cbase-ref\u003e`\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZeroZ-lab%2Fcc-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FZeroZ-lab%2Fcc-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZeroZ-lab%2Fcc-design/lists"}