What problem does it solve? Designing high-fidelity HTML artifacts in CLI/API environments often produces generic, low-quality output because agents lack a structured design process and taste guidelines. This Skill provides a complete design workflow—brief scoping, context gathering, system definition, variant exploration, and verification—adapted from Claude Design for local agent environments. ## Core Features & Use Cases - Structured Design Workflow: Guides the agent through understanding the brief, gathering brand/repo context, defining a design system (colors, type, spacing, motion), and building a verified artifact. - Multiple Artifact Formats: Produces landing pages, interactive prototypes, 1920x1080 HTML slide decks with keyboard navigation, component labs, and motion studies as self-contained HTML files. - Anti-Slop and Quality Rules: Enforces typography, color, layout, and accessibility standards (44px hit targets, prefers-reduced-motion, contrast checks) while banning generic SaaS tropes and filler content. - Use Case: Ask for a landing page for a new product; the agent inspects your repo's existing tokens and components, produces three design variants (conservative, strong-fit, divergent) in a single HTML file with a Tweaks panel, and verifies it opens cleanly in a browser. ## Quick Start Ask the agent to design a landing page or interactive prototype as a self-contained HTML file, providing any brand docs, screenshots, or repo context available.
