Animated Chart 是一套在代码中制作循环动画图表的提示词工作流，适合为 LinkedIn 帖子或新闻简报生成可直接发布的动图。它不依赖图形界面，而是通过 Claude Code 按提示逐步构建、检查并导出成品。
用途：制作一段可循环播放的动画图表，用于社交媒体或新闻简报。资料提到的动画效果包括：条形变成折线、数字递增计数、前后对比等。
主要能力：
- 通过提示词构建单个 HTML 文件，可在浏览器中直接打开。
- 动画包含四个状态：起始、变化、保持、回归，并设定总时长与各阶段时长。
- 要求标题、标签和坐标轴固定不动，只有图表元素发生变化。
- 要求最后一帧与第一帧完全一致，以实现无跳跃循环。
- 支持指定背景色、文字色、强调色、字体和画布尺寸（示例为 1080 x 1350 像素）。
- 构建后要求在指定时间点截图检查重叠、截断等问题，并修正。
- 第二步对五个截帧和循环边界进行复查，只报告实际观察到的问题，不虚构修改。
- 第三步导出 MP4（1080 x 1350，8 秒）和无限循环 GIF，并展示三帧供检查。
使用方式： 资料给出的流程为三步。开始前需阅读 brand.md 和 MOTION.md（若存在）；若不存在，先运行 brand-intake，或询问十六进制色码、字体和 logo 文件。资料强调，缺少这些品牌信息时不应声称结果符合品牌规范。
第一步：先询问数字并等待。需要确认标题、标签、精确数值，以及这些数值是真实结果还是示例数据。示例数据必须在每一帧标注“Illustrative data”。不得对数字进行四舍五入、重新格式化或添加数值。
提示词 1：构建。要求生成单个 HTML 文件，指定标题、数值、四个动画状态、总时长约 8 秒（变化约 2 秒、保持 4 秒、回归 1.5 秒）、配色与字体、尺寸 1080 x 1350。规则包括：所有帧由时间推导，添加 window.seek(seconds)；标题、标签和坐标轴不动；最后一帧与第一帧完全一致；构建后在 0、1、2、4、7 秒截图检查重叠或截断并修正。
提示词 2：复查外观。检查五个截帧和循环边界，确认数值不变、标签可读、无重叠、元素只在应出现时出现。只报告实际观察到的问题，修正后保留旧版本并重新截取相同帧；若无问题则说明未发现问题，不虚构修改。
提示词 3：导出。使用电脑上已有工具转换为视频和 GIF；若需要安装未安装的工具，先停下并告知。输出 MP4（1080 x 1350，8 秒）和无限循环 GIF，并展示成品 GIF 的三帧供检查。
适用场景：为 LinkedIn 帖子或新闻简报制作循环动画图表；需要条形变折线、数字递增、前后对比等动效；需要精确控制尺寸、配色、字体和循环衔接；希望以代码方式生成单文件 HTML 并导出视频与 GIF。
限制：资料未提供具体的安装命令、依赖工具列表、价格或平台兼容性信息。导出步骤依赖电脑上已有工具，若缺少工具需先告知用户。品牌合规性依赖 brand.md 和 MOTION.md 或用户提供的色码、字体与 logo，缺失时无法保证符合品牌规范。示例数据必须标注“Illustrative data”。