industry-design-directionlisted

# Industry design direction Most generated UI looks templated because the aesthetic was never actually chosen — it defaulted. Purple-blue gradient, glassmorphic cards, Inter everywhere, hero-features-CTA. That default is applied identically to a dental clinic, a metal fabricator, and an NFT marketplace, and it is wrong for all three in different ways. This skill exists to make the choice explicit and industry-grounded, before any component is written. It is the *exploration* step. Once a direction is picked, `ui-design-system` turns it into enforceable tokens. ## The five decisions, in this order Order matters — each one constrains the next, and taking them out of order is how you end up retrofitting a palette onto a layout that fights it. 1. **Industry profile** → `references/industry_profiles.md` Find the row matching the product. Match on the profile name *or* its keywords: users describe products in their own words ("clinic booking site"), not in the library's labels ("Healthcare App"). This gives you the primary style, viable alternates, the page structure, and — the part most worth reading — the constraint that industry most often gets wrong. 2. **What that style actually is** → `references/style_library.md` The profile *names* a style; this defines it — colors, effects, theme support, performance, the CSS that produces it, and a done-checklist. Read the **"Do NOT use for"** line before the "Best for" line: a style applied to the case it