{"id":"7f5c20b8-0ad1-4c47-afc7-be5a01308f8b","shortId":"GByXUT","kind":"skill","title":"video-hyperframes","tagline":"Hyperframes / Remotion 兼容的连续帧动画, 可自动播放","description":"【模板: Hyperframes 视频帧】\n- 输出 N 个连续 `<section class=\"frame\">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定 (短脚本 6-10 帧起步, 长脚本应更多, 每帧只承载一个镜头/概念)。\n- 每帧表达一个镜头/概念: 文字 + 视觉构图 (中央构图 / 黄金分割 / 三分法)。\n- 每帧底部隐藏标记 `<!-- frame:N duration:3000 transition:fade -->` 供后续 Remotion / Hyperframes 渲染脚本读取。\n- 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。\n- 第 1 帧是 hook (一个数据 / 一个反常识 / 一个问题), 第 2-N 是论证, 最后是结论 + CTA。\n- 字号巨大 (text-9xl), 一句话即可, 不要堆砌。\n- 配色统一一套电影感 (深色背景 + 1 个霓虹强调色)。\n- 输出最后包含一段简短注释 `<!-- HYPERFRAMES_META: ... -->`, 包含每帧 duration / transition / sceneSummary 的 JSON 元数据, 用于后续转 Remotion。","tags":["video","hyperframes","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-video-hyperframes","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/video-hyperframes","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 (587 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:20.129Z","embedding":null,"createdAt":"2026-05-15T12:50:36.728Z","updatedAt":"2026-05-18T18:50:20.129Z","lastSeenAt":"2026-05-18T18:50:20.129Z","tsv":"'-10':25 '1':52,72 '1080px':18 '1920px':16 '2':59 '3':46 '6':24 '9xl':67 'cta':63 'durat':76 'h':17 'hook':54 'hyperfram':3,4,9,40 'javascript':43 'json':80 'n':12,19,60 'remot':5,39,83 'scenesummari':78 'skill' 'skill-video-hyperframes' 'source-nexu-io' 'text':66 'text-9xl':65 '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' 'transit':77 'video':2 'video-hyperfram':1 'w':15 '一个反常识':56 '一个数据':55 '一个问题':57 '一句话即可':68 '三分法':36 '不要堆砌':69 '个连续':13 '个霓虹强调色':73 '中央构图':34 '也支持点击':48 '供后续':38 '信息密度决定':22 '元数据':81 '兼容的连续帧动画':6 '包含每帧':75 '可自动播放':7 '字号巨大':64 '帧是':53 '帧起步':26 '文字':32 '方向键控制':49 '是论证':61 '最后是结论':62 '概念':29,31 '模板':8 '每':45 '每个':14 '每帧只承载一个镜头':28 '每帧底部隐藏标记':37 '每帧表达一个镜头':30 '深色背景':71 '渲染脚本读取':41 '用于后续转':82 '用户内容':21 '由':20 '的':79 '短脚本':23 '秒切换到下一帧':47 '第':51,58 '自动播放':44 '视觉构图':33 '视频帧':10 '角落显示进度条':50 '输出':11 '输出最后包含一段简短注释':74 '配色统一一套电影感':70 '长脚本应更多':27 '顶部加一段':42 '黄金分割':35","prices":[{"id":"cd335f2c-fa92-4fd6-8421-30b5a65cd772","listingId":"7f5c20b8-0ad1-4c47-afc7-be5a01308f8b","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:36.728Z"}],"sources":[{"listingId":"7f5c20b8-0ad1-4c47-afc7-be5a01308f8b","source":"github","sourceId":"nexu-io/open-design/video-hyperframes","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/video-hyperframes","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:36.728Z","lastSeenAt":"2026-05-18T18:50:20.129Z"}],"details":{"listingId":"7f5c20b8-0ad1-4c47-afc7-be5a01308f8b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"video-hyperframes","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":"471d6b021ec1a12e2f3816cb7fc5decb262be195","skill_md_path":"skills/video-hyperframes/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/video-hyperframes"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"video-hyperframes","description":"Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/video-hyperframes"},"updatedAt":"2026-05-18T18:50:20.129Z"}}