{"id":"6f3fbe87-dbb9-4d6f-a83e-03f479a36454","shortId":"JCuTZM","kind":"skill","title":"frame-data-chart-nyt","tagline":"NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)","description":"【模板: NYT 风数据图表帧】\n【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。\n\n【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。\n\n【布局】\n- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 \"GLOBAL · WEEKLY ACTIVE USERS · 2018–2026\"。\n- **大字标题** (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。\n- **图表区** (占画布 55-65%):\n  - 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。\n  - 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。\n  - 范围带 (range band): 浅灰填充 `#e6e2d2` 包络 + 中线 ink。\n- **底部 source + footnote** (10px mono, opacity 0.6): \"Source: 用户数据 · Chart by html-anything\"。\n- **错峰揭示动画**: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 `prefers-reduced-motion` 关闭。\n\n【设计细节】\n- **绝不**: 使用 chart.js / d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。\n- 字体: 标题 `Source Serif Pro` 或 `Cheltenham` (无则用 `Playfair Display`); body `IBM Plex Sans` 或 `Inter`; 数据标签 `IBM Plex Mono`。\n- 1 个主色 (ink) + 1 个 accent (NYT red `#a91d1d` / 编辑 mint `#5fb38a` / 暖橙 `#d97757` 三选一)。\n- Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。\n- 严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。\n- 必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 \"schematic\"); 如果是 CSV/JSON, 直接绘制。\n- 单文件 HTML; 数据点旁注释格式: `<text class=\"annot\">2024 · 412M</text>`。","tags":["frame","data","chart","nyt","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-frame-data-chart-nyt","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/frame-data-chart-nyt","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,428 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:13.926Z","embedding":null,"createdAt":"2026-05-15T12:50:29.851Z","updatedAt":"2026-05-18T18:50:13.926Z","lastSeenAt":"2026-05-18T18:50:13.926Z","tsv":"'-2':87 '-4':223 '-65':84 '0.14':50 '0.6':133 '0e0':40 '0s':146 '1':86,111,204,207 '1.2':153 '1.5':96 '100ms':160 '1080':36 '10px':130 '11px':47 '1920':35 '2.5':92 '200ms':148 '2018':66 '2024':102,248 '2026':67 '3':222 '3d':233 '400ms':158 '412m':103,249 '5.6':74 '55':83 '5fb38a':58,215 '6px':99 '80':181 'a91d1d':55,212 'accent':53,113,209 'activ':64 'anyth':140 'band':121 'bodi':194 'cdn':176 'chart':4,33,136 'chart.js':171 'cheltenham':69,117,190 'csv':20 'csv/json':243 'd3':172 'd97757':217 'dash':95 'dashoffset':152 'data':3,32 'data-chart':31 'display':193 'e0e':41 'e6e2d2':123 'eas':156 'ease-out':155 'em':51 'emoji':236 'f7f5ee':38 'fade':144 'fade-in':143 'footnot':129 'frame':2 'frame-data-chart-nyt':1 'global':62 'grid':230 'hairlin':221 'html':139,246 'html-anyth':138 'hyperfram':30 'ibm':195,201 'ink':90,109,126,206 'inlin':183 'inspir':28 'inter':199 'ital':76,118 'jsdelivr':175 'json':21 'kicker':46,147 'letterspac':49 'mint':57,214 'mono':105,131,203,227 'motion':166 'newsroom':8 'nyt':5,7,16,210 'nyt-newsroom':6 'opac':132 'playfair':70,192 'plex':196,202 'prefer':164 'prefers-reduced-mot':163 'pro':73,188 'px':93,97 'rang':120 'red':211 'reduc':165 'san':197 'schemat':241 'serif':72,187 'skill' 'skill-frame-data-chart-nyt' 'sourc':71,128,134,186 'source-nexu-io' 'stroke':151 'stroke-dashoffset':150 'svg':179 'tick':225 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'uppercas':48 'user':65 'vw':75 'week':63 'y':219 '一句结论':22,78 '三选一':218 '不是描述图':80 '不超过':180 '专栏感的单帧':25 '严禁':229,235 '个':208,224 '个主色':205 '中线':125 '主线':89 '二选一':42 '但要标注':240 '使用':170 '做成':23 '全屏铺线':231 '全部':108 '关键点旁标注':101 '关闭':167 '副标可选':77 '动画图表':26 '包络':124 '单文件':245 '单色或加':110 '占画布':82 '可被':162 '图表区':81 '大字标题':68 '如':61 '如果是':242 '如果输入是文本结论':238 '字':228 '字体':184 '实心':91 '实心圆':100 '小字':106 '布局':44 '库':173 '底部':127 '引入':177 '必须用用户提供的数据':237 '意图':18 '或':56,189,198 '或墨黑底':39 '把一段数据':19 '折线':12,85,149 '排版':9 '推荐手写':178 '数据来源':59 '数据标签':200 '数据标签依次':159 '数据点旁注释格式':247 '数据点用':98 '文字色和背景相反':43 '无则用':191 '暖橙':216 '暖白底':37 '条线':88 '柱':13 '柱底类目斜体':116 '柱状':107 '柱顶大数字':115 '标签在轴外侧':226 '标题':142,185 '模板':15 '次线':94 '浅灰填充':122 '用户数据':135 '画布':34 '直接绘制':244 '立体柱':234 '类目':60 '红':54 '纽约时报':24 '结论必须从用户数据中提炼':79 '绝不':169 '编辑':213 '编辑级图表':11 '自动估算合理坐标':239 '范围带':14,119 '行':182 '设计细节':168 '轴刻度仅':220 '适合视频片段或推特卡':27 '道':112 '错峰揭示动画':10,141 '间隔':161 '阴影':232 '除非':174 '顶部':45 '颜色':52 '风数据图表帧':17 '高亮柱':114 '黑色':104","prices":[{"id":"2c839e64-3de2-40b2-8d08-7fab4fe44300","listingId":"6f3fbe87-dbb9-4d6f-a83e-03f479a36454","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:29.851Z"}],"sources":[{"listingId":"6f3fbe87-dbb9-4d6f-a83e-03f479a36454","source":"github","sourceId":"nexu-io/open-design/frame-data-chart-nyt","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:29.851Z","lastSeenAt":"2026-05-18T18:50:13.926Z"}],"details":{"listingId":"6f3fbe87-dbb9-4d6f-a83e-03f479a36454","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"frame-data-chart-nyt","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"3e55715f0ec5c589c3149d4655e8e3a1ea14488d","skill_md_path":"skills/frame-data-chart-nyt/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"frame-data-chart-nyt","description":"NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/frame-data-chart-nyt"},"updatedAt":"2026-05-18T18:50:13.926Z"}}