メニュー
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/nexu-io/open-design --skill frame-data-chart-nytコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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 二选一; 文字色和背景相反。
【布局】
#a91d1d 或 mint #5fb38a): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。2024 · 412M 黑色 mono 小字。#e6e2d2 包络 + 中线 ink。prefers-reduced-motion 关闭。【设计细节】
Source Serif Pro 或 Cheltenham (无则用 Playfair Display); body IBM Plex Sans 或 Inter; 数据标签 IBM Plex Mono。#a91d1d / 编辑 mint #5fb38a / 暖橙 #d97757 三选一)。<text class="annot">2024 · 412M</text>。Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。
SOC 職業分類に基づく
