Contents
Design recreator — in developmentWhat comes out of a recreated designHow you'll use itInspiration, not appropriationWhy Rekreate is building itFrequently asked questionsDesigners and front-end developers reverse-engineer interfaces every day: measuring spacing off a screenshot, guessing the type scale, rebuilding a component to see how it behaves. Recreating a design turns that into one step — drop the screenshot or URL and get the design tokens, the component breakdown and working front-end code.
This tool is in development at Rekreate. Below is exactly what it will produce, and what our existing tools can do for you today.
- Input: screenshot, Figma frame or URL. Output: tokens, components, code.
- Colour palette, type scale, spacing rhythm, radii and shadows extracted as variables.
- Component-level output — a card, a nav, a pricing table — not one flat block of markup.
- In development. The image tools in
/makeare live now.
Design recreator — in development
Give it an interface and get back the system behind it: a colour palette with named tokens, a type scale, the spacing rhythm, corner radii and elevation, then each component rebuilt in HTML and CSS with sensible class names and responsive behaviour.
The point is not to clone somebody's product. It is to answer the question every designer asks a screenshot — how is this actually built? — in seconds instead of an afternoon.
This tool is not live yet. Create a free account and we will let you know in the app as soon as it opens.
What you can do today
What already works in Rekreate:
- Recreate a photo — rebuild a visual, a mockup or an illustration in your own style.
- Recreate a logo — clean brand assets with transparent backgrounds.
- Ideogram — interface-style graphics where the text has to be legible.
For code today, use a dedicated screenshot-to-code tool; come back here when the recreator opens.
What comes out of a recreated design
| Layer | Planned output |
|---|---|
| Colour | Palette with roles — surface, ink, muted, accent, semantic — as CSS variables, light and dark |
| Type | Font families, the scale in use, weights, line heights and letter-spacing |
| Spacing | The underlying rhythm (4/8pt or otherwise) plus container widths and gutters |
| Components | Buttons, cards, nav, forms, tables — each as isolated HTML and CSS |
| States | Hover, focus, disabled and error where they can be inferred |
| Accessibility notes | Contrast warnings and missing focus states flagged, not silently copied |
How you'll use it
Drop the reference
A screenshot from a product you admire, a Figma frame, or a live URL.
Choose the scope
The whole screen, or one component you need to understand — the pricing card, the sidebar, the empty state.
Review the system
Tokens first: is the palette right, does the type scale match, is the spacing on a grid? Fix anything the model guessed wrong.
Take the code
Copy components into your project, or keep them as a reference implementation while your team builds the real thing.
Inspiration, not appropriation
Interface patterns are shared craft. Nobody owns a card with a title, a body and a button; the industry converged on those patterns because they work.
What is owned: a product's visual identity — its logo, illustration style, custom typefaces, imagery and copy — plus any proprietary code. A recreated design should teach you the mechanics and then be dressed in your own brand.
If your screen looks like a competitor's screen with a different logo, you have copied their identity, not learned from their structure. Use the tokens as a starting point and move them toward your own system.
Why Rekreate is building it
Our whole product is one idea: start from something that already works, then make it yours. That began with viral videos, moved into ads, photos and voices, and design is the same motion applied to interfaces.
It also completes the /make family for teams: recreate the ad, recreate the landing page, recreate the design system behind it — all in one place, in the language you work in.
Follow the website recreator and app recreator if you want the neighbouring tools.
Frequently asked questions
Can AI recreate a UI design from a screenshot?
Yes — vision models can extract a palette, type scale and layout from an image and rebuild components in code. Rekreate's design recreator is in development; today our live tools cover images, logos and video.
Will it give me Figma files?
The planned output is design tokens and front-end code. Tokens import cleanly into most design tools, but the tool is aimed at getting to working code.
Is it legal to recreate someone's UI?
Layout and interaction patterns are not protected in the way brand assets are. Do not reuse their logo, illustrations, custom fonts, copy or proprietary code — take the structure, bring your own identity.
Does it handle dark mode?
Yes, that is the plan: tokens are extracted per theme so the recreated components work on both grounds rather than being hard-coded to one.
When does it launch?
No public date yet. Create a free account and new /make tools show up in the app as they open.
What should I use in the meantime?
Rekreate's image recreator for visuals and logo recreator for brand assets, plus a dedicated screenshot-to-code tool for markup.
Create your next viral video with Rekreate
Find a proven short-form video, recreate it with your script, avatar and voice, and generate scenes with Seedance, Kling and Veo in one workspace.
Start free trial →