design-taste-frontend

# design-taste-frontend

## 高自主性前端设计技能

### 1. 主动基线配置（ACTIVE BASELINE CONFIGURATION）

- `DESIGN_VARIANCE`: 8（1 = 完美对称，10 = 艺术化混沌）  
- `MOTION_INTENSITY`: 6（1 = 静态无动效，10 = 电影级物理动效）  
- `VISUAL_DENSITY`: 4（1 = 美术馆式留白，10 = 驾驶舱式信息密度）

> ✅ **AI 指令**：所有生成默认严格采用 `(8, 6, 4)` 基线值。**禁止主动提示用户修改此配置文件**。仅当用户在聊天中**明确要求**时，才动态覆盖这些值；覆盖后，该组值将作为全局变量驱动第 3–7 节中的具体逻辑。

### 2. 默认架构与开发约定（DEFAULT ARCHITECTURE & CONVENTIONS）

除非用户显式指定其他技术栈，否则必须遵守以下约束以保障一致性：

- **依赖校验（MANDATORY）**：引入任何第三方库（如 `framer-motion`、`lucide-react`、`zustand`）前，**必须检查 `package.json`**。若缺失，须先输出安装命令（例如 `npm install framer-motion`），再提供代码。**不可假设库已存在**。

- **框架与交互模型**：默认使用 React 或 Next.js，优先采用服务端组件（RSC）。  
  - ✅ **RSC 安全规则**：全局状态（如 `zustand`、`context`）**仅限客户端组件**使用。Next.js 中需用 `'use client'` 显式包裹 Provider。

- **交互隔离原则**：若启用第 4 节（动效）或第 7 节（Liquid Glass），对应交互组件**必须抽离为独立叶组件**，且顶部第一行必须声明 `'use client'`。服务端组件**仅渲染静态布局**。

- **状态管理**：
  - 局部 UI 状态 → 使用 `useState` / `useReducer`；
  - 全局状态 → **仅用于避免深层 prop-drilling**，非必要不引入。

- **样式策略**：90% 场景使用 Tailwind CSS（v3/v4）。  
  - ✅ **版本锁定**：先查 `package.json` 确认版本；**禁止在 v3 项目中使用 v4 语法**。  
  - ✅ **v4 配置守卫（T4 CONFIG GUARD）**：v4 项目中，`postcss.config.js` **不得启用 `tailwindcss` 插件**；应使用 `@tailwindcss/postcss` 或 Vite 插件方案。

- **禁用 Emoji 政策（CRITICAL）**：代码、HTML、文本内容、`alt` 属性中**严禁使用 Emoji**。需替换为高质量图标（Radix / Phosphor）或精简 SVG 原语。

- **响应式与间距规范**：
  - 断点统一：`sm` / `md` / `lg` / `xl`；
  - 页面容器宽度：`max-w-[1400px] mx-auto` 或 `max-w-7xl`；
  - ✅ **视口稳定性（CRITICAL）**：Hero 区域**禁用 `h-screen`**，必须使用 `min-h-[100dvh]`，防止 iOS Safari 等移动端浏览器出现灾难性布局跳动；
  - ✅ **网格优于 Flex 数学计算**：禁用 `w-[calc(33%-1rem)]` 等复杂 flex 百分比计算；**一律使用 CSS Grid**（如 `grid grid-cols-1 md:grid-cols-3 gap-6`）；
  - ✅ **图标规范**：仅允许 `@phosphor-icons/react` 或 `@radix-ui/react-icons`；全局统一 `strokeWidth`（如 `1.5` 或 `2.0`）。

### 3. 设计工程化指令（DESIGN ENGINEERING DIRECTIVES）

针对 LLM 常见 UI 陈规偏见，强制执行以下高端设计规则：

#### 规则 1：确定性排版（Deterministic Typography）
- **标题/Display**：默认 `text-4xl md:text-6xl tracking-tighter leading-none`；  
  - ❌ 禁用 `Inter` 字体表达“高端”或“创意”感；✅ 强制选用 `Geist`、`Outfit`、`Cabinet Grotesk` 或 `Satoshi`；
- **技术型 UI（仪表盘/软件界面）**：❌ 严格禁用衬线字体；✅ 仅允许高端无衬线组合（如 `Geist` + `Geist Mono` 或 `Satoshi` + `JetBrains Mono`）；
- **正文/段落**：默认 `text-base text-gray-600 leading-relaxed max-w-[65ch]`。

#### 规则 2：色彩校准（Color Calibration）
- **主色约束**：最多使用 **1 种强调色**；饱和度需匹配 `DESIGN_VARIANCE` 级别（高 variance → 更克制饱和度）。

#### 规则 3：布局多样化（Layout Diversification）
- ❌ `LAYOUT_VARIANCE > 4` 时，**严格禁用居中 Hero/H1**；✅ 强制采用：
  - 分屏布局（50/50）；
  - 左侧内容 + 右侧资产；
  - 非对称留白结构。

#### 规则 4：材质感、阴影与「反卡片滥用」（Materiality & Anti-Card Overuse）
- **仪表盘强化（DASHBOARD HARDENING）**：`VISUAL_DENSITY > 7` 时，**禁用通用卡片容器**；改用逻辑分组：`border-t`、`divide-y` 或纯负空间；
- ✅ 卡片仅在需表达层级关系（z-index 功能性需求）时使用；阴影须与背景色调同色系微调（tinted shadow）。

#### 规则 5：交互状态完整性（Interactive UI States）
- ✅ **必须实现全生命周期状态**（LLM 易忽略）：
  - **加载态**：按布局尺寸定制骨架屏（禁用通用环形 spinner）；
  - **空状态**：美观、有引导性的空态（说明如何填充数据）；
  - **错误态**：清晰内联报错（如表单字段下方）；
  - **触觉反馈**：`:active` 时使用 `-translate-y-[1px]` 或 `scale-[0.98]` 模拟物理按压感。

#### 规则 6：数据与表单模式（Data & Form Patterns）
- **表单结构**：
  - 标签（Label）必须置于输入框上方；
  - 辅助文本（Helper Text）可选但需存在于 DOM；
  - 错误信息置于输入框下方；
  - 输入区块统一 `gap-2`。

### 4. 创意主动性（CREATIVE PROACTIVITY）

系统性对抗 AI 通用设计（Anti-Slop），将以下高端编码范式设为默认实践：

- **Liquid Glass 折射效果**：启用玻璃态时，不止 `backdrop-blur`，还需添加：
  - `border-white/10`（1px 内边框）；
  - `shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`（内阴影模拟物理边缘折射）。

- **磁吸微物理（Magnetic Micro-physics）**（`MOTION_INTENSITY > 5` 时启用）：
  - 按钮轻微向鼠标光标吸附；
  - ⚠️ **严禁**在 `useState` 中实现磁吸或连续动画；✅ **必须仅用 Framer Motion 的 `useMotionValue` + `useTransform`**（脱离 React 渲染周期），避免移动端性能崩溃。

- **永续微交互（Perpetual Micro-Interactions）**（`MOTION_INTENSITY > 5`）：
  - 在头像、状态点、背景等常规组件中嵌入无限循环微动画（Pulse / Typewriter / Float / Shimmer / Carousel）；
  - 所有交互元素动效必须使用弹簧物理：`type: "spring", stiffness: 100, damping: 20`（禁用 `ease-in-out` 等线性缓动）。

- **布局过渡（Layout Transitions）**：
  - ✅ 始终使用 Framer Motion 的 `layout` 和 `layoutId` 实现状态变更时的平滑重排、缩放与共享元素过渡。

- **交错编排（Staggered Orchestration）**：
  - 列表/网格**禁止瞬间挂载**；使用 `staggerChildren`（Framer）或 CSS 级联（`animation-delay: calc(var(--index) * 100ms)`）实现瀑布式逐项呈现；
  - ⚠️ `staggerChildren` 要求父/子组件**必须位于同一 Client Component 树中**；异步数据需作为 props 传入集中式 Motion 父容器。

### 5. 性能护栏（PERFORMANCE GUARDRAILS）

- **DOM 开销控制**：噪点/颗粒滤镜**仅限固定定位、无指针事件的伪元素**（如 `fixed inset-0 z-50 pointer-events-none`），**严禁应用于滚动容器**，以防 GPU 持续重绘与移动端性能劣化；
- **硬件加速规范**：❌ 禁止动画 `top` / `left` / `width` / `height`；✅ 仅允许 `transform` 与 `opacity`；
- **z-index 约束**：❌ 禁止随意使用 `z-50` / `z-10`；✅ 仅在系统级层上下文（粘性导航栏、模态框、遮罩层）中按需使用。

### 6. 技术参考：参数定义（TECHNICAL REFERENCE — Dial Definitions）

#### `DESIGN_VARIANCE`（1–10）
| 级别 | 特征 |
|------|------|
| **1–3（可预测）** | Flexbox `justify-center`、标准 12 列对称网格、等距 padding |
| **4–7（偏移）** | `margin-top: -2rem` 重叠、混合图片比例（4:3 + 16:9）、左对齐标题 + 居中数据 |
| **8–10（非对称）** | Masonry 布局、CSS Grid 分数单位（`grid-template-columns: 2fr 1fr 1fr`）、大块留白（`padding-left: 20vw`） |
| **移动端覆盖（MOBILE OVERRIDE）** | `md:` 以上非对称布局，在 `<md` 视口**必须强退为单列**：`w-full px-4 py-8` |

#### `MOTION_INTENSITY`（1–10）
| 级别 | 技术选型 |
|------|----------|
| **1–4（轻量）** | Tailwind `transition` + `animate-*` |
| **5–7（增强）** | Framer Motion（`motion.div`, `useScroll`, `useTransform`） |
| **8–10（高阶）** | GSAP（ScrollTrigger/Parallax）或 Three.js/WebGL（3D/Canvas）；⚠️ **严禁与 Framer Motion 混用同一组件树**；Framer 专用于 UI/Bento 交互；GSAP/Three.js 仅用于全页滚动叙事或 Canvas 背景，且须包裹于带 cleanup 的 `useEffect` 中 |

### 7. 高端 UI 模式速查（Advanced UI Pattern Catalog）

| 类别 | 示例模式 |
|--------|-----------|
| **Hero 与导航** | 非对称 Hero（左/右对齐文案 + 渐变背景图）、Mac OS Dock 缩放导航、磁吸按钮、果冻菜单（Gooey Menu）、动态岛（Dynamic Island）、径向上下文菜单、浮动速度拨号（Speed Dial）、巨型菜单（Mega Menu） |
| **布局与网格** | Bento 网格、Masonry 布局、色度网格（Chroma Grid）、分屏滚动（Split Screen Scroll）、帷幕揭示（Curtain Reveal） |
| **卡片与容器** | 视差倾斜卡（Parallax Tilt）、聚光边框卡（Spotlight Border）、玻璃态面板（Glassmorphism Panel）、全息箔卡（Holographic Foil）、Tinder 卡片堆栈、变形模态框（Morphing Modal） |
| **滚动动画** | 粘性卡片堆叠（Sticky Scroll Stack）、横向滚动劫持（Horizontal Scroll Hijack）、Locomotive 滚动序列、缩放视差（Zoom Parallax）、滚动路径绘制（Scroll Progress Path）、液体擦除过渡（Liquid Swipe Transition） |
| **画廊与媒体** | 穹顶画廊（Dome Gallery）、Coverflow 3D 轮播、拖拽平移网格（Drag-to-Pan Grid）、手风琴图像滑块、鼠标轨迹图像（Hover Image Trail）、故障图像（Glitch Effect） |
| **排版与文字** | 动态跑马灯（Kinetic Marquee）、文字蒙版揭示（Text Mask Reveal）、文字乱码解码（Text Scramble）、环形文字路径（Circular Text Path）、渐变描边动画（Gradient Stroke Animation）、光标避让文字网格（Kinetic Typography Grid） |