Prerequisites
- A Replay account (sign up at replay.build)
- A screen recording (any format: MP4, WebM, MOV)
Record Your Screen
Use any screen recording tool (Loom, OBS, QuickTime, or the built-in recorder) to capture the UI you want to turn into a design system.
Tips for better results:
- • Record at 1080p or higher resolution
- • Show multiple components and their states
- • Hover over elements to capture hover states
- • Click buttons to show different variants
- • Keep recordings under 60 seconds
Upload to Replay
Open replay.build and either drag & drop your video or click "Upload video".
Drop your video here
or record your screen directly
Generate UI
Choose a generation mode and click Generate:
Exact layout & structure — faithfully reproduces the video.
Creative layout, same content — brand-new design with advanced animations and effects.
The AI processes each frame, extracts layouts, detects patterns, and generates responsive HTML/CSS code.
Extract Components
Go to the Library tab and click Extract Components. AI will detect reusable UI patterns and create a component library.
- • Component documentation with descriptions
- • Interactive Controls (edit props in real-time)
- • Accessibility checks
- • Usage code snippets
Edit in Editor
Use the Editor tab to visually arrange and edit components with AI:
- "Make the button red"
- "Add an icon to the left"
- "Make it bigger"
- "Add a shadow effect"
Publish
Click Publish to deploy your design system to a live URL on replay.build.
Your project is live!
https://replay.build/p/your-project-slug