Finesse UI Design

What It Solves

finesse-ui targets a concrete failure in LLM UI generation: producing another visually generic page before deciding what kind of interface is being built. It makes the agent classify the brief into a design register: brand, product, h5, or a single component, then follow that register's substrate, structure, and motion rules instead of copying one hero-page template.

How It Works

The skill operates as a routing and craft-check workflow:
- Brand pages: use design-dna.md for grain, vignette, display type, palette, and hero depth, then choose a motion route from motion.md or a hero engine from hero-engines.md.
- Product surfaces: start from product-ui.md for cards, KPI tiles, tables, density, and feedback-only motion, then load workflow-ui.md, ai-console.md, or dataviz references based on the page job.
- H5 / mobile: establish the phone frame, safe areas, touch targets, and scrolling architecture first, then wrap the content rules of brand, product, or commerce.

It enforces a shared craft floor: avoid pure #fff and #000, cheap shadows, weak contrast, and automatic hero-animation clichés. Single-element requests route through component-scope.md, which expects complete states, not just a static visual mock.

Boundaries

This is best for UI work with a clear brief, target device, data source, and motion budget. It is not a theme generator or a template dumper. Mobile builds are not desktop pages resized; dashboards should not inherit brand-page grain, vignettes, and giant hero typography.