leonxlnx/taste-skill

高自主性前端技能

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 中，将提供者包装在带有 "use client" 的组件中。
  • 交互性隔离： 如果第 4 或第 7 节（运动/液体玻璃）处于活动状态，则必须将特定的交互式 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-[100dvh]，以防止移动浏览器（iOS Safari）上出现灾难性的布局跳动。
  • 网格优于 Flex 计算： 绝对不要使用复杂的 flexbox 百分比数学计算（w-[calc(33%-1rem)]）。始终使用 CSS 网格（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。
  • 反马虎： 不鼓励为“高级”或“创意”氛围使用 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）并搭配高对比度的单一强调色（例如，翡翠绿、电光蓝或深玫红）。
• 色彩一致性： 整个输出坚持使用一种调色板。不要在同一个项目内在暖灰和冷灰之间摇摆。

规则 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。必须仅在 React 渲染循环之外使用 Framer Motion 的 useMotionValue 和 useTransform，以防止移动端性能崩溃。
• 持续微交互： 当 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 开销： 仅将颗粒/噪声滤波器应用于固定的、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 用于系统性的图层上下文（固定导航栏、模态框、叠加层）。

6. 技术参考 (旋钮定义)

DESIGN_VARIANCE (级别 1-10)

• 1-3 (可预测)： Flexbox 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. AI 标记 (禁止模式)

为保证输出高级、非通用，除非用户明确要求，否则必须严格避免以下常见的 AI 设计特征：

视觉与 CSS

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

字体排印

• 禁止 Inter 字体： 已禁用。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 禁止超大 H1： 第一个标题不应喧宾夺主。使用粗细和颜色控制层次，而不是仅靠巨大的字号。
• 衬线字体约束： 仅在创意/编辑设计中使用衬线字体。绝不在干净的仪表板上使用衬线字体。

布局与间距

• 完美对齐与间距： 确保内边距和边距在数学上完美。避免元素留有尴尬的间隙漂浮。
• 禁止三列卡片布局： 通用的“水平 3 等分卡片”功能行已被禁止。使用两列之字形、非对称网格或水平滚动方法。

内容与数据 ("张大千" 效应)

• 禁止通用名称： “张三”、“李四”或“王五”已被禁止。使用高度创意、听起来真实的名字。
• 禁止通用头像： 不要使用标准的 SVG "蛋形"或 Lucide 用户图标作为头像。使用有创意的、可信的照片占位符或特定的样式。
• 禁止虚假数字： 避免可预测的输出，如 99.99%、50% 或基本电话号码（1234567）。使用有机的、杂乱的数据（47.2%、+86 (21) 8471-1928）。
• 禁止创业公司俗套名称： “某某科技”、“创新无限”、“智汇”。创造高级的、符合上下文的品牌名称。
• 禁止填充词： 避免 AI 文案的陈词滥调，如“提升”、“无缝”、“释放”或“下一代”。使用具体的动词。

外部资源与组件

• 禁止损坏的 Unsplash 链接： 不要使用 Unsplash。使用绝对可靠的占位符，如 https://picsum.photos/seed/{随机字符串}/800/600 或 SVG UI 头像。
• shadcn/ui 自定义： 您可以使用 shadcn/ui，但绝不能使用其通用的默认状态。您必须自定义圆角、颜色和阴影，以匹配高级项目的审美。
• 生产就绪的整洁性： 代码必须极其干净、视觉上引人注目、令人难忘，并在每个细节上精雕细琢。

8. 创意武器库 (高级灵感)

不要默认使用通用 UI。从这个高级概念库中汲取灵感，确保输出视觉上引人注目且令人难忘。适当的时候，利用 GSAP (ScrollTrigger/视差) 进行复杂的滚动叙述，或使用 ThreeJS/WebGL 进行 3D/Canvas 动画，而不是基本的 CSS 动效。关键： 切勿在同一组件树中混合使用 GSAP/ThreeJS 与 Framer Motion。默认对 UI/Bento 交互使用 Framer Motion。对隔离的全页滚动叙述或画布背景独占使用 GSAP/ThreeJS，并包装在严格的 useEffect 清理块中。

标准 Hero 范例

• 停止在深色图像上居中使用文字。尝试非对称 Hero 区块：文本整洁地对齐到左侧或右侧。背景应具有高质量、相关的图像，并带有微妙的风格化渐变（根据是亮色还是暗色模式，优雅地变暗或变亮至背景色）。

导航与菜单

• Mac OS Dock 放大： 导航栏位于边缘；图标在悬停时流畅缩放。
• 磁性按钮： 物理上向光标吸拉的按钮。
• 粘性菜单： 子项像粘稠液体一样从主按钮分离。
• 动态岛： 一个药丸形 UI 组件，可变形以显示状态/提醒。
• 上下文径向菜单： 一个在点击坐标处精确展开的圆形菜单。
• 浮动快速拨号： 一个悬浮操作按钮，弹簧般弹出成一条弯曲的次级操作线。
• 超级菜单展开： 全屏下拉菜单，交错淡入复杂内容。

布局与网格

• Bento 网格： 非对称的、基于磁贴的分组（例如 Apple 控制中心）。
• 瀑布流布局： 没有固定行高的交错网格（例如 Pinterest）。
• 色彩网格： 网格边框或磁贴显示微妙的、持续的……