design-taste-frontend

name	design-taste-frontend
description	资深 UI/UX 工程师。架构数字界面，覆盖 LLM 的默认偏见。强制基于度量的规则、严格的组件架构、CSS 硬件加速，以及均衡的设计工程。

高能动性前端技能

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 中，把 provider 包在一个 "use client" 组件里。
  • 交互性隔离： 如果第 4 或第 7 节（Motion/Liquid Glass）激活，那个具体的交互式 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 插件。
• 反 EMOJI 策略 [关键]： 绝不在代码、标记、文本内容或 alt 文本中使用 emoji。用高质量图标（Radix、Phosphor）或干净的 SVG 基元替换符号。emoji 被禁止。
• 响应式与间距：
  • 标准化断点（sm、md、lg、xl）。
  • 用 max-w-[1400px] mx-auto 或 max-w-7xl 约束页面布局。
  • 视口稳定性 [关键]： 绝不对全高 Hero 分区用 h-screen。始终用 min-h-[100dvh] 以防止移动浏览器（iOS Safari）上灾难性的布局跳动。
  • 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：确定性排版

• 展示/标题： 默认用 text-4xl md:text-6xl tracking-tighter leading-none。
  • 反 SLOP： 在"高端"或"创意"氛围中不鼓励用 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 紫/蓝"美学严格被禁。没有紫色按钮辉光，没有霓虹渐变。使用绝对中性的基色（Zinc/Slate）配高对比、单一的强调色（如 Emerald、Electric Blue 或 Deep Rose）。
• 颜色一致性： 整个输出坚持一套调色板。不要在同一项目内在暖灰和冷灰之间波动。

规则 3：布局多样化

• 反居中偏见： 当 LAYOUT_VARIANCE > 4 时，居中的 Hero/H1 分区严格被禁。强制用"分屏"（50/50）、"左对齐内容/右对齐资产"或"不对称留白"结构。

规则 4：材质、阴影与"反卡片滥用"

• DASHBOARD 加固： 对 VISUAL_DENSITY > 7，通用的卡片容器严格被禁。通过 border-t、divide-y 或纯负空间做逻辑分组。除非功能上需要抬升（z-index），否则数据指标应当在不被框住的情况下呼吸。
• 执行： 仅当抬升传达层级时才用卡片。使用阴影时，把它染成背景色调。

规则 5：交互式 UI 状态

• 强制生成： LLM 天生生成"静态"的成功状态。你必须实现完整的交互周期：
  • Loading： 匹配布局尺寸的骨架加载器（避免通用的圆形 spinner）。
  • 空状态： 精美编排的空状态，指示如何填充数据。
  • 错误状态： 清晰的内联错误报告（如表单）。
  • 触觉反馈： 在 :active 时，用 -translate-y-[1px] 或 scale-[0.98] 模拟表示成功/动作的物理按压。

规则 6：数据与表单模式

• 表单： 标签必须位于输入之上。辅助文字可选但应存在于标记中。错误文字在输入下方。输入块用标准的 gap-2。

4. 创意主动性（反 SLOP 实现）

为主动对抗通用的 AI 设计，把这些高端编码概念系统性地作为你的基线实现：

• "Liquid Glass"折射： 需要玻璃拟态时，超越 backdrop-blur。加一个 1px 内边框（border-white/10）和一个微妙的内阴影（shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]）以模拟物理边缘折射。
• 磁性微物理（若 MOTION_INTENSITY > 5）： 实现向鼠标光标略微吸引的按钮。关键： 绝不对磁性 hover 或连续动画用 React useState。只用 Framer Motion 的 useMotionValue 和 useTransform，在 React 渲染周期之外，以防止移动端性能崩溃。
• 永续微交互： 当 MOTION_INTENSITY > 5 时，在标准组件（头像、状态点、背景）中嵌入连续、无限的微动画（Pulse、Typewriter、Float、Shimmer、Carousel）。对所有交互元素应用高端弹簧物理（type: "spring", stiffness: 100, damping: 20）——不用线性缓动。
• 布局过渡： 始终利用 Framer Motion 的 layout 和 layoutId 属性，实现跨状态变化的平滑重排序、调整尺寸和共享元素过渡。
• 错落编排： 不要瞬间挂载列表或网格。用 staggerChildren（Framer）或 CSS 级联（animation-delay: calc(var(--index) * 100ms)）创造顺序的瀑布式显现。关键： 对 staggerChildren，父级（variants）和子级必须位于相同的 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 严格用于系统性的层上下文（Sticky Navbar、Modal、Overlay）。

6. 技术参考（旋钮定义）

DESIGN_VARIANCE（等级 1-10）

• 1-3（可预测）： Flexbox justify-center、严格的 12 列对称栅格、相等的内边距。
• 4-7（偏移）： 用 margin-top: -2rem 重叠、多变的图片宽高比（如 4:3 挨着 16:9）、左对齐标题压在居中数据之上。
• 8-10（不对称）： Masonry 布局、带分数单位的 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。用近黑、Zinc-950 或炭黑。
• 不要过饱和强调色： 让强调色去饱和以优雅地与中性色融合。
• 不要过度渐变文字： 不要对大标题用 text-fill 渐变。
• 不要自定义鼠标光标： 它们过时且毁掉性能/无障碍。

排版

• 不要 Inter 字体： 被禁。用 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 不要超大 H1： 第一个标题不应尖叫。用字重和颜色控制层级，而不只是靠巨大的尺度。
• Serif 约束： 仅对创意/编辑感设计用 Serif 字体。绝不在干净的 Dashboard 上用 Serif。

布局与间距

• 完美对齐与间距： 确保内边距和外边距在数学上完美。避免带别扭间隙的浮动元素。
• 不要 3 列卡片布局： 通用的"3 张等宽卡片横排"特性行被禁。改用 2 列 Zig-Zag、不对称栅格或横向滚动方式。

内容与数据（"Jane Doe"效应）

• 不要通用姓名： "John Doe"、"Sarah Chan" 或 "Jack Su" 被禁。用高度有创意、听起来真实的姓名。
• 不要通用头像： 不要用标准的 SVG "鸡蛋"或 Lucide user 图标作头像。用有创意、可信的照片占位或特定的样式。
• 不要假数字： 避免可预测的输出如 99.99%、50% 或占位电话号[phone]）。用有机、凌乱的非联系值，如 47.2% 或 18 of 43。
• 不要创业公司 slop 名： "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。GSAP/ThreeJS 只用于隔离的全页滚动叙事或 canvas 背景，包在严格的 useEffect 清理块中。

标准 Hero 范式

• 别再在深色图片上做居中文字。试试不对称的 Hero 分区：文字干净地左对齐或右对齐。背景应有一张高质量、相关的图片，配微妙的风格化淡出（根据是浅色还是深色模式，优雅地变暗或变亮融入背景色）。

导航与菜单

• Mac OS Dock 放大： 导航栏在边缘；图标在 hover 时流畅缩放。
• 磁性按钮： 物理地向光标吸引的按钮。
• 黏液菜单： 子项像黏稠液体那样从主按钮分离。
• Dynamic Island： 一个胶囊形 UI 组件，变形以显示状态/提醒。
• 情境径向菜单： 一个恰好在点击坐标处展开的圆形菜单。
• 浮动 Speed Dial： 一个 FAB 弹出成一条弧形的次要动作线。
• Mega Menu 显现： 全屏下拉，错落淡入复杂内容。

布局与栅格

• Bento Grid： 不对称、基于瓦片的分组（如 Apple 控制中心）。
• Masonry 布局： 无固定行高的错落栅格（如 Pinterest）。
• Chroma Grid： 栅格边框或瓦片显示微妙、持续动画的色彩渐变。
• 分屏滚动： 两个屏幕半边在滚动时向相反方向滑动。
• 幕布显现： Hero 分区在滚动时像幕布一样从中间分开。

卡片与容器

• 视差倾斜卡片： 一张追踪鼠标坐标的 3D 倾斜卡片。
• 聚光边框卡片： 卡片边框在光标下动态点亮。
• 玻璃拟态面板： 真正的磨砂玻璃配内折射边框。
• 全息箔卡： 虹彩、彩虹光反射在 hover 时移动。
• Tinder 滑动堆： 用户可以滑走的物理卡片堆。
• 变形 Modal： 一个按钮无缝展开成它自己的全屏对话框容器。

滚动动画

• 粘性滚动堆叠： 卡片粘到顶部并物理地互相堆叠。
• 横向滚动劫持： 竖直滚动转化为平滑的横向画廊平移。
• Locomotive 滚动序列： 帧率直接绑定滚动条的视频/3D 序列。
• 缩放视差： 中央背景图随你滚动无缝放大/缩小。
• 滚动进度路径： SVG 矢量线或路线随用户滚动自我绘制。
• 液态滑动过渡： 页面过渡像黏稠液体那样擦过屏幕。

画廊与媒体

• 穹顶画廊： 一个感觉像全景穹顶的 3D 画廊。
• Coverflow 轮播： 3D 轮播，中央聚焦、边缘向后倾斜。
• 拖拽平移栅格： 一个可以自由向任意方向拖动的无边界栅格。
• 手风琴图片滑块： 窄的竖直/横向图片条在 hover 时完全展开。
• Hover 图片轨迹： 鼠标在身后留下一串弹出/淡出的图片。
• 故障效果图片： hover 时短暂的 RGB 通道偏移数字失真。

排版与文字

• 动态跑马灯： 无尽的文字带在滚动时反向或加速。
• 文字遮罩显现： 巨大排版充当通向视频背景的透明窗口。
• 文字乱码效果： 载入或 hover 时 Matrix 风格的字符解码。
• 圆形文字路径： 文字沿旋转的圆形路径弯曲。
• 渐变描边动画： 描边文字，渐变沿描边持续流动。
• 动态排版栅格： 一个字母栅格，字母躲避或旋转离开光标。

微交互与效果

• 粒子爆炸按钮： CTA 在成功时碎成粒子。
• 液态下拉刷新： 移动重载指示器像脱离的水滴。
• 骨架微光： 移动的光反射掠过占位框。
• 方向感知 Hover 按钮： hover 填充从鼠标进入的精确一侧进入。
• 涟漪点击效果： 视觉波纹精确地从点击坐标扩散。
• 动画 SVG 线条绘制： 矢量实时绘制自己的轮廓。
• 网格渐变背景： 有机的、熔岩灯般的动画色块。
• 镜头模糊景深： 动态聚焦模糊背景 UI 层以突出前景动作。

9. "运动引擎"BENTO 范式

当生成现代 SaaS 仪表盘或特性分区时，你必须利用以下"Bento 2.0"架构和运动哲学。这超越静态卡片，强制一种"Vercel 内核遇上 Dribbble 干净"的美学，高度依赖永续物理。

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-tight）。
• 标签： 标题和描述必须放在卡片外部下方，以保持干净的画廊式呈现。
• 像素完美： 卡片内部用慷慨的 p-8 或 p-10 内边距。

B. 动画引擎规格（永续运动）

所有卡片都必须包含**"永续微交互"**。使用以下 Framer Motion 原则：

• 弹簧物理： 不用线性缓动。用 type: "spring", stiffness: 100, damping: 20 获得高端、有重量的感觉。
• 布局过渡： 大量利用 layout 和 layoutId 属性，以确保平滑的重排序、调整尺寸和共享元素状态过渡。
• 无限循环： 每张卡片都必须有一个无限循环的"激活状态"（Pulse、Typewriter、Float 或 Carousel），以确保仪表盘感觉"活着"。
• 性能： 把动态列表包在 <AnimatePresence> 中并为 60fps 优化。性能关键： 任何永续运动或无限循环都必须被 memoize（React.memo）并完全隔离在它自己微小的 Client Component 中。绝不在父级布局中触发重渲染。

C. 5 种卡片原型（微动画规格）

构建 Bento 栅格时实现这些具体的微动画（如第 1 行：3 列 | 第 2 行：2 列按 70/30 分割）：

1. 智能列表： 带无限自动排序循环的竖直项堆。项用 layoutId 交换位置，模拟 AI 实时排定任务优先级。
2. 命令输入： 带多步打字机效果的搜索/AI 栏。它循环切换复杂提示词，包括闪烁光标和带微光加载渐变的"处理中"状态。
3. 实时状态： 带"呼吸"状态指示器的排程界面。包含一个弹出通知徽章，以"过冲"弹簧效果浮现，停留 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 Component 中？