What tools do I need?

Stitch MCP server, Remotion MCP or CLI, Node.js and npm; access to stitch-mcp-list-projects, stitch-mcp-list-screens, and stitch-mcp-get-screen.

How do I map screens to video duration?

Configure ScreenSlide duration (recommended 3–5 seconds per screen) and sequence timing in WalkthroughComposition; adjust per-screen timing as needed.

Can I include voiceover or dynamic text?

Yes. You can generate a script from screen descriptions, use TTS or recorded audio, and synchronize it with the screen timing; you can also parse htmlCode.downloadUrl for dynamic callouts to overlay.

stitch-remotion

Scanned

npx machina-cli add skill partme-ai/stitch-skills/stitch-remotion --openclaw

Files (1)

SKILL.md

5.4 KB

Stitch to Remotion Walkthrough Videos

Constraint: Only use this skill when the user explicitly mentions "Stitch" and walkthrough video or Remotion.

You are a video production specialist creating walkthrough videos from Stitch app designs. Combine Stitch MCP (or stitch-mcp-list-projects, stitch-mcp-list-screens, stitch-mcp-get-screen) to get screens with Remotion for programmatic video: transitions, zoom, text overlays.

Prerequisites

Stitch MCP Server (https://stitch.withgoogle.com/docs/mcp/guide/)
Remotion MCP or Remotion CLI; Node.js and npm
A Stitch project with designed screens

Retrieval and Networking

Discover prefixes: Run list_tools for Stitch and Remotion MCP prefixes.
Project/screen lookup: Use [stitch_prefix]:list_projects (filter view=owned), then [stitch_prefix]:list_screens with projectId; identify screens for the walkthrough.
Screen metadata: For each screen call [stitch_prefix]:get_screen; get screenshot.downloadUrl, htmlCode.downloadUrl, width, height, title, description.
Asset download: Download screenshots (e.g. via web_fetch or Bash curl); save to assets/screens/{screen-name}.png in walkthrough order.
Manifest: Create screens.json with projectName, screens array (id, title, description, imagePath, width, height, duration).

Video Composition Strategy

ScreenSlide.tsx: Single screen (imageSrc, title, description, width, height); zoom/fade; configurable duration (e.g. 3–5 s).
WalkthroughComposition.tsx: Sequence of ScreenSlides; transitions (fade/slide from @remotion/transitions); text overlays.
Config: Frame rate (e.g. 30 fps), dimensions (match Stitch or scale), total duration.

Use Remotion spring() for zoom; use @remotion/transitions (fade, slide) between screens.

Common Patterns (align with official)

Simple slide show: 3–5 s per screen, cross-fade, bottom text overlay (screen title), progress bar at top.
Feature highlight: Zoom into regions; animated circles/arrows; slow-motion on key interactions; before/after comparisons.
User flow: Sequential screens with directional slides; numbered steps overlay; highlight actions (clicks, taps); connect screens with animated paths.

Optional: Voiceover and dynamic text

Voiceover: Generate script from screen descriptions; use TTS or recorded audio; sync screen timing with narration.
Dynamic text: Download htmlCode.downloadUrl per screen; parse HTML for headings/buttons/labels; generate timed callouts in the composition.

Execution Steps

Gather assets: List Stitch project → list screens → get_screen for each → download screenshots → build screens.json.
Remotion setup: Use existing Remotion project or npm create video@latest -- --blank in e.g. video/; install @remotion/transitions etc.
Build components: ScreenSlide.tsx (useCurrentFrame, spring, zoom/fade); WalkthroughComposition.tsx (Sequence, manifest); update remotion.config.ts.
Preview: npm run dev in video/; adjust timing and transitions.
Render: npx remotion render WalkthroughComposition output.mp4 (or use Remotion MCP if available).

Integration with This Repo

Stitch screens: Use stitch-mcp-list-projects, stitch-mcp-list-screens, stitch-mcp-get-screen to resolve projectId/screenId and get download URLs.
Design consistency: If DESIGN.md exists (from stitch-design-md), use screen titles/descriptions for overlay text.

File Structure

project/
├── video/
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   └── Root.tsx
│   ├── public/assets/screens/   # Stitch screenshots
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                 # Screen manifest
└── output.mp4

Troubleshooting

Issue	Solution
Blurry screenshots	Use full-resolution screenshot URLs
Misaligned text	Match composition size to screen dimensions
Choppy animations	Increase fps; tune spring damping
Build fails	Check Node/Remotion version; install deps

Keywords

English: Stitch, Remotion, walkthrough, video, screenshots, transitions.
中文关键词： Stitch、Remotion、走查视频、转场。

References

Remotion docs
Remotion transitions
Remotion Skills — animation, composition patterns, performance; install with npx skills add remotion-dev/skills.
Remotion MCP — programmatic render and preview.
Stitch MCP
Examples
Screens Manifest Example
Full templates in google-labs-code/stitch-skills.

Source

git clone https://github.com/partme-ai/stitch-skills/blob/main/skills/stitch-remotion/SKILL.mdView on GitHub

Overview

Generates walkthrough videos from Stitch designs by retrieving screens via Stitch MCP (list_projects, list_screens, get_screen) and composing them in Remotion with transitions and text overlays. It orchestrates asset gathering, manifest creation, and Remotion-based video rendering to produce polished walkthroughs from Stitch projects.

How This Skill Works

Discover Stitch projects and screens using stitch-mcp commands, download screenshots and HTML code for each screen, then build a screens.json manifest. Use Remotion components like ScreenSlide and WalkthroughComposition with transitions and text overlays to render the final video, applying zoom via spring and transitions from @remotion/transitions.

When to Use It

You need an automated walkthrough video generated from a Stitch project.
You want to programmatically discover and fetch screens using stitch-mcp-list-projects, stitch-mcp-list-screens, and stitch-mcp-get-screen.
You require transitions, zoom, and text overlays between Stitch screens in a video.
You’re delivering client-ready walkthroughs or design reviews with consistent timing and branding.
You plan to generate multiple videos from different Stitch projects in a repeatable workflow.

Quick Start

Step 1: Gather assets by discovering the project with stitch-mcp-list-projects, list_screens, and get_screen for each screen; download screenshots to assets/screens/{screen-name}.png and save titles/descriptions.
Step 2: Set up a Remotion project (e.g., video/, npm create video@latest -- --blank) and install @remotion/transitions; create ScreenSlide.tsx and WalkthroughComposition.tsx and a remotion.config.ts.
Step 3: Run npm run dev to preview, then render with npx remotion render WalkthroughComposition output.mp4; iterate on timing and transitions.

Best Practices

Keep each ScreenSlide duration to 3–5 seconds to balance pacing and readability.
Use consistent overlay text (title, short description) drawn from screen metadata for clarity.
Validate image dimensions match Stitch screen sizes to avoid letterboxing.
Create and reuse a screens.json manifest to ensure sequencing consistency across renders.
Test locally with npm run dev before rendering to catch timing and transition issues.

Example Use Cases

Onboarding walkthrough for Stitch project 'ProductLaunch', with 4 screens and a narrated timeline.
Feature highlight video showing transitions between design screens for a new UI module.
Client review reel presenting the entire user flow of 'CheckoutFlow' with step-by-step captions.
Mobile-friendly walkthrough of a responsive Stitch design, using vertical screen slides and zoom.
Internal design system doc video that pairs screen titles with brief action captions from HTML metadata.

Frequently Asked Questions

Add this skill to your agents