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：布局多样化

• 反居中偏差： 当 LAYOUT_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) 和子组件必须位于相同的客户端组件树中。如果数据是异步获取的，请将数据作为属性传递给集中式的父级 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 (可预测)： 弹性盒 justify-center，严格的 12 列对称网格，相等的内边距。
• 4-7 (偏移)： 使用 margin-top: -2rem 重叠，变化的图像宽高比（例如，4:3 与 16:9 相邻），居中对齐数据上方的左对齐标题。
• 8-10 (不对称)： 瀑布流布局，使用分数单位的 CSS 网格（例如，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 钩子。绝不使用 window.addEventListener('scroll')。

VISUAL_DENSITY (等级 1-10)

• 1-3 (艺术画廊模式)： 大量留白。巨大的区域间隙。一切感觉非常昂贵和干净。
• 4-7 (日常应用模式)： 标准 Web 应用的正常间距。
• 8-10 (驾驶舱模式)： 微小的内边距。没有卡片框；仅用 1px 线条分隔数据。一切都很紧凑。强制： 对所有数字使用等宽字体 (font-mono)。

7. 100 个 AI 特征（禁止模式）

为了保证优质、非通用的输出，你必须严格避免这些常见的 AI 设计特征，除非用户明确要求：

视觉与 CSS

• 禁止霓虹/外发光： 不要使用默认的 box-shadow 发光或自动发光。使用内边框或微妙的色调阴影。
• 禁止纯黑色： 绝不使用 #000000。使用 Off-Black、Zinc-950 或 Charcoal。
• 禁止过度饱和的强调色： 降低强调色的饱和度，使其与中性色优雅地融合。
• 禁止过度的渐变文字： 不要对大标题使用文字填充渐变。
• 禁止自定义鼠标光标： 它们已经过时，并且会破坏性能和可访问性。

排版

• 禁止 Inter 字体： 禁止使用。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 禁止过大的 H1： 第一个标题不应显得喧闹。通过字重和颜色来控制层级，而不仅仅是巨大的尺寸。
• 衬线字体约束： 仅在创意/编辑设计中才使用衬线字体。绝不在简洁的仪表板上使用衬线字体。

布局与间距

• 完美对齐与间距： 确保内边距和外边距在数学上是完美的。避免带有尴尬间隙的浮动元素。
• 禁止 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 文案的陈词滥调，如"提升"、"无缝"、"释放"或"下一代"。使用具体的动词。

外部资源与组件

• 禁止损坏的 Unsplash 链接： 不要使用 Unsplash。使用绝对的、可靠的占位符，如 https://picsum.photos/seed/{random_string}/800/600 或 SVG UI 头像。
• 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 滑动堆叠： 用户可以滑动移除的物理卡片堆栈。
• 变形模态框： 一个按钮无缝扩展成自己的全屏对话框容器。

滚动动画

• 粘性滚动堆叠： 卡片粘在顶部并物理性地堆叠在一起。
• 水平滚动劫持： 垂直滚动转换为平滑的水平画廊平移。
• 机车滚动序列： 帧率直接与滚动条绑定的视频/3D 序列。
• 缩放视差： 中央背景图像在滚动时无缝缩放。
• 滚动进度路径： SVG 矢量线或路径，在用户滚动时绘制自身。
• 液体滑动过渡： 页面过渡像粘性液体一样擦拭屏幕。

画廊与媒体

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

排版与文本

• 动态跑马灯： 无尽的文本带，在滚动时反转方向或加速。
• 文字遮罩显示： 巨大的排版充当视频背景的透明窗口。
• 文字混乱效果： 加载或悬停时的矩阵式字符解码。
• 圆形文本路径： 沿着旋转圆形路径弯曲的文本。
• 渐变描边动画： 带有渐变持续沿着描边移动的轮廓文字。
• 动态排版网格： 一个字母网格，躲避或远离光标旋转。

微交互与效果

• 粒子爆炸按钮： 成功时碎裂成粒子的 CTA。
• 液体下拉刷新： 移动端重新加载指示器，像分离的水滴一样。
• 骨架微光： 移动的光反射在占位框上移动。
• 方向感知悬停按钮： 填充从鼠标进入的确切一侧进入。
• 涟漪点击效果： 从点击坐标精确泛起的视觉波纹。
• 动画 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 属性，以确保平滑的重新排序、调整大小和共享元素状态过渡。
• 无限循环： 每个卡片必须有一个"活动状态"，无限循环（脉冲、打字机、浮动或轮播），以确保仪表板感觉"有生命力"。
• 性能： 将动态列表包装在 <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 密集型的持续动画隔离在它们自己的客户端组件中？

每周安装量

94

仓库

bnd-1/taste-skill

GitHub 星标

12

首次出现

14 天前

安全审计

Gen Agent Trust HubPassSocketWarnSnykPass

安装于

cursor94

codex94

gemini-cli94

amp94

kimi-cli94

github-copilot94