跳到正文
cccskills
免费在 GitHub 公开

frame-data-chart-nyt

Turn CSV, JSON, or a written conclusion into a newspaper-style chart for video clips or social posts. Produce a single HTML file with line, bar, or range-band charts, clear headlines, source notes, and staggered animation.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

查看安装方法

适用场景

  • Showing data trends in a video clip
  • Creating a chart card for social media
  • Visualizing CSV or JSON data
  • Illustrating a written conclusion with a schematic chart

包含的文件(3)

  • SKILL.md3.8 KB
  • example.html5.1 KB
  • example.md388 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

中文简介正在准备中。当前显示英语简介。

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design10.2万2026年10月19日 更新

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

中文简介正在准备中。当前显示英语简介。

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design10.2万2026年10月19日 更新

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

中文简介正在准备中。当前显示英语简介。

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design10.2万2026年10月19日 更新

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

中文简介正在准备中。当前显示英语简介。

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design10.2万2026年10月19日 更新

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

中文简介正在准备中。当前显示英语简介。

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design10.2万2026年10月19日 更新

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

中文简介正在准备中。当前显示英语简介。

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design10.2万2026年10月19日 更新

查看 nexu-io 的全部技能

报告此技能的问题