frontend-desing

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:

1. Short design concept (1–3 sentences)
2. 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:

1. Define:

   • Audience: tech users / founders
   • Direction: futuristic + minimal

2. Decide:

   • Typography style
   • Color system
   • Layout structure

3. Implement:

   • Full landing page
   • Styled components
   • Animations and interactions

4. Ensure:

   • No generic SaaS look
   • Strong visual identity

---