Documentation

Welcome to Replay

Turn any screen recording into a complete design system. Extract components, generate documentation, and edit components visually with AI.

What is Replay?

Replay is an AI-powered design system generator. Upload any screen recording of an app or website, and Replay will extract components, generate documentation, and create an interactive design system you can edit, customize, and publish.

Powered by Gemini 3 Pro for code generation and Gemini 3 Flash with Agentic Vision for precise UI measurements.

The AI analyzes your video to detect:

  • UI components (buttons, cards, inputs, navigation)
  • Component props and variants (sizes, colors, states)
  • Layout patterns and responsive behavior
  • Navigation flows and page structure
  • Design tokens (colors, typography, spacing)

How It Works

1

Record

Capture any UI on screen

2

Upload

Drop video into Replay

3

Extract

AI detects components

4

Edit

Customize with AI chat

5

Publish

Deploy with one click

Interface Views

Preview

Live preview of generated UI. See your design system in action with responsive viewport toggles.

Library

Component documentation with interactive controls, prop tables, and accessibility audits.

Editor

Visual canvas for component composition. Drag, resize, and edit components with AI assistance.

Flow

Navigation map showing page relationships and user flows detected from your recording.

Ready to start?

Create your first design system from video in under 5 minutes.