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
Click Reconstruct. AI will analyze your video and generate the initial UI code.
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