Communitygithub.com

Remotion 动画逻辑图 Skill — ASCII 草图变 GIF

将 ASCII 草图转换为动画逻辑图并生成 GIF 的 Skill。

O que é Remotion 动画逻辑图 Skill — ASCII 草图变 GIF?

此 Skill 基于 Remotion(一个在 React 中创建视频的库)和 Remotion Player,能够将 ASCII 草图转换为动画逻辑图并输出为 GIF 文件。它专为 AI 助手(如 Claude Code、Cursor)设计,帮助开发者快速将构思中的逻辑流程以可视化动画形式呈现。只需提供 ASCII 草图文本,该 Skill 就会解析其结构,生成相应的图像帧,并最终合成为一个流畅的动画 GIF。它适用于需要快速演示或记录逻辑想法、技术讲解或产品原型的场景,尤其在无 UI 的纯文本交互环境中非常有用。

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add Agentchengfeng/remotion-skill

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Remotion 动画逻辑图 Skill — ASCII 草图变 GIF faz?

Remotion 动画逻辑图 Skill — 将 ASCII 草图转换为动画 GIF。

工作原理

此 Skill 使用 Remotion(一个基于 React 的视频生成库)及 Remotion Player 组件,接收 ASCII 草图输入,并将其解析为逻辑图的布局结构。随后,它会逐帧生成图像,并最终渲染为一个动画 GIF 文件。

使用方法

  1. 准备一个 ASCII 草图,例如:
+-------+     +-------+
| Start | --> | End   |
+-------+     +-------+
  1. 调用本 Skill(具体 API 或命令由宿主环境决定)。

  2. 输出:一个表示该逻辑图的动画 GIF。

支持的平台

  • Claude Code
  • Cursor
  • Codex

环境要求

  • Node.js >= 18
  • npm/yarn/pnpm
  • 已安装 Remotion 包

文件结构

  • src/ – Remotion 组件和逻辑
  • public/ – 静态资源(如有)
  • remotion.config.ts – Remotion 配置

注意事项

  • 草图必须使用 ASCII 字符绘制,以确保正确解析。
  • GIF 输出大小取决于草图复杂度。

由 Agentchengfeng 提供

Habilidades Relacionadas