video-add-content-cards
为视频项目添加基于时间轴的HTML图文叠加层
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：video-add-content-cards。 它的用途是：为视频项目添加基于时间轴的HTML图文叠加层 完整的 Skill 内容见：https://321skill.com/skills/video-add-content-cards-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我有一个产品功能演示视频，需要在第30秒显示产品核心优势标题，第45秒用图表对比竞品数据，第60秒展示客户好评引文，并在视频结尾添加行动号召按钮。”，它会根据您描述的时间点和内容需求，生成对应的HyperFrames HTML代码片段，您可以将这些代码集成到视频播放器中，实现精准的图文叠加效果。
介绍
本Skill专为需要为视频内容添加动态图文叠加层的场景设计。它解决了视频制作者在后期制作中，需要根据字幕时间点精确插入标题、角标、数据图表、重点指标、对比信息、列表、引文、章节卡或行动号召等复杂图形元素的难题。
使用时，您只需提供视频项目的背景和需求，AI便会生成相应的HyperFrames HTML图形代码。这些代码是基于HTML的图形，可以精确地根据视频字幕的时间点进行显示和隐藏，从而创造出专业、信息丰富的视频叠加效果。
它非常适合视频剪辑师、内容创作者、营销专员以及任何需要制作高质量、信息可视化视频的专业人士。无论是制作教程视频、产品演示、营销宣传片还是在线课程，都能通过此Skill提升视频的信息传达效率和视觉吸引力。
使用建议：在请求AI生成代码前，请确保您已准备好视频的字幕文件或时间轴信息，并明确需要添加的图文内容类型。生成的HTML代码需要嵌入到支持HTML叠加的视频编辑软件或播放平台中才能生效。
核心特点
与一般视频字幕或简单水印工具不同，它专注于生成基于HTML的、可精确按字幕时间点触发的复杂信息图形（HyperFrames），能够创建包含动态数据、交互式元素和丰富排版的叠加层，而非简单的静态文字或图片。
注意事项
不适合需要直接操作视频文件、进行非线性剪辑或添加复杂视觉特效（如3D动画、粒子效果）的场景。
常见问题
HyperFrames是什么？
HyperFrames是一种基于HTML/CSS/JS的图形格式，可以像字幕一样根据时间轴在视频上精确显示和隐藏，用于创建动态信息叠加层。
需要什么软件来使用生成的代码？
需要支持HTML叠加层或自定义图形插入的视频编辑软件（如某些专业工具）或在线视频播放平台（支持自定义HTML播放器控件）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/video-add-content-cards-x/raw/index.md 读取 video-add-content-cards 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/video-add-content-cards-x/raw/index.md（查看排版版本）