你的故事从这里开始
步骤 01
放入你的内容
从已有文章、脚本或想法开始。
CLAUDE MOTION SKILLS · 适用于 CLAUDE CODE 与 CODEX
Claude Motion:
让文章动起来。
文章 → 脚本 → 笔记 → 灵感 → 下一支视频
值得分享的故事，属于你的视觉风格。用你已有的 Agent，把文字变成生动的视频。
CLAUDE MOTION SKILLS动态设计习作 ↗
✳
从一个想法开始创作一段
值得欣赏的作品。
值得欣赏的作品。
文字、节奏，全新视角。
原创动态习作
HTML → 动效兼容工具
✳ Claude Code CodexOpenCodeCursorKimi以及你喜欢的 Agent
就在你熟悉的工具里。
Claude Code · 流程示意
安装本站 CLI
curl -fsSL https://claudemontiondesignskills.org/downloads/install.sh -o /tmp/cm-skills-install.sh sh /tmp/cm-skills-install.sh export PATH="$HOME/.local/bin:$PATH" cm-skills setup
安装 cm-skills，使用设备码登录，再到 Claude Code 或 Codex 中创作。
使用流程
三个步骤，一个好故事。
带上内容，选好风格，让故事以恰当的节奏展开。
做出你的风格
步骤 02
选择视觉风格
动态大字、安静演讲、纸张拼贴，选择适合故事的风格。
随时开始创作
步骤 03
预览、完善、分享
编辑分镜、预览动效，然后带走完整的制作工程。
动效 · 基于 HYPERFRAMES
HTML 输入，动效故事输出。
开放的画布、精确的时间线、属于你的完整项目。
你的作品
小小的想法。
精彩讲述。
你的智能体精彩讲述。
你的标题 · 分镜 01
图层与动效
逐字讲述故事
加入自己的音频
代码清晰
可编辑 HTML，文字、配色和节奏由你掌握。
轻松修改
在编码 Agent 中继续完善同一个项目。
带走完整工程
下载源文件，用 HyperFrames 在本地渲染。
你的创作伙伴
配合你已经熟悉的编码工具使用。
基于 HeyGen 的 Apache-2.0 开源 HyperFrames 引擎，本站独立构建。
从草稿到作品
故事所需，尽在其中。
简单开始，自由创作，始终掌握创作权。
让它动起来。
文字 ↗动态排版
让文字更有表现力。
清晰的视角。
视觉 ↗视觉叙事
让想法更直观、更易理解。
分镜 01 → 02
故事 ↗可编辑分镜
调整每个镜头的顺序、文字和节奏。
你的下一个故事。
工作区 ↗自己的工作区
保留本地草稿，或保存至账户。
准备好分享。
分享 ↗分享预览
准备就绪后创建公开分享链接。
从 HTML 到 MP4。
导出 ↗本地视频导出
在自己的电脑上将制作包渲染为 MP4。
CLAUDE CODE / CODEX
你的 Agent，你的创作流程。
在这里制作初稿，再用编码 Agent 打开工程。描述你想要的修改：更慢的揭示、更有力的开头、不同的节奏。每个项目始终可编辑。
| 从这里开始 | 在本地继续 |
|---|---|
| 文章或脚本 | 你的编程智能体 |
| 可编辑分镜 | 精细调整的动效设计 |
| HTML 动画预览 | 通过 HyperFrames 输出 MP4 |
| 你的订阅 | 你自己的工具与套餐 |
MOTION / PPT
选择你的视觉风格。
选择视觉方向，每一种风格都有可运行的原创作品。
匹配我的内容
描述主题、受众或氛围。按风格关键词匹配，也可以多选。
67 个风格与资源
选择视觉方向，每一种风格都有可运行的原创作品。
选择风格，开始创作所有风格
动效
- Kinetic Type
- Paper Collage
- Quiet Keynote
- Data Story
- Frosted Product
- Thoughtful Paper
- Blueprint
- Soft Clay
- Watercolor Story
- Tool Focus
- Shared Paper
- Airy Signal
- Playful Selection
- Electric Layer
- Evidence Board
- Cutout Explainer
- Newsprint
- Product Brief
- Picture Book
- Purposeful Motion
- Retro Cutout
- Directors Board
- Whiteboard
- Canvas Principles
- Ink Press
- Brand Rhythm
- Geometric Proof
- Painted World
- Poster Press
- Measured Beat
- Naturalist Sketch
- Starfield Launch
- Inkline Stories
- Storyboard Studio
- Dimensional Launch
- Neon Reel
- Nordic Gouache
- Spring Captions
- Refraction Launch
- Annotated Comic
- Colorful Recap
- Single Line
- Word Cadence
- Story Route
- Motion Framework
- Geometry Lab
- Painted Verse
- Spring Stickers
- HTML Story
- Motion Recipes
- Research Reel
- Canvas Sequence
- SaaS Clay
- Inkline HUD
- Connected Build
- Precision Glow
- Pixel Warmth
- Document Clear
- Sage Order
- Connected Answers
- Red Diagonal
- Dark Material
- Conversation
- Spectrum Ribbon
- Mint System
- Monochrome Engine
- Expanding Modules
PPT
- Academic Argument
- Acid Agency
- Apricot Ink
- Aqua Campus
- Architectural Project
- Article Brief
- Blue Block Company
- Blue Lime Ledger
- Botanical Quiet
- Brand Story
- Brush Paper
- Chromatic Futures
- Cinematic Wilds
- Citrus Loop
- Cobalt Dark Pitch
- Cobalt Growth
- Cobalt Ribbon
- Cobalt Serif
- Cobalt System
- Confetti Gathering
- Consulting Storyline
- Cozy Island
- Visual Framework
- Electric Studio
- Field Notes
- Gallery Catalogue
- Golden Market
- Image Narrative
- Inclusive Cutpaper
- Ink Landscape
- Lavender Editorial
- Learning Loop
- Lilac Pitch
- Lime Endurance
- Mint Marker
- Mono Acid
- Navy Glass
- Neon Makers
- Ochre Editorial
- Orbital Workshop
- Pastel Cutout
- Primary Classroom
- Pop Motion
- Primary Doodle
- Prismatic Fashion
- Red Black Zine
- Research Paper
- Research Talk
- Sky Glass
- Slate Social Report
- Soft Gradient
- Sorbet Window
- Spectrum Strategy
- Starlit
- Steel Curve
- Storybook Margin
- Sunlit Structure
- Tidal Playbook
- Visual Canvas
- Yellow Balance
- Yellow Sketchnote
适合谁
为有故事想说的人。
创作者
制作值得收藏的下一支视频。
教育者
把复杂知识讲得清楚直观。
独立开发者
展示产品的独特之处。
故事讲述者
为喜爱的文字找到新的节奏。
价格
简单开始，自由创作。
动效、61 款 PPT 风格与音频积分。使用自己的 Claude Code 或 Codex，在本机渲染。
音频开放状态尚未确认。服务状态确认前，结账暂不可用。订阅前请刷新本页检查状态。
原创实现
Creator
$19.90/ 月
80,000 积分 / 月
- 动效 + 61 款原创 PPT 风格
- HTML 演示文稿与逐页讲稿
- 自备智能体方案，本机渲染 MP4
原创实现
Studio
$49.90/ 月
240,000 积分 / 月
- 动效 + 61 款原创 PPT 风格
- HTML 演示文稿与逐页讲稿
- 自备智能体方案，本机渲染 MP4
取消订阅在已付费周期结束后生效。已下载作品保留使用权，大模型订阅需自备。
常见问题
一些常见问题。
这是 Anthropic 官方产品吗？+
不是。本站独立运营，Claude Code 和 Codex 仅用于说明工具兼容性。
这里可以制作什么？+
将文章或脚本拆分为可编辑分镜，预览 HTML 动效，并下载本地视频制作包。
需要 AI 订阅吗？+
浏览器中的分镜和模板不依赖 AI。使用编码 Agent 进一步完善时，使用你自己的账户和套餐。
你的订阅+
取消订阅在已付费周期结束后生效。已下载作品保留使用权，大模型订阅需自备。
项目保存在哪里？+
草稿保存在当前浏览器。登录并选择保存到云端后，项目才会存入账户。创建分享链接后对应项目才会公开。
能导出 MP4 吗？+
下载制作包、安装依赖，然后在电脑上运行其中的 HyperFrames 渲染命令。浏览器可直接导出 HTML 和完整制作包。
你的下一个故事，从这里开始。
Claude Code · 流程示意
安装本站 CLI
curl -fsSL https://claudemontiondesignskills.org/downloads/install.sh -o /tmp/cm-skills-install.sh sh /tmp/cm-skills-install.sh export PATH="$HOME/.local/bin:$PATH" cm-skills setup
安装 cm-skills，使用设备码登录，再到 Claude Code 或 Codex 中创作。