Skip to main content

LiveCanvas:把主题与数据做成实况动效卡

先搜索核实主题或材料,再设计静态可读的封面与分镜,用 Remotion 制作信息动效卡和配对的 Apple Live Photo 资源。可组合图片、emoji、场景和时间线,不必把所有内容都做成图表。

来源信息

仓库
pengchujin/livecanvas
最近来源活动
2026年9月30日 10:26
检测到的 SKILL.md 语言
中文
星标
68
分支
4

相关案例

作者的演示说明列出人口、咖啡门店、高铁与双城气温等动效案例。数据是制作时的快照,不会自动更新;这些是作者案例,不是 SkillsMP 实测。

用途

适合源码列出的知识解释、产品比较、变化过程和数据故事。LiveChart 是旧名兼容入口,会转入 LiveCanvas,不是另一套制作流程。

必要前提

助手需能联网搜索和执行代码,环境需要 Node.js/npm、Python 3、FFmpeg 及内容所用字体。Live Photo 配对额外需要 macOS 和 Xcode Command Line Tools;当前工具接受无声 H.264 视频与 JPEG 图片。

操作说明

安装时选择 livecanvas;作者给 Codex 的命令是 npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex。安装后新建对话,按 README 示例请求比较北京与上海去年的全年气温,加入城市插画、季节 emoji,设计完整封面并提供动态预览。制作时将随附 Remotion 工程复制到独立目录,再运行 npm ci,不要在已安装的 Skill 内安装依赖或生成成品。

限制

没有 macOS 时,按源码交付数据、封面、可编辑工程和视频,并明确实况封装尚未完成。MP4、GIF 只是预览;.pvt 资源包生成不代表 iPhone“文件”能预览、手机播放已通过或已导入相册,导入需另外明确请求。代码与 Skill 文档采用 MIT;演示媒体、第三方素材及 Remotion 各自遵循对应许可。

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

文件资源管理器
17 个文件

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
name
livecanvas
description
将主题或材料经搜索核实制成苹果 Live Photo 信息动效卡。用 Remotion 编排图片、PNG、emoji、场景、时间线和可选图表,适用于知识解释、产品比较、变化过程及数据故事;制作可预览动效与配对实况资源,说明接收端兼容性。
# LiveCanvas · 实况画布 把用户的一句话变成有证据、静态可读、动态能讲清内容的实况动效卡。原名 LiveChart,现名 LiveCanvas(实况画布),覆盖图表、图片与场景叙事;默认主动设计与主题相关的图片/图标和场景动作,图表只是可选表达。默认中文、Remotion、1080×1440、30 fps、约 3 秒、无声。这些是起点,允许按内容调整;3 秒不是声称的苹果格式限制。 ## 先定内容,再定动效 1. 从请求提取主体、指标、时间范围、比较关系、用途。具体需求优先,不把用户给的例子当成固定模板。 2. 搜索并核实数据,读 [数据与口径](references/data.md)。先保存原始证据、事实或结构化数据,再写标题、数字与注释。无时间序列的主题可以用事实卡、过程或场景解释;不能为了画图虚构数据。 3. 写简短制作说明:一句结论、事实/数据口径、封面信息层级、分镜时间表及素材计划。选出适合该主题的表达,不默认折线图加数字。直接做设计判断;仅当缺失信息会实质改变答案时提问。 4. 按 [封面与动效](references/design.md) 制作。吸收 Emil Kowalski animate 的有目的、克制、连续、节奏清晰原则;用户已指定 Remotion,不执行上游的工具替换步骤,也不把交互组件时长限制机械套到解释性视频。 ## 视觉表达 - 默认让主题中的对象出现在画面中:产品 PNG、咖啡杯、汽车、列车、奖牌、城市照片、天气 emoji 等;挑选与内容有关的一组统一风格素材,不是给图表角落贴装饰。 - 设计对象的入场、运动、排列、替换或状态变化来解释内容。例如列车驶过年份节点、咖啡杯带出门店卡片、城市画面随季节切换。 - 按主题组合场景、图片对比、图标阵列、时间线、过程演示、重点文字和必要图表。纯图表只在确实最清楚或用户指定时采用。 - 使用图片或 emoji 时读 [图片与图标](references/visual-assets.md),负责找素材、检查可用性并加入工程;无需让用户先提供素材才开始。 ## 搜索默认值 - “最近 3 年”:截至最新可靠已完成观测日的滚动三年,注明首尾实际日期,不默认成三个年末值。月度图用已完成月末观测;最新未完成月只能单独注明。 - “全年温度”未给年份:采用最近一个完整自然年,默认月平均气温;在结果开头说明选择。若意图明显是常年气候,使用有明确基准期的气候平均值。 - 跨公司比较对齐观测日期、指标、币种,或明确使用同基期指数,保留原始绝对值。 - 允许涨、跌、持平、季节循环。不要因用户说“增长曲线”而把下降画成增长。 - 日期按用户时区解析,不用机器日期硬编码“今年”。 ## 制作与封装 读 [运行与交付](references/production.md) 和 [直接交付](references/direct-delivery.md)。资源路径相对于本 skill 目录;称该绝对路径为 `SKILL_DIR`。 - 把 `assets/remotion/` 作为渲染工程起点复制到本次目录,使用随附锁文件 `npm ci`。其中折线图只是示例,应按分镜重写 composition,不是默认成品版式。不要在已安装 skill 内生成输出或安装依赖。 - 示例 `data.json` 为合成数据,只用于测试。正式制作需替换数据和文案,去掉示例标记前完成事实核查。 - 时间序列使用 `scripts/validate_data.py` 检查日期、来源引用、覆盖和范围;其他内容按 [数据与口径](references/data.md) 使用匹配的事实/比较结构,不硬套日期序列。校验通过不代表来源事实已核实。 - 所有动画由 `useCurrentFrame()` 驱动;禁止 CSS animation、墙钟、未固定随机数、网页图库自带动画。 - 将图片、emoji、文字、场景与图表纳入同一分镜,保留可追溯事实、静态封面、确定性渲染与验证流程。 - 从同一 composition 的完整停留帧导出 `cover.jpg`,记录 `coverFrame / fps`。封面画面必须出现在动画内,still-image-time 指向同一时间。 - 用 `scripts/pair_live_photo.swift` 将无声 H.264 视频与 JPEG 封面写成配对资源。这是中间步骤,不算交付完成;其他输入先转码,不默默丢弃用户音轨。 - 封装完成后禁止再次普通转码 paired MOV,否则可能丢失元数据轨道。 - 用 `scripts/package_live_photo.py` 生成命名明确的单个 `.pvt` 包;将其标为实况资源包,不承诺 iPhone「文件」App 可直接预览;不自动打开或导入「照片」App,不修改照片库。不得停在 JPG + MOV 配对资源。 ## 验证与完成标准 先检查事实和素材,再预览封面和视频:抽查开始、主要动作中段、转场、数据极值(如有)和封面停留帧;检查图片加载、emoji 字形、透明边缘、中文字体、标签遮挡、数值同步、单位日期与裁切。确认动作在解释主题,而非只有数字和条形变化。真实曲线不使用引入虚假峰谷的平滑;缺测处断线。 分别记录状态,不把前一项当作后一项成功: 1. 数据与来源核实;机器校验只是其中一部分。 2. 封面和 MP4 渲染完成,素材与主要动作可见,元数据及画面检查通过。 3. Live Photo 标识匹配、timed metadata 时间位置正确。 4. `PHLivePhoto.request` 本机加载成功或具体失败。 5. `.pvt` 包完整、配对资源哈希一致。 6. 相册导入、设备播放、第三方平台上传及锁屏兼容性均为可选事项,只有用户另外明确请求时才操作并记录,不作为文件交付的前置条件。 没有 macOS 时完成数据、封面、工程及视频,保留封装命令,明确 Live Photo 未生成;完成本机加载与包完整性验证后可交付 .pvt 资源包;这不证明手机预览、保存或播放成功。 ## 交付 每个主题独立目录,同时提供可直接观看的预览和 `主题名称.pvt` 实况资源包,保存 `delivery.json`。另保留 `data.json`、原始证据、`sources.md`、含本地素材的可编辑 Remotion 工程、素材清单 `assets.json`(使用素材时)、`cover.jpg`、`motion.mp4`、内部 `live/` 配对资源及 manifest、`qa.json`。压缩包只用于传输,不是可直接识别的 Live Photo。 优先展示可观看的封面/动态预览,另附 `.pvt` 资源包链接、数据截止日及验证状态。用户要求手机直接预览时,核实其接收路径;不能仅凭文件包生成或本机加载成功宣称已满足。传输界面不支持目录包时附 `.pvt.zip`,注明解压后得到资源包,仍需支持 Live Photo 的应用读取。网页 LivePhotosKit 预览与保存为原生实况照片是两项能力,未实现的能力不承诺。封面和 MP4 只能标作预览;聊天界面不能原生展示 Apple 实况时简短说明。不要把“直接交付 Live Photo”解释成导入相册,不索取照片库权限,也不自动打开可能触发导入的 .pvt。未经请求不发布到社交平台。 ## 示例触发 - “用 LiveCanvas 做小米最近三年的市值变化。” - “苹果和小米近三年市值做成两张实况图,风格统一。” - “把北京去年的全年气温做成 Live 图,封面也设计好。” - “把这份数据做成会动的信息图,导出苹果实况照片。” - “用咖啡杯 PNG 和门店卡片,做瑞幸与星巴克的扩张故事。” - “用列车、年份节点和里程数字,做中国高铁的实况动效。”
在 GitHub 查看