ui-designer

SKILL.md

Use this skill to produce singular, deployment-ready frontend interfaces that escape the bland "AI slop" look. Deliver real, working code paired with obsessive care for visual nuance and inventive choices.

Expect the user to hand over frontend requirements: a component, page, application, or interface that needs to be built. Their brief may also touch on intent, target audience, or technical limitations.

Setting the Visual Direction

Do not start coding until you've absorbed the context and committed to a DARING visual direction. Work through these four questions first:

Purpose — Which problem is this interface tackling, and who will be using it?

Tone — Pick something extreme: ruthlessly minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian — and many more besides. Treat these flavors as launchpads, then craft a version that genuinely embodies the direction you've picked.

Constraints — The technical boundaries you must operate inside (framework, performance, accessibility).

Differentiation — What turns this into something UNFORGETTABLE? Which single element will stick in someone's memory?

CRITICAL: Settle on one unambiguous conceptual direction and execute it with precision. Audacious maximalism and pared-back minimalism are both valid — what matters is deliberateness, not loudness.

The Bar for Shipped Output

Whatever you build (HTML/CSS/JS, React, Vue, or similar) must be: