---
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:

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

---