Agent 设计技能四件套：从反 slop 到专业动效

是什么

这是一条来自 @ricouii 的策展推文，他在试用了大量热门设计 Skill 后，最终只保留 4 个。这 4 个 Skill 覆盖了 AI 生成界面的核心痛点：消除 slop、建立设计品味、提供可复用过渡动画、以及规范专业级动画工程。

四个 Skill 的分工

1. Impeccable — 定位是 "The missing design vocabulary for agents"。核心能力是剥离 AI 生成界面的 slop（粗糙感），提供精确的 steering 命令，并能在产品内实时迭代视觉变体。从官网展示的 Before/After 对比看，它解决的是 AI 生成 UI 中常见的 "side-tab border soup"、"live status-chip soup"、"cards in cards" 等典型反模式。社区反馈极度正面，多位用户称其 "replaces paid products while being better"，且目前免费。

2. emilkowalski/skills — 由 Vercel/Linear 背景工程师维护，28K+ stars。这不是一个单一 Skill，而是一套设计工程知识体系，涵盖动画曲线选择、UI 库选型、Apple 设计原则、Sonner toast 指南等。其核心理念是 "Agents don't have great taste" — AI 会选错 easing（如 enter 动画用 ease-in）、用 solid border 替代 semi-transparent shadow 等。这套 Skill 是将领域专家经验编码为 Agent 可消费的规则。

3. transitions.dev — 2.6K stars，提供 12+ 种即用 CSS 过渡模式（card resize、number pop-in、modal open/close 等）。每个过渡都是自包含的 CSS snippet，带 prefers-reduced-motion 守卫。独特之处在于三重交付：网站展示、CLI 拉取（npx transitions-pro add）、以及 Agent Skill（npx skills add）。此外还附带 Refine 工具，可在运行中的应用上注入 timeline 面板，让 Agent 实时对齐 motion tokens。

4. GSAP Skills — 官方出品，13K+ stars。GSAP 在 Webflow 收购后已 100% 免费（包括原 Club 插件如 SplitText、MorphSVG）。这套 Skill 覆盖 core API、timeline、ScrollTrigger、plugins、React/Vue/Svelte 集成、性能优化等完整链条。结构清晰，每个子 Skill 对应一个 GSAP 核心领域，并提供了 canonical pattern 供 Agent 直接生成。

核心洞察

这 4 个 Skill 恰好构成一个完整的 Agent 设计工作流：

• Impeccable 解决 "生成什么"（视觉方向、反 slop）
• emilkowalski/skills 解决 "如何判断好坏"（设计品味、决策规则）
• transitions.dev 解决 "微观交互"（具体过渡模式、可复用 CSS）
• GSAP Skills 解决 "复杂动画工程"（timeline、scroll-driven、性能）

值得注意的是，它们都遵循 npx skills add 的 Agent Skills 标准格式，说明 Agent 工具链正在形成事实上的生态标准。

边界与风险

• Impeccable 目前免费，但商业模式不明确；过度依赖可能面临后续收费或停更风险
• transitions.dev 的 Pro 过渡需要登录，免费层覆盖 12 个基础模式，复杂场景可能不够
• GSAP Skills 假设 Agent 已选择 GSAP，若项目已用 Framer Motion 等其他库，迁移成本需考虑
• 所有 Skill 都依赖底层模型对设计指令的理解能力，模型版本升级可能导致 Skill 效果波动