cc-design-html-prototyping
OfficialShip high-fidelity HTML prototypes with guardrails.
Design & Creative#html#accessibility#design systems#prototype#interactive ui#brand styling#screenshot verification
AuthorAradotso
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It helps teams turn vague product ideas into high-fidelity, production-ready HTML prototypes and design deliverables without unstable AI output, design “slop,” or missing verification steps.
Core Features & Use Cases
- End-to-end HTML design & prototyping workflow: Guides “Understand → Route → Plan → Approve → Build → Verify → Deliver” to prevent skipping critical steps, including approval gates and screenshot verification.
- Multi-format deliverables: Produces landing pages, slide decks, interactive explainers, and animations, plus exportable outputs for stakeholder review.
- Quality guardrails for consistent design output: Blocks common anti-patterns (e.g., banned gradient patterns, emoji spam), enforces typography/spacing rules, and checks accessibility constraints (e.g., WCAG AA targets).
Quick Start
Tell an agent to build a SaaS landing page prototype with Stripe-like aesthetics, using the built-in approval gates and requiring screenshot verification before delivery.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: cc-design-html-prototyping Download link: https://github.com/Aradotso/design-skills/archive/main.zip#cc-design-html-prototyping Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.