LiveCanvas（实况画布）

LiveCanvas（实况画布）是面向 Codex、Claude Code 这类AI编程助手的Skill，一句话指令就能完成带封面、带动画效果的Live实况图制作。

整套链路由AI自动完成：搜索核实数据 → 设计分镜 → 渲染Remotion动画 → 生成预览图与Apple Live Photo配套资源。支持图片、emoji、场景、时间线、各类图表，非常适合数据动态可视化。

安装方式

环境前置要求：Node.js / npm

全局安装（Skills CLI）

npx skills add pengchujin/livecanvas --skill livecanvas -g

仅安装到 Codex：

npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex

安装完成后新开对话，直接用自然语言下达指令，示例：

用 LiveCanvas 做北京和上海去年全年气温变化。加入城市插画和季节 emoji，设计完整封面，并提供动态预览。

Codex手动本地部署

克隆或下载仓库，将完整 livecanvas/ 文件夹放到 ~/.codex/skills/；

如果配置过 CODEX_HOME 环境变量，则放到该目录下的skills文件夹。需要完整文件夹，不能只复制SKILL.md。

如需兼容旧的 $livechart 调用，额外把 livechart/ 目录一并放入skills。

运行依赖与交付产物

运行前提：AI助手支持联网检索+执行代码，本地需要 Node.js、Python3、FFmpeg，以及作品用到的字体；项目使用 npm ci 安装依赖。

如果要打包生成Live Photo配对资源，额外需要macOS系统 + Xcode命令行工具。

输出素材格式：无声H.264视频 + JPEG封面。

交付内容包含：封面图、MP4动画、原始数据来源、可编辑Remotion工程，兼容环境下额外输出 .pvt 资源包。

补充说明：.pvt封装了实况照片对应的静态图、视频与元数据，iPhone文件App无法直接预览；项目README里展示的GIF仅用来演示动画效果，不等同于原生Live Photo。

底层动画模板基于 Remotion 4.0.530 构建。

要点小结

1. 定位：AI助手Skill（适配Claude Code、Codex），一句话生成带封面动态动画，支持图表与Live Photo打包
2. 工作流：联网核验数据 → 自动分镜 → Remotion渲染动画 → 输出预览+实况资源
3. 环境：基础动画渲染需要Node、Python、FFmpeg；导出Live Photo资源仅限macOS
4. 产物：封面、MP4、可编辑工程；.pvt包用于Apple Live Photo，文件App不能直接预览
5. 兼容：保留旧livechart调用支持，模板版本Remotion 4.0.530