example.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>NYT Chart · AI Agent MAU 2018–2026</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
body { font-family:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif; background:#f7f5ee; color:#1a1a1a; margin:0; }
.serif { font-family:'Source Serif Pro',Georgia,serif; }
.mono { font-family:'IBM Plex Mono',ui-monospace,monospace; }
.nyt-red { color:#a91d1d; }
.nyt-red-fill { fill:#a91d1d; }
.kicker { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
@keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
.line { stroke-dasharray:1000; animation: draw 1.4s ease-out forwards; animation-delay: .4s; opacity:0; animation-fill-mode: forwards; }
.line { animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards; }
@keyframes fadeIn { to { opacity:1 } }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-12">
<article class="w-[1280px] max-w-full">
<header class="flex items-baseline justify-between">
<div class="kicker nyt-red font-semibold">GLOBAL · MONTHLY ACTIVE USERS · 2018–2026</div>
<div class="kicker opacity-60 mono">FRAME 04 · CHART</div>
</header>
<h1 class="serif mt-3 leading-[1.05] font-medium" style="font-size:clamp(36px,4.4vw,68px)">
AI agent 月活在 <span class="nyt-red italic">2024 之后</span> 进入两段抛物线 ——<br/>
第一段由云端 Claude / GPT 推动, 第二段由本地 CLI agent 普及。
</h1>
<!-- chart -->
<svg viewBox="0 0 1100 460" class="mt-8 w-full">
<!-- y axis hairlines -->
<g stroke="#1a1a1a" stroke-width="0.5" opacity="0.25">
<line x1="60" y1="60" x2="1040" y2="60"/>
<line x1="60" y1="180" x2="1040" y2="180"/>
<line x1="60" y1="300" x2="1040" y2="300"/>
<line x1="60" y1="420" x2="1040" y2="420"/>
</g>
<!-- y labels -->
<g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
<text x="20" y="64">640M</text>
<text x="20" y="184">420M</text>
<text x="20" y="304">210M</text>
<text x="20" y="424">0</text>
</g>
<!-- area band -->
<path d="M 60 410 L 180 405 L 300 395 L 420 380 L 540 355 L 660 320 L 780 270 L 900 195 L 1020 90 L 1020 420 L 60 420 Z" fill="#a91d1d" opacity="0.06"/>
<!-- main line -->
<polyline class="line" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
points="60,410 180,405 300,395 420,380 540,355 660,320 780,270 900,195 1020,90" />
<!-- accent inflection -->
<polyline fill="none" stroke="#a91d1d" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 5"
points="780,270 900,195 1020,90" />
<!-- data points -->
<g>
<circle cx="60" cy="410" r="4" fill="#1a1a1a"/>
<circle cx="180" cy="405" r="4" fill="#1a1a1a"/>
<circle cx="300" cy="395" r="4" fill="#1a1a1a"/>
<circle cx="420" cy="380" r="4" fill="#1a1a1a"/>
<circle cx="540" cy="355" r="4" fill="#1a1a1a"/>
<circle cx="660" cy="320" r="4" fill="#1a1a1a"/>
<circle cx="780" cy="270" r="6" class="nyt-red-fill"/>
<circle cx="900" cy="195" r="6" class="nyt-red-fill"/>
<circle cx="1020" cy="90" r="6" class="nyt-red-fill"/>
</g>
<!-- annotations -->
<g class="mono" font-size="11" fill="#1a1a1a">
<text x="784" y="250">2024 · 310M</text>
<text x="894" y="175" class="nyt-red-fill">2025 · 468M</text>
<text x="1010" y="70" class="nyt-red-fill" text-anchor="end">2026 · 640M</text>
</g>
<!-- inflection callout -->
<g class="serif" font-style="italic" fill="#a91d1d">
<text x="800" y="380" font-size="14">⤴ Inflection point</text>
<text x="800" y="398" font-size="14">local CLI agents普及</text>
</g>
<!-- x labels -->
<g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
<text x="60" y="445" text-anchor="middle">'18</text>
<text x="180" y="445" text-anchor="middle">'19</text>
<text x="300" y="445" text-anchor="middle">'20</text>
<text x="420" y="445" text-anchor="middle">'21</text>
<text x="540" y="445" text-anchor="middle">'22</text>
<text x="660" y="445" text-anchor="middle">'23</text>
<text x="780" y="445" text-anchor="middle">'24</text>
<text x="900" y="445" text-anchor="middle">'25</text>
<text x="1020" y="445" text-anchor="middle">'26</text>
</g>
</svg>
<footer class="mt-3 flex items-baseline justify-between mono text-[10.5px] opacity-60">
<span>Source · Synthesized industry estimates, 2026-05</span>
<span>Chart by HTML-Anything</span>
<span>NYT-STYLE · FRAME-DATA-CHART-NYT</span>
</footer>
</article>
</body>
</html>
example.md
# 全球 AI agent 月活 · 2018-2026
> NYT 风折线图, 一个结论 + 8 个数据点
## 结论
**AI agent 月活在 2024 之后呈两段抛物线增长** — 第一段由 Claude / GPT 工作流推动, 第二段由本地 CLI agent (Cursor / Codex / Aider) 普及推动。
## 数据 (CSV)
year,MAU_millions
2018,12
2019,28
2020,58
2021,90
2022,140
2023,210
2024,310
2025,468
2026,640
SKILL.md
---
name: frame-data-chart-nyt
zh_name: "NYT 风数据图表帧"
en_name: "NYT-Style Data Chart Frame"
emoji: "📈"
description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)."
zh_description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
en_description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)."
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"
example_source_url: "https://hyperframes.heygen.com/catalog"
example_source_label: "hyperframes · data-chart"
od:
mode: video
surface: video
scenario: video
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: false
example_prompt: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
---
【模板: NYT 风数据图表帧】
【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。
【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。
【布局】
- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。
- **大字标题** (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。
- **图表区** (占画布 55-65%):
- 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。
- 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。
- 范围带 (range band): 浅灰填充 `#e6e2d2` 包络 + 中线 ink。
- **底部 source + footnote** (10px mono, opacity 0.6): "Source: 用户数据 · Chart by html-anything"。
- **错峰揭示动画**: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 `prefers-reduced-motion` 关闭。
【设计细节】
- **绝不**: 使用 chart.js / d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。
- 字体: 标题 `Source Serif Pro` 或 `Cheltenham` (无则用 `Playfair Display`); body `IBM Plex Sans` 或 `Inter`; 数据标签 `IBM Plex Mono`。
- 1 个主色 (ink) + 1 个 accent (NYT red `#a91d1d` / 编辑 mint `#5fb38a` / 暖橙 `#d97757` 三选一)。
- Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。
- 严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。
- 必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 "schematic"); 如果是 CSV/JSON, 直接绘制。
- 单文件 HTML; 数据点旁注释格式: `<text class="annot">2024 · 412M</text>`。