Frame Data Chart Nyt

Name: Frame Data Chart Nyt
Author: nexu-io

nexu-io/open-design

1.6k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

frame-data-chart-nyt is an agent skill that nyt-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

About

frame-data-chart-nyt is an agent skill from nexu-io/open-design that nyt-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). 【模板: 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"。 - **大字标题** (Chelt Developers invoke frame-data-chart-nyt during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.

【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。
【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。
顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 "GLOBAL · WEEKLY
大字标题** (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。
折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。

Frame Data Chart Nyt by the numbers

1,628 all-time installs (skills.sh)
+124 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #219 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

frame-data-chart-nyt capabilities & compatibility

Capabilities: 【意图】把一段数据 (csv / json / 一句结论) 做成《纽约时报》专栏感的单帧/动画图 · 【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; · 顶部 kicker** (11px uppercase letterspace 0.14em, · 大字标题** (cheltenham / playfair / source serif pro · 折线: 1 2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据
Use cases: orchestration

From the docs

What frame-data-chart-nyt says it does

【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。

SKILL.md

【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。

SKILL.md

- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill frame-data-chart-nyt

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/frame-data-chart-nyt.svg)](https://skillselion.com/skills/nexu-io/open-design/frame-data-chart-nyt)

Installs	1.6k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

Who is it for?

Developers working on design & ui/ux during build tasks.

Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.

When should I use this skill?

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps.

1920×1080 NYT-style chart video frame
Staggered reveal animation

By the numbers

Outputs 1920×1080 (16:9) editorial chart frames
Sample line chart covers 8 years of weekly active users
Featured at rank 46 in the open-design catalog

Files

SKILL.mdMarkdownGitHub ↗

【模板: 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>。

<!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>