Communitygithub.com

taufiquebuilds/readmereel

将代码仓库的 README 自动转化为一支 25 秒的开场视频、横版 16:9 MP4(适用于 README 和产品发布页)、竖版 9:16 MP4(适用于 X、LinkedIn、Reels 和 TikTok)以及一张 GIF,全部在本地通过 HyperFrames 免费渲染。当你需要为项目制作开场视频、宣传视频、演示集锦、公告视频、README GIF 或任何类型的分享视频时,即使对方没有明确提到“readmereel”,也请使用此技能。

readmereel 是什么?

readmereel 是一个智能体技能,它能分析当前代码仓库的 README、包清单文件、文档目录和图片资源,自动生成一份 `launch-video/story.json` 剧本,然后调用本地的 HyperFrames 渲染引擎,输出多种格式的视频素材。该技能主要面向 Claude Code、Cursor、Codex 等 AI 代码助手,帮助开发者在几秒钟内将静态仓库转化为动态的视觉展示内容。它支持生成 16:9 横版视频(用于 README、Product Hunt 等平台)、9:16 竖版视频(用于社交媒体 Reels/TikTok)以及可嵌入 README 的 GIF。用户无需编写任何动画代码,所有场景均为固定模板;渲染过程需要 Node 22+、ffmpeg 和网络连接,并支持 `--draft` 参数以快速预览。最终产出物还包括可编辑的 HyperFrames 项目文件夹,方便用户后续自行调整。该技能的核心价值在于让任何仓库都能瞬间拥有一个专业的演示视频,极大降低视频制作的门槛。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/taufiquebuilds/readmereel/tree/HEAD/skills/readmereel

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

预览

来自技能 README

<name> launch video

文档

readmereel 是做什么的?

你能将当前仓库转化成一个简短的开场视频。你来编写文字,脚本负责渲染视频。永远不要编写动画代码:所有场景都是固定模板。

1. 阅读仓库

首先阅读 README,然后读取包清单文件(package.json, pyproject.toml, Cargo.toml, go.mod)、docs 文件夹以及仓库中的图片文件。查找以下内容:

  • 项目叫什么,以及用一句话描述它的功能
  • 它解决了用户的什么痛点,用用户自己的话表达
  • 它为用户做的三件事
  • 用户首先运行的命令(安装或快速开始)
  • 真实的截图或图表(docs/, assets/, .github/, images/, screenshots/,以及 README 中指向仓库内文件的图片链接)
  • 一个 Logo(PNG 或 SVG)以及一个品牌色(从 Logo、README 徽章或 CSS 中获取)
  • GitHub 地址(通过 git remote get-url origin 获取)以及,如果 gh 可用,星标数量:gh repo view --json stargazerCount -q .stargazerCount

2. 编写 launch-video/story.json

在仓库根目录下创建文件夹 launch-video/,并写入 launch-video/story.json。路径均相对于仓库根目录。以下是字段及脚本强制执行的硬性限制:

字段限制编写方式
name24 个字符与 README 中完全一致的产品名称
problem70 个字符用户的痛点,而非产品本身:“所有 AI 演示看起来都一样”。目标约为 6-9 个词,便于观众阅读
promise60 个字符用户获得的结果:“看起来像真人设计的幻灯片”。约 6-9 个词
features恰好 3 个每个包含 { “title”, “detail”, “image” }
功能 title40 个字符一个结果,而非组件名称:“从不重复发送月份”
功能 detail80 个字符一句关于如何或为什么的普通句子,约 12 个词
功能 image可选仓库中展示该功能的真实截图路径:PNG, JPG, WebP 或 SVG。动画 GIF 只显示单帧,不接受视频文件。优先选择文字足够大、在小尺寸下仍可阅读的图片;跳过那些大部分空白或不可读的图片。如果没有则留空。绝不自行创建或抓取。
install48 个字符一条命令,一行,与 README 给出的完全一致;如果太长,使用最短的真实第一条命令。绝不要使用像 <your-username> 这样的占位符:使用 README 本身使用的真实示例值,例如 repoheat dashboard --user ratatui
url60 个字符github.com/owner/repo:不要 https://, 不要 .git。将 git remote 输出(如 [email protected]:o/r.git 或 https://github.com/o/r.git)转换为 github.com/o/r
stars星标数量,或 null。仅在 10 颗或以上时显示
logo可选PNG 或 SVG Logo 的路径
accent十六进制颜色值,如 #0f766e;品牌色,否则留空
music可选仅当用户给你一个音频文件时(mp3, m4a, wav 或 ogg)
endCard留空(true)。只有当用户要求不显示“由 readmereel 制作”字样时才设置为 false

示例:

{
  “name”: “agencyrecap”,
  “problem”: “每月客户报告,手工制作并发送”,
  “promise”: “每月客户报告自动发送”,
  “features”: [
    { “title”: “每月品牌 PDF”, “detail”: “你的 Logo 和颜色,按你选择的日期发送给每位客户”, “image”: “docs/images/report-page-2.png” },
    { “title”: “一站式面板”, “detail”: “查看哪些报告已发出,一键重新发送”, “image”: “docs/images/dashboard.png” },
    { “title”: “永不重复发送”, “detail”: “当 Google 或电子邮件失败时暂存并重试,然后通知你” }
  ],
  “install”: “docker compose up -d”,
  “url”: “github.com/taufiquebuilds/agencyrecap”,
  “stars”: null,
  “accent”: “#0f766e”
}

此表中未列出的任何字段都会被拒绝,因此拼写错误会被捕获。文案规则:短词,无浮夸用语(“革命性”、“增效”、“无缝”、“解锁”),无 emoji,无感叹号,句子式大小写,数字用阿拉伯数字。每一句声明都必须是仓库中有所体现的内容。

3. 向用户展示场景并等待

在渲染之前,将六个场景以编号列表形式展示出来,并请求“ok”或修改:

  1. 钩子(3 秒):problem
  2. 标题(3 秒):name, promise
  3. 功能 1(4 秒):标题,详情,图片文件或“文字卡片”
  4. 功能 2(4 秒):同上
  5. 功能 3(4 秒):同上
  6. 安装 + 星标(7 秒):install, “在 GitHub 上点赞”, url

4. 渲染

scripts/render.mjs 位于包含此 SKILL.md 的文件夹中。计算其绝对路径,并从仓库根目录运行以下命令:

node <此技能文件夹的绝对路径>/scripts/render.mjs launch-video/story.json

需要 Node 22+ 和 ffmpeg,如果缺少,脚本会打印如何安装。每次运行都需要访问网络:npm(HyperFrames)、一次性 Chrome 下载、Google Fonts 和 GSAP CDN。渲染需要 3-10 分钟,因此请使用至少 15 分钟的超时时间运行该命令,或者在后台运行并等待其完成。如果沙箱阻止网络,请要求用户允许,或者将上述确切命令提供给用户,请他们自己运行。

添加 --draft 参数以获得更快速、低质量的渲染,适用于用户只想快速预览的情况。

如果打印出故事问题或布局问题,请修复 story.json(缩短指定文本的长度)并重新运行。如果渲染失败,请阅读 launch-video/render.log 末尾的内容。

5. 交接

告知用户所生成的内容:

  • launch-video/video-16x9.mp4:适用于 README、Product Hunt、Show HN、YouTube
  • launch-video/video-9x16.mp4:适用于 X、LinkedIn、Instagram Reels、TikTok
  • launch-video/video.gif:粘贴到 README 顶部,使用 ![<name> launch video](launch-video/video.gif)
  • launch-video/wide/ 和 launch-video/tall/:可编辑的 HyperFrames 项目。每次运行都会重建,因此在 HyperFrames Studio 中编辑之前,请先将其复制到其他地方(cd launch-video/wide && npx --yes [email protected] preview)

为用户提供你运行的确切绝对命令(包含其 launch-video/story.json 路径),以便他们无需智能体即可重新渲染。之后若要修改文字,他们只需编辑 story.json 并再次运行相同的命令。建议将 launch-video/wide/, launch-video/tall/ 和 launch-video/render.log 添加到 .gitignore 中。如果没有任何功能具有真实图片,请说明在仓库中添加截图可以使视频更具说服力。

相关技能