Setting the file. One moment.
Generate professional walkthrough videos from Stitch app designs using Remotion.
This skill bridges Stitch (UI design platform) and Remotion (programmatic video library) to automatically create walkthrough videos showcasing app screens with:
- Smooth transitions: Cross-fades, slides, and zoom effects
- Text overlays: Screen titles, descriptions, and feature callouts
- Professional animations: Spring-based natural motion
- Customizable timing: Control display duration per screen
- Stitch MCP Server: Access to retrieve screens from Stitch projects
- Node.js: For running Remotion
- Remotion: Either Remotion MCP Server or Remotion CLI
“Look up the screens in my Stitch project ‘Calculator App’ and build a remotion video that shows a walkthrough of the screens.”
- Agent retrieves all screens from the Stitch project
- Downloads screenshots for each screen
- Creates a Remotion composition with transitions
- Generates video with smooth animations and text overlays
- Renders final MP4 video
- Automated asset retrieval from Stitch projects
- Modular Remotion components for easy customization
- Multiple transition styles (fade, slide, zoom)
- Text overlay system for annotations
- Configurable timing per screen
- Professional rendering with quality optimization
Install this skill using:
When using this skill, the agent will create:
- Discovery: Identifies Stitch and Remotion MCP servers
- Retrieval: Fetches screens and metadata from Stitch project
- Asset Download: Downloads screenshots for each screen
- Composition: Generates Remotion React components
- Preview: Opens Remotion Studio for refinement (optional)
- Render: Produces final video file
- Uses Stitch MCP to list projects and screens
- Downloads screenshots and HTML code
- Extracts screen metadata (title, dimensions)
- Creates TypeScript/React components
- Configures composition settings
- Renders video using Remotion CLI or MCP
- Dynamic text extraction: Parse Stitch HTML to auto-generate annotations
- Interactive hotspots: Highlight clickable elements
- Voiceover integration: Sync narration with screen transitions
- Multiple video patterns: Slide show, feature highlight, user flow
- design-md: Extract design system from Stitch projects (useful for consistent branding in videos)
- react-components: Convert Stitch designs to React (if you want interactive demos instead of videos)
See the full SKILL.md for detailed instructions, troubleshooting, and best practices.
This is not an officially supported Google product.
README.md