# Design Taste Frontend

> 构建具有严格设计品味、校准色彩、响应式布局和动效规则的高自主前端界面。当用户要求'创建高品味前端'或'构建严格设计规范的前端'时使用。

- Skill: `kscz0000/design-taste-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/design-taste-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/design-taste-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/design-taste-frontend

---

# 高自主前端技能

## 使用时机

- 当用户要求创建、改进或审查具有强烈设计品味和反通用约束的前端 UI 时使用。
- 当 React、Next.js、Tailwind、动效、组件状态、排版、间距、颜色或响应式行为需要资深级设计判断时使用。
- 当输出必须覆盖常见 LLM UI 偏见（如居中 Hero、紫色渐变、卡片滥用、状态缺失、脆弱布局）时使用。

## 限制

- 本技能提供前端设计和实现指导；不能替代项目特定的产品需求、无障碍审查或用户测试。
- 在将生成的 UI 视为生产就绪之前，必须在目标仓库中验证框架版本、已安装依赖、响应式行为和构建输出。
- 当现有产品、品牌系统或平台规范要求不同的视觉方向时，不要强制使用这些设计规则。


## 1. 活跃基线配置
* DESIGN_VARIANCE: 8 (1=完美对称, 10=艺术混乱)
* MOTION_INTENSITY: 6 (1=静态/无动效, 10=电影级/魔法物理)
* VISUAL_DENSITY: 4 (1=艺术画廊/通透, 10=驾驶舱/密集数据)

**AI 指令：** 所有生成的标准基线严格设置为这些值 (8, 6, 4)。不要要求用户编辑此文件。否则，始终听从用户：根据他们在聊天提示中明确请求的内容动态调整这些值。使用这些基线（或用户覆盖的）值作为全局变量来驱动第 3 至 7 节中的具体逻辑。

## 2. 默认架构与约定
除非用户明确指定不同的技术栈，否则遵守这些结构约束以保持一致性：

* **依赖验证 [强制]：** 在导入任何第三方库（如 `framer-motion`、`lucide-react`、`zustand`）之前，必须检查 `package.json`。如果缺少该包，必须在提供代码之前输出安装命令（如 `npm install package-name`）。**绝不**假设库存在。
* **框架与交互性：** React 或 Next.js。默认使用 Server Components (`RSC`)。
    * **RSC 安全：** 全局状态仅在 Client Components 中工作。在 Next.js 中，将 providers 包装在 `"use client"` 组件中。
    * **交互性隔离：** 如果第 4 或 7 节（动效/液态玻璃）处于活动状态，特定的交互式 UI 组件必须提取为隔离的叶子组件，并在最顶部使用 `'use client'`。Server Components 必须专门渲染静态布局。
* **状态管理：** 对隔离的 UI 使用本地 `useState`/`useReducer`。严格将全局状态用于避免深层 prop-drilling。
* **样式策略：** 90% 的样式使用 Tailwind CSS (v3/v4)。
    * **TAILWIND 版本锁定：** 首先检查 `package.json`。不要在 v3 项目中使用 v4 语法。
    * **T4 配置守卫：** 对于 v4，不要在 `postcss.config.js` 中使用 `tailwindcss` 插件。使用 `@tailwindcss/postcss` 或 Vite 插件。
* **反表情符号策略 [关键]：** 绝不在代码、标记、文本内容或 alt 文本中使用表情符号。用高质量图标（Radix、Phosphor）或干净的 SVG 原语替换符号。表情符号被禁止。
* **响应式与间距：**
  * 标准化断点（`sm`、`md`、`lg`、`xl`）。
  * 使用 `max-w-[1400px] mx-auto` 或 `max-w-7xl` 包含页面布局。
  * **视口稳定性 [关键]：** 绝不对全高 Hero 部分使用 `h-screen`。始终使用 `min-h-[100dvh]` 以防止移动浏览器上的灾难性布局跳动。
  * **Grid 优于 Flex 数学：** 绝不使用复杂的 flexbox 百分比数学（`w-[calc(33%-1rem)]`）。始终使用 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. 设计工程指令（偏见纠正）
LLM 对特定的 UI 陈词滥调模式有统计偏见。使用这些工程规则主动构建高端界面：

**规则 1：确定性排版**
* **Display/标题：** 默认为 `text-4xl md:text-6xl tracking-tighter leading-none`。
    * **反平庸：** 不推荐将 `Inter` 用于"高端"或"创意"氛围。强制使用 `Geist`、`Outfit`、`Cabinet Grotesk` 或 `Satoshi` 等独特字符。
    * **技术 UI 规则：** Serif 字体在 Dashboard/软件 UI 中被严格禁止。对于这些上下文，专门使用高端 Sans-Serif 配对（`Geist` + `Geist Mono` 或 `Satoshi` + `JetBrains Mono`）。
* **正文/段落：** 默认为 `text-base text-gray-600 leading-relaxed max-w-[65ch]`。

**规则 2：色彩校准**
* **约束：** 最多 1 个强调色。饱和度 < 80%。
* **紫色禁令：** "AI 紫色/蓝色"美学被严格禁止。没有紫色按钮发光，没有霓虹渐变。使用绝对中性基色与高对比度、单一强调色（如 Emerald、Electric Blue 或 Deep Rose）。
* **色彩一致性：** 整个输出坚持一个调色板。不要在同一项目中的暖灰色和冷灰色之间波动。

**规则 3：布局多样化**
* **反居中偏见：** 当 `LAYOUT_VARIANCE > 4` 时，居中 Hero/H1 部分被严格禁止。强制使用"分屏"（50/50）、"左对齐内容/右对齐资源"或"非对称留白"结构。

**规则 4：材质感、阴影和"反卡片滥用"**
* **Dashboard 加固：** 对于 `VISUAL_DENSITY > 7`，通用卡片容器被严格禁止。通过 `border-t`、`divide-y` 或纯粹的负空间使用逻辑分组。数据指标应该呼吸，而不是被装在盒子里，除非功能上需要提升。
* **执行：** 仅当提升传达层次结构时使用卡片。当使用阴影时，将其着色为背景色调。

**规则 5：交互式 UI 状态**
* **强制生成：** LLM 自然生成"静态"成功状态。必须实现完整的交互周期：
  * **加载：** 匹配布局大小的骨架加载器（避免通用圆形旋转器）。
  * **空状态：** 精美组合的空状态，指示如何填充数据。
  * **错误状态：** 清晰的内联错误报告（例如，表单）。
  * **触觉反馈：** 在 `:active` 上，使用 `-translate-y-[1px]` 或 `scale-[0.98]` 模拟物理按压，指示成功/操作。

**规则 6：数据与表单模式**
* **表单：** 标签必须位于输入框上方。辅助文本是可选的，但应存在于标记中。错误文本在输入框下方。为输入块使用标准 `gap-2`。

## 4. 创意主动性（反平庸实现）
为主动对抗通用 AI 设计，系统地将这些高端编码概念作为基线实现：
* **"液态玻璃"折射：** 当需要玻璃态时，超越 `backdrop-blur`。添加 1px 内边框（`border-white/10`）和微妙的内阴影（`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`）以模拟物理边缘折射。
* **磁性微物理（如果 MOTION_INTENSITY > 5）：** 实现略微向鼠标光标拉动的按钮。**关键：** 绝不使用 React `useState` 进行磁性悬停或连续动画。专门使用 Framer Motion 的 `useMotionValue` 和 `useTransform` 在 React 渲染周期之外，以防止移动设备上的性能崩溃。
* **永恒微交互：** 当 `MOTION_INTENSITY > 5` 时，在标准组件（头像、状态点、背景）中嵌入连续、无限的微动画（Pulse、Typewriter、Float、Shimmer、Carousel）。对所有交互元素应用高级 Spring Physics（`type: "spring", stiffness: 100, damping: 20`）——没有线性缓动。
* **布局过渡：** 始终利用 Framer Motion 的 `layout` 和 `layoutId` 属性进行平滑的重排序、调整大小和跨状态变化的共享元素过渡。
* **交错编排：** 不要立即挂载列表或网格。使用 `staggerChildren`（Framer）或 CSS 级联（`animation-delay: calc(var(--index) * 100ms)`）创建顺序瀑布式显示。**关键：** 对于 `staggerChildren`，父级和子级必须驻留在相同的 Client Component 树中。如果数据是异步获取的，将数据作为 props 传递到集中的父级 Motion 包装器中。

## 5. 性能护栏
* **DOM 成本：** 仅将颗粒/噪点滤镜应用于固定的、pointer-event-none 伪元素（如 `fixed inset-0 z-50 pointer-events-none`），绝不应用于滚动容器，以防止连续 GPU 重绘和移动性能下降。
* **硬件加速：** 绝不动画 `top`、`left`、`width` 或 `height`。仅通过 `transform` 和 `opacity` 进行动画。
* **Z-Index 约束：** 绝不未经提示地滥用任意 `z-50` 或 `z-10`。严格为系统性层上下文（粘性导航栏、模态框、覆盖层）使用 z-index。

## 6. 技术参考（刻度定义）

### DESIGN_VARIANCE（级别 1-10）
* **1-3（可预测）：** Flexbox `justify-center`，严格的 12 列对称网格，相等的填充。
* **4-7（偏移）：** 使用 `margin-top: -2rem` 重叠，变化的图像纵横比（如 4:3 旁边是 16:9），左对齐标题在居中对齐数据之上。
* **8-10（非对称）：** 瀑布流布局，带有分数单位的 CSS Grid（如 `grid-template-columns: 2fr 1fr 1fr`），巨大的空白区域（`padding-left: 20vw`）。
* **移动覆盖：** 对于级别 4-10，`md:` 以上的任何非对称布局必须在视口 `< 768px` 时激进地回退到严格的单列布局（`w-full`、`px-4`、`py-8`），以防止水平滚动和布局破坏。

### MOTION_INTENSITY（级别 1-10）
* **1-3（静态）：** 无自动动画。仅 CSS `:hover` 和 `:active` 状态。
* **4-7（流畅 CSS）：** 使用 `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`。使用 `animation-delay` 级联进行加载。严格关注 `transform` 和 `opacity`。谨慎使用 `will-change: transform`。
* **8-10（高级编排）：** 复杂的滚动触发显示或视差。使用 Framer Motion hooks。绝不使用 `window.addEventListener('scroll')`。

### VISUAL_DENSITY（级别 1-10）
* **1-3（艺术画廊模式）：** 大量留白。巨大的部分间隙。一切感觉非常昂贵和干净。
* **4-7（日常应用模式）：** 标准 Web 应用的正常间距。
* **8-10（驾驶舱模式）：** 微小的填充。没有卡片盒子；只用 1px 线条分隔数据。一切都很密集。**强制：** 所有数字使用等宽字体（`font-mono`）。

## 7. AI 特征（禁止模式）
为保证高端、非通用的输出，除非明确要求，否则必须严格避免这些常见的 AI 设计特征：

### 视觉与 CSS
* **禁止霓虹/外发光：** 不要使用默认的 `box-shadow` 发光或自动发光。使用内边框或微妙的着色阴影。
* **禁止纯黑：** 绝不使用 `#000000`。使用 Off-Black、Zinc-950 或 Charcoal。
* **禁止过饱和强调色：** 降低强调色饱和度以优雅地与中性色融合。
* **禁止过度渐变文本：** 不要为大标题使用 text-fill 渐变。
* **禁止自定义鼠标光标：** 它们过时且破坏性能/无障碍。

### 排版
* **禁止 Inter 字体：** 被禁止。使用 `Geist`、`Outfit`、`Cabinet Grotesk` 或 `Satoshi`。
* **禁止超大 H1：** 第一个标题不应该尖叫。用粗细和颜色控制层次，而不仅仅是巨大的比例。
* **Serif 约束：** 仅在创意/编辑设计中使用 Serif 字体。**绝不**在干净的 Dashboard 上使用 Serif。

### 布局与间距
* **完美对齐与间距：** 确保填充和边距在数学上完美。避免带有尴尬间隙的浮动元素。
* **禁止 3 列卡片布局：** 通用的"3 个相等卡片水平排列"功能行被禁止。改用 2 列锯齿形、非对称网格或水平滚动方法。

### 内容与数据（"Jane Doe"效应）
* **禁止通用名称：** "John Doe"、"Sarah Chan"或"Jack Su"被禁止。使用高度创意、听起来真实的名称。
* **禁止通用头像：** 不要为头像使用标准 SVG"蛋"或 Lucide 用户图标。使用创意、可信的照片占位符或特定样式。
* **禁止假数字：** 避免可预测的输出，如 `99.99%`、`50%` 或基本电话号码（`1234567`）。使用有机、混乱的数据（`47.2%`、`+1 (312) 847-1928`）。
* **禁止创业平庸名称：** "Acme"、"Nexus"、"SmartFlow"。发明高端、上下文相关的品牌名称。
* **禁止填充词：** 避免 AI 文案陈词滥调，如"Elevate"、"Seamless"、"Unleash"或"Next-Gen"。使用具体动词。

### 外部资源与组件
* **禁止损坏的 Unsplash 链接：** 不要使用 Unsplash。使用绝对、可靠的占位符，如 `https://picsum.photos/seed/{random_string}/800/600` 或 SVG UI Avatars。
* **shadcn/ui 定制：** 可以使用 `shadcn/ui`，但绝不能处于其通用默认状态。必须自定义圆角、颜色和阴影以匹配高端项目美学。
* **生产就绪的整洁性：** 代码必须极其干净、视觉冲击力强、令人难忘，并在每个细节上精心打磨。

## 8. 创意武器库（高端灵感）
不要默认使用通用 UI。从这个高级概念库中汲取灵感，确保输出视觉冲击力强且令人难忘。适当时，利用 **GSAP（ScrollTrigger/Parallax）** 进行复杂的滚动叙事，或利用 **ThreeJS/WebGL** 进行 3D/Canvas 动画，而不是基本 CSS 动效。**关键：** 绝不在同一组件树中混合 GSAP/ThreeJS 与 Framer Motion。UI/Bento 交互默认使用 Framer Motion。仅在隔离的全页滚动叙事或 canvas 背景（包装在严格的 useEffect 清理块中）中使用 GSAP/ThreeJS。

### 标准 Hero 范式
* 停止在深色图像上居中文本。尝试非对称 Hero 部分：文本干净地左对齐或右对齐。背景应具有高质量、相关的图像，带有微妙的风格化渐变（根据浅色或深色模式优雅地变暗或变亮到背景色）。

### 导航与菜单
* **Mac OS Dock 放大：** 边缘导航栏；图标在悬停时流畅缩放。
* **磁性按钮：** 物理上向光标拉动的按钮。
* **粘性菜单：** 子项像粘性液体一样从主按钮分离。
* **灵动岛：** 一个变形以显示状态/警报的药丸形 UI 组件。
* **上下文径向菜单：** 在点击坐标处精确展开的圆形菜单。
* **浮动快速拨号：** 一个 FAB，弹出到弯曲的次要操作线。
* **超级菜单显示：** 全屏下拉菜单，交错淡入复杂内容。

### 布局与网格
* **Bento Grid：** 非对称、基于瓦片的分组（如 Apple Control Center）。
* **瀑布流布局：** 没有固定行高的交错网格（如 Pinterest）。
* **色度网格：** 显示微妙、连续动画颜色渐变的网格边框或瓦片。
* **分屏滚动：** 滚动时向相反方向滑动的两个屏幕半部分。
* **幕布显示：** 滚动时像幕布一样从中间分开的 Hero 部分。

### 卡片与容器
* **视差倾斜卡片：** 跟踪鼠标坐标的 3D 倾斜卡片。
* **聚光灯边框卡片：** 在光标下动态照亮的卡片边框。
* **玻璃态面板：** 具有内折射边框的真实磨砂玻璃。
* **全息箔卡片：** 悬停时移动的彩虹光反射。
* **Tinder 滑动堆栈：** 用户可以滑走的物理卡片堆栈。
* **变形模态框：** 无缝扩展到其自己的全屏对话框容器的按钮。

### 滚动动画
* **粘性滚动堆栈：** 粘在顶部并物理堆叠在彼此之上的卡片。
* **水平滚动劫持：** 垂直滚动转换为平滑的水平画廊平移。
* **Locomotive 滚动序列：** 帧率直接绑定到滚动条的视频/3D 序列。
* **缩放视差：** 滚动时无缝放大/缩小的中心背景图像。
* **滚动进度路径：** 用户滚动时自动绘制的 SVG 矢量线或路线。
* **液态滑动过渡：** 像粘性液体一样擦拭屏幕的页面过渡。

### 画廊与媒体
* **圆顶画廊：** 感觉像全景圆顶的 3D 画廊。
* **封面流轮播：** 3D 轮播，中心聚焦，边缘向后倾斜。
* **拖拽平移网格：** 可以在任何罗盘方向自由拖拽的无界网格。
* **手风琴图像滑块：** 悬停时完全展开的狭窄垂直/水平图像条。
* **悬停图像轨迹：** 鼠标在后面留下一串弹出/淡出的图像。
* **故障效果图像：** 悬停时短暂的 RGB 通道偏移数字失真。

### 排版与文本
* **动态跑马灯：** 滚动时反向或加速的无限文本带。
* **文本遮罩显示：** 作为视频背景透明窗口的大字体。
* **文本乱码效果：** 加载或悬停时的 Matrix 风格字符解码。
* **圆形文本路径：** 沿旋转圆形路径弯曲的文本。
* **渐变描边动画：** 渐变沿描边连续运行的轮廓文本。
* **动态排版网格：** 躲避或旋转远离光标的字母网格。

### 微交互与效果
* **粒子爆炸按钮：** 成功时破碎成粒子的 CTA。
* **液态下拉刷新：** 像分离水滴一样行动的移动重新加载指示器。
* **骨架闪烁：** 在占位符框上移动的移动光反射。
* **方向感知悬停按钮：** 从鼠标进入的确切一侧进入的悬停填充。
* **涟漪点击效果：** 从点击坐标精确涟漪的视觉波纹。
* **动画 SVG 线条绘制：** 实时绘制自己轮廓的矢量。
* **网格渐变背景：** 有机、熔岩灯般的动画颜色斑点。
* **镜头模糊景深：** 动态聚焦模糊背景 UI 层以突出前景操作。

## 9. "动效引擎"BENTO 范式
生成现代 SaaS 仪表板或功能部分时，必须使用以下"Bento 2.0"架构和动效理念。这超越了静态卡片，强制执行"Vercel-core meets Dribbble-clean"美学，严重依赖永恒物理。

### A. 核心设计理念
* **美学：** 高端、极简、功能性强。
* **调色板：** 背景为 `#f9fafb`。卡片为纯白（`#ffffff`），带有 1px 边框 `border-slate-200/50`。
* **表面：** 对所有主要容器使用 `rounded-[2.5rem]`。应用"扩散阴影"（非常轻、广泛传播的阴影，如 `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`）以创造深度而不杂乱。
* **排版：** 严格的 `Geist`、`Satoshi` 或 `Cabinet Grotesk` 字体栈。对标题使用微妙的 tracking（`tracking-tight`）。
* **标签：** 标题和描述必须放置在卡片**外部和下方**，以保持干净、画廊式的展示。
* **像素完美：** 在卡片内使用慷慨的 `p-8` 或 `p-10` 填充。

### B. 动画引擎规格（永恒动效）
所有卡片必须包含**"永恒微交互"。** 使用以下 Framer Motion 原则：
* **Spring Physics：** 无线性缓动。使用 `type: "spring", stiffness: 100, damping: 20` 获得高端、有分量的感觉。
* **布局过渡：** 大量利用 `layout` 和 `layoutId` 属性确保平滑的重排序、调整大小和共享元素状态过渡。
* **无限循环：** 每个卡片必须有一个无限循环的"活动状态"（Pulse、Typewriter、Float 或 Carousel），以确保仪表板感觉"活着"。
* **性能：** 将动态列表包装在 `<AnimatePresence>` 中并优化为 60fps。**性能关键：** 任何永恒动效或无限循环必须被记忆化并用自己的微型 Client Component 完全隔离。绝不在父布局中触发重新渲染。

### C. 5 种卡片原型（微动画规格）
构建 Bento 网格时实现这些特定的微动画（如第 1 行：3 列 | 第 2 行：2 列分割 70/30）：
1. **智能列表：** 具有无限自动排序循环的项目垂直堆栈。项目使用 `layoutId` 交换位置，模拟 AI 实时优先级排序任务。
2. **命令输入：** 具有多步打字机效果的搜索/AI 栏。它循环通过复杂的提示，包括闪烁光标和带有闪烁加载渐变的"处理"状态。
3. **实时状态：** 具有"呼吸"状态指示器的调度界面。包含一个以"过冲"spring 效果出现的弹出通知徽章，停留 3 秒，然后消失。
4. **宽数据流：** 数据卡片或指标的水平"无限轮播"。确保循环是无缝的（使用 `x: ["0%", "-100%"]`），速度感觉毫不费力。
5. **上下文 UI（专注模式）：** 动画化文本块交错高亮的文档视图，随后是带有微图标的浮动操作工具栏的"浮入"。

## 10. 最终飞行前检查
在输出之前根据此矩阵评估代码。这是你应用于逻辑的**最后**过滤器。
- [ ] 全局状态是否适当地用于避免深层 prop-drilling 而不是任意使用？
- [ ] 是否保证高方差设计的移动布局折叠（`w-full`、`px-4`、`max-w-7xl mx-auto`）？
- [ ] 全高部分是否安全地使用 `min-h-[100dvh]` 而不是有 bug 的 `h-screen`？
- [ ] `useEffect` 动画是否包含严格的清理函数？
- [ ] 是否提供了空状态、加载状态和错误状态？
- [ ] 是否尽可能省略卡片以支持间距？
- [ ] 是否严格将 CPU 密集型永恒动画隔离在自己的 Client Components 中？