Design Claude

HTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design exploration, make an HTML page, make a visualization, app prototype, iOS prototype, mobile app mockup, export MP4, export GIF, 60fps video, design style, design direction, design philosophy, color scheme, visual style, recommend style, pick a style, make it look good, review, does this look good, review this design. Core capabilities: Junior Designer workflow (show assumptions+reasoning+placeholders first, then iterate), anti-AI-slop checklist, React+Babel best practices, Tweaks variant switching, Speaker Notes presentation, Starter Components (slide shell/variant canvas/animation engine/device frames), App prototype rules (default real images from Wikimedia/Met/Unsplash, AppPhone state manager for interactivity, Playwright click test before delivery), HTML animation→MP4/GIF export (25fps base + 60fps interpolation + palette-optimized GIF + 6 scene BGM tracks + auto-fade). Vague requests fallback: Design Direction Advisor — recommend 3 differentiated directions from 5 schools × 20 design philosophies (Pentagram information architecture / Field.io motion poetics / Kenya Hara eastern minimalism / Sagmeister experimental avant-garde), show 24 pre-made showcases (8 scenes × 3 styles), generate 3 visual demos for user to choose. Optional post-delivery: expert 5-dimension critique (philosophy consistency / visual hierarchy / detail execution / functionality / innovation 0–10 each + fix list).

mkdir -p ~/.claude/skills/design-claude
curl -L https://claudskills.com/skills/design-claude/SKILL.md \
  -o ~/.claude/skills/design-claude/SKILL.md