[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-850":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":14,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":13,"lastSyncTime":27,"discoverSource":28},850,"cc-design","ZeroZ-lab\u002Fcc-design","ZeroZ-lab","High-fidelity HTML design and prototype guidance skill for AI agents",null,"JavaScript",800,82,2,1,0,6,41,3,9.76,false,"master",true,[],"2026-06-12 02:00:19","# cc-design\n\n**High-fidelity HTML design for Claude Code & Codex.**\n\nSlide decks, landing pages, interactive prototypes, animations, design systems, and more — powered by structured design thinking and built-in quality guardrails.\n\n[Demo](https:\u002F\u002Fcc-design-demo.vercel.app) · [Examples](.\u002FEXAMPLES.md) · [Report Bug](https:\u002F\u002Fgithub.com\u002FZeroZ-lab\u002Fcc-design\u002Fissues)\n\n---\n\n## Quick Start\n\n### Claude Code\n\n```bash\n# 1. Add the cc-design marketplace\n\u002Fplugin marketplace add ZeroZ-lab\u002Fcc-design\n\n# 2. Install the plugin\n\u002Fplugin install cc-design@cc-design\n\n# 3. Reload plugins to activate\n\u002Freload-plugins\n```\n\nAfter installation, cc-design activates via `\u002Fcc-design:design` command.\n\n### Codex\n\n```bash\n# 1. Add the cc-design marketplace from GitHub\n\u002Fplugin marketplace add ZeroZ-lab\u002Fcc-design\n\n# 2. Install the plugin\n\u002Fplugin install cc-design@cc-design\n\n# 3. Reload plugins to activate\n\u002Freload-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\"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](.\u002Fscreenshots\u002Fpreviews\u002Fcc-design-home-preview.png)](.\u002Fscreenshots\u002Fpreviews\u002Fcc-design-home-preview.png)\n\n\u003Cp align=\"center\">\n  \u003Ca href=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-enterprise-preview.png\">\u003Cimg src=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-enterprise-preview.png\" alt=\"Enterprise Hero\" width=\"32%\">\u003C\u002Fa>\n  \u003Ca href=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-scifi-preview.png\">\u003Cimg src=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-scifi-preview.png\" alt=\"Sci-Fi Website\" width=\"32%\">\u003C\u002Fa>\n  \u003Ca href=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-tesla-preview.png\">\u003Cimg src=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-tesla-preview.png\" alt=\"Tesla 3D\" width=\"32%\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-aether-preview.png\">\u003Cimg src=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-aether-preview.png\" alt=\"AETHER\" width=\"32%\">\u003C\u002Fa>\n  \u003Ca href=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-glass-preview.png\">\u003Cimg src=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-glass-preview.png\" alt=\"Glass Dashboard\" width=\"32%\">\u003C\u002Fa>\n  \u003Ca href=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-banking-preview.png\">\u003Cimg src=\".\u002Fscreenshots\u002Fpreviews\u002Fcc-design-banking-preview.png\" alt=\"Banking App\" width=\"32%\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n## Capabilities\n\n| Category | What you get |\n|---|---|\n| **Design outputs** | Landing pages, slide decks, interactive prototypes, 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:\u002F\u002Fgetdesign.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, 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\u002Fdesign-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\u002FDebian\nchoco install ffmpeg         # Windows\n```\n\n## Platform Integration\n\n| Platform | Activation | Integration |\n|---|---|---|\n| **Claude Code** | `\u002Fdesign` command | Commands + hooks + SKILL.md |\n| **Codex \u002F OpenAI** | `$cc-design` reference | `agents\u002Fopenai.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\u002Fdesign-context.json` |\n| **Stop** | Session end | Cleans stale `.playwright-mcp\u002Fconsole-*.log` files (>7 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\u002Fhook-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\u002F`\n3. Add new references to `load-manifest.json` and the routing table in `SKILL.md`\n4. Run `node scripts\u002Flint-load-manifest.mjs` and `node scripts\u002Fgenerate-bundle-catalog.mjs`\n5. If changing first-turn behavior: update `VERSION`, `SKILL.md`, `README.md`, `references\u002Fworkflow.md`, then run `.\u002Fscripts\u002Fcheck-behavior-contract.sh \u003Cbase-ref>`\n\n## License\n\nMIT\n","cc-design 是一个为 AI 代理提供高保真 HTML 设计和原型指导的工具。它支持创建演示文稿、着陆页、交互式原型、动画及设计系统等，通过结构化的设计思维和内置的质量控制机制来确保设计质量。该项目使用 JavaScript 编写，适用于需要快速生成高质量网页设计或原型的各种场景，如产品展示、会议报告准备或是用户体验流程设计。其核心功能包括丰富的设计输出类型、基于多层框架和原则的设计思考方法、以及品牌克隆能力，能够加载超过68个品牌的设计系统，从而帮助用户轻松实现专业级别的视觉呈现。","2026-06-11 02:39:46","CREATED_QUERY"]