design-taste-frontend-v1

高自主性前端技能

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。默认使用服务端组件（RSC）。
  • **RSC 安全性：**全局状态仅在客户端组件中有效。在 Next.js 中，请将 provider 放入 "use client" 组件中。
  • **交互隔离：**如果第 4 节或第 7 节（动效／液态玻璃）处于启用状态，必须将相应的交互式 UI 组件提取为独立的叶子组件，并在最顶部添加 'use client'。服务端组件必须仅渲染静态布局。
• **状态管理：**对于独立的 UI，使用本地 useState／useReducer。仅在确实需要避免深层 prop 传递时使用全局状态。
• **样式策略：**90% 的样式使用 Tailwind CSS（v3／v4）。
  • **Tailwind 版本锁定：**先检查 package.json。在 v3 项目中不要使用 v4 语法。
  • **T4 配置防护：**对于 v4，不要在 postcss.config.js 中使用 tailwindcss 插件。请使用 @tailwindcss/postcss 或 Vite 插件。
• **反表情符号策略［关键］：**代码、标记、文本内容或替代文本中绝不使用表情符号。请用高质量图标（Radix、Phosphor）或简洁的 SVG 图元替代符号。严禁使用表情符号。
• 响应式与间距：
  • 统一使用断点（sm、md、lg、xl）。
  • 使用 max-w-[1400px] mx-auto 或 max-w-7xl 限定页面布局宽度。
  • **视口稳定性［关键］：**全高 Hero 区块绝不要使用 h-screen。始终使用 min-h-[100dvh]，以防移动浏览器（iOS Safari）出现严重的布局跳动。
  • **优先使用网格而非弹性布局比例计算：**绝不要使用复杂的 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. 设计工程指令（偏差校正）

大模型对特定的 UI 陈词滥调模式存在统计偏差。请主动运用这些经过设计的规则，构建高端界面：

规则 1：确定性排版

• 展示文字/标题： 默认使用 text-4xl md:text-6xl tracking-tighter leading-none。
  • 反套路： 为营造“高端”或“创意”氛围，请避免使用 Inter。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi，打造独特风格。
  • 技术 UI 规则： 仪表板/软件 UI 严禁使用衬线字体。在这些场景中，只能使用高端无衬线字体组合（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：质感、阴影与“避免卡片过度使用”

• 仪表板强化： 当 VISUAL_DENSITY > 7 时，严禁使用通用卡片容器。通过 border-t、divide-y 或纯粹的留白来实现逻辑分组。除非功能上确实需要层级（z-index），否则数据指标应留有呼吸空间，不要装进框里。
• 执行： 仅在层级关系需要通过高度来体现时使用卡片。使用阴影时，应将其色调调整为与背景色相协调。

规则 5：交互式 UI 状态

• 必须生成： 大模型自然倾向于生成“静态”的成功状态。你必须实现完整的交互周期：
  • 加载： 使用与布局尺寸匹配的骨架屏加载器（避免使用通用圆形加载动画）。
  • 空状态： 精心设计空状态，并说明如何填充数据。
  • 错误状态： 清晰地就地报告错误（例如表单中的错误）。
  • 触觉反馈： 在 :active 状态下，使用 -translate-y-[1px] 或 scale-[0.98] 模拟按压反馈，以表示成功/执行操作。

规则 6：数据与表单模式

• 表单： 标签必须位于输入框上方。辅助文本为可选项，但应存在于标记中。错误文本应位于输入框下方。输入块统一使用 gap-2。

4. 创意主动性（反「AI 垃圾」实现）

为主动杜绝千篇一律的 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 时，在标准组件（头像、状态圆点、背景）中嵌入持续、无限循环的微动画（脉冲、打字机、浮动、闪烁、轮播）。为所有交互元素应用高级弹簧物理效果（type: "spring", stiffness: 100, damping: 20），不要使用线性缓动。
• 布局过渡： 始终使用 Framer Motion 的 layout 和 layoutId 属性，在状态变化时实现平滑的重排、调整大小和共享元素过渡。
• 交错编排： 不要瞬间挂载列表或网格。使用 staggerChildren（Framer）或 CSS 级联（animation-delay: calc(var(--index) * 100ms)），实现依次呈现的瀑布效果。重要： 使用 staggerChildren 时，父组件（variants）和子组件必须位于同一个 Client Component 树中。如果异步获取数据，请将数据作为 props 传入集中的 Parent Motion 包装组件。

5. 性能防护准则

• DOM 开销： 仅将颗粒／噪点滤镜用于固定的、禁用指针事件的伪元素（例如 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。请使用灰黑色、Zinc-950 或炭灰色。
• 禁止过度饱和的点缀色： 降低点缀色的饱和度，使其与中性色优雅融合。
• 禁止过度使用渐变文字： 不要为大型标题使用文字填充渐变。
• 禁止自定义鼠标光标： 这种做法已经过时，还会损害性能和无障碍体验。

排版

• 禁止使用 Inter 字体： 禁用。请使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 禁止过大的 H1： 首个标题不应过于醒目。通过字重和颜色而非单纯放大字号来控制层级。
• 衬线字体限制： 仅在创意类／编辑类设计中使用衬线字体。简洁的仪表盘中绝不可使用衬线字体。

布局与间距

• 精准对齐和间距： 确保内边距和外边距经过精确计算。避免元素悬浮，造成不自然的间隙。
• 禁止三列卡片布局： 禁用常见的“三张等宽卡片水平排列”功能区。请改用双列交错布局、不对称网格或水平滚动布局。

内容与数据（“Jane Doe”效应）

• 禁止使用通用姓名： 禁用“John Doe”、“Sarah Chan”或“Jack Su”。请使用富有创意、听起来真实的姓名。
• 禁止使用通用头像： 请勿将标准 SVG“鸡蛋”或 Lucide 用户图标用作头像。请使用有创意且可信的照片占位图，或采用特定样式。
• 禁止使用虚假数字： 避免 99.99%、50% 或基本电话号码（1234567）等容易被猜到的输出。请使用自然、不规则的数据（47.2%、+1 (312) 847-1928）。
• 禁止使用初创公司俗套名称： 禁用“Acme”、“Nexus”、“SmartFlow”。请构思符合语境且富有高级感的品牌名称。
• 禁止使用填充词： 避免使用“提升”、“无缝”、“释放”或“下一代”等 AI 文案套话。请使用具体的动词。

外部资源与组件

• 禁止使用失效的 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 放大效果： 导航栏位于边缘；悬停时图标会流畅缩放。
• 磁吸按钮： 按钮会产生实体般的吸引力，向光标靠拢。
• 黏胶菜单： 子项会像黏稠液体一样从主按钮上分离出来。
• 灵动岛： 药丸形 UI 组件会变形以显示状态或提醒。
• 上下文径向菜单： 在点击坐标处精准展开的圆形菜单。
• 浮动快捷菜单： FAB 弹出后会沿弧线排列次要操作。
• 大型菜单展开效果： 全屏下拉菜单通过交错淡入展示复杂内容。

布局与网格

• Bento 网格： 不对称的磁贴式分组（例如 Apple 控制中心）。
• 瀑布流布局： 行高不固定的错落网格（例如 Pinterest）。
• 彩度网格： 网格边框或磁贴呈现细腻且持续变化的色彩渐变。
• 分屏滚动： 滚动时，屏幕的两半向相反方向滑动。
• 帷幕揭示效果： 滚动时，Hero 区域从中间像帷幕一样向两侧拉开。

卡片与容器

• 视差倾斜卡片： 根据鼠标坐标追踪并进行 3D 倾斜的卡片。
• 聚光边框卡片： 卡片边框会在光标下方动态发光。
• 玻璃拟态面板： 带有内部折射边框的真实磨砂玻璃效果。
• 全息箔片卡片： 悬停时呈现变幻的彩虹色反光。
• Tinder 滑动卡片堆叠： 用户可滑动移除的一叠实体感卡片。
• 变形模态框： 按钮无缝扩展为自己的全屏对话框容器。

滚动动画

• 粘性滚动堆叠： 卡片固定在顶部，并像实体一样层层叠放。
• 横向滚动劫持： 垂直滚动转化为流畅的横向画廊平移。
• Locomotive 滚动序列： 视频或 3D 序列的帧率直接与滚动条同步。
• 缩放视差： 中央背景图像随滚动无缝放大或缩小。
• 滚动进度路径： SVG 矢量线条或路线会随用户滚动逐渐绘制出来。
• 液态滑动过渡： 页面过渡像黏稠液体一样扫过屏幕。

画廊与媒体

• 穹顶画廊： 带来全景穹顶般观感的 3D 画廊。
• Coverflow 轮播： 中间聚焦、两侧向后倾斜的 3D 轮播。
• 拖动平移网格： 可向任意方向自由拖动的无限网格。
• 手风琴图片滑块： 悬停时会完全展开的狭窄纵向或横向图片条。
• 悬停图片轨迹： 鼠标经过时，身后会留下弹出又淡出的图片轨迹。
• 图像故障效果： 悬停时出现短暂的 RGB 通道偏移数字失真。

排版与文本

• 动感跑马灯： 无尽循环的文字带，可在滚动时反向或加速。
• 文字蒙版揭示： 巨型文字充当透明窗口，展示视频背景。
• 文字乱码效果： 加载或悬停时进行矩阵风格的字符解码。
• 环形文字路径： 沿旋转的圆形路径弯曲排列的文字。
• 渐变描边动画： 沿描边持续流动渐变的轮廓文字。
• 动感排版网格： 字母网格会躲避光标或随之旋转。

微交互与效果

• 粒子爆裂按钮： 成功时，CTA 会碎裂成粒子。
• 液态下拉刷新： 移动端刷新指示器表现得像分离的水滴。
• 骨架屏流光： 光线反射在占位框上移动。
• 方向感知悬停按钮： 悬停填充效果会从鼠标进入的准确一侧开始。
• 点击波纹效果： 从点击坐标精准扩散的可视波纹。
• 动画 SVG 线条绘制： 矢量图形实时绘制自身轮廓。
• 网格渐变背景： 有机的、类似熔岩灯的动态色块。
• 镜头模糊景深： 动态模糊背景 UI 图层，以突出前景操作。

9. “MOTION-ENGINE” 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 属性，确保重新排序、调整大小和共享元素状态过渡流畅。
• 无限循环： 每张卡片都必须有一个无限循环的“活动状态”（脉冲、打字机、浮动或轮播），让仪表板显得“鲜活”。
• 性能： 使用 <AnimatePresence> 包裹动态列表，并针对 60fps 进行优化。性能至关重要： 任何持续运动或无限循环都必须经过记忆化（React.memo），并完全隔离在独立的微型客户端组件中。绝不要触发父级布局重新渲染。

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

构建 Bento 网格时（例如：第 1 行：3 列 | 第 2 行：2 列，按 70/30 拆分），实现以下指定的微动效：

1. 智能列表： 垂直堆叠的项目列表，带有无限自动排序循环。项目使用 layoutId 交换位置，模拟 AI 实时为任务排序。
2. 命令输入框： 搜索/AI 输入栏，带有多步骤打字机效果。它会循环显示复杂提示词，包括闪烁光标，以及带有闪烁加载渐变的“处理中”状态。
3. 实时状态： 带有“呼吸式”状态指示器的日程安排界面。加入弹出的通知徽章，以“过冲”弹簧效果出现，停留 3 秒后消失。
4. 宽幅数据流： 水平排列的“无限轮播”数据卡片或指标。确保循环无缝（使用 x: ["0%", "-100%"]），速度自然流畅。
5. 情境式 UI（专注模式）： 文档视图先以交错效果突出显示文本区块，随后让浮动操作工具栏连同微型图标“浮入”。

10. 最终发布前检查

输出前，请根据此矩阵检查代码。这是对逻辑进行的最后一道筛选。

• 是否恰当地使用全局状态，避免深层属性逐级传递，而非随意使用？
• 高度可变的设计是否确保了移动端布局折叠（w-full、px-4、max-w-7xl mx-auto）？
• 全高度区块是否安全地使用 min-h-[100dvh]，而不是有问题的 h-screen？
• useEffect 动画是否包含严格的清理函数？
• 是否提供了空状态、加载状态和错误状态？
• 是否尽可能省略卡片，改用留白？
• 是否将 CPU 密集型的持续动画严格隔离在独立的客户端组件中？