livecanvas README

The project's README from github.com/pengchujin/livecanvas. As one markdown file: README.md.

LiveCanvas · 实况画布

简体中文 | English

一句话,做成有封面、有动画的 Live 图

一个适用于 Codex、Claude Code 等 AI 编程助手的 skill:搜索核实 → 设计分镜 → Remotion 动画 → 预览与 Apple Live Photo 资源。支持图片、emoji、场景、时间线和图表。

作品演示

15 张作品,单列 GIF 动态预览。每张图下方提供高清 MP4,Gemini 4 Argon 的 6 张另附 Live Photo 下载。

Gemini 4 Argon · 更多作品 · 安装方法 · English

小米市值

小米市值

高清 MP4

A20 Pro vs A19 Pro

A20 Pro vs A19 Pro

高清 MP4

Gemini 4 Argon 登场

Gemini 4 Argon 登场

软件工程、知识工作与安全防御;分阶段开放给受信任测试者。

高清 MP4 · 下载 Live Photo

1M 输出上限

1M 输出上限

单次输出上限从 64K 提高到 1M tokens。

高清 MP4 · 下载 Live Photo

比肩 GPT-6.1 Sol

比肩 GPT-6.1 Sol

Artificial Analysis 智能指数:Argon 53 分,Astra 53 分,Sol 52 分。

高清 MP4 · 下载 Live Photo

更少幻觉:15%

更少幻觉:15%

Artificial Analysis Omniscience:Argon 15%,Astra 51%,Sol 54%。

高清 MP4 · 下载 Live Photo

Text Arena 第一

Text Arena 第一

1525 分、4,942 票,暂列第一;目前为初步结果。

高清 MP4 · 下载 Live Photo

终端任务 57%

终端任务 57%

Terminal-Bench 4.0:Argon 57%,此前 Gemini 3.1 Pro Preview 为 4%。

高清 MP4 · 下载 Live Photo

全球人口

全球人口

高清 MP4

咖啡门店

咖啡门店

高清 MP4

新能源车

新能源车

高清 MP4

中国高铁

中国高铁

高清 MP4

双城气温

双城气温

高清 MP4

奥运金牌

奥运金牌

高清 MP4

发电结构

发电结构

高清 MP4

数据为制作时的快照,不会自动更新。Gemini 图卡核对日期为 2026-10-01,Text Arena 榜单日期为 2026-09-30。来源与口径见 演示说明。

安装

需要 Node.js / npm。使用 Skills CLI 安装,并选择你的 AI 助手:

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/ 文件夹放到同一位置。

运行与交付

.pvt 包含配对照片、视频及元数据,iPhone「文件」App 未必能直接预览。README 使用 GIF 展示动效,GIF 不是原生 Live Photo。

模板使用 Remotion 4.0.530。手动渲染与封装步骤见 运行指南。

许可与致谢

代码及 skill 文档采用 MIT;演示媒体与第三方素材许可见 署名说明。Remotion 适用其自身许可证。

动效设计参考 Emil Kowalski / animate,图标采用 Twemoji。

livecanvas (pengchujin/livecanvas)

Searching Database…

这是什么?LiveCanvas 是一个面向 Codex 和 Claude Code 等 AI 编程助手的技能,能把一句话变成 Live 风格的动态图像:它会查证事实、设计分镜、构建 Remotion 动画,并产出封面、MP4,以及在 macOS 上生成 Apple 实况照片(Live Photo)资源包。
这是一个独立应用,还是 AI 编程助手的技能?它不是独立应用 — 它是一个 Agent 技能包,需要安装到 Codex 或 Claude Code 等 AI 编程助手中,由助手用它来生成动画。
生成动画需要安装什么?动画流水线需要 Node.js、Python 3 和 FFmpeg(依赖通过 npm ci 安装),还需要与内容匹配的字体。要打包真正的 Apple 实况照片,还需要 macOS 和 Xcode Command Line Tools。
实况照片打包在任何电脑上都能用吗?不行 — 实况照片打包只能在装有 Xcode Command Line Tools 的 macOS 上进行,且目前仅支持无声 H.264 视频加 JPEG 封面。输出不会自动导入“照片”App,.pvt 资源包也可能无法在 iPhone 的“文件”App 中直接预览。
Remotion 在这里起什么作用?Remotion(v4.0.530)是 LiveCanvas 使用的基于 React 的动画框架,用来把分镜渲染成视频,然后再打包为最终的交付资源。
它能给哪些内容做动画?它支持图片、emoji、场景、时间线和图表,示例作品涵盖了人口数量、市值和奥运奖牌数等内容。
最终产出包含哪些内容?一张封面图、一个 MP4、数据来源说明、一个可编辑的项目,以及在环境支持的情况下,一个 .pvt Apple 实况照片资源包。
这个技能有旧名称吗?有,它以前叫 $livechart;出于向后兼容的考虑,你也可以把 livechart/ 文件夹放进同一个 skills 目录。
Creator
pengchujin
Size
51 MB
Stars
499
Updated
CommitOct 10
Age
19d
Commits · 90 Days