frontend-design-skilllisted

# Frontend SaaS UI Design Skill This skill guides the creation of distinctive, production-grade frontend interfaces that strictly adhere to a **Clean, Professional SaaS UI** aesthetic. Implement real working code with exceptional attention to aesthetic details, structure, and high utility. The user provides frontend requirements: a component, page, application, or interface to build. ## Design Thinking Before coding, understand the context and commit to a structured aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? - **Tone**: Professional, minimal, clean lines, high-utility, structured, premium, and trustworthy. - **Constraints**: Technical requirements (framework, performance, accessibility). - **Differentiation**: What makes this highly usable and memorable? **CRITICAL**: Avoid generic "AI slop" aesthetics. Do NOT use excessive glassmorphism, visual noise, or chaotic maximalism. The focus is on a structured, clean, highly usable SaaS aesthetic. Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: - Production-grade and functional - Visually clean and highly readable - Cohesive with a professional SaaS point-of-view - Meticulously refined in every detail (margins, paddings, borders) ## Frontend Aesthetics Guidelines Focus on: - **Typography**: Choose fonts that are beautiful, readable, and professional (e.g., Inter, Roboto, SF Pro, or elegant modern sans-serifs). Pair a slightly heavier display weight for header