高自由度前端技能（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 中，将提供者包裹在带有 "use client" 的组件中。
- 交互性隔离： 如果第 4 节或第 7 节（动效/液态玻璃）处于激活状态，则特定的交互式 UI 组件必须提取为独立的叶子组件，并在最顶部使用 'use client'。服务器组件必须仅渲染静态布局。
状态管理： 对隔离的 UI 使用本地的 useState/useReducer。仅在需要避免深层属性传递时使用全局状态。
样式策略： 使用 Tailwind CSS（v3/v4）完成 90% 的样式工作。
- Tailwind 版本锁定： 先检查 package.json。不要在 v3 项目中使用 v4 语法。
- T4 配置防护： 对于 v4，不要在 postcss.config.js 中使用 tailwindcss 插件。请使用 @tailwindcss/postcss 或 Vite 插件。
反表情策略 [关键]： 在代码、标记、文本内容或 alt 文本中切勿使用 emoji。使用高质量的图标（Radix、Phosphor）或简洁的 SVG 基本图形替换符号。Emoji 被禁止。
响应式与间距：
- 标准化断点（sm、md、lg、xl）。
- 使用 max-w-[1400px] mx-auto 或 max-w-7xl 包含页面布局。
- 视口稳定性 [关键]： 对于全高的 Hero 区域，切勿使用 h-screen。始终使用 min-h-[100dvh]，以防止移动浏览器（如 iOS Safari）上出现灾难性的布局跳转。
- 网格优先于弹性数学： 切勿使用复杂的弹性盒子百分比数学（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 或纯粹的负空间进行逻辑分组。数据指标应有呼吸感，除非功能上需要 elevation（z-index），否则不应被框住。
执行： 仅当 elevation 传达层级时才使用卡片。使用阴影时，将其色调调整为背景色。

规则 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）和子元素必须位于相同的客户端组件树中。如果是异步获取数据，请将数据作为 props 传递给一个集中的父级 Motion 包装器。

5. 性能护栏

DOM 成本： 仅在固定的、pointer-events-none 的伪元素（例如，fixed inset-0 z-50 pointer-events-none）上应用颗粒/噪点滤镜，并且切勿在滚动的容器上应用，以防止持续的 GPU 重绘和移动端性能下降。
硬件加速： 切勿对 top、left、width 或 height 进行动画。仅通过 transform 和 opacity 进行动画。
层级索引约束： 不要在未提示的情况下滥用任意的 z-50 或 z-10。严格按照系统层级上下文（固定导航栏、模态框、覆盖层）使用层级索引。

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 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： 第一个标题不应过于夸张。使用字重和颜色来控制层级，而不仅仅是巨大的字号。
衬线字体约束： 仅在创意/编辑设计中才使用衬线字体。切勿在干净的仪表盘上使用衬线字体。

布局与间距

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

内容与数据（“无名氏”效应）

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

外部资源与组件

无损坏的 Unsplash 链接： 不要使用 Unsplash。使用绝对可靠的占位符，如 https://picsum.photos/seed/{random_string}/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 仅用于隔离的整页滚动叙事或 Canvas 背景，并包裹在严格的 useEffect 清理块中。

标准的 Hero 范式

停止在深色图片上居中放置文字。尝试非对称的 Hero 区域：文本干净地左对齐或右对齐。背景应包含一张高质量、相关的图片，并带有微妙的风格渐隐（根据是浅色模式还是深色模式，平滑地变暗或变亮融入背景色）。

导航与菜单

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

布局与网格

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

...

[为翻译截断]

高自由度前端技能（v1）