# 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:` 以上非对称布局，在 `