design-taste-frontend-v1

基于 [[design-foundation]] — hallmark 的 6 项规范和 slop-test 是共同的底线（不可协商）；此技能在底线之上增添 风格，而非取而代之。

高主动性前端技能

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 节（动效／Liquid Glass）处于启用状态，必须将特定的交互式 UI 组件提取为独立的叶子组件，并在最顶部添加 'use client'。Server Components 必须仅渲染静态布局。
• 状态管理： 对于独立的 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-[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. 设计工程指令（偏差校正）

大模型对特定的 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 设计，请将以下高端编码理念系统地作为基线：

• “液态玻璃”折射效果： 需要玻璃拟态时，不要止步于 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 wrapper。

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 网格时（例如，第一行：3 列 | 第二行：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 占用较高的持续动画严格隔离在独立的客户端组件中？

---

输出报告

所有主要技能任务完成后，将提案草稿写入 wiki。

步骤

1. 构建文件名：

• 格式：DDMMYY-<ten>.md
• DDMMYY = 今天的日期（例如，2026 年 6 月 2 日对应 020626）
• <ten> = 用 2–4 个 kebab-case 单词概括完成的工作（例如，landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. 编写 llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. 更新 wiki 索引和日志：

• llmwiki/wiki/index.md — 追加一行：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 追加：## YYYY-MM-DD — <skill-name> — <ten>

仅当技能未生成任何产物且未做出任何决策时才跳过（例如，纯显示模式 /caveman-stats）。