---
{"title": "How to get a starting layout from an old screenshot", "description": "Steps for front-end developers to get a starting layout from an old screenshot, what to prepare, which options to check, and mistakes to avoid.", "url": "https://2dex.com/how-to-get-a-starting-layout-from-an-old-screenshot-for-front-end-developers/", "date": "2026-10-13"}
---
Steps for front-end developers to get a starting layout from an old screenshot, what to prepare, which options to check, and mistakes to avoid.

Getting a starting layout from an old screenshot means turning the picture into a first draft of HTML and CSS to refine. Feed the screenshot to a tool that generates HTML from an image, compare a few outputs, and pick one to build on. RēDesign is one such tool: it sends one UI screenshot to several AI models at the same time and shows the HTML redesigns they return in a gallery next to the original.[^1]

| Option | Generates HTML from a screenshot | Price | Runs on |
|---|---|---|---|
| RēDesign | Sends one UI screenshot to several AI models and shows the HTML redesigns in a gallery next to the original.[^1] | Free; pays only the AI providers whose API keys are used.[^1] | Packaged app for Windows only; from source on Windows, macOS or Linux with Bun 1.2 or newer.[^1] |
| Other screenshot-to-code tools | Not published | Not published | Not published |

## What you need before you start

Turning an old screenshot into a starting layout takes a little preparation. Work through this list first.

- **A clean screenshot.** Capture the design as a clear image that shows the whole layout. Crop out browser tabs, toolbars, cursors or watermarks so the tool reads only the design you want.
- **Reference values when you have them.** If an earlier version of the project recorded fonts, spacing or colours, keep those notes handy. They help you match a generated layout to the original.
- **The API keys a tool needs.** RēDesign is free; you only pay the AI providers whose API keys you use.[^1] Gather them before you start.
- **A way to run the tool.** A Windows packaged app needs no extra setup, while running a tool from source needs Bun 1.2 or newer on Windows, macOS or Linux.[^1] Decide which you can run.
- **A target for the result.** Decide whether you want a quick skeleton or a closer match, since that changes which prompt to use.[^1]
- **A project folder.** Keep the screenshot, the generated HTML and any design notes together so you and any build tool can find them.
- **A backup of anything you care about.** Keep a copy of the original screenshot before you start.

Finally, close extra windows and settle on the one layout you want to start from.

## Step by step

These steps work the same way whichever tool you pick.

1. **Prepare the screenshot.** Crop the image to the layout you want and save it as a clear file. A wide banner, a dense dashboard and a single card each ask for a different starting point.
2. **Choose what you want out.** Decide whether you want a faithful refresh, a bold reimagine or a minimalist look, since each changes the prompt.[^1] Write your own prompt if none reads right.
3. **Gather API keys.** Tools that call AI providers use your own keys, so have them ready.[^1] The tool works out which provider each pasted key belongs to and rotates through several keys per provider, pausing keys that keep failing.[^1]
4. **Run several models at once.** Send the screenshot to several AI models at the same time and view the HTML redesigns they return in a gallery next to the original.[^1] In one run you can ask each model for a different number of variants.[^1]
5. **Compare outputs with the model names hidden.** Look at two outputs side by side and pick the closer one; every pick updates a ranking of the models.[^1]
6. **Check contrast.** Run the one-click WCAG AA text contrast check on an output, which uses the rendered pixels.[^1] Fix low-contrast text before you settle.
7. **Save the pick.** Download a DESIGN.md file for the redesign you chose so a coding agent can rebuild that look.[^1] Download the whole run as a zip if you want to keep every variant.
8. **Keep the real brand marks.** Let the tool locate and crop logos, product photos and avatars from the project files so the redesign embeds the real marks.[^1]
9. **Check the cost before you run.** Look at the estimated cost before a run starts and watch what each run costs.[^1] You can line up several batches, start them together and drag waiting batches to change their order.[^1]

## Tools that can do it

Facts are published here for only one tool, so the comparison is short. For any other option, such as another screenshot-to-code tool or a browser extension that turns an image into HTML, check its own page for the image formats it accepts, the platforms it runs on, its price, and whether it uses your API keys.

### RēDesign

RēDesign is made by the team that publishes this site. It sends one UI screenshot to several AI models at the same time and shows the HTML redesigns they return in a gallery next to the original.[^1] In one run you can ask each model for a different number of variants.[^1] It comes with prompt presets such as faithful refresh, bold reimagine and minimalist, and you can also write your own prompts.[^1]

For front-end developers, a few other behaviours matter. It shows two outputs with the model names hidden, and each pick you make updates a ranking of the models.[^1] With one click it checks an output's text contrast against WCAG AA using the rendered pixels.[^1] You can download a whole run as a zip, or download a DESIGN.md file for the redesign you pick so a coding agent can rebuild that look.[^1] It checks each saved redesign on your machine against a fixed list of generic AI styling patterns and shows the findings as a badge on the card.[^1] It locates and crops logos, product photos, avatars and illustrations so redesigns can embed the real brand marks.[^1] Everything in the app can also be done from the command line, and an AI agent can control it too.[^1]

On cost, RēDesign is free; you only pay the AI providers whose API keys you use.[^1] It shows an estimated cost before you start a run and tracks what each run costs.[^1] The packaged app is for Windows only; running from source works on Windows, macOS or Linux with Bun 1.2 or newer.[^1] On Windows you download it from GitHub Releases.[^1]

## Common mistakes to avoid

- **Starting from a cluttered screenshot.** Browser tabs, toolbars and cursors in the image make the tool read noise you do not want. Crop first.
- **Picking one output too fast.** Compare the outputs side by side before you settle on one.[^1]
- **Forgetting contrast before committing.** Low-contrast text can slip through a pretty output. Run the WCAG AA contrast check on the pixels before you build.[^1]
- **Ignoring the cost of a run.** Check the estimated cost before you queue a large batch.[^1]
- **Building on unfiltered output.** Check the anti-slop findings on the card before you hand the file to a coding agent.[^1]
- **Discarding the real brand assets.** Let the tool crop the real marks for the redesign.[^1]
- **Queuing too much at once.** Several batches can add up. Line them up, start them together and adjust the order before you start.[^1]

## Frequently asked questions

### How do front-end developers turn an old screenshot into a starting layout?

Get a clear screenshot of the old design, crop out anything that is not the layout, then feed it to a tool that generates HTML from an image. Send the screenshot to several AI models at the same time and compare the HTML redesigns in a gallery next to the original.[^1] Pick the closest output, check its text contrast, and refine it into your starting page.

### Is RēDesign free for front-end developers?

RēDesign is free; you only pay the AI providers whose API keys you use.[^1] The app shows an estimated cost before you start a run and tracks what each run costs, so you can see what a batch is spending.[^1] For any other tool, check its own page for its price and whether it needs API keys before you start.

### Can you compare several AI models on one screenshot?

Yes. The tool sends one UI screenshot to several AI models at the same time and shows the HTML redesigns they return in a gallery next to the original.[^1] In one run you can ask each model for a different number of variants.[^1]

### Does RēDesign run on macOS or Linux?

The packaged app is for Windows only; running from source works on Windows, macOS or Linux with Bun 1.2 or newer.[^1] On Windows you download it from GitHub Releases.[^1] For any other tool, check its page for the platforms it runs on before you commit.

### Can a coding agent build from the redesign?

The tool can download a DESIGN.md file for the redesign you pick so a coding agent can rebuild that look.[^1] You can also download a whole run as a zip if you want to keep every variant.[^1] Everything in the app can be done from the command line, and an AI agent can control it too.[^1]

RēDesign is free; you only pay the AI providers whose API keys you use. [^1] - [Visit RēDesign](/go/start-redesign)

## Sources

[^1]: RēDesign's own description of itself (the product of this site's publisher) (/go/start-redesign)