Frontend Design Skill

AI-generated UI has a recognisable smell: default blues, five different paddings, everything the same visual weight, no states. This skill produces interfaces that look decided — by making the decisions explicit as a token system, then spending contrast deliberately instead of everywhere.

What This Skill Produces

• Working UI code (single-file HTML/CSS or framework components) built on an explicit token block
• The token system: type scale, spacing scale, color roles, radius/shadow levels — small and consistent
• The states: hover, focus-visible, active, disabled, empty, loading, error — designed, not defaulted

Required Inputs

Ask for (if not already provided):

• What's being built and its emotional register (dense pro tool? calm consumer? playful?)
• Brand constraints if any (colors, fonts, an existing product to match) — else the skill picks a deliberate palette and says so
• The framework target (vanilla/React/Vue/Tailwind) — vanilla single-file is the default demo form

The System (build this first, then the UI)