AVW-10：AI Skills 调研——Web Presentation / 动画 / 视频生成的 Agent 技能生态

AI SkillsGSAPRemotionSlidevPixiJSGarden Skillsweb-video-presentationfrontend-slidescc-slidevClaude CodeCodexCursorAgent Skills

AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | 交互叙事 | AI 生成 UI | 视频与动效 | JS 生态 | AVW-10 AI Skills ← 本文

# AI Skills 生态（2026-06） ## ✅ 有 Skill（9组） ### Web Presentation（竞争最激烈） - web-video-presentation — 文章→录屏视频，TTS - frontend-slides — 静态HTML，34主题，PPT转换 - cc-slidev — Slidev×设计护栏，开发者演示 - Slidev 内置 — 官方SKILL.md，坑点文档 - Anthropic pptx — .pptx 创建/编辑 - Anthropic web-artifacts-builder — 复杂HTML应用 ### 动画 - GSAP（官方+cookbook+知识库，3仓库） ### 视频生成 - Remotion（官方skills+Codex插件，2仓库） ### 2D渲染 - PixiJS（多子Skill，v8破坏性变更） ### Web设计 - Garden Skills web-design-engineer - Anthropic frontend-design ### 图片/创意 - Garden Skills gpt-image-2 - Anthropic algorithmic-art / canvas-design ### 知识检索 - Garden Skills kb-retriever ### Agent-UI协议 - CopilotKit AG-UI ## ❌ 空白（36+） - 数据可视化：ECharts/D3/Chart.js/Plotly/deck.gl/AntV全系 - 3D引擎：Three.js/Babylon.js/R3F - 视频生成：Motion Canvas/Revideo/Editly - 低代码：Streamlit/Gradio/AMIS

调研概览

对 AVW 专题涉及的 60+ 可视化工具逐一搜索（GitHub API + agentskills.io），有 Skill 的共 9 组，空白 36+。

领域 有 Skill 的项目 空白数
Web Presentation web-video-presentation · frontend-slides · cc-slidev · Slidev内置 · Anthropic pptx · web-artifacts-builder 3（Marp, reveal.js, PptxGenJS）
Web 动画 GSAP（3 个仓库） 4（anime.js, Motion, Lottie, Glaze）
视频生成 Remotion（2 个仓库） 5（Motion Canvas, Revideo, Editly, Theatre.js, Rive）
2D 渲染 PixiJS（内置 skills/） 4（Phaser, Konva, Fabric, Paper）
Web 设计 Garden Skills web-design-engineer · Anthropic frontend-design · web-artifacts-builder —
图片/创意 Garden Skills gpt-image-2 · Anthropic algorithmic-art · canvas-design —
知识检索 Garden Skills kb-retriever —
Agent-UI 协议 CopilotKit AG-UI —
数据可视化 无 16
3D 引擎 无 4
低代码/Python 无 5

Web Presentation 是目前 Skill 数量最多、竞争最激烈的方向，以下单独展开。

一、Web Presentation Skills 专项对比

横向对比矩阵

web-video-presentation frontend-slides cc-slidev Slidev 内置 Skill Anthropic pptx web-artifacts-builder
核心定位 文章→有旁白的录屏视频 从零或从PPT生成静态网页演示 开发者技术分享（代码展示） 正确使用 Slidev 框架 创建/编辑 .pptx 文件 构建交互式 HTML 应用/原型
输出格式 16:9 网页（录屏用） 单 HTML 文件 / PDF Slidev SPA / PDF / PPTX SPA / PDF / PPTX / PNG .pptx 独立 HTML
技术栈 Vite + React + TS 零依赖纯 HTML/CSS/JS Vite + Vue 3 + Shiki Vite + Vue 3 Office Open XML React + Tailwind + shadcn/ui
主题/样式数 23 套（独立设计 DNA） 34 套（beautiful-html-templates） Slidev 生态主题 Slidev 生态主题 Office 模板 无预设，设计自由度高
TTS / 音频 ✅ 可插拔（MiniMax + OpenAI，可扩展） ❌ ❌ ❌ ❌ ❌
PPT 文件导入 ❌ ✅（python-pptx，保留图片） ❌ ❌ ✅（读取/编辑现有文件） ❌
代码展示能力 基础（代码块） 基础 ✅ 强（Monaco 实时编辑 + 行高亮动画） ✅ 强（同 cc-slidev） ❌ ✅（React 组件可嵌入）
设计护栏 硬 checkpoint（稿/outline/TTS 三次确认） 可视化风格预览选样式 米勒法则（≤6元素/页）+ 50字/页 + 无障碍约束 无（文档化坑点） 无 无
PPT 转 Web ❌ ✅ ❌ ❌ — ❌
安装方式 npx skills add ConardLi/garden-skills npx skills add zarazhangrui/frontend-slides Claude Code 插件市场 无需安装（Slidev 主仓库内置） Claude Code 插件市场 / agentskills.io Claude Code 插件市场 / agentskills.io
维护方 社区（ConardLi，活跃） 社区（zarazhangrui） 社区（rhuss，39 ★） Slidev 官方（34k ★） Anthropic 官方 Anthropic 官方

场景决策

按需求选择，不必同时装多个：

需要给文章/口播稿配旁白，录屏出视频？
  → web-video-presentation（唯一有 TTS 的）

手上有现成 PPT 文件要转成网页？
  → frontend-slides（python-pptx 驱动，保留图片）

做开发者技术分享，需要展示代码/Mermaid 图？
  → cc-slidev（设计护栏防止 AI 把所有内容堆一页）

在 Slidev 框架内开发，想让 Agent 避免常见配置错误？
  → Slidev 内置 Skill（无需安装，直接生效）

需要生成或编辑 .pptx 文件（Office 格式）？
  → Anthropic pptx

构建需要交互/状态管理的 HTML 演示原型？
  → web-artifacts-builder（React + shadcn/ui 完整栈）

各工具详细说明

web-video-presentation（garden-skills v1.2.1）

定位：把文章或口播稿做成点击驱动的 16:9 网页演示，通过录屏产出有电影感的视频。这是目前唯一将"文章 → 有配音的视频"做成完整 Agent 工作流的 Skill。

  • 舞台设计：固定 1920×1080，按视口等比缩放；一个全局 (chapter, step) 游标，点击/键盘推进；每步独占整屏，不堆叠项目符号；进度控制浮层悬浮时才出现（录屏画面保持干净）
  • 主题系统：23 套（深色 8 + 浅色 15），每套有独立设计 DNA，不是简单换色——包括 midnight-press（暗色印刷）、newsroom（报社风格）、blueprint（工程蓝图）、neon-cyber（赛博朋克）、bauhaus-bold（包豪斯）、swiss-ikb（瑞士克莱因蓝）等
  • TTS：provider-agnostic 架构，内置 MiniMax + OpenAI，可扩展到 ElevenLabs / edge-tts / Azure / Google Cloud / macOS say
  • 协作流程：稿子/主题确认 → outline 确认 → 音频合成前确认，三个硬 checkpoint 防止 Agent 一次性跑完出错
  • SKILL.md：451 行，含完整方法论和协作指令

frontend-slides（zarazhangrui）

定位：通用静态网页演示生成器，零依赖单文件输出，支持从 PowerPoint 文件转换。

  • 零依赖：输出单个 HTML 文件，内联所有 CSS/JS，无 npm / 无构建工具 / 无框架，可直接双击打开或上传分享
  • 风格发现：生成多个预览供用户目视选择，而非描述偏好——"看一眼就知道要哪个"
  • 34 套模板：来自 beautiful-html-templates，覆盖深色/浅色、极简/炫酷等风格
  • PPT 转换：python-pptx 驱动，保留原始图片和内容结构
  • PDF 导出：Playwright 截图方式

cc-slidev（rhuss，39 ★）

定位：Claude Code 插件，用于使用 Slidev 制作开发者技术演示，内置强制设计约束。

  • 设计护栏（强制执行）：每页 ≤ 6 元素（米勒法则）、正文 < 50 字、每页一个观点、标题必须有意义（"系统处理 10K 请求/秒"而非"结果"）、字体 ≥ 18pt + 对比度 ≥ 4.5:1 + 色盲友好
  • 代码能力：100+ 语言语法高亮 + Monaco 实时编辑 + Mermaid / PlantUML / Excalidraw 图表
  • 工作流：框架设置 → 头脑风暴 → 大纲 → 生成幻灯片 → 预览 → 增强视觉 → 生成讲义 → 导出 PDF/PPTX
  • Git 友好：模块化幻灯片文件，每张页面单独文件

Slidev 内置 Skill（slidevjs/slidev，34k ★）

定位：Slidev 官方维护的 Agent Skill，主仓库 skills/slidev/SKILL.md，教 Agent 掌握框架特有的陷阱而非重复文档。

  • Markdown 语法：--- 分隔页面，frontmatter 配置单张幻灯片，headmatter 设全局主题（二者作用域不同，Agent 常混淆）
  • 点击驱动动画：v-click 指令按点击顺序逐步显示元素；{1-3|4-6} 语法实现行高亮动画
  • 常见坑点：配置传给构造函数（应传给 app.init()）、混淆 frontmatter/headmatter、PDF/PPTX 导出前忘装 playwright-chromium
  • 工作流：pnpm create slidev → pnpm run dev（localhost:3030）→ pnpm run export

Anthropic pptx

定位：驱动 Claude.ai 文档创建能力的官方 Skill，创建、编辑、分析 .pptx 文件。

  • 支持布局、模板、图表、表格操作
  • 可读取现有 .pptx 文件并修改
  • 官方维护，稳定性有保障

Anthropic web-artifacts-builder

定位：构建复杂 HTML artifacts，适合需要交互性和状态管理的演示/原型场景。

  • 技术栈：React + Tailwind CSS + shadcn/ui
  • 适合构建：交互式数据仪表盘、表单驱动的演示、有状态的 Web 应用原型
  • 与 frontend-slides 的区别：frontend-slides 是"幻灯片"思维（静态展示），web-artifacts-builder 是"应用"思维（交互状态）

二、其他领域可用 Skills

Web 动画 — GSAP 生态（3 个仓库）

greensock/gsap-skills — 官方 Agent Skill

  • GitHub: greensock/gsap-skills
  • 安装: npx skills add greensock/gsap-skills
  • 兼容: Claude Code、Cursor、Codex、Copilot、Windsurf 等 40+ Agent 平台
  • 2026 重要更新: Webflow 收购后所有付费插件全部免费——SplitText、MorphSVG、DrawSVG、MotionPathPlugin 等，Skill 已同步更新

iotron/gsap-cookbook — 12 个场景子 Skill

  • GitHub: iotron/gsap-cookbook
  • 架构亮点: 渐进式披露——按需加载子 Skill，Agent 不会一次性加载 80KB 导致上下文溢出
  • 12 个子 Skill: setup / animate / scroll / interact / text / svg / vfx / cursor / canvas / showcase / optimise / test

su69ar/rdnax-gsap-master — 81KB 知识库

  • GitHub: su69ar/rdnax-gsap-master · v1.5.0
  • 8 个参考文件: CORE、RECIPES、UI_INTERACTIONS、TEXT_ANIMATIONS、PHYSICS_PLUGINS、NEXTJS_REACT_PATTERNS、GSDEVTOOLS、DEBUG_CHECKLIST
  • 注意: v1.5.0 需要更新以反映插件免费的变化

视频生成 — Remotion（2 个仓库）

remotion-dev/skills — 官方 Agent Skills

  • GitHub: remotion-dev/skills
  • 安装: npx skills add remotion-dev/skills
  • 定位: 用 React 写逐帧逻辑，服务端渲染为 mp4；Skill 覆盖 Remotion 特有的帧概念和渲染 API
  • 状态: 内部包，公开文档少，但结构完整可用

remotion-dev/codex-plugin — OpenAI Codex 插件

  • GitHub: remotion-dev/codex-plugin
  • 内容: .codex-plugin/plugin.json + skills/remotion 目录
  • 适用: 使用 OpenAI Codex 的用户

2D 渲染 — PixiJS（多子 Skill）

  • GitHub: pixijs/pixijs · 47k ★
  • Skill 路径: 主仓库 skills/ 目录（pixijs-application、pixijs-accessibility、pixijs-assets 等子 Skill）
  • 技术栈: WebGL + WebGPU 双渲染器，TypeScript，GLSL + WGSL 着色器

Skill 的核心价值：固化 v7→v8 破坏性变更

规则 错误（v7 习惯） 正确（v8） 严重等级
初始化 new Application({width, height}) const app = new Application(); await app.init({width, height}) CRITICAL
画布访问 app.view app.canvas HIGH
init 前使用 构造后立即访问 renderer 必须 await app.init() 后 MEDIUM
销毁 直接删引用 app.destroy({releaseGlobalResources: true}) MEDIUM

内置 ResizePlugin + TickerPlugin，无需手动管理尺寸和帧循环。适合：游戏、交互数据可视化、富媒体广告。

Web 设计

Garden Skills — web-design-engineer（v1.2.1）

  • 安装: npx skills add ConardLi/garden-skills
  • 六步工作流: 理解需求 → 获取设计上下文 → 宣告设计系统 → v0 草稿 → 完整构建 → 验证
  • 25 套风格配方: linear / aesop / pentagram 等，每套独立 .md 文件，Agent 按需读取
  • oklch 色彩系统: 感知均匀色彩空间，替代 Agent 随机选 hex 的问题
  • 反俗套清单: 明确禁止 Inter 字体、紫粉渐变、大圆角卡片、emoji 充当图标、编造好评数据
  • 覆盖范围: 网页/落地页、交互原型、HTML 幻灯片、数据可视化仪表盘、CSS/JS 动效

Anthropic frontend-design

  • 安装: Claude Code 插件市场 / agentskills.io
  • 核心理念: 每个设计决策必须可解释，规避 AI 千篇一律的通用美学
  • 与 web-design-engineer 对比: 思路高度相似（都反对"大圆角 + 紫色渐变"），Anthropic 版官方维护更稳定，Garden Skills 版配方数量更多（25 套 vs 无预设配方）

Anthropic web-artifacts-builder

（见上方 Web Presentation 章节）

图片生成与创意

Garden Skills — gpt-image-2（v1.0.3）

  • 安装: npx skills add ConardLi/garden-skills
  • 定位: GPT Image 2 及 OpenAI 兼容图片 API 的结构化提示词工程
  • 三种运行模式: Garden 本地模式、host-native 委托模式、advisor-only 模式
  • 18 个视觉类别 + 80+ 结构化提示词模板

Anthropic algorithmic-art

  • 使用 p5.js 创作生成艺术
  • 内置 seeded randomness（可复现）、flow field、粒子系统等经典算法

Anthropic canvas-design

  • 基于设计原则生成 .png / .pdf 格式视觉设计

知识检索

Garden Skills — kb-retriever（v1.0.0）

  • 安装: npx skills add ConardLi/garden-skills
  • 定位: 本地知识库渐进式检索——先导航分层索引，再深入读取 PDF/Excel，最多五轮，带源回答

Agent-UI 协议 — AG-UI

  • GitHub: ag-ui-protocol/ag-ui
  • 快速体验: npx create-ag-ui-app my-agent-app
  • 定位: 开放、轻量的事件协议，标准化 AI Agent 后端如何接入前端 UI

协议机制: Agent 后端发射约 16 种标准事件类型（流式对话、双向状态同步、生成式 UI、Human-in-the-loop 暂停点等），传输层支持 SSE、WebSocket、Webhook。

在 Agent 协议栈中的位置：

MCP 提供工具 → A2A 允许 Agent 间通信 → AG-UI 将 Agent 引入用户界面

已支持 23+ 框架（LangGraph、CrewAI、Microsoft Agent Framework、Google ADK、AWS Strands、Mastra、Pydantic AI 等），SDK 覆盖 Kotlin、Go、Dart、Java、Rust、Ruby、C++。

三、空白领域（36+）

以下项目在 2026 年 6 月 7 日的全网搜索中未找到任何专用 AI Skill。

数据可视化（全部空白）

项目 GitHub Stars
ECharts apache/echarts 60k
D3.js d3/d3 110k
Chart.js chartjs/Chart.js 65k
Plotly plotly/plotly.js 16k
deck.gl visgl/deck.gl 12k
Bokeh bokeh/bokeh 19k
AntV G2 antvis/G2 12k
AntV G6 antvis/G6 11k
AntV X6 antvis/X6 6k
AntV L7 antvis/L7 4k

Python 封装（全部空白）：pyecharts、Dash、Seaborn、HoloViews、Vega-Lite、SandDance。

3D 引擎（全部空白）

项目 GitHub Stars
Three.js mrdoob/three.js 102k
Babylon.js BabylonJS/Babylon.js 23k
R3F pmndrs/react-three-fiber 28k
PlayCanvas playcanvas/engine 10k

动画引擎（GSAP 除外，全部空白）

项目 GitHub Stars
anime.js juliangarnier/anime 50k
Motion motiondivision/motion 25k
Lottie airbnb/lottie-web 30k

视频生成（Remotion 除外，全部空白）

项目 GitHub Stars
Motion Canvas motion-canvas/motion-canvas 16k
Revideo redotvideo/revideo —
Editly mifi/editly 4.5k
Theatre.js theatre-js/theatre 12k
Rive rive-app/rive-wasm —

PPT/幻灯片（Slidev 除外，全部空白）

项目 GitHub Stars
Marp marp-team/marp —
reveal.js hakimel/reveal.js 68k
PptxGenJS gitbrent/PptxGenJS 3k

低代码 & Python Web（全部空白）

Streamlit（37k）、Gradio（36k）、AMIS（17k）、LowCode Engine（15k）。

为什么这些项目没有 Skill？

  • Three.js / D3 / ECharts：API 太庞大，Skill 编写成本高；Agent 靠通用知识已能产出基本可用代码
  • Streamlit / Gradio：官方文档质量极高，Agent 检索即可；且 Python 库的 API 变化频率比 JS 低
  • Marp / reveal.js：API 足够简单，无需专用 Skill

四、推荐安装与实操清单

按场景安装

# Web Presentation —— 录屏视频（有TTS）
npx skills add ConardLi/garden-skills
# 包含：web-video-presentation + web-design-engineer + gpt-image-2 + kb-retriever

# Web Presentation —— 静态演示 / 从PPT转换
npx skills add zarazhangrui/frontend-slides

# Web Presentation —— 开发者技术分享（Slidev + 设计护栏）
# Claude Code 插件市场搜索 cc-slidev 或参考：https://github.com/rhuss/cc-slidev

# Web 动画 —— GSAP
npx skills add greensock/gsap-skills
# 按场景分模块加载（防上下文溢出）：参考 iotron/gsap-cookbook

# 视频生成 —— Remotion
npx skills add remotion-dev/skills
# Codex 用户：参考 remotion-dev/codex-plugin

# Anthropic 官方 Skills（agentskills.io 或 Claude Code 插件市场）
# pptx / frontend-design / web-artifacts-builder / canvas-design / algorithmic-art

对无 Skill 工具的应对策略

在项目根目录创建 CLAUDE.md，手动写入关键 API 规则：

# ECharts 规则
- 用 echarts.init() 而非 new ECharts()
- 数据更新用 setOption({...}, true) 而非重新 init
- 响应式用 window.addEventListener('resize', chart.resize)
- 3D 图表需额外引入 echarts-gl

实操清单

  • 安装 Garden Skills：npx skills add ConardLi/garden-skills，用 web-video-presentation 把一篇文章转为 16:9 演示，在三个 checkpoint（稿/outline/TTS）处与 Agent 确认
  • 安装 frontend-slides：npx skills add zarazhangrui/frontend-slides，目视对比 34 套主题选定风格；若有 .pptx 文件，测试 PPT 转换功能
  • 安装 cc-slidev（Claude Code 插件市场），用于下次技术分享，验证设计护栏是否防止 AI 把大段文字堆一页
  • 安装 GSAP 官方 Skill：npx skills add greensock/gsap-skills，确认插件免费更新已生效（无需 token）
  • 参考 iotron/gsap-cookbook 配置渐进式加载，避免 80KB Skill 文件一次性进入上下文
  • 安装 Remotion Skill：npx skills add remotion-dev/skills；Codex 用户克隆 remotion-dev/codex-plugin
  • 在 Claude Code 插件市场安装 Anthropic frontend-design，对比其设计约束与 Garden Skills web-design-engineer 的差异
  • 在 Slidev 项目中验证主仓库内置 Skill 已被 Agent 读取（无需单独安装）
  • 对高频使用的无 Skill 工具，在项目根新建 CLAUDE.md 写入关键 API 规则
  • 访问 agentskills.io 核查本文"空白"项目是否已有新增社区 Skill

附录：调研方法

本文基于 2026 年 6 月 7 日的全网搜索（含补录）：

  1. GitHub 仓库搜索：对 60+ 项目逐一搜索 {project}/skills、{project}/codex-plugin、{project}/claude-skill、{project}-skills、SKILL.md 等命名模式
  2. 主仓库扫描：通过 GitHub API 检查每个项目主仓库是否包含 skills/ 目录、SKILL.md、.codex-plugin/、.agent/、CLAUDE.md、AGENTS.md
  3. agentskills.io 交叉验证：检查 Vercel 的 Agent Skills 平台上注册的 Skills
  4. 社区 Skill 集合搜索：扫描 GitHub 上类似 garden-skills 的 Skill 合集仓库，发现 frontend-slides / cc-slidev / Anthropic 官方合集

AI Skills 生态正在快速变化，建议定期检查 agentskills.io 和 GitHub 搜索。