+```
+
+#### 3. 流体动画（Fluid Animation）
+
+使用物理感知的缓动曲线：
+
+```css
+.animated-element {
+ transition: all var(--transition-fluid);
+ /* 等价于: transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); */
+}
+```
+
+#### 4. 光学交互（Lensing & Light Interaction）
+
+悬停时添加内发光效果：
+
+```css
+.interactive-element:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
+}
+```
+
+#### 5. 层次分明（Depth & Hierarchy）
+
+使用两级阴影：
+
+```css
+--shadow-sm: 0 2px 4px var(--shadow-color);
+--shadow-md: 0 4px 12px var(--shadow-color);
+```
+
+### 组件设计准则
+
+#### 按钮组件
+
+```typescript
+// Button.tsx
+interface ButtonProps {
+ variant?: 'primary' | 'secondary' | 'ghost';
+ size?: 'sm' | 'md' | 'lg';
+ children: React.ReactNode;
+ onClick?: () => void;
+}
+
+export function Button({ variant = 'primary', size = 'md', children, onClick }: ButtonProps) {
+ return (
+
+ );
+}
+```
+
+#### 卡片组件
+
+```typescript
+// Card.tsx
+interface CardProps {
+ children: React.ReactNode;
+ hover?: boolean;
+}
+
+export function Card({ children, hover = true }: CardProps) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+#### 输入框组件
+
+```typescript
+// Input.tsx
+interface InputProps {
+ placeholder?: string;
+ value: string;
+ onChange: (value: string) => void;
+}
+
+export function Input({ placeholder, value, onChange }: InputProps) {
+ return (
+
onChange(e.target.value)}
+ className="
+ w-full bg-[var(--glass-bg)] backdrop-blur-[10px]
+ border border-[var(--glass-border)] rounded-2xl
+ px-4 py-3 text-base text-[var(--text-color)]
+ transition-all duration-[400ms]
+ focus:outline-none focus:border-[var(--accent-color)]
+ focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent-color)_30%,transparent)]
+ "
+ />
+ );
+}
+```
+
+### CSS 变量系统
+
+所有样式必须使用 CSS 变量，确保主题切换正常工作：
+
+```css
+/* globals.css */
+:root {
+ /* 字体 */
+ --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+ /* 浅色主题 */
+ --bg-color-light: #f0f2f5;
+ --text-color-light: #1d1d1f;
+ --accent-color-light: #007aff;
+ --glass-bg-light: rgba(242, 242, 247, 0.8);
+ --glass-border-light: rgba(255, 255, 255, 0.5);
+ --shadow-color-light: rgba(0, 0, 0, 0.1);
+
+ /* 深色主题 */
+ --bg-color-dark: #121212;
+ --text-color-dark: #f5f5f7;
+ --accent-color-dark: #0a84ff;
+ --glass-bg-dark: rgba(28, 28, 30, 0.75);
+ --glass-border-dark: rgba(60, 60, 60, 0.7);
+ --shadow-color-dark: rgba(0, 0, 0, 0.3);
+
+ /* 圆角 */
+ --radius-2xl: 1.5rem;
+ --radius-full: 9999px;
+
+ /* 阴影 */
+ --shadow-sm: 0 2px 4px var(--shadow-color);
+ --shadow-md: 0 4px 12px var(--shadow-color);
+
+ /* 动画 */
+ --transition-fluid: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+body {
+ --bg-color: var(--bg-color-light);
+ --text-color: var(--text-color-light);
+ --accent-color: var(--accent-color-light);
+ --glass-bg: var(--glass-bg-light);
+ --glass-border: var(--glass-border-light);
+ --shadow-color: var(--shadow-color-light);
+}
+
+body.dark-mode {
+ --bg-color: var(--bg-color-dark);
+ --text-color: var(--text-color-dark);
+ --accent-color: var(--accent-color-dark);
+ --glass-bg: var(--glass-bg-dark);
+ --glass-border: var(--glass-border-dark);
+ --shadow-color: var(--shadow-color-dark);
+}
+```
+
+**使用示例：**
+
+```typescript
+// ✅ 正确 - 使用 CSS 变量
+
+
+// ❌ 错误 - 硬编码颜色
+
+```
+
+### 动画规范
+
+#### 悬停动画
+
+```typescript
+
+```
+
+#### 点击动画
+
+```typescript
+