html-anything 的 NYT 风数据图表帧：用 SKILL 模板把 CSV/JSON 一键变成《纽约时报》级单帧图表-平芜编程栈

AI 应用
人工智能
AI Agent
AI 写作
媒体生成

【免费下载链接】html-anything

✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.

项目地址：https://gitcode.com/gh_mirrors/ht/html-anything

点击查看免费下载

html-anything 是一款"Agent 写 HTML、你来发布"的本地 AI 编辑器，其内置的 75 个 Skills 模板之一 ——frame-data-chart-nyt（NYT 风数据图表帧）—— 专门用于把一段原始数据（CSV / JSON / 一句结论）自动转译成《纽约时报》专栏风格的折线图、柱状图或范围带图表帧。读完本文，你将掌握该模板的完整设计规范（画布、配色、排版、动画时间线）、它背后的源码级实现链路（从SKILL.md到/api/convert的 Prompt 组装与 Agent 调用），以及如何利用附带的example.md/example.html快速复刻一张可交付的单文件图表。

模板定位：从 frontmatter 读懂这张"图表的骨架"

frame-data-chart-nyt的完整定义位于 SKILL.md，文件头部的 YAML frontmatter 是该模板在注册表里的"身份证"：

name: frame-data-chart-nyt zh_name: "NYT 风数据图表帧" en_name: "NYT-Style Data Chart Frame" emoji: "📈" description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)" category: video scenario: video aspect_hint: "1920×1080 (16:9)" featured: 46 tags: ["data", "chart", "nyt", "editorial", "frame"] example_id: sample-frame-data-chart-nyt example_name: "NYT 风折线图 · 全球用户量" example_format: markdown example_tagline: "编辑级图表 + 错峰揭示" example_desc: "8 年周活跃用户折线 + NYT red accent + 注释 mono"

几个关键字段的含义值得展开：

category: video/scenario: video：模板归属于video场景。在 scenarios.ts 中，video是 12 个官方场景键之一（marketing、engineering、operations、product、design、finance、sales、hr、personal、education、creator、video），SCENARIO_ORDER将它排在最后一位。选模板时，"video" 筛选组即可命中该模板。
aspect_hint: "1920×1080 (16:9)"：输出画布固定 16:9，适合视频片段、推文卡片等横向媒介。
featured: 46：注册表的排序权重，数值越小在精选列表里越靠前。
example_*一组字段：声明了随模板附带的示例（example_id: sample-frame-data-chart-nyt），格式为 markdown 输入、HTML 输出，这在模板选择器里会直接渲染成可预览的卡片。

从源码结构看，每个 skill 就是一个文件夹，SKILL.md负责 frontmatter + Prompt 正文，example.md是可选的示例输入，example.html是预渲染预览。如 loader.ts 的注释所述：新增一个模板 = 新增一个文件夹，不需要改动任何 TypeScript 代码，API 路由会重新扫描磁盘，客户端重新拉取/api/templates即可。

意图与适用场景：一帧图表的"使用说明书"

模板正文开篇即定义了意图：

把一段数据（CSV / JSON / 一句结论）做成《纽约时报》专栏感的单帧/动画图表，适合视频片段或推特卡。

这里有三层信息：

输入形态很宽：可以是结构化数据（CSV、JSON），也可以只是一句结论性文字（如"月活翻了三倍"）。模板据此分两种绘制路径——有数据直接画，只有结论则估算坐标并标注schematic。
输出是"单帧"：不是完整网页或长报告，而是一张可以嵌入视频流、发推特的独立帧，画布锁定 1920×1080。
风格基准是 NYT newsroom：编辑级排版 + 克制配色 + 数据注释，属于"图表海报"而非仪表盘。

画布与配色：二选一的双主题

模板规定画布1920×1080，底色二选一：

暖白底#f7f5ee（示例采用，example.html的body { background:#f7f5ee }可验证）；
墨黑底#0e0e0e。

文字色与背景相反（白底深字、黑底浅字）。色彩系统遵循"1 主色 + 1 accent"：

主色 ink（接近墨黑的正文色，示例中为#1a1a1a）；
accent 三选一：NYT red#a91d1d、编辑 mint#5fb38a、暖橙#d97757。示例选择了经典的 NYT red。

这个配色约束同样被全局设计指令所呼应：shared.ts 中的SHARED_DESIGN_DIRECTIVES要求"1 个主色 + 2 个中性色 + 至多 1 个强调色"，并禁止纯黑纯白（改用#0a0a0a/#fafafa）。

布局拆解：四段式版面

模板把画面自上而下分为四个固定区域，比例是"硬约束"：

顶部 kicker：11px大写 +letter-spacing 0.14em，颜色跟随 accent。内容是数据来源 + 类目，示例为GLOBAL · MONTHLY ACTIVE USERS · 2018–2026，右上角还配了FRAME 04 · CHART这类帧序号。
大字标题：衬线字体（Cheltenham / Playfair / Source Serif Pro，示例实际使用Source Serif Pro），字号5.6vw级别，可带 italic 副标。关键约束：标题必须是从用户数据中提炼出的结论，而不是对图表的描述。示例标题是"AI agent 月活在 2024 之后进入两段抛物线"，这就是数据叙事而非图表旁白。
图表区：占画布 55–65%，支持三种图表形态（见下节）。
底部 source + footnote：10pxmono，opacity 0.6，格式固定为Source: 用户数据 · Chart by html-anything。

图表区三形态：折线、柱状、范围带

模板对三种图表形态都给出了可执行的绘制参数：

折线

1–2 条线：主线 ink 实心2.5px，次线 dashed1.5px；
数据点用6px实心圆；
关键点旁标注2024 · 412M样式的黑色 mono 小字。

柱状

全部 ink 单色，或只加 1 道 accent 高亮柱；
柱顶放大数字，柱底类目用 Cheltenham italic。

范围带（range band）

浅灰填充#e6e2d2包络 + 中线 ink。

模板在"设计细节"中还明确了坐标系规范：Y 轴刻度仅用 hairline（细线）+ 3–4 个 tick，标签置于轴外侧 mono 字体。example.html的 SVG 正是这么实现的——4 条stroke-width="0.5"的轴参考线（opacity 0.25），4 个 mono 刻度值（640M / 420M / 210M / 0），x 轴标签为'18–'26的年份缩写。

错峰揭示动画：一张帧的时间线

这是该模板最具辨识度的部分，动画按时间线错峰出场：

元素	起始时刻	动画
标题	0s	fade-in
kicker	200ms	出现
折线	400ms	`stroke-dashoffset`1.2s ease-out 描线
数据标签	依次	100ms 间隔逐个浮现

example.html里可以找到这条时间线的实现：@keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }，.line类用animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards组合出"延迟 400ms 后 1.4s 描线 + 淡入"。折线元素因此声明了stroke-dasharray:1000作为描线动画的轨道。

模板同时强调：动画必须可被prefers-reduced-motion关闭，这是无障碍底线，与全局指令中"动效仅在必要处使用"的设计准则一致。

设计红线：哪些事绝对不做

模板用"绝不 / 严禁"列出了清晰的负面清单，这些是评测生成结果时的硬性标准：

绝不使用 chart.js / d3 图表库（除非经 jsdelivr CDN 引入）；推荐手写 inline SVG，不超过 80 行；
严禁：全屏铺线的 grid、阴影、3D 立体柱、emoji；
字体栈固定：标题Source Serif Pro/Cheltenham（缺省则Playfair Display），正文IBM Plex Sans/Inter，数据标签IBM Plex Mono。

示例example.html完整遵守了这些约束：图表是 100% 手写 SVG（viewBox="0 0 1100 460"），无任何图表库，无阴影无 emoji，字体栈依次为Source Serif Pro、IBM Plex Sans、IBM Plex Mono（并兼容中文Noto Sans SC）。

数据真实性：绝不编造，schematic 兜底

模板对数据来源有硬性要求：

必须使用用户提供的数据；
输入是文本结论时，可自动估算合理坐标，但必须标注schematic（示意）；
输入是CSV / JSON时直接绘制，不得凭空发挥。

这一约束与全局指令 shared.ts 的"内容真实性"条款完全同构："必须使用用户提供的真实数据，不要编造、不要 lorem ipsum"。而 convert 路由在最小化差异编辑（diff-edit）模式下也会再次强调"不要捏造数据，新内容里没有的就不要写"。

实例对照：从 example.md 到 example.html 的完整还原

随模板附带的示例是一个很好的端到端参考，输入与输出一一对应：

输入 example.md—— 一句结论 + 9 行 CSV：

year,MAU_millions 2018,12 2019,28 2020,58 2021,90 2022,140 2023,210 2024,310 2025,468 2026,640

输出 example.html演示了模板规范的完整落地：

单文件、可直接双击打开（通过cdn.tailwindcss.com引入 Tailwind v3，Google Fonts 引入三套字体，均符合全局指令的 CDN 要求）；
标题提炼结论："AI agent 月活在 2024 之后进入两段抛物线"；
折线图：主线 ink 实心2.5px，后三段用 NYT red +stroke-dasharray="6 5"的虚线强调"转折段"，数据点前 6 个r=4ink 色、后 3 个r=6红色——精确对应模板"关键点标注 + accent 高亮"；
范围带用红色opacity="0.06"的面积路径勾勒增长包络（模板默认浅灰#e6e2d2，此处以红做弱化替换，仍是"包络 + 中线"结构）；
数据点注释使用模板指定的 mono 小字格式：2024 · 310M、2025 · 468M、2026 · 640M；
另加了 serif italic 的拐点标注 "Inflection point"，是模板允许的"结论叙事"延伸。

它如何被 html-anything 消费：源码链路

从模板文件到浏览器里的可交互编辑，frame-data-chart-nyt走完整条注册表链路：

磁盘扫描与 frontmatter 解析：loader.ts 的parseFrontmatter读取SKILL.md的 YAML 头，listSkills()汇总src/lib/templates/skills/下所有合法目录（id 需匹配^[a-z0-9][a-z0-9-]*$），loadSkill(id)一次性加载 Prompt 正文与可选的example.md/example.html。
注册表 API：templates 路由以Cache-Control: public, max-age=5返回全部SkillMeta；example 路由按 id 返回示例的内容与 HTML 捆绑包，前端"Preview"一次请求即可拿到全部素材。
Prompt 组装：shared.ts 的assemblePrompt把全局设计指令 + 模板正文（skill.body）+ 用户内容拼成最终 Prompt；/api/convert路由在提交编辑时会优先走"最小化差异编辑"分支，保留原 HTML 的设计只改数据节点。
Agent 执行与流式输出：invoke.ts 解析出 Agent 二进制后 spawn 子进程，Prompt 通过 stdin 或--message传入，stdout 以 SSE 流式回传delta/html/meta事件，前端实时渲染。

这意味着：你给 AI 一句数据描述或一份 CSV，frame-data-chart-nyt的模板正文 + 全局设计指令共同约束出"NYT 排版 + 手写 SVG + 错峰动画 + 数据真实"的完整输出，全程零 API Key，由本地的 Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider 等 CLI Agent 直接生成。

上手路径：三种方式消费这个模板

直接看示例：阅读 example.md 与 example.html 的对照，理解"输入数据 → 输出图表"的转化范式；
在编辑器里生成：打开 html-anything 的模板选择器，在 video 场景或搜索data/chart/nyt命中该 skill，粘贴自己的 CSV / JSON 或一句结论，Agent 会按模板规范流式输出单文件 HTML；
复刻与迁移：想自定义同风格模板，直接复制frame-data-chart-nyt文件夹改 frontmatter 与正文即可——按 loader.ts 的约定，新增文件夹即新增模板，无需改任何 TS 代码，重启（或开发模式下热刷新）后选择器即可见。

小结

frame-data-chart-nyt是 html-anything 把"数据叙事"工程化的一个缩影：frontmatter 定义元数据与示例入口，正文定义版式与动效规范，示例文件提供可对照的黄金实现，而 loader → API → prompt 组装 → Agent 流式输出的链路则让"给一段 CSV 得到一张 NYT 风图表帧"变成一次零配置的本地操作。对于需要高频产出数据图表帧的视频作者、运营与开发者，它是值得优先调用的开箱即用技能。