用顶级设计规范，
消除 AI 代码的“塑料感”

将以下规则直接写入你项目的 CLAUDE.md：

# UI & Design System Guidelines (Anti-Slop Standard)

When designing or writing frontend code (HTML, Tailwind CSS, React, Vue, Svelte):

1. **Aesthetic Philosophy (The Anti-Slop Principle)**:
   - Reject generic AI templates: No glowing hero purple/blue gradients, no oversized rounded pill containers (avoid `rounded-3xl` unless specifically asked), no artificial neon glow shadows (`shadow-purple-500/50`).
   - Adhere to modern software craftsmanship inspired by Linear, Raycast, and Vercel: crisp borders, restrained color palettes, dense information architecture, and micro-interactions.

2. **Color Restraint**:
   - Backgrounds: Use zinc/slate dark surfaces (`#09090b`, `#121215`, `#18181b`) or clean paper white (`#ffffff`, `#f9fafb`).
   - Accent colors: Choose exactly ONE primary functional color (e.g., Sky-500, Rose-500, or Emerald-500). Never mix 3+ rainbow accent colors across buttons.
   - Text contrast: Body text MUST be readable (Zinc-100 or Zinc-200 on dark; Zinc-800 or Zinc-900 on light). Secondary text uses Zinc-400, never faint unreadable grey.

3. **Borders & Elevation**:
   - Use subtle 1px border dividers (`border-zinc-800` or `border-zinc-200/80`) instead of heavy box shadows.
   - Corners: Prefer `rounded-lg` (8px) or `rounded-md` (6px). Avoid bloated bubble corners.

4. **Typography & Spacing**:
   - Font: Prefer clean sans-serif (Inter, Geist, system-ui) with tabular figures for numbers (`font-mono` or `tabular-nums`).
   - Density: Give components breathing room without wasting vertical space. Use `gap-3` to `gap-4` for lists; avoid excessive empty margins.

将以下内容放入项目根目录的 .cursorrules：

# Frontend Architecture & Anti-Slop Design Rules

You are an expert design engineer with taste rivaling Stripe, Vercel, and Linear designers.

## Prohibited Patterns (Do NOT generate these):
- DO NOT use multi-color gradient text (`bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600`) unless requested.
- DO NOT use giant circular blurred gradient blobs behind sections (`filter blur-3xl opacity-30`).
- DO NOT use low-contrast text that strains eyes (e.g. `text-zinc-500` for 13px captions on dark backgrounds).
- DO NOT add arbitrary bouncing or pulsing animations to primary action buttons.

## Enforced Standards:
1. **Layout & Grid**:
   - Always use CSS Grid or Flexbox with strict token-based spacing (`gap-4`, `gap-6`, `p-6`).
   - Container max width: `max-w-6xl` or `max-w-7xl` with `mx-auto px-4 sm:px-6 lg:px-8`.
2. **Interactive States**:
   - Every clickable element MUST have smooth transitions: `transition-colors duration-150 ease-out`.
   - Hover states must be subtle: `hover:bg-zinc-800/80` or `hover:border-zinc-700`.
   - Focus rings: Always include accessible focus indicators: `focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:outline-none`.
3. **Data Display**:
   - Numerical metrics must use `font-mono tracking-tight` or `tabular-nums`.
   - Table headers must be uppercase, tracking-wider, text-xs, font-medium in muted color.

在让 AI 编写 Dashboard、Analytics 或 Metric Cards 时，将这段提示词补充到 Prompt 中：

Generate a high-density, professional SaaS metrics card grid with the following design specifications:
- Layout: 4-column responsive grid (`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4`).
- Card container: `bg-surface border border-zinc-800 rounded-lg p-4 shadow-sm hover:border-zinc-700 transition-all`.
- Card Header: Flex between title (`text-xs font-medium text-zinc-400 uppercase tracking-wider`) and a subtle icon (`h-4 w-4 text-zinc-500`).
- Metric Value: Large crisp number (`text-2xl font-semibold tracking-tight text-zinc-100 font-mono`).
- Delta / Trend: Subtext showing change (`text-xs text-zinc-400 mt-2 flex items-center gap-1.5`):
  - Positive: `text-emerald-400 flex items-center` with tiny green up arrow.
  - Negative: `text-rose-400 flex items-center` with tiny red down arrow.
- Prohibited: Do not use saturated colored backgrounds on cards or giant pill tags.

在生成产品官网或 Landing Page 首屏时使用此规范：

Create a modern, conversion-focused Hero section adhering to Linear / Stripe craftsmanship:
1. **Announcement Badge**:
   - Centered small pill above H1: `inline-flex items-center gap-2 px-3 py-1 text-xs font-medium text-zinc-300 bg-zinc-900 border border-zinc-800 rounded-full hover:border-zinc-700 transition`.
2. **Headline (H1)**:
   - Punchy and direct: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-zinc-100 max-w-3xl mx-auto text-center`.
   - Single color or subtle monochrome gradient (`from-white via-zinc-200 to-zinc-400 bg-clip-text text-transparent`). NO rainbow gradients.
3. **Subheadline**:
   - `mt-6 text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto text-center leading-relaxed`.
4. **Call to Action Buttons**:
   - Exactly two actions:
     - Primary: Solid contrast button (`bg-zinc-100 text-zinc-950 hover:bg-white font-medium px-5 py-2.5 rounded-lg text-sm transition shadow-sm`).
     - Secondary: Outline/Ghost button (`bg-transparent border border-zinc-800 text-zinc-300 hover:bg-zinc-900 px-5 py-2.5 rounded-lg text-sm transition`).
5. **Hero Asset**:
   - Instead of generic AI illustration, embed a simulated product UI preview or terminal command box with 1px border and real code preview.

注入项目或提示词的 Typography 规范：

# Typography Hierarchy & Contrast Standards

Apply these typographic tokens strictly across all components:

- **Display Headline**: `text-4xl font-bold tracking-tight text-zinc-100 leading-tight`
- **Section Heading (H2)**: `text-2xl sm:text-3xl font-semibold tracking-tight text-zinc-100`
- **Card / Subsection Heading (H3)**: `text-lg font-semibold tracking-tight text-zinc-200`
- **Body Regular**: `text-sm sm:text-base text-zinc-300 leading-relaxed font-normal`
- **Micro-Copy / Metadata**: `text-xs text-zinc-400 font-medium`
- **Code / Monospace**: `font-mono text-xs sm:text-sm text-zinc-300 bg-zinc-900 border border-zinc-800 px-1.5 py-0.5 rounded`

## Contrast Rule:
- Any text under 14px MUST have at least 4.5:1 contrast against its background.
- Never use `text-zinc-600` or `text-zinc-700` for meaningful text on dark mode.
- Use `tracking-tight` on headings > 20px to prevent loose AI typography.

色彩规范 Prompt：

# Strict Color Restraint Rules

When selecting colors for UI components:
1. **The 90-7-3 Distribution Rule**:
   - 90% Neutral Grayscale (Background `#09090b`, Surface `#121215`, Card `#18181b`, Border `#27272a`).
   - 7% Primary Semantic Accent (e.g. `sky-500` for primary button, active tab indicator, input focus ring).
   - 3% Status Accents (Red-500 only for destructive actions/errors, Green-500 only for verified/live status).

2. **Prohibited Color Usages**:
   - Never use saturated neon backgrounds for full cards.
   - Never use rainbow gradients across buttons, cards, and borders simultaneously.
   - Avoid colored shadows (e.g. `shadow-blue-500/50`)—they look dated and artificial. Prefer clean border contrast.

交互规范 Prompt：

# Micro-Interaction & Transition Rules

1. **Button Hover & Active States**:
   - Transition: `transition-all duration-150 ease-out`.
   - Subtle brightness/background shift: `hover:bg-zinc-800 active:scale-[0.98]`.
   - Never use `hover:scale-110` on functional UI elements.

2. **Card Hover States**:
   - Prefer border illumination over physical movement:
     `border border-zinc-800 hover:border-zinc-700 hover:bg-zinc-900/40 transition-colors duration-200`.
   - If elevation is needed, use subtle shadow: `hover:shadow-md hover:shadow-black/40`.

3. **Loading States**:
   - Use subtle pulsing skeleton loaders (`animate-pulse bg-zinc-800 rounded`) instead of giant spinning rainbow wheels.

表单组件 Prompt：

# Modern Accessible Form & Input Standards

Generate form fields following this component anatomy:
1. **Label**:
   - `block text-xs font-medium text-zinc-300 mb-1.5`.
   - If required, mark with a subtle red asterisk or muted text `(optional)`.
2. **Input Field**:
   - Class: `w-full bg-zinc-900/80 border border-zinc-800 rounded-lg px-3.5 py-2 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600 focus:ring-2 focus:ring-zinc-700/50 transition-all`.
3. **Helper / Error Text**:
   - Helper: `mt-1.5 text-xs text-zinc-500`.
   - Error: `mt-1.5 text-xs text-rose-400 flex items-center gap-1`.

弹窗与抽屉 Prompt：

# Modern Dialog & Drawer Architecture

1. **Backdrop**:
   - `fixed inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity`.
2. **Dialog Panel**:
   - `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-xl p-6 shadow-2xl z-50`.
   - Header with Title (`text-lg font-semibold text-zinc-100`) and subtle Close button (`text-zinc-400 hover:text-zinc-100 p-1.5 rounded-md hover:bg-zinc-800`).
   - Sticky footer with actions aligned to the right.

数据表格规范 Prompt：

# High-Density Data Table Standards

Generate tabular data with the following layout rules:
- Table Container: `w-full overflow-x-auto border border-zinc-800 rounded-lg`.
- Header (`<thead>`):
  - Row: `bg-zinc-900/60 border-b border-zinc-800`.
  - Th: `px-4 py-3 text-left text-xs font-medium text-zinc-400 uppercase tracking-wider`.
- Body (`<tbody>`):
  - Row: `border-b border-zinc-800/60 hover:bg-zinc-900/40 transition-colors`.
  - Td: `px-4 py-3 text-sm text-zinc-300 whitespace-nowrap`.
- Alignment:
  - Text: Left-aligned (`text-left`).
  - Numbers, Dates, Currency: Right-aligned (`text-right font-mono tabular-nums`).
  - Actions/Badges: Centered or Right-aligned.

状态标签 Prompt：

# Subtle Status Badge & Indicator Tokens

Do not use high-saturation solid backgrounds for tags. Use this subtle pattern:

- **Success / Active**:
  `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20`
  (With a 1.5x1.5 dot: `h-1.5 w-1.5 rounded-full bg-emerald-400`)

- **Warning / Pending**:
  `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20`

- **Error / Inactive**:
  `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-rose-500/10 text-rose-400 border border-rose-500/20`

- **Neutral / Draft**:
  `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300 border border-zinc-700/60`

暗黑模式系统 Prompt：

# Craft Dark Mode Design Tokens (Never Pure Black)

1. **Surface Elevation System**:
   - `Layer 0 (Canvas Background)`: `#09090b` (Tailwind `bg-zinc-950`)
   - `Layer 1 (Card / Sidebar / Panel)`: `#121215` or `#18181b` (Tailwind `bg-zinc-900`)
   - `Layer 2 (Elevated / Dialog / Popover)`: `#202024` or `#27272a` (Tailwind `bg-zinc-800/80`)
   - `Dividers & Borders`: `#27272a` (Tailwind `border-zinc-800`)

2. **Text Contrast & Brightness Softening**:
   - Primary Headings: `text-zinc-100` (`#f4f4f5`), not stark `#ffffff`.
   - Primary Body: `text-zinc-300` (`#d4d4d8`).
   - Muted Labels: `text-zinc-400` (`#a1a1aa`).