Agent UI 视觉升级 Skills 安装指南

npx skills add anthropics/skills --skill frontend-design -y

npx uipro-cli init --ai all

npx uipro-cli init --ai <platform>

npx uipro-cli init --ai codex
npx uipro-cli init --ai claude
npx uipro-cli init --ai cursor

npx skills add shadcn/ui -y

npx shadcn@latest init

npx impeccable skills install

/impeccable critique
/impeccable bolder
/impeccable typeset
/impeccable layout
/impeccable polish

npx impeccable skills update

npx impeccable skills check

npx skills@latest add emilkowalski/skills

emil-design-eng
animate
improve-animations
review-animations

emil-design-eng

Design Engineering
+
Motion Taste
+
Interaction Polish

emil-design-eng
        ↓
定义 Motion Taste
        ↓
GSAP
        ↓
实现 Motion Engineering

Emil → 决定动画应该是什么感觉

GSAP → 真正把高级动画实现出来

Layout
↓
Typography
↓
Color
↓
Components
↓
Visual Polish
↓
Motion Taste
↓
GSAP

Button Hover
Opacity
Color Change
Simple Scale
Simple Transition

CSS

Hero Entrance
Multi-element Sequence
Stagger Animation
Section Reveal
Typography Animation
Image Reveal
Card Entrance
Navigation Transition
CTA Animation

GSAP

Scroll Reveal
Parallax
Scroll Progress
Pinned Section
Scroll Storytelling
Horizontal Scroll
Sticky Sequence
Scrub Animation

GSAP
+
ScrollTrigger

Hero
↓
Headline
↓
Subtitle
↓
CTA
↓
Image
↓
Background Effect

gsap.timeline()

delay: 0.2
delay: 0.4
delay: 0.6
delay: 0.8

npm install gsap

npm install gsap @gsap/react

useGSAP()

useEffect()

import gsap from "gsap";

gsap.from(".hero-title", {
  y: 40,
  opacity: 0,
  duration: 1,
  ease: "power3.out"
});

const tl = gsap.timeline();

tl.from(".hero-title", {
  y: 40,
  opacity: 0,
  duration: 0.9
})
.from(".hero-description", {
  y: 24,
  opacity: 0,
  duration: 0.7
}, "-=0.5")
.from(".hero-actions", {
  y: 16,
  opacity: 0,
  duration: 0.6
}, "-=0.4");

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.from(".feature-card", {
  y: 40,
  opacity: 0,
  stagger: 0.1,
  scrollTrigger: {
    trigger: ".features",
    start: "top 80%"
  }
});

import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { useRef } from "react";

export function Hero() {
  const container = useRef(null);

  useGSAP(() => {
    gsap.from(".hero-title", {
      y: 40,
      opacity: 0,
      duration: 0.9,
      ease: "power3.out"
    });
  }, {
    scope: container
  });

  return (
    <section ref={container}>
      <h1 className="hero-title">
        Build better products
      </h1>
    </section>
  );
}

Premium
Refined
Smooth
Intentional
Subtle
Consistent
Controlled

Cinematic
Expressive
Bold

所有元素 fade-up
所有元素 scale-in
大量 bounce
随机 rotation
过度 blur
大量 stagger
大量 parallax
过度 scroll hijacking
所有 section 都做不同特效

页面元素
↓
全部 opacity: 0
↓
全部从下面飞上来

Motion Character:
Premium / Quiet / Smooth

Primary Ease:
power3.out

Entrance Distance:
16px - 40px

Duration:
0.5s - 1.0s

Stagger:
0.04s - 0.12s

Scale:
0.96 - 1

Hover Duration:
150ms - 300ms

Scroll Animation:
Subtle

Bounce:
Avoid

Desktop
↓
完整 Motion

Tablet
↓
适度简化

Mobile
↓
减少 Parallax
减少 Pin
减少复杂 ScrollTrigger
降低动画距离
缩短 Timeline

gsap.matchMedia();

prefers-reduced-motion

减少 Motion
关闭 Parallax
关闭复杂 Scroll Animation
减少移动距离
保留必要状态变化

AGENTS.md
CLAUDE.md
.cursor/rules/
或者独立 gsap-motion Skill

# GSAP Motion Rules

当页面静态视觉、Typography、Spacing、Color、Layout 和组件层级基本完成后，再使用 GSAP 对页面进行 Motion Design。

目标不是增加动画数量，而是通过克制、统一、有节奏的动画提升视觉品质。

## 工作流程

1. 首先检查当前静态页面。
2. 不允许使用动画掩盖 Layout 或视觉设计问题。
3. 识别真正值得动画化的区域。
4. 在编码前定义 Motion Language。
5. 普通 Hover / Focus 优先使用 CSS。
6. 多元素 Sequence 使用 GSAP。
7. 多步骤动画优先使用 gsap.timeline()。
8. Scroll-driven Animation 使用 ScrollTrigger。
9. React / Next.js 优先使用 @gsap/react 的 useGSAP()。
10. 不要默认给所有 Section 添加动画。
11. 必须支持 Responsive Motion。
12. 必须考虑 prefers-reduced-motion。
13. 动画完成后使用 Playwright 进行真实浏览器验收。
14. 删除没有明显提升体验或视觉质量的动画。

## 优先检查区域

- Hero
- Navigation
- Headline
- Typography
- Images
- Cards
- CTA
- Section Transitions
- Data Visualization
- Scroll Storytelling
- Page Transitions

## Motion Style

整体 Motion 应：

- Premium
- Refined
- Smooth
- Intentional
- Subtle

避免：

- Bounce Everywhere
- Excessive Scale
- Random Rotation
- Excessive Blur
- Animation Everywhere
- Scroll Hijacking
- Long Blocking Animations

Animation Timing
Scroll Behavior
Hover
Transition
ScrollTrigger
Pinned Section
Responsive Motion
Interaction

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

npx @playwright/mcp@latest

已有网站 / 页面原型
        │
        ▼
frontend-design
确定整体视觉方向
        │
        ▼
UI UX Pro Max
统一 Design System
        │
        ▼
shadcn/ui
规范组件实现
        │
        ▼
Impeccable
critique
→ bolder
→ typeset
→ layout
        │
        ▼
emil-design-eng
确定 Motion Taste
        │
        ▼
GSAP
实现 Motion Engineering
        │
        ▼
Playwright MCP
真实浏览器
截图 / 滚动 / 交互 / 响应式检查
        │
        ▼
improve-animations
review-animations
        │
        ▼
Impeccable polish
最终视觉打磨
        │
        ▼
Playwright MCP
最终 Browser QA
        │
        ▼
完成

frontend-design
        ↓
Aesthetic Direction

UI UX Pro Max
        ↓
Design System

shadcn/ui
        ↓
Component Implementation

Impeccable
        ↓
Visual Polish

emil-design-eng
        ↓
Motion Taste

GSAP
        ↓
Motion Engineering

Playwright MCP
        ↓
Browser QA

frontend-design
→ 审美方向

UI UX Pro Max
→ 设计系统

shadcn/ui
→ 组件实现

Impeccable
→ 静态视觉高级感

emil-design-eng
→ 动效品味

GSAP
→ 动效工程

Playwright MCP
→ 真实浏览器验收

frontend-design
→ UI UX Pro Max
→ shadcn/ui

视觉方向
Design System
Typography
Layout
Components

Impeccable
→ frontend-design
→ emil-design-eng

Typography
Spacing
Hierarchy
Visual Tension
Details
Motion Taste

emil-design-eng
→ GSAP

Motion Taste

Motion Engineering

GSAP
+
ScrollTrigger

Hero Animation
Scroll Reveal
Pinned Sections
Parallax
Scroll Storytelling
Product Showcase
Horizontal Scroll
Timeline Animation

Playwright MCP

Desktop
Mobile
Tablet
Scroll
Hover
Interaction
Animation Timing
ScrollTrigger
Layout Shift
Performance
Reduced Motion

review-animations
↓
improve-animations
↓
GSAP 调整
↓
Playwright

Playwright MCP
        ↓
Impeccable polish
        ↓
Playwright MCP

Visual QA
Interaction QA
Responsive QA
Motion QA

frontend-design
+
Impeccable
+
emil-design-eng
+
GSAP
+
Playwright MCP

frontend-design
→ 整体审美与视觉方向

Impeccable
→ 静态视觉高级感

emil-design-eng
→ Motion Taste

GSAP
→ Motion Engineering

Playwright MCP
→ Browser QA

UI UX Pro Max
→ Design System

shadcn/ui
→ Component System

1. 使用 frontend-design 分析当前页面整体视觉方向。

2. 使用 UI UX Pro Max 检查 Design System、
   Typography、Spacing、Color 和 Layout。

3. 使用 shadcn/ui 规范组件实现。

4. 使用 Impeccable critique 分析当前视觉问题。

5. 根据需要执行：
   bolder
   typeset
   layout

6. 使用 emil-design-eng 检查 UI 细节，
   并制定统一 Motion Language。

7. 判断哪些动画应该使用 CSS，
   哪些应该使用 GSAP。

8. 使用 GSAP 实现：
   Hero Animation
   Timeline
   Stagger
   Section Transition
   ScrollTrigger
   Parallax
   Scroll Storytelling

9. 不允许为了炫技而增加动画。
   删除没有明显提升视觉和体验的 Motion。

10. 使用 Playwright 打开真实网站，
    检查 Desktop / Mobile / Scroll / Hover /
    Animation / ScrollTrigger。

11. 使用 review-animations 和
    improve-animations 继续优化 Motion。

12. 使用 Impeccable polish 进行最终视觉打磨。

13. 再使用 Playwright 完成最终验收。

Design First
↓
Polish Second
↓
Motion Third
↓
QA Last

页面不好看
↓
疯狂加动画

Typography
+
Spacing
+
Hierarchy
+
Composition
+
Components
+
Micro Details
+
Motion
+
Consistency

Motion

Design
Typography
Layout
Visual Hierarchy

Design Direction
        ↓
Design System
        ↓
Components
        ↓
Visual Polish
        ↓
Motion Taste
        ↓
Motion Engineering
        ↓
Browser QA

frontend-design
        ↓
UI UX Pro Max
        ↓
shadcn/ui
        ↓
Impeccable
        ↓
emil-design-eng
        ↓
GSAP
        ↓
Playwright MCP

Impeccable
→ 页面看起来高级

emil-design-eng
→ 动画应该怎么动才高级

GSAP
→ 把高级动画真正实现出来

Playwright MCP
→ 验证它实际上看起来是否高级