define-design-guidelines

# Design Guidelines Skill

Create the DESIGN_GUIDELINES.md document that defines HOW to design interfaces for your customer. This document drives all UI/UX: components, layouts, animations, colors, typography—everything visual.

> **Prerequisite**: CUSTOMER.md must exist. Design without customer definition is just aesthetic preference. The interface must resonate with WHO you're building for.

## Overview

This skill supports both **creating new design guidelines** and **refining existing ones**.

This skill guides you through:
0. **Prerequisite Check** - Verify CUSTOMER.md exists; stop if not
1. **Deep Analysis** - Launch design-research agent to understand ideal design for the customer
2. **Discovery** - Confirm/refine design direction with targeted questions
3. **Generate Document** - Create DESIGN_GUIDELINES.md with full design system
4. **Automatic Alignment Audit** - Opus agent verifies alignment with CUSTOMER.md/BRAND_GUIDELINES.md, fixes issues, repeats until perfect
5. **Finalization** - Add version history once audit passes

## Core Philosophy: Anti-AI-Slop

**CRITICAL**: This skill bakes in the frontend-design skill's principles. Every design guideline must avoid generic AI aesthetics:

### What to AVOID (AI Slop)
- **Generic fonts**: Inter, Roboto, Arial, system fonts, Space Grotesk
- **Cliché colors**: Purple gradients on white, generic blue CTAs, safe gray palettes
- **Predictable layouts**: Cookie-cutter grids, template-looking compositions
- **Safe choices**: Border-radius everywhere, subtle animations, inoffensive everything
- **Generic components**: Bootstrap/MUI defaults without personality

### What to EMBRACE
- **Bold aesthetic commitment**: Pick an extreme and execute with precision
- **Distinctive typography**: Characterful fonts that match the product personality
- **Intentional color**: Dominant colors with sharp accents, not timid even distribution
- **Spatial creativity**: Asymmetry, overlap, diagonal flow, grid-breaking elements
- **Atmos