animated-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Animated chart, built in code

以代码构建的动画图表

Three prompts from a blank page: build it, make it look again, export it.

Before you start: read

brand.md

and

MOTION.md

if they exist. If not, run

brand-intake

first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

从空白页面开始，只需三个提示词：构建、重新检查视觉效果、导出。

开始之前： 如果存在

brand.md

和

MOTION.md

，请先阅读。如果不存在，先运行

brand-intake

，或者向用户询问 hex 色值、字体和 logo 文件。没有这些信息时，绝不要声称结果符合品牌规范。

Step 1: Ask for the numbers, then wait

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

The title, the labels, the exact values, and whether they are real results or sample data. Sample data gets an "Illustrative data" label on every frame. Never round, reformat or add a number.

询问标题、标签、准确数值，以及这些数据是真实结果还是示例数据。示例数据的每一帧都要显示“Illustrative data”标签。绝不四舍五入、重新格式化或添加数字。

Prompt 1: build it

提示词 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.

请为一条 LinkedIn 帖子制作一个动画图形。构建为一个可以在浏览器中打开的单文件 HTML。

标题："[TITLE]"。[如果为示例数据：保持“Illustrative data”可见。]
数值：[标签 1: 数值 1]、[标签 2: 数值 2]……

动画分为四个状态：
1. 开始：[初始状态的外观]。
2. 变化：[唯一会移动的元素]。任何内容都不要淡出后被替换。
3. 保持：显示完成的图表，并标注[标题数值]。
4. 返回：平滑回到初始状态，让循环播放没有跳变。

时间：总计 8 秒。变化约 2 秒，保持 4 秒，返回 1.5 秒。

外观：背景 [BG]，文字 [TEXT]，强调色 [ACCENT]，[FONT]。不使用外部字体或图片。不使用渐变、辉光或弹跳效果。

尺寸：1080 x 1350 像素。

构建规则：
- 仅根据时间计算每一帧。添加 window.seek(seconds)。
- 标题、标签和坐标轴绝不移动。只有图表发生变化。
- 最后一帧必须与第一帧完全一致。

构建完成后，在第 0、1、2、4 和 7 秒截取屏幕截图。检查文本是否重叠或有任何内容被裁切。修复发现的问题，并告诉我做了哪些更改。

Prompt 2: make it look again

提示词 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.

检查捕获的五个帧和循环边界。确认数值保持不变、标签清晰可读、没有重叠，且每个元素都只在应该出现时出现。只报告实际观察到的问题。修复发现的问题，保留之前的版本，并再次捕获相同的帧。如果没有发现问题，就直接说明，不要虚构修改。

Prompt 3: export it

提示词 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.

现在将它转换为可发布的视频和 GIF。使用本机上已有的工具。如果需要使用尚未安装的工具，先停止并告诉我需要什么，再进行任何安装。输出一个 MP4（1080 x 1350，8 秒）和一个无限循环的 GIF。然后展示最终 GIF 中的三帧，以便我检查导出结果是否正确。