Skills · 社区项目

LiveCanvas

LiveCanvas 是一个面向 Codex、Claude Code 等 AI 编程助手的开源 Skill。它会先检索并核实资料,再用 Remotion 制作带封面、场景、图片、emoji、时间线或图表的短动画,并在支持的 macOS 环境中封装 Apple Live Photo 资源包。

225 StarsMIT(代码与 Skill 文档)/ CC BY 4.0(原创演示媒体)/ 第三方素材另行授权TypeScript今天更新
01

项目介绍

LiveCanvas 把一句主题要求拆成一条可追溯的制作流程。Agent 先查资料和数据口径,再决定封面信息、视觉主角与分镜,随后用 Remotion 生成短动画。支持的 macOS 环境还能把同一作品的 JPEG 封面与无声 H.264 视频配对,校验标识和时间轨道,最终打包为 `.pvt`。仓库对静态封面、MP4 预览、实况资源包、相册导入和手机播放分别记录状态,避免把文件生成当成设备验收。

02

核心功能

01

资料与数据核实

Skill 要求先保存来源、定义、时间范围、单位、时区和处理方法。市场、市值、气温与非时间序列内容分别有口径说明,校验脚本只负责结构检查。

02

封面与分镜设计

仓库提供从结论、视觉主角到时间段动作的设计规则,并要求静态封面单独观看时也能读懂主题、结论、单位和来源。

03

确定性 Remotion 渲染

动画由帧号驱动,模板用锁文件安装依赖并导出 H.264 MP4、JPEG 封面和检查帧,避免墙钟、自由随机数或网页素材自带动画影响复现。

04

图片与 emoji 编排

项目要求素材参与表达,并保存来源、作者、许可、改动和用途。Remotion 工程优先加载本地资源,同时检查透明边缘、字体、裁切和遮挡。

05

Live Photo 配对与打包

Swift 工具写入配对标识和定时元数据,Python 脚本再把通过本机加载检查的照片、视频与 metadata.plist 打包成 `.pvt` 并核对哈希。

06

分阶段验收

数据来源、渲染结果、配对元数据、本机加载、资源包完整性和手机播放分别记录,前一项成功不会自动覆盖后一项。

LiveCanvas 双城气温演示封面,展示北京和上海月度气温曲线、城市剪影与季节图标
双城气温示例把曲线、城市视觉和季节图标放在同一张竖版封面中。数据是仓库制作时的快照。查看仓库原图
03

安装与使用

推荐先用 Skills CLI 把完整 `livecanvas/` 目录安装到指定 Agent。安装后在新会话中用一个不含敏感资料的小主题验证触发和制作计划;只有需要实际渲染时再补齐 FFmpeg、字体和 Remotion 依赖。

AI AGENT INSTALL

让 AI Agent 帮你安装

把这段话发送给 Codex、Claude Code 或其他可以操作本地环境的 AI Agent。

请帮我评估并安装 LiveCanvas。项目地址是 https://github.com/pengchujin/livecanvas ,请固定到提交 d232e19f0021f266e1c7e54f546546ce56b76b5d。先阅读 README.md、livecanvas/SKILL.md、livecanvas/references/production.md、livecanvas/references/direct-delivery.md、LICENSE 和 THIRD_PARTY_NOTICES.md。检查目标 Skills 目录是否已有 `livecanvas`,发现自定义内容时先停止并告诉我。未经确认不要覆盖文件、请求照片库权限、导入相册、上传素材或发布内容。获得确认后运行 `npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex`,核对完整目录并开启新会话。用一个不含隐私的简单主题检查 Skill 是否会先提出资料口径、封面、分镜和环境要求。先不要安装 Remotion 依赖、渲染视频或生成 `.pvt`,这些步骤等待我另行确认。
01开始前准备
  • Node.js、npm 与 npx
  • 对目标 Agent 用户级 Skills 目录的写权限
  • 用于动画制作的 Python 3、FFmpeg 和内容所需字体
  • 允许 Agent 联网研究并在独立项目目录执行本地代码
  • 如需 `.pvt`,准备 macOS 与 Xcode Command Line Tools
  • 安装前检查目标目录是否已有同名 LiveCanvas Skill
02复制安装命令或配置
npx skills add pengchujin/livecanvas --skill livecanvas -g
03按步骤完成安装
  1. 1
    安装完整 Skill

    运行 `npx skills add pengchujin/livecanvas --skill livecanvas -g`,或使用 `-a codex` 只写入 Codex。安装前检查同名目录,完成后开启新会话。

  2. 2
    先写清主题与口径

    给出主体、指标、时间范围、比较对象和用途。让 Agent 保存原始证据与来源,再写一句结论、封面层级、分镜时间表和素材计划。

  3. 3
    复制 Remotion 模板

    把 `livecanvas/assets/remotion/` 复制到本次独立项目目录,运行锁文件对应的 `npm ci`,再根据分镜改写 composition 并接入本地素材。

  4. 4
    校验并渲染

    按内容类型检查数据结构与来源,运行 TypeScript 检查和渲染脚本,查看封面、动作中段、转场、极值与结尾抽帧。

  5. 5
    按环境决定是否配对

    没有 macOS 时交付封面、MP4、来源和工程,并注明 Live Photo 未生成。具备环境时再编译配对工具,核对共享标识、时间轨道与 PhotoKit 本机加载结果。

  6. 6
    打包并记录验证范围

    把通过检查的照片、视频和元数据打包为 `.pvt`,保存哈希与 delivery.json。手机预览、照片库导入和社交平台上传继续保持未测试或未请求状态。

如何确认安装成功

开启新会话后请求 LiveCanvas 为一个低风险主题制作中文信息动效计划。先确认 Agent 会列出资料口径、封面层级、分镜、素材计划和环境检查。若继续渲染,再检查封面、MP4、来源记录与可编辑工程是否齐全。只有在 macOS 配对、本机 PhotoKit 加载和 `.pvt` 哈希检查都通过后,才能把实况资源包标为本机已验证;手机预览仍要单独测试。

使用前注意
  • 手动安装时必须复制整个 `livecanvas/` 目录,单独复制 `SKILL.md` 会缺少参考文档、脚本和模板。
  • 渲染工程应复制到独立工作目录,不能在已安装 Skill 内安装依赖或生成输出。
  • Remotion 及其他依赖保留各自许可,商业用途应按实际版本检查条款。
  • 配对流程默认不导入相册,也不证明 iPhone、第三方平台或锁屏兼容性。
04

使用场景

SCENARIO 01

数据变化信息卡

把市值、气温、人口、门店或能源结构等时间序列做成有来源、单位和截止日的竖版短动画。

SCENARIO 02

产品对比与发布说明

用产品图片、能力卡片和阶段动作解释两个产品的差异,保留评测名称、比较对象与限定条件。

SCENARIO 03

过程与知识解释

通过场景、时间线、对象排列或状态变化呈现原理和步骤,不必把所有主题都压成折线图。

SCENARIO 04

Apple Live Photo 文件交付

在 macOS 上把封面和短视频配对并打包成 `.pvt`,同时保留 MP4 预览和明确的兼容性记录。

LiveCanvas 中国高铁演示封面,使用列车、年份节点与里程数字呈现发展过程
高铁示例展示了时间线、场景对象和关键数字如何共同解释发展过程。查看仓库原图
05

使用评价

LiveCanvas 的文档把资料核实、视觉设计、确定性渲染和文件验收连成了一套可检查的制作流程。它对封面与视频的一致性、素材追溯、数据缺测和 Live Photo 验证边界写得很细,15 组作品也能直接观察输出风格。使用成本同样明确,完整渲染要准备本地工具链,`.pvt` 还需要 macOS,手机接收路径没有统一保证。仓库刚开始公开维护,目前只有 8 次提交且没有正式 Release,本次也没有安装或复跑功能。

值得一试的地方

  • 从来源核实到交付记录都有对应说明和文件约定
  • 动效强调解释主题,并允许图片、场景、时间线和图表按内容组合
  • 封面与视频来自同一 composition,便于保持视觉和时间位置一致
  • Live Photo 元数据、本机加载、资源包与手机播放被分开验收
  • 中英文 README 提供 15 组可直接查看的 GIF、MP4 和部分 `.pvt` 示例

使用前要知道

  • 完整工作流依赖 Node.js、Python、FFmpeg、字体和 Remotion
  • `.pvt` 配对和 PhotoKit 本机加载需要 macOS 与 Xcode Command Line Tools
  • 演示数据与模型表现是时间快照,本次未独立复核
  • 媒体许可分层,第三方品牌、数据和素材权利需要逐项检查
  • 仓库历史较短,没有 GitHub Release、SECURITY.md 或长期兼容记录
LiveCanvas 小米市值演示封面,包含手机产品图、时间序列曲线、关键数值和来源说明
小米市值示例展示了产品图、曲线、结论和来源信息的封面层级。数据是仓库制作时的快照。查看仓库原图
06

README

LiveCanvas


Overview

LiveCanvas 是一个面向 Codex、Claude Code 等 AI 编程助手的开源 Skill。它会先检索并核实资料,再用 Remotion 制作带封面、场景、图片、emoji、时间线或图表的短动画,并在支持的 macOS 环境中封装 Apple Live Photo 资源包。 一句话,做成有封面、有动画的 Live 图。面向 Codex、Claude Code 等 AI 编程助手,覆盖资料核实、分镜设计、Remotion 渲染与 Apple Live Photo 资源交付。

Getting started

  • 推荐先用 Skills CLI 把完整 `livecanvas/` 目录安装到指定 Agent。安装后在新会话中用一个不含敏感资料的小主题验证触发和制作计划;只有需要实际渲染时再补齐 FFmpeg、字体和 Remotion 依赖。
  • 项目默认把资料核实放在设计之前。时间序列需要保存原始证据、来源和口径,非时间序列内容也要为每项事实保留来源。
  • 视觉表达可以组合产品图、场景、emoji、时间线、过程演示与图表。仓库强调动作应解释事实,图表只在适合时使用。
  • 开启新会话后请求 LiveCanvas 为一个低风险主题制作中文信息动效计划。先确认 Agent 会列出资料口径、封面层级、分镜、素材计划和环境检查。若继续渲染,再检查封面、MP4、来源记录与可编辑工程是否齐全。只有在 macOS 配对、本机 PhotoKit 加载和 `.pvt` 哈希检查都通过后,才能把实况资源包标为本机已验证;手机预览仍要单独测试。

Configuration

npx skills add pengchujin/livecanvas --skill livecanvas -g
在 GitHub 阅读完整 README →