Claude MarketplacesSubmit
nexu-io avatar

Frame Data Chart Nyt

nexu-io/open-design

Generates single-frame editorial charts with New York Times visual styling: serif headlines, uppercase kickers, and hand-coded SVG line or bar charts on warm white or ink black backgrounds. Built for 1920×1080 video snippets or social cards. Ships with staggered reveal animations (title, then kicker, then chart strokes) that you can disable with prefers-reduced-motion. You feed it CSV, JSON, or even just a conclusion sentence and it renders clean charts with NYT red accents, hairline axes, and mono labels. No chart.js bloat, just inline SVG under 80 lines. Useful when you want data frames that look like they came from a newsroom graphics desk instead of a generic dashboard.

skills.sh installs
2.7K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill frame-data-chart-nyt --agent claude-code

Installs into .claude/skills of the current project.

Files

【模板: 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 关闭。
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Category
Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1nexu-io avatarweread-year-in-review-video-templatenexu-io/open-designWeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stor2.5Kskills.sh installs
2owl-listener avatardesign-token-auditowl-listener/designer-skillsAudit design token usage across a product for consistency and coverage.2.5Kskills.sh installs
3kostja94 avatarvisual-contentkostja94/marketing-skillsWhen the user wants to plan, create, or repurpose visual content (images, infographics, social post images) across channels. Also use when the user mentions "co2.4Kskills.sh installs
4owl-listener avatardesign-briefowl-listener/designer-skillsWrite a comprehensive design brief that defines the problem space, constraints, audience, and success criteria.2.3Kskills.sh installs
5owl-listener avatardesign-rationaleowl-listener/designer-skillsWrite clear design rationale connecting decisions to user needs, business goals, and principles.2.3Kskills.sh installs
6figma avatarfigma-generate-diagramfigma/mcp-server-guideMANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Tri2.2Kskills.sh installs