mcpField
A
animated-chart

animated-chart

github.com/charlie947创意与媒体4561.6k 次安装3 周前更新
代码仓库

关于 animated-chart

用于制作动画图表的创意 Skill，可将图表构建为单个 HTML 文件并准备发布。流程涵盖录入准确数值、检查捕获帧，以及导出视频和 GIF。

主要功能

  1. 01在单个 HTML 文件中制作图表
  2. 02保留提供的准确数值
  3. 03每帧标注示例数据
  4. 04检查画面帧与循环边界
  5. 05导出 MP4 和循环 GIF

适用场景

  1. 01制作 LinkedIn 动画图形
  2. 02展示数据变化而不替换元素
  3. 03将图表导出为视频和 GIF

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/charlie947/motion-graphics-skills --skill animated-chart

安装后在 Claude Code 中输入/animated-chart确认已加载。

详细介绍

用代码制作动态图表

从空白页面开始的 3 条提示词：制作图表、重新设计外观、导出。

**开始之前：**如果存在，请阅读 brand.md 和 MOTION.md。如果不存在，请先运行 brand-intake，或询问品牌色的十六进制代码、字体和徽标文件。没有这些信息时，绝不要称成品符合品牌风格。

第 1 步：询问数据，然后等待

标题、标签、精确数值，以及这些数据是真实结果还是示例数据。示例数据的每一帧都要标注“示例数据”。绝不要对数值进行四舍五入、重新格式化或添加数值。

提示词 1：制作图表

I want one animated graphic for a LinkedIn post. Build it as a single HTML file I can open in my browser.

Title: "[TITLE]". [If sample data: keep "Illustrative data" visible.]
Values: [LABEL 1: VALUE 1], [LABEL 2: VALUE 2], ...

The motion has four states:
1. Start: [what it looks like first].
2. Change: [the one thing that moves]. Nothing fades out and gets replaced.
3. Hold: the finished chart, with [the headline value] labelled.
4. Return: it eases back to the start, so the loop has no jump.

Timing: 8 seconds in total. About 2 seconds for the change, 4 holding, 1.5 to return.

Look: background [BG], text [TEXT], accent [ACCENT], [FONT]. No external fonts or images. No gradients, no glow, no bouncing.

Size: 1080 x 1350 pixels.

Rules for the build:
- Work out every frame from the time alone. Add window.seek(seconds).
- The title, labels and axis never move. Only the chart changes.
- The last frame must match the first frame exactly.

After you build it, take screenshots at 0, 1, 2, 4 and 7 seconds. Check them for overlapping text or anything cut off. Fix what you find and tell me what you changed.

提示词 2：重新设计外观

Inspect the five captured frames and the loop boundary. Check that the values stay the same, labels are readable, nothing overlaps, and each element appears only when it should. Report only problems you actually observe. Fix any you find, preserve the earlier version, and capture the same frames again. If no problems are found, say so and do not invent a revision.

提示词 3：导出

Now turn this into a video and a GIF I can post. Use tools already on this computer. If you need something that is not installed, stop and tell me what it is before you install anything. Give me an MP4 (1080 x 1350, 8 seconds) and a GIF that loops forever. Then show me three frames from the finished GIF so I can check it came out right.

评论

支持 Markdown