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 中？