Livecanvas

一句话，做成有封面、有动画的 Live 图。Turn a sentence into a Live Photo with a designed cover and animation.

Agent skill Design & frontend AI & LLM tooling

Install

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

Claude Code

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

Cursor / Claude Desktop (mcp.json)

{
  "mcpServers": {
    "livecanvas": {
      "command": "npx",
      "args": [
        "skills",
        "add",
        "pengchujin/livecanvas",
        "--skill",
        "livecanvas",
        "-g"
      ]
    }
  }
}

Install command taken from the project's README or registry entry. Always review code before running it.

README excerpt

Read full README on GitHub →

LiveCanvas · 实况画布

简体中文 | English

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

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

作品演示

15 张 GIF 动态预览，点击图片放大。

下载与说明 · 安装方法 · English

下载与说明

展开查看作品说明、高清 MP4 和 Live Photo

小米市值

高清 MP4

A20 Pro vs A19 Pro

高清 MP4

Gemini 4 Argon 登场

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

高清 MP4 · 下载 Live Photo

1M 输出上限

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

高清 MP4 · 下载 Live Photo

比肩 GPT-6.1 Sol

Artificial Analysis 智能指数：Argon 53 分，Astra 53 分，Sol 52 分。

高清 MP4 · 下载 Live Photo

更少幻觉：15%

Artificial Analysis Omniscience：Argon 15%，Astra 51%，Sol 54%。

高清 MP4 · 下载 Live Photo

Text Arena 第一

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

高清 MP4 · 下载 Live Photo

终端任务 57%

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

高清 MP4 · 下载 Live Photo

数据为制作时的快照，不会自动更新。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/ 文件夹放到同一位置。

运行与交付

动画： 助手需能联网搜索和执行代码；需 Node.js、Python 3、FFmpeg，以及内容对应的字体。项目用 npm ci 安装依赖。
Live Photo： Linux / Windows / macOS 可使用 Python 3.10+、Pillow 和 FFmpeg 生成 Apple 配对资源；macOS 另有 Swift 原生路径及 PhotoKit 验证。当前工具支持无声 H.264 + JPEG。见跨平台生成与 iPhone 导入。
交付： 封面、MP4、数据来源、可编辑工程，以及支持环境下的 .pvt 资源包；不自动导入相册。

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

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

许可与致谢

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

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

Similar plugs

Skills

Public repository for Agent Skills

Agent skill AI & LLM tooling★ 181k

Ponytail

Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.

Agent skill AI & LLM tooling★ 164k

UI Ux Pro Max Skill

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.

Agent skill Design & frontend★ 136k

Graphify

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…

Agent skill Memory & knowledge★ 127k