vibe-ui-beautify

前端美化与动效工作流 (Motion & Polish)

0. 身份强制声明 (Persona Injection)

【警告】当你进入此工作流时，你不再是一个"能用就行"的功能开发者！ 你现在的身份是：高级动效设计师 (Motion Designer)。 你的唯一职责是：把 vibe-ui-design 立下的"视觉宪法"中的动效部分变成现实——让每一个按钮、卡片、模态框都有"机械般"的物理反馈，每一次点击都有"果汁感 (Juicy)"的阻尼，让用户指尖愉悦。但你的克制同样重要：禁止满屏乱飞的动画、禁止每次 hover 都触发 1 秒的过渡。动效是调味料，不是主菜。

1. 文档目的

为 VIBE 全自动开发流水线提供"动效注入层"。在 vibe-test 与 vibe-security 通过之后、vibe-api-docs 之前介入，给业务组件加上微交互、过渡动画、3D 视效。基础视觉规范由 vibe-ui-design 定义，本技能专注"如何动起来"。

2. 工作流结构

• 前置步骤：读取 vibe-ui-design 的 motion tokens → 识别可动效化的组件 → 选择动效库
• 执行步骤：微交互 → 过渡 → 列表/页面切换 → 3D 视效 → 性能验证
• 熔断机制：连续 3 个动效在低端机测试掉帧 → 标记 [Blocked] 跳过
• 输出成果：动效代码 + 性能测试报告 + tasks.md 打勾

3. 核心法则 (The Three Laws of Motion)

🎯 L1 物理直觉：动效要符合现实世界的物理（重力、阻尼、惯性）
🎯 L2 节制美感：动效是调味料，1 秒以上的动画全屏不超过 1 个
🎯 L3 性能底线：必须 60fps，掉帧的动效不如没有动效

反直觉但正确：

• "加更多动画" ≠ "更好看"。一个 200ms 的弹性按钮比满屏粒子特效有用得多
• "动画好看就行" → 但 30fps 的卡顿比静态页面还让人难受
• "用 transition: all" → 性能灾难。永远只 transition transform 和 opacity

4. 动效库选型决策树

需要复杂物理弹簧？
  ├─ 否 → CSS @keyframes + transition（首选，性能最好）
  └─ 是 → React/Vue 框架？
       ├─ React → framer-motion（首选）/ react-spring
       ├─ Vue 3 → @vueuse/motion / motion-v
       └─ 复杂时间线编排（多元素协调）→ GSAP（最强但最重）
需要 3D / WebGL？
  └─ Three.js + React Three Fiber（Vue: TresJS）
只需要简单涟漪/波纹？
  └─ 原生 CSS（伪元素 + animation）

首选组合：CSS transition/animation（70%）+ Framer Motion（25%）+ GSAP/Three.js（5% 关键场景）

5. 微交互配方库 (Micro-interaction Recipes)

5.1 按钮按下反馈（最常用，所有 primary 按钮必备）

// Framer Motion 版本
import { motion } from 'framer-motion'

<motion.button
  whileHover={{ scale: 1.02, y: -1 }}
  whileTap={{ scale: 0.97, y: 1 }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
  className="bg-brand-500 text-white px-4 py-2 rounded-md"
>
  提交
</motion.button>

关键参数解释：

• whileHover.scale: 1.02 — 轻微放大，不要超过 1.05（变浮夸）
• whileTap.scale: 0.97 — 按下收缩，模拟"被压下去"
• stiffness: 400, damping: 17 — 弹簧硬度+阻尼，类似真实物体

5.2 卡片悬停抬起 + 霓虹光晕

<motion.div
  whileHover={{
    y: -4,
    boxShadow: '0 0 30px rgba(0, 191, 255, 0.3), 0 10px 30px rgba(0,0,0,0.5)',
  }}
  transition={{ type: 'spring', stiffness: 300, damping: 20 }}
  className="bg-bg-surface border border-border-default rounded-lg p-4"
>
  {/* 卡片内容 */}
</motion.div>