wjs-converting-text-to-video
Use when the user wants a 王建硕-style WeChat article (article.md) turned into a narrated short MP4 video — TTS voiceover via 火山引擎 Volcano TTS, HyperFrames CSS/GSAP animation per scene, subtle SFX, abstract watercolor background, full pipeline rendering to 1080×1920 portrait MP4 (30-90s). Triggers — "把这篇文章做成视频", "做一个解说视频", "讲解视频", "/wjs-converting-text-to-video".
npx skills add jianshuo/claude-skills --skill wjs-converting-text-to-video --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# wjs-converting-text-to-video 把一篇王建硕风格的微信公众号 `article.md` 做成 **1080×1920 竖屏、30-90 秒** 的中文解说短视频：TTS 旁白 + HyperFrames CSS/GSAP 动画 + 抽象水彩背景 + 转场 SFX。输出 MP4 给视频号 / 抖音 / 小红书 / Reels。 ## What this skill produces | 维度 | 默认 | |---|---| | 尺寸 | 1080×1920 竖屏 (9:16) | | 时长 | 30-90 秒 | | Scene 数 | 5-10 | | 旁白 | 火山引擎 Volcano TTS，默认阿虎对话男声 | | 背景 | GPT Image 2 生成的抽象水彩 (`bg.png`) + blur 30 + 暖黑半透明 overlay | | 字体 | Noto Sans SC，hero 900，主文字暖奶白 | | 输出 | `<article-folder>/<slug>.mp4`（与 `video/` 平行，不放 `video/` 里）| | 发布 | 自动上传到 YouTube — Portrait → Shorts，Landscape → 普通 video；重新渲染会替换老视频（不累积）| ## When this skill fires - 用户已有 `article.md`，说「做成视频」「做一个解说」「讲一遍」 - 用户跑 `/wjs-converting-text-to-video <article-folder>` - 用户说「把昨天发的那 X 篇都做成视频」之类的批量请求 ## When NOT to use - 没有文章稿，只是一个想法 → 先用 `/wjs-publishing-wechat` 写出 article.md，再来 - 用户要的是字幕烧录 / 翻译 / 配音替换 → 用 `/wjs-burning-subtitles` / `/wjs-dubbing-video` / `/wjs-localizing-video` - 视频要英文 / 西语等非中文 → 本 skill 专注中文 TTS (Volcano 火山引擎)；非中文走 hyperframes 自带 tts 命令 (kokoro 英文还可以) - 横屏 16:9 → 本 skill 默认竖屏；横屏仅在用户明确要求时改 ## Core Principle **视频不是文章的可视化朗读，而是文章的视觉重构。** 每个 scene 是一个独立的视觉时刻 —— 一个对比、一个排比、一个数字、一个比喻。文字撑满屏幕，黑体加粗，重点字橙色高亮。背景是抽象水彩 (blur 后柔化)，整体调子稳重、克制、有冲击力。 **节奏 > 模板**。一
- What this skill produces
- When this skill fires
- When NOT to use
- Core Principle
- Workflow
- Step 1: 设计 5-10 个视觉时刻
- Step 1b: Scene Mix Rule（强制）
- Step 2: 写 narrationchunks.json
- Step 3: 生成 TTS narration
- Step 4: 生成水彩背景图
- Step 5: 写 HyperFrames composition (index.html)
- Modern Motion Techniques
- Step 6: 加 SFX
- Step 7: Lint + Inspect + Render（必须按顺序）
cd <article-folder>/video python3 tts_narration.py npx hyperframes lint npx hyperframes inspect --at 1,8,15,25,35,45,55,65 npx hyperframes snapshot --at <t1>,<t2>,<t3> . npx hyperframes render --quality standard --fps 30 --output ../<slug>.mp4
What does the wjs-converting-text-to-video skill do?
Use when the user wants a 王建硕-style WeChat article (article.md) turned into a narrated short MP4 video — TTS voiceover via 火山引擎 Volcano TTS, HyperFrames CSS/GSAP animation per scene, subtle SFX, abstract watercolor background, full pipeline rendering to 1080×1920 portrait MP4 (30-90s). Triggers — "把这篇文章做成视频", "做一个解说视频", "讲解视频", "/wjs-converting-text-to-video".
How do I install it?
Run `npx skills add jianshuo/claude-skills --skill wjs-converting-text-to-video --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jianshuo/claude-skills, a repository with 112 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.