Agent skill · design visual · aradotso
cc-design-html-prototyping
High-fidelity HTML design and prototype creation skill for AI coding agents — slide decks, interactive prototypes, landing pages, UI mockups, animations, and brand style cloning.
Why this skill is useful
Adds multiple executable scripts for HTML export, interactive prototypes, and brand style cloning that extend the AI's design capabilities.
What it needs
Requires npm, playwright installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
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: Or as a submodule in an existing skill collection: Install export script dependencies (for PPTX, PDF, and inline HTML export): --- Project Structure --- Design Workflow The skill follows a six-phase loop for every design request: 1. Understand — Clarify intent, audience, constraints, and existing brand context before writing any code. 2. Explore — Read existing design tokens, component libraries, or product code in the repo. Load brand systems from getdesign.md when a brand name is mentioned. 3. Plan — Write a brief todo list of components, layout decisions, and variation axes. 4. Build — Produce HTML + inline React/Babel components. Use pinned CDN versions (see below). 5. Verify — Use Playwright to take a screenshot and check the browser console for errors. 6. Deliver — Write the final file, offer export options (PPTX, PDF, single-file HTML). --- Core Principles Context-first design — Never design from scratch when existing brand systems, component libraries, or product code is available. Scan the repo and load relevant context before creating new visual directions. Progressive disclosure — The main SKILL.md stays concise. Technical references in references/ are loaded on demand to keep context window usage minimal. 3+ variations — Always generate at least three design directions across layout, visual intensity, interaction model, or motion axes. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/cc-design-html-prototyping