Anti Ai Design

---
name: anti-ai-design
description: Frontend design system rules to eliminate generic AI-generated aesthetics. Use when building or styling any web UI, components, pages, or applications—especially when the user mentions "去AI设计感", anti-AI-slop design, design system constraints, or asks for production-grade frontend that avoids cookie-cutter patterns.
---

# Anti-AI Design System Rules

Apply these constraints to every frontend artifact (HTML/CSS/JS, Astro, React, Vue) to eliminate generic AI-generated aesthetics. These are hard constraints, not suggestions.

## Color System

- Define CSS variables: `--color-primary`, `--color-secondary`, `--color-neutral-*`, `--color-success`, `--color-warning`, `--color-error`
- Backgrounds: white (`#ffffff`) or light gray (`#f8f9fa`, `#f3f4f6`) only
- No gradients on backgrounds or buttons
- No blue-purple gradients (`linear-gradient` with purple/violet/indigo) anywhere
- No neon colors, no rainbow palettes
- No more than 3 brand colors in any single view
- Text colors: `#111827` (primary), `#6b7280` (secondary), `#9ca3af` (tertiary)

## Typography

- Font scale: `12px / 14px / 16px / 20px / 24px / 32px`
- CSS variables: `--text-xs`, `--text-sm`, `--text-base`, `--text-lg`, `--text-xl`, `--text-2xl`
- Body: `font-weight: 400`, `line-height: 1.5`
- Headings: `font-weight: 600`, `line-height: 1.25`
- Do not mix `px`, `rem`, `em` — pick one unit system
- No arbitrary font sizes outside the defined scale

## Spacing

- 4px base grid: `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px`
- CSS variables: `--space-1` through `--space-16`
- No magic numbers (13px, 7px, 23px, etc.)
- Consistent padding within component families

## Components

### Cards

- Use either border (`1px solid #e5e7eb`) OR shadow, not both
- Shadow level 1: `0 1px 3px rgba(0,0,0,0.08)`
- Shadow level 2: `0 4px 12px rgba(0,0,0,0.1)`
- Border radius: `6px` or `8px`, no `16px+`

### Buttons

- Primary: solid fill, no gradient
- Secondary: outline or ghost
- Hover: darken by 10%, not color switch
- No `rounded-full` on rectangular buttons

### Inputs

- Border: `1px solid #d1d5db`
- Border radius: `6px`
- Focus: border-color change + outline, no glow

## Icons

- Use one icon set consistently: Lucide / Heroicons / Phosphor
- Size: `16px` inline, `20px` standalone
- No emoji as functional icons

## Forbidden Patterns

- No blue-purple gradients
- No glassmorphism unless explicitly requested
- No emoji icons
- No excessive shadows on every element
- No inline styles for color, spacing, or typography
- No magic numbers — every value must reference a design token
- No more than 2 shadow depth levels per page

## Application Workflow

When generating or refactoring UI:

1. Define design tokens (CSS variables) first, before any component code
2. Reference tokens for every color, font size, and spacing value
3. Verify the output against the **Forbidden Patterns** checklist before finishing
4. If the user requests a dark theme, mirror the token structure with appropriate dark-mode values—do not introduce neon or saturated accents