chore: 添加 Cursor 设计系统和项目规范规则

- design-system.mdc: 暗色 token 映射表、禁止白色背景、按钮分层规则 - project-conventions.mdc: 技术栈声明、Tailwind v4 语法、组件和 API 编码规范
2026-02-26 11:27:23 +08:00
parent e10e3c8230
commit 11d872e72a
2 changed files with 89 additions and 0 deletions
@@ -0,0 +1,55 @@
+---
+description: Dark theme design token system — enforces consistent color usage across all UI
+globs: "**/*.tsx,**/*.css"
+alwaysApply: false
+---
+
+# Design System: Dark Theme Tokens
+
+This project uses a unified dark theme. All colors come from semantic tokens defined in `globals.css` via Tailwind v4 `@theme`.
+
+## Token Map
+
+| Token | Tailwind Class | Hex | Usage |
+|-------|---------------|-----|-------|
+| background | `bg-background` | #030712 | Page-level backgrounds |
+| surface | `bg-surface` | #111827 | Cards, modals, inputs, panels |
+| elevated | `bg-elevated` | #1f2937 | Hover states, secondary buttons, nested containers |
+| border | `ring-border` / `bg-border` | #1f2937 | Borders, dividers |
+| subtle | `ring-subtle` / `bg-subtle` | #374151 | Secondary borders, hover-next-level |
+| foreground | `text-foreground` | #f3f4f6 | Primary text, input text |
+| muted | `text-muted` | #6b7280 | Secondary text, labels, placeholders emphasis |
+| dim | `text-dim` | #4b5563 | Tertiary text, timestamps, divider labels |
+| accent | `bg-accent` | #10b981 | Primary CTA, active indicators |
+| accent-hover | `bg-accent-hover` | #059669 | Accent hover state |
+
+## Mandatory Rules
+
+1. **NEVER use `bg-white`** for cards, modals, or page backgrounds. Use `bg-surface` or `bg-elevated`.
+2. **NEVER use `text-zinc-*` or `text-gray-*` for standard text.** Use `text-foreground`, `text-muted`, or `text-dim`.
+3. **NEVER use `bg-gray-950/900/800`** — use `bg-background`, `bg-surface`, `bg-elevated` respectively.
+4. **NEVER use `ring-gray-*` / `border-gray-*`** — use `ring-border` or `ring-subtle`.
+5. **Light-on-dark badges**: use `bg-{color}-500/10..15` + `text-{color}-400` (e.g. `bg-amber-500/10 text-amber-400`).
+6. **Inputs**: `bg-surface ring-1 ring-border text-foreground placeholder:text-dim focus:ring-2 focus:ring-{accent}/50`.
+
+## Button Color Hierarchy
+
+Buttons follow a strict 4-tier color system:
+
+| Tier | Color | When to use | Example |
+|------|-------|-------------|---------|
+| **System CTA** | `bg-accent` | Login, join room, navigate, share, save — any universal primary action | "导航过去", "登录", "加入房间" |
+| **Mode Accent** | Orange gradient (Panic) / `bg-purple-600` (BlindBox) | The ONE primary CTA of each mode only | "创建新房间", "提交想法" |
+| **Dramatic** | `from-red-600 to-rose-500` | Irreversible, high-ceremony actions only | "开启周末盲盒（绝不反悔）" |
+| **Destructive** | `bg-rose-500` or `bg-amber-500` | Leave, kick, end session | "退出房间", "踢出" |
+| **Secondary** | `bg-surface` or `bg-elevated` + `ring-1 ring-border` | Cancel, close, alternative actions | "继续滑卡", "换一批店" |
+
+Rules:
+- System-level actions ALWAYS use `bg-accent`, never mode-specific colors.
+- Mode accent colors are ONLY for the core action of that mode, not for navigation or system actions within the mode.
+- Never invent new CTA colors outside this hierarchy.
+
+## Exceptions
+
+- Image overlays and swipe overlays may use `bg-black/*` or `bg-white/*` for translucency on photos.
+- Filter pills/tags in Panic mode use `bg-orange-500` for active state — these are toggles, not CTA buttons.
@@ -0,0 +1,34 @@
+---
+description: Project-wide coding conventions for NoWhatever
+alwaysApply: true
+---
+
+# NoWhatever Project Conventions
+
+## Tech Stack
+
+- **Framework**: Next.js App Router (all pages are `"use client"`)
+- **Database**: Prisma + SQLite
+- **Styling**: Tailwind CSS v4 (use `bg-linear-to-*` NOT `bg-gradient-to-*`)
+- **Animation**: framer-motion
+- **Icons**: lucide-react
+- **Effects**: canvas-confetti
+
+## Tailwind v4 Syntax
+
+- Gradients: `bg-linear-to-br` (not `bg-gradient-to-br`)
+- Arbitrary values: prefer Tailwind built-in classes over `[]` when possible (e.g. `max-w-20` not `max-w-[5rem]`)
+
+## Component Patterns
+
+- Page components export `default function PageName()`
+- Use `useCallback` for event handlers passed as props
+- Use `motion.*` from framer-motion for animated elements
+- Mobile-first, `min-h-dvh` for full-height pages
+- `overflow-y-auto scrollbar-none` for scrollable pages
+
+## API Routes
+
+- Located in `src/app/api/`
+- Return `NextResponse.json()` with appropriate status codes
+- Always handle errors with try/catch