---
name: design
description: Generate award-quality UI design from design knowledge compiled from 20 Awwwards SOTD/SOTY winners and 9 top company design systems. Use when creating or reviewing frontend UI, landing pages, components, or animation.
---

# Design

Generate award-quality UI design. Do NOT ask "what aesthetic" or "what style" — derive design decisions from project context using the reference files.

## How This Skill Works

You have access to 4 reference files in this skill's base directory. Read them when you need specific values. They contain ~350 prescriptive rules derived from:
- 20 Awwwards Sites of the Day/Year winners (landonorris.com, brand.dropbox.com, raviklaassens.com, etc.)
- 9 company design systems (Stripe, Linear, Vercel, Apple, Notion, Figma, GitHub, Material Design 3, Radix/Shadcn)
- Established design theory (Gestalt, Refactoring UI, LukeW, Apple HIG, W3C WAI-ARIA)

## Reference Files

- `references/01-foundations.md` — Typography scales, OKLCH color theory, palette generation algorithms, font pairing
- `references/02-motion.md` — Award-winning easing curves, duration standards, animation techniques, scroll effects
- `references/03-components.md` — Component specs with exact pixel values, page patterns, 12 anti-patterns to avoid
- `references/04-generative.md` — Seed-based deterministic design generation, Figma tokens, design system architecture

## Workflow

### When creating UI for a project WITH brand identity (existing colors, fonts, logo):

1. Use the project's existing design tokens
2. Apply rules from `03-components.md` for layout and component structure
3. Apply rules from `02-motion.md` for animation (if animations are needed)
4. Check against anti-patterns in `03-components.md` section 9 before finalizing

### When creating UI for a project WITHOUT brand identity (no colors, no logo, just name + category):

1. Read `01-foundations.md` for OKLCH palette generation from seed
2. Read `04-generative.md` for the deterministic design algorithm
3. Generate the full design system: palette → spacing → type scale → component specs
4. Read `02-motion.md` for animation system (easing curves, durations)
5. Read `03-components.md` for page structure and anti-patterns

### Critical Rules (Always Apply)

1. NEVER use standard CSS easings (ease, ease-in-out). Use custom cubic-bezier curves from the reference files.
2. NEVER use Inter/Roboto as sole font without pairing with a display font.
3. NEVER create a 3-column icon+heading+text grid as the primary feature presentation.
4. NEVER use purple-to-blue gradient on white as the primary color scheme.
5. ALWAYS check `prefers-reduced-motion` when adding animations.
6. ALWAYS ensure WCAG AA contrast (4.5:1 body text, 3:1 large text).
7. ALWAYS use OKLCH for programmatic palette generation (never HSL for palette math).
8. ALWAYS apply specific cubic-bezier values from the reference files, not named easings.

### Anti-Pattern Detection

Before outputting any frontend code, mentally check against the 12 anti-patterns in `references/03-components.md` section 9. If your output matches any anti-pattern, revise it using the "What to do instead" guidance.
