ux-first-web-designlisted

# UX-First Web Design Generate unique, research-backed web designs by analyzing real competitors, validating UX decisions, and optimizing for mobile performance. ## Core Principles 1. **UX before UI** — Every component must serve user goals 2. **Performance budget** — 60fps on mobile, <3s load 3. **Mobile-first** — Optimize for slowest devices first 4. **Evidence-based** — Research real competitors, don't guess 5. **Simplicity wins** — Cut 30% from first draft ## When to Use - SaaS landing pages - E-commerce product pages - Service/ISP offerings (fiber internet, telco) - Portfolio/agency sites - Any web project needing market context --- ## Workflow ### Phase 1: Discovery **Gather requirements:** - Industry/product type - Primary user goal (signup, purchase, contact, learn) - Target audience (demographics, tech savviness) - Key features/differentiators - Success metric (conversion, time-to-action) **Questions to ask:** - "What should users accomplish on this page?" - "What's the ONE action you want them to take?" - "Who are your direct competitors?" --- ### Phase 2: Competitive Research **Find 5-10 competitors/similar sites:** 1. `web_search` for best-in-class examples 2. Prioritize successful, well-designed sites 3. Extract URLs **For each competitor, analyze:** - `web_extract(url)` → content structure - `browser_navigate(url)` → live interaction (optional) - `browser_vision` → screenshot analysis (optional) **Document:** - Hero messaging & primary CTA - Featu