Motion Skills
← Skills
Premiumローンチ

SaaS UI ウォークスルー

カーソルがクリックしていく中、カメラが各ステップに寄っていきます。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

必要なもの: Node.js 22+、FFmpeg、Chrome。API キー不要。

ほかのテーマと画面比率

SaaS UI ウォークスルー · ペーパー · 9:16
テーマ: ペーパー · 9:16
SaaS UI ウォークスルー · エレクトリック · 1:1
テーマ: エレクトリック · 1:1

同じテンプレートをテーマと画面比率を変えてレンダリングした最終フレームです。

5つのテーマ

  • インク · デフォルト
    ink
  • ペーパー
    paper
  • エレクトリック
    electric
  • ノワール
    noir
  • サンド
    sand

プロンプトでテーマ名を指定するだけで切り替わります。アクセント色・背景色・文字色を自分で指定することもできます。

インストール用プロンプト
https://claude-motion.com/skills/saas-walkthrough/install.md を読んで手順どおりに「saas-walkthrough」スキルをインストールし、それを使って最初の動画を作ってください。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

プロンプト例
Use the saas-walkthrough skill with assets/dashboard.png, title "Invoices on autopilot", steps "0.15,0.2: Connect your bank | 0.7,0.35: Review drafts | 0.85,0.12: Send in one click", url "app.ledgerly.io".
スタイルプロンプト(Claude Motion または Opus 5.5)
Make a 14-second 16:9 product walkthrough for [who will watch, e.g. new customers], playing [where, e.g. the onboarding email]. Use only the title, step captions and screenshot I give below; don't change a word. Near-black background.

Scene 1: the title appears word by word, then fades as a browser window with the screenshot rises into place. Scenes 2–4, one per step: a white cursor glides to the right spot, the view zooms in smoothly, a soft spotlight dims everything else, the cursor clicks with an orange ripple, and a white numbered pill caption slides up at the bottom. End frame: zoom back out to the whole screen.

Title: [e.g. "Ship a release in 3 clicks"]
Steps: [three captions and where each one points] (e.g. "Open your workspace" on the sidebar)
Attach: [a screenshot of your product]

インストール不要:Claude Motion(Team または Enterprise)に貼り付けるか、Opus 5.5 に渡すと近い雰囲気になります。結果は実行ごとに変わります。Skill なら毎回同じ結果です。

この Skill で作った作品