frontend-desing

name frontend-desing description Create distinctive, production-grade frontend interfaces with strong visual identity. Use when building or improving web UIs to avoid generic design and produce polished, memorable results. Overview This skill guides the creation of high-quality frontend interfaces with a clear aesthetic direction and production-ready implementation. It prevents generic, repetitive, “AI-looking” UI by enforcing intentional design decisions, strong visual identity, and attention to detail. The focus is not just functionality, but memorable, well-crafted visual experiences . 1. Design Before Coding Before writing any code: Define the purpose of the interface. Identify the target user. Choose a clear and bold aesthetic direction . State assumptions explicitly. If requirements are unclear, ask for clarification. If multiple design directions are possible: Present 2–3 options briefly Do not choose arbitrarily without explanation Do not start coding without a clear visual direction. 2. Commit to an Aesthetic Direction Every UI must follow a strong, intentional style. Examples of directions: Minimal / ultra-refined Brutalist / raw Editorial / magazine Luxury / premium Playful / toy-like Retro-futuristic Industrial / utilitarian Organic / natural Maximalist / expressive Guidelines: Pick ONE direction and commit fully Avoid mixing conflicting styles Define what makes the design distinctive and memorable Ask: "What will the user remember after seeing this?" 3. Production-Grade Implementation All output must be: Fully working code (HTML/CSS/JS, React, Vue, etc.) Clean and structured Ready to run (no pseudo-code or placeholders) Avoid: Incomplete snippets Non-functional UI Vague implementations 4. Visual Design Principles Typography Avoid default fonts (Arial, Inter, Roboto, system fonts) Use expressive, distinctive font pairings Combine display + body fonts intentionally Color & Theme Use a cohesive palette Define colors via variables (CSS or theme system) Prefer strong contrast and hierarchy Avoid: Generic gradients (especially purple/blue SaaS style) Washed-out, low-contrast palettes Layout & Composition Use spacing intentionally Consider asymmetry, overlap, and layering Break grid systems when it improves the design Avoid: Generic centered layouts Repetitive card grids without variation Motion & Interaction Use animation with purpose: page load sequences hover interactions scroll-triggered effects Guidelines: Prefer CSS animations when possible Focus on impactful moments rather than many small effects Visual Details Add depth and personality through: Textures (noise, grain) Shadows and lighting Borders and separators Background treatments (gradients, patterns, overlays) Avoid: Flat, lifeless surfaces Default styling with no refinement 5. Avoid Generic AI Design Strictly avoid: Cookie-cutter SaaS UI Overused font stacks Predictable layouts Default Tailwind appearance Repetitive component patterns Every design must feel: Intentional Context-aware Visually distinct 6. Match Complexity to Vision Design complexity must match the chosen style: Minimalist → precision, spacing, typography Maximalist → rich visuals, layering, animation Do not: Overcomplicate simple designs Oversimplify expressive designs 7. Output Structure Responses should include: Short design concept (1–3 sentences) Full implementation code Code must be: Complete Runnable Consistent with the design direction Expected Behavior This skill is working correctly if: UI designs are visually distinctive Code is production-ready No generic or repetitive patterns appear A clear aesthetic direction is evident Visual details are carefully implemented Example Usage User request: "Create a landing page for an AI startup" With this skill: Define: Audience: tech users / founders Direction: futuristic + minimal Decide: Typography style Color system Layout structure Implement: Full landing page Styled components Animations and interactions Ensure: No generic SaaS look Strong visual identity