Agent Skill 正在重新定义设计师与 AI 编码工具的协作方式。过去用 Cursor 或 Claude Code 写前端，动效靠手调、配色靠猜、组件靠复制粘贴，产出离"能交付"差一大截。Design Skill 的出现，把动画规范、组件库最佳实践、设计系统提取这些原本只存在于资深前端脑子里的知识，封装成了 AI Agent 能直接读取的 Markdown 指令集。 本文拆解 5 款覆盖动效生成、3D 可视化、设计规范提取、组件系统对齐四个方向的 Design Skill，逐个说清楚它能干什么、不能干什么、跟同类比差在哪。
5 款 Skill 功能定位与核心差异
先把定位理清楚。这 5 款 Skill 各自切的是设计开发流程中完全不同的环节，不存在互相替代关系：
Text to Lottie Skill（diffusionstudio/lottie）解决的是"矢量动画从零到可交付"的问题。输入 SVG 文件加上一段动画描述，Agent 直接输出符合 Skottie 渲染引擎规范的 Lottie JSON，本地实时预览可调。它的核心优势是绕过了 After Effects 这个传统动画生产环节——不需要 AE 导出 bodymovin，不需要动画设计师逐帧调关键帧。对标的替代方案是 LottieFiles Creator（在线编辑器）和 vizGPT（提示词生成 Lottie），但前者需要手动操作关键帧，后者缺乏本地预览循环。
GSAP Skill（greensock/gsap-skills）是 GreenSock 官方出的 8 个子 Skill 集合，覆盖 Core API、Timeline、ScrollTrigger、Plugin、React/Vue/Svelte 框架适配和性能优化。2024 年秋季 Webflow 收购 GSAP 后，所有 Plugin 包括 SplitText、MorphSVG 全部免费开放，Skill 里对这一点有明确标注。它教会 Agent 做到的关键事情是：用 transform 而非触发 layout 的属性、用 autoAlpha 代替 opacity、创建 Timeline 而非链式 delay。对标方案是 LottieFiles 的 motion-design-skill（偏运动设计原则，不写具体代码）和 Costumary 的 gsap-choreography（专攻产品演示动画编排），三者互补而非竞争。
three-scope-map-skill（songsummer920-dazzle）面向数据大屏场景，输入地区名称即可生成基于 Three.js 的 3D 交互地图。内置多套配色主题，支持缩放、平移、点位标注、飞线动效。传统做法是用 ECharts GL 或手动写 Three.js + GeoJSON 解析 + d3 投影转换，开发周期至少 2-3 天。这个 Skill 把整套流程压缩到一句话触发。局限明显：仅覆盖中国行政区划地图，海外场景无法使用；定制深度不如手写 Three.js；依赖 DataV 的 GeoJSON 数据源。
Web to Design md（核心概念来自 Google Stitch 的 DESIGN.md 规范）做的事情是：输入一个网址，自动提取该网站的配色体系、字体层级、CSS 变量、间距规律、动效曲线，输出一份结构化的 design.md 文档。这份文档直接丢进项目根目录，任何支持 Agent Skills 的工具都能读取并在生成代码时对齐该设计语言。VoltAgent 维护的 awesome-design-md 仓库已经预提取了 Stripe、Vercel、Linear、Nike 等 66 个品牌的设计规范文件，10 天拿下 GitHub 近 4 万 Star。但需要注意：社区反馈有部分色值和 Token 描述与实际设计系统存在偏差，VoltAgent 不接受社区提交新品牌的 PR，只接受修正类贡献。
Shadcn/ui Skill 有两个版本值得区分。官方版随 shadcn CLI v4 发布（2026 年 3 月），通过 npx shadcn@latest mcp init 安装，核心能力是自动读取项目的 components.json 配置，让 Agent 知道你用的是 Radix 还是 Base UI、Tailwind 版本、已安装组件列表、路径别名，首次生成就能写对。第三方版（如 mattbx/shadcn-skills）补充了两个能力：在 1500+ 社区组件库中搜索已有轮子、按 shadcn 设计模式审查自定义组件。两者配合使用效果最好。
安装与兼容性实测
统一安装入口是 npx skills add，兼容 Cursor、Claude Code、Codex、Windsurf、Copilot、Gemini CLI 等 40+ Agent。以 Cursor 为例，也可以走 Settings → Rules → Add Rule → Remote Rule 手动添加 GitHub 仓库路径。 各 Skill 安装命令速查：
Text to Lottie — npx skills add https://github.com/diffusionstudio/lottie --skill text-to-lottie，需要本地 Node.js 环境，安装后首次运行会拉取 CanvasKit WASM 文件用于 Skottie 渲染。
GSAP — npx skills add https://github.com/greensock/gsap-skills，8 个子 Skill 一次性安装。Claude Code 也支持 /plugin marketplace add greensock/gsap-skills。 three-scope-map-skill — 需要手动克隆仓库后拷贝 Skill 文件到对应 Agent 的 skills 目录，没有 npx 一键安装。
Web to Design md — 直接从 awesome-design-md 仓库下载目标品牌的 DESIGN.md 放入项目根目录即可；如果要从任意 URL 自动提取，Google Stitch 原生支持此功能，本地 Agent 侧可用 google-labs-code/design-md Skill。
Shadcn/ui — 官方版 npx shadcn@latest mcp init，第三方版 npx skills add mattbx/shadcn-skills。
实测兼容性方面，GSAP Skill 和 Shadcn/ui Skill 的跨 Agent 表现最稳定，文档完善、错误处理明确。Text to Lottie 在 Cursor 中偶发 WASM 加载超时问题。three-scope-map-skill 文档最薄弱，需要使用者自己看 SKILL.md 源码理解配置项。
竞品横向对比：同类 Skill 怎么选
动效方向，GSAP Skill 之外还有 mblode/agent-skills 的 ui-animation Skill（轻量级 CSS/JS 动画指导）和 LottieFiles 的 motion-design-skill（运动设计原则，不绑定具体库）。如果项目已经选定 GSAP 作为动画方案，直接用官方 Skill；如果只需要简单入场动画不想引入 GSAP 依赖，ui-animation 更轻量；如果做 Lottie 动画，Text to Lottie + motion-design-skill 搭配使用效果最好——后者提供时序和缓动的"设计直觉"，前者提供 JSON 生成的"工程执行"。
设计规范方向，awesome-design-md 提供"现成品牌规范"，google-labs-code/design-md 提供"从 URL 自动提取"，ui-ux-pro-max Skill（nextlevelbuilder）提供"根据项目需求智能推理生成"——内置 161 条行业规则、67 种 UI 风格、161 套配色方案。三者不是替代关系：awesome-design-md 适合"我想做一个长得像 Stripe 的页面"，design-md 适合"我要复制客户官网的设计语言"，ui-ux-pro-max 适合"从零开始为我的 SaaS 定设计体系"。
组件系统方向，Shadcn/ui Skill 之外还有 Vercel Labs 的 web-design-guidelines Skill（设计规范检查，类似 Linter）和 wshobson/agents 的 tailwind-design-system Skill（Tailwind 模式规范化）。推荐的组合是 Shadcn/ui + web-design-guidelines，一个管生成、一个管审查。
局限与选型建议
这 5 款 Skill 存在三个维度的共性局限。
第一是上下文窗口成本。每个 Skill 被加载到 Agent 上下文后都会占用 Token 额度。GSAP Skill 有 8 个子文件，全部加载后体积可观，在长对话中容易触发上下文压缩导致 Skill 指令被部分丢弃。实际使用建议按需只安装当前项目需要的子 Skill，而非全量安装。three-scope-map-skill 的 SKILL.md 包含大段 Three.js 代码模板，同样吃上下文。
第二是设计质量的"最后一公里"问题。Skill 能保证代码层面的正确性——用对属性、用对组件、用对 Token——但无法替代设计判断。awesome-design-md 提取的色值和 Stripe 实际设计系统之间存在偏差已被社区多次反馈；Text to Lottie 生成的动画在时序编排上仍然需要人工审查和微调；Shadcn/ui Skill 能写出规范的组件代码，但页面整体的视觉节奏和信息层级仍然依赖使用者自己把控。Skill 是"提高下限"而非"提高上限"的工具。
第三是生态碎片化。同一个功能领域往往存在多个 Skill（如 shadcn 相关至少有 4 个不同来源的版本），质量参差不齐，命名和安装方式不统一。目前缺乏官方的 Skill 质量评级体系，选型完全靠使用者自己测试。建议优先选择有明确维护方（官方发布或知名开源组织维护）、有 README 和使用示例、近 30 天内有 commit 记录的 Skill。
选型决策路径：如果你是做数据大屏的前端，优先装 three-scope-map-skill + GSAP Skill；如果你是做 SaaS 产品的全栈，Shadcn/ui Skill + web-design-guidelines 是刚需；如果你是独立开发者快速出 MVP，awesome-design-md 挑一个品牌风格 + Shadcn/ui Skill 就够用。Text to Lottie 适合有明确 Lottie 动画需求的场景，不建议所有人默认安装。
AI 速览
