zhengrui0207-png/personal-site

高自主性前端技能

1. 当前基线配置

• DESIGN_VARIANCE: 8（1=完美对称，10=艺术混沌）
• MOTION_INTENSITY: 6（1=静止/无运动，10=电影级/魔幻物理）
• VISUAL_DENSITY: 4（1=艺术画廊/通透，10=驾驶舱/密集数据）

AI指令： 所有生成的基线严格设为这些值（8， 6， 4）。请勿让用户编辑此文件。否则，始终听从用户：根据他们在聊天提示中明确提出的要求，动态调整这些值。使用这些基线（或用户覆盖后的值）作为全局变量，驱动第3至7节中的具体逻辑。

语言保留[关键]： 你必须保留用户项目的原始语言。如果现有代码库对UI文本、标签、标题、描述或任何面向用户的内容使用中文，你必须保持所有内容为中文。永远不要将现有中文文本替换或翻译成英文。此规则适用于所有生成的代码，包括新组件、页面以及对现有文件的修改。

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）上出现灾难性的布局跳动。
  • 优先网格，避免弹性数学： 永远不要使用复杂的弹性盒子百分比计算（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：布局多样化

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

5. 性能护栏

• DOM开销： 仅将颗粒/噪声过滤器应用于固定、pointer-events-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. 100个AI破绽（禁用模式）

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

视觉与CSS

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

排版

• 禁止使用Inter字体： 已禁用。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 禁止超大H1： 第一个标题不应过于醒目。通过字重和颜色控制层级，而非仅靠巨大字号。
• 衬线约束： 仅对创意/编辑设计使用衬线字体。永远不要在简洁的仪表盘上使用衬线字体。

布局与间距

• 完美对齐与间距： 确保内边距和外边距在数学上完美。避免带尴尬间隙的浮动元素。
• 禁止三列卡片布局： 通用的"3个等宽水平卡片"特性行已被禁用。改用两列锯齿形、不对称网格或水平滚动方法。

内容与数据（"Jane Doe"效应）

• 禁止通用名称： "John Doe"、"Sarah Chan" 或 "Jack Su" 被禁用。使用高度创意、听起来真实的名字。
• 禁止通用头像： 不要使用标准SVG "蛋形"或 Lucide 用户图标作为头像。使用创意、可信的照片占位符或特定样式。
• 禁止虚假数字： 避免可预测的输出，如 99.99%、50% 或基本电话号码（1234567）。使用有机、杂乱的数据（47.2%、+1 (312) 847-1928）。
• 禁止创业公司拙劣命名： "Acme"、"Nexus"、"SmartFlow"。创造高级、上下文相关的品牌名称。
• 禁止填充词： 避免AI文案陈词滥调，如"Elevate"、"Seamless"、"Unleash" 或 "Next-Gen"。使用具体的动词。

外部资源与组件

• 禁止损坏的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 严格包裹在 useEffect 清理块中，用于隔离的全页滚动叙事或 canvas 背景。

标准的Hero范例

• 停止在深色图片上叠加居中文本。尝试不对称的Hero区域：文本干净地左对齐或右对齐。背景应包含高质量、相关的图片，并带有微妙的风格化淡入（根据亮色或暗色模式，优雅地变暗或变亮以融入背景色）。

导航与菜单

• Mac OS Dock 放大效果： 导航栏在边缘；图标在悬停时流畅缩放。
• 磁性按钮： 按钮物理上向光标拉近。
• 粘性菜单： 子项目像粘稠液体一样从主按钮分离。
• 动态岛： 一个药丸形状的UI组件，可变形以显示状态/提醒。
• 上下文径向菜单： 一个圆形菜单，在点击点精确展开

……（此处为原内容截断）