Cc Design Html Prototyping
This is a structured workflow skill that turns Claude into a design tool for shipping HTML prototypes, slide decks, and landing pages. The workflow loop (understand, explore, plan, build, verify, deliver) keeps the agent from jumping straight to code, and it includes Playwright for screenshot verification after every build. It pulls brand systems from getdesign.md, so you can say "make this look like Stripe" and get their tokens automatically applied as CSS variables. Uses pinned React and Babel CDN versions to avoid breakage. Includes export scripts for PPTX, PDF, and single-file HTML. The "always generate 3+ variations" rule is useful for exploring directions without manual iteration. Best for solo devs or small teams who need design artifacts without opening Figma.
- skills.sh installs
- 297
- GitHub stars
- 26
- last updated
- Jun 3, 2026
Install
$ npx -y skills add aradotso/trending-skills --skill cc-design-html-prototyping --agent claude-codeInstalls into .claude/skills of the current project.
Files
CC Design
Skill by ara.so — Daily 2026 Skills collection.
CC Design is a structured design workflow skill for AI coding agents. It enables Claude Code, Codex, and compatible agents to act as expert product designers — producing high-fidelity HTML artifacts including slide decks, interactive prototypes, landing pages, UI mockups, and animated motion studies. It supports brand style cloning from 68+ design systems and uses Playwright for visual verification.
Installation
Clone into the Claude Code skills directory:
git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design
Or as a submodule in an existing skill collection:
git submodule add https://github.com/ZeroZ-lab/cc-design.git skills/cc-design
Install export script dependencies (for PPTX, PDF, and inline HTML export):
cd ~/.claude/skills/cc-design/scripts && npm install && cd -
npx playwright install chromium
Project Structure
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/aradotso/trending-skills
- Categories
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from aradotso/trending-skills
All 251- Pgque Postgres Queue296
- Huashu Design Html Native290
- Freebuff2api Openai Proxy289
- Aube Package Manager286
- Permiso Accessibility Permissions283
- Mdv Markdown Visualization282
- Create Simulated Aeronautics Mod281
- Kami Document Design277
- Gpt2api Openai Gateway276
- Opengame Agentic Game Creation268
- Oransim Causal Marketing Twin267
- Aglais Xqvm Quantum Vm266
- Cairn Ai Pentest265
- Flashkda Delta Attention261
- Openai Privacy Filter261
- Masterhttprelayvpn Proxy259
- Crabtrap Llm Proxy257
- Masterhttprelayvpn Rust256
- Tilekernels Gpu Kernels256
- Text To Cad Harness250
- Freellmapi Proxy212
- Superlevels Chrome Extension211
- Gpt Image 2 Skill207
- Ppt Image First Workflow207
Recommended
More Frontend Development
ui-animationtravisjneuman/.claudeMotion design and animation for user interfaces. Use when creating micro-interactions, page transitions, loading states, or any UI animation across web and mobi296skills.sh installs
vercel-react-best-practicesvercel-labs/claude-skillsvercel react best practices277skills.sh installs
nextjs-16-complete-guidefernandofuc/nextjs-claude-setupnextjs 16 complete guide274skills.sh installs
angular-best-practices-spartanalfredoperez/angular-best-practicesangular best practices spartan272skills.sh installs
