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로 만든 작품