design-taste-frontend

高自主性前端技能

何时使用

• 当用户要求以出色的设计品味和反通用化约束来创建、改进或审查前端 UI 时使用。
• 当 React、Next.js、Tailwind、动效、组件状态、排版、间距、颜色或响应式行为需要资深级设计判断时使用。
• 当输出必须克服常见的大模型 UI 偏见时使用，例如居中式 hero、紫色渐变、卡片滥用、状态缺失和脆弱布局。

示例

用户请求：

使用 @design-taste-frontend 审查此界面，找出影响最大的设计问题，并提出可直接实施的改进方案。

局限性

• 本技能提供前端设计与实现指导；它不能替代特定于项目的产品需求、无障碍审查或用户测试。
• 在将生成的 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。默认使用服务端组件（RSC）。
  • RSC 安全性： 全局状态只能在客户端组件中使用。在 Next.js 中，请将 Providers 包装在 "use client" 组件中。
  • 交互隔离： 如果第 4 或第 7 节（Motion/Liquid Glass）已启用，必须将特定的交互式 UI 组件提取为独立的叶子组件，并在最顶部添加 'use client'。服务端组件可以获取数据并渲染动态服务端输出；浏览器状态、副作用和事件处理程序则应隔离在客户端组件中。
• 状态管理： 对于独立的 UI，使用本地 useState/useReducer。仅在需要避免深层属性逐层传递时使用全局状态。
• 样式策略： 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-[100svh]；需要跟踪浏览器界面变化时使用 100dvh。请测试地址栏或键盘变化，因为滚动时 dvh 可能会改变尺寸。
  • 优先使用 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（请检查已安装的版本）。使用各已安装图标库所支持的 weight/stroke API；Radix 图标与 Phosphor 不共用通用的 strokeWidth 约定。

3. 设计工程指令（偏差校正）

LLM 对特定的 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：布局多样化

• **避免居中偏好：**当 DESIGN_VARIANCE > 4 时，严禁使用居中的 Hero／H1 区块。强制采用“分屏”（50/50）、“左侧对齐内容／右侧对齐素材”或“不对称留白”布局。

规则 4：材质、阴影与“避免过度使用卡片”

• **强化仪表盘：**当 VISUAL_DENSITY > 7 时，严禁使用通用卡片容器。通过 border-t、divide-y 或纯粹的留白来进行逻辑分组。除非功能上确实需要层级提升（z-index），否则数据指标应留有呼吸空间，不要用边框框起来。
• **执行方式：**仅当层级关系需要通过层高来体现时才使用卡片。使用阴影时，应让阴影带有背景色调。

规则 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 时，仅在动画能传达状态时才酌情使用克制的动效；默认不要为普通控件添加连续动画。所有交互元素都应用高级弹簧物理效果（type: "spring", stiffness: 100, damping: 20），不要使用线性缓动。
• 布局过渡： 始终使用 Framer Motion 的 layout 和 layoutId 属性，在状态变化时实现平滑的重新排序、尺寸调整和共享元素过渡。
• 交错编排： 不要一次性挂载列表或网格。使用 staggerChildren（Framer）或 CSS 级联（animation-delay: calc(var(--index) * 100ms)）实现依次呈现的瀑布效果。重要： 使用 staggerChildren 时，父级（variants）和子级必须位于同一个 Client Component 树中。如果异步获取数据，请将数据作为属性传入集中的 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）： 明确列出 transform, opacity 等过渡属性，并设置合适的时长／缓动。使用 animation-delay 级联效果实现加载时的入场动画。严格聚焦于 transform 和 opacity。谨慎使用 will-change: transform。
• 8-10（高级编排）： 使用复杂的滚动触发展示效果或视差效果。使用 Framer Motion 钩子。绝不要使用 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。
• **禁止过度饱和的强调色：**降低强调色的饱和度，使其与中性色优雅融合。
• **禁止过度使用渐变文字：**不要为大型标题使用文本填充渐变。
• **禁止自定义鼠标光标：**这类设计已经过时，还会损害性能和无障碍体验。

排版

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

布局与间距

• **确保对齐与间距恰到好处：**确保内边距和外边距经过精确计算。避免元素漂浮，造成间距不协调。
• **禁止三列卡片布局：**通用的“三张等宽卡片水平排列”功能区已被禁用。请改用双列错落布局、不对称网格或水平滚动布局。

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

• 禁止通用姓名：“John Doe”“Sarah Chan”或“Jack Su”均不可使用。请使用富有创意、听起来真实的姓名。
• **禁止通用头像：**不要使用标准 SVG“鸡蛋”头像或 Lucide 用户图标作为头像。请使用有创意、可信的照片占位图，或采用特定样式。
• **禁止虚构数字：**避免使用 99.99%、50% 等容易预测的数值，或基本电话号码（1234567）。请使用明确标注的合成数据或经用户提供并验证的数值；绝不能编造看似真实的电话号码或性能指标。
• 禁止初创公司套路化名称：“Acme”“Nexus”“SmartFlow”均不可使用。请创造具有高级质感、符合语境的品牌名称。
• **禁止填充词：**避免使用“Elevate”“Seamless”“Unleash”或“Next-Gen”等 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 范式

当产品和用户明确要求采用这一视觉方向时，可考虑以下可选的 “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 进行优化。性能至关重要： 任何持续动效或无限循环都必须使用 memo（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. 情境化界面（专注模式）： 文档视图中，先为文本块添加交错高亮动画，再让浮动操作工具栏以“浮入”效果出现，并带有微型图标。

10. 最终输出前检查

输出前，请依据此矩阵评估代码。这是应用于逻辑的最后一道检查。

• 是否恰当地使用了全局状态来避免深层 prop-drilling，而非随意使用？
• 对于高度变化的设计，是否确保移动端布局能够折叠（w-full、px-4、max-w-7xl mx-auto）？
• 全高区块是否安全地使用了 min-h-[100dvh]，并针对预期的键盘/浏览器行为验证了视口策略？
• useEffect 动画是否包含严格的清理函数？
• 是否提供了空状态、加载状态和错误状态？
• 是否尽可能以留白替代卡片？
• 是否将 CPU 密集型持续动画严格隔离在各自的 Client Component 中？

无障碍性、真实性与性能

这些设计偏好应让位于用户的品牌、现有架构和无障碍需求。尊重 prefers-reduced-motion，为非必要的持续动画提供暂停／停止功能，保持键盘焦点稳定，避免将强制滚动劫持作为导航方式。悬停／磁吸／拖动交互需要提供等效的键盘／触控操作；对话框需要具备语义、焦点管理以及转义键／关闭行为。确保对比度充足、焦点清晰可见、目标尺寸适当、标签与错误描述正确关联，并通过实时区域播报信息，同时避免播报装饰性循环动画。只有在有证据时，才将金融／状态／AI 活动视为真实；标注模拟数据，并使用已授权／本地图片，而非依赖远程占位内容的可用性／隐私保护。单靠 React.memo 无法停止动画处理、保证隔离或实现 60fps：请在目标设备上测量 CPU／GPU、减少动态效果时的表现、屏幕外行为和清理情况。服务端渲染、Tailwind 语法和动画 API 需要检查指定版本；任何样式方案都无法保证响应式或可用于生产环境。