How to Clone UI Design in 8 Steps

UI design cloning involves breaking down and replicating already-existing layouts. This helps you learn more about particular design choices, the coding behind them, and how to successfully recreate them.

I'll cover everything you need to know about UI design cloning—what it is, what it isn't, how to do it, and common mistakes to look out for.

What is UI design cloning?

UI design cloning is a skill-building practice that recreates already-existing UI designs. This process reverse-engineers existing layouts to help you better understand their inner workings and pinpoint the exact reasons behind specific design choices, like typography, visual hierarchy, spacing, interactions, and so on.

As such, the primary goal of UI design cloning is to learn and hone your skills—not to copy/paste other layouts and publish them as your own.

Designers often clone UI designs to:

• Nail down industry best practices and trends by analyzing live examples

• Experiment with new design choices, like structure and overall styling

• Speed up prototyping by templatizing effective design patterns

Is it legal or ethical to clone a website design?

Website design cloning is legal as long as it's not intended for commercial purposes or monetary gain. That means it's generally accepted to clone designs for personal learning, internal prototyping, or any other non-commercial purposes.

Fully copying another website's design and publishing the work as your own without the original owner's permission, however, is illegal and liable for copyright infringement.

Case in point, Figma sued Motiff, one of its rivals, over accusations that Motiff copied Figma's source code and other intellectual property, and applied it to their own software.

That's because particular assets, including source codes, logos, slogans, and branded visuals, are considered intellectual property and will fall under copyright protection, as per the World Intellectual Property Organization.

The two companies reached an agreement where Motiff must stop selling its software worldwide, except for China.

"Under the settlement agreement, Motiff will cease selling its current Motiff Editor Tool and will not sell any future products derived from it, globally, with the exception of mainland China. In mainland China, Motiff may continue to sell its current Motiff Editor Tool for one year, while it reengineers and redesigns the product."
— Business Wire

Still, it's completely fine to draw inspiration from already-existing website UI layouts as long as you also add your own branded visuals and unique content.

The general look and layout of a website cannot be copyrighted—only the unique creative elements within it can.

For example, both Grubhub and DoorDash have very similar-looking homepages in terms of overall feel and design element placement.

They almost follow the exact same layout, yet all other design elements include their own branded assets and unique content.

How to clone a website's UI design

Now let me walk you through how you can clone UI layouts in eight simple steps.

Step 1: Choose a website to clone

First, pick a website you want to learn from. Ideally, pick something within your industry because design standards can differ significantly from one industry to another.

A B2B software website is often a lot more complex than one selling consumer goods, for example. This translates to lengthier sales pages focused on rational benefits—not brief, emotion-evoking landing pages.

Also, browse multiple sites within your industry. This helps spot any similarities and differences across layouts and design choices between multiple websites.

Recurring patterns often indicate design best practices for improved conversions, user experiences, and so on. To illustrate, both Proton VPN and Surfshark follow similar hero section layouts:

This could signal that the layouts here yield solid conversion rates. The minimalist approach drives attention to the headline, supporting copy, and CTA.

Showing a glimpse of the apps in action and mentioning the 30-day guarantee also eliminates any uncertainties and sets clear expectations.

That said, going for a similar approach might be worthwhile. It's worth noting that the websites slightly differ below the fold.

In this case, your final choice should revolve around skill level or personal preference.

Step 2: Analyze before you clone

Before you jump straight into replication, spend time studying the original UI’s layout, user flow, and hierarchy. Identify how content is organized, what elements are prioritized, and how users interact with the interface.

This analysis helps you grasp why the design works and what you need to focus on recreating, just like in the VPN example above.

Here are some other best practices to consider:

• Identify the purpose of cloning, whether for learning, client demonstration, or internal development, to measure how much of the original design you need to alter, or if your chosen design is the right fit for your needs.

• Study the website’s structure, navigation, and interaction patterns to assess its overall user experience.

• Take screenshots for reference and categorize them into headers, footers, buttons, forms, etc. Note down visual styles, key components, and unique user interface patterns. These help set up future design systems.

Step 3: Explore the site with browser developer tools

Next, use browser developer tools like Chrome DevTools or Firefox Developer Tools to examine your design's HTML and CSS structure.

To do this, simply press F12 on your keyboard or right-click on the webpage in question and hit Inspect.

Browser developer tools help see your target UI design's technicalities—the exact spacing between design elements, how they're loaded, the layout's responsiveness, and so on.

For example, Surfshark's animated logo carousel got me curious, so I wanted to learn more about it.

I can see that the animated transitions happen every 1.2 seconds, just enough to attract attention while not being too distracting at the same time. I also noticed that below-the-fold visuals are lazy-loaded to speed up initial loading times, for example.

That said, browser dev tools are super useful to spot effective design tactics you might not otherwise notice by just looking at the layout.

If you're not familiar with such tools, you can check the Google Chrome DevTools webpage to read more on how it works and what you can do with it.

Step 4: Save key assets and HTML files

Right-click on your target webpage and press Save as to save your target design's HTML file, along with its visual assets. You can view images, illustrations, logos, and so on, for extra analysis.

You can also use the browser dev tools I mentioned earlier to break down the UI into multiple sections, like navigation menus, footers, or buttons, and copy/paste their code to turn them into reusable building blocks.

To put it differently, you want to set up a design system to study and clone the UI more easily. That said, make sure you:

• Download the page's HTML file to better understand its DOM structure.

• Save individual images, SVG files, and other media files to your computer for extra examination—not for copy/pasting them to future projects.

• Set up folders with design assets, HTML codes, and screenshots to create a UI library you could use for future reference.

Step 5: Rebuild the UI in a design tool

Next, open up a design tool like Figma or UXPilot to clone your target UI design manually. Try to recreate particular components, like buttons, from scratch via shapes, grids, and text boxes.

You can import some visuals and illustrations for reference and orientation.

Of course, your layout probably won't turn out to be an exact replica, but the point here is to learn how to apply the design practices studied in the steps above—not to create pixel-perfect clone UI layouts.

Here's what else you should keep in mind:

• Study the original UI's padding and margins to see whether they're consistent across all assets—look for patterns if they're not.

• Examine your target UI's color scheme, typography, and other styling element consistency. Find answers to why colors and fonts may change across specific page areas, like using lighter backgrounds in copy-heavy areas and darker ones around CTA buttons.

• Use your reference screenshots to match design element alignment, spacing, and proportions as closely as possible to the original UI.

• Use dummy texts and visuals so you can better focus on the actual layout, not on the content.

I like the Nomad group's website's structure, so I took a screenshot and uploaded it to UX Pilot. I then asked the AI designer to clone this website for my eyewear company.

You can clone both the wireframe and a high-fidelity website.

Here's a cloned wireframe for the website.

Here's a snapshot that shows you the identical nature of my cloned website, to my reference page.

Step 6: Recreate interactions and responsiveness

Once you've got the static layout in check, use your design tool's prototyping features to try and mimic your target UI's interactivity. That means animations, hover effects, transitions, etc.

Consider going back to the original design and using the web dev tools I mentioned to dissect the code around these interactive elements, then try to replicate them.

For example, here's the entire piece of code that animates the logo carousel I mentioned earlier:

The animation is created in the red-highlighted line. Let's break it down piece by piece:

transform: translateX(-1404px); 

Moves the element horizontally by 1404 pixels to the left.

transition-duration: 1200ms;

The transition duration must take 1200ms.

transition-timing-function: ease;

The transition animation should start slow, speed up, and slow down again.

transition-property: transform;

This animation must only take place under the transform function—from 0 pixels to 1404 pixels to the left.

The other code lines beneath this function specify each logo in the said animation, and its sizing.

Also, check for responsiveness and build clone UI layouts for mobile, desktop, and tablet viewports.

Step 7: Customize and innovate

You don't want a one-to-one copy. Use your design tool to give your UI clone a personal touch and envision how the layout would work for your particular needs.

That means you should replace visuals like fonts, color schemes, and logos with assets from your brand style guide—also super important when setting up prototypes for clients.

Here's what else in need to keep in mind for this step:

• Edit assets until your clone UI accurately reflects your unique visual identity, and not the original owner's, like in the NordVPN and Surfshark examples above.

• While you're at it, make sure color contrasts and font sizes don't hinder copy readability. Also, take navigation for keyboard and screen reader users into account. Read the Web Content Accessibility Guidelines to align your UI with user accessibility standards and best practices.

• Try to improve on the original design. Remove unnecessary design elements, find ways to speed up loading times, de-clutter the screen for better browsing experiences, replace stock pictures with original photos, etc.

• Test for responsiveness and adjust breakpoints across mobiles, tablets, and desktops whenever necessary.

Step 8: Implement using WordPress or HTML builders

This step is optional, but you can export your clone UI to WordPress or other HTML builders, like Elementor or Webflow, to see how your design would look in a live environment and test for usability.

Try to recreate the code manually, but keep a logical HTML structure and clean CSS for easier editing further down the road—just like in the animated logo carousel I showed earlier.

Also, use JavaScript or other site-builder-specific features to add some light interactivity to your website, like hover animations, for example.

Common mistakes to avoid when cloning UI designs

Here are 7 mistakes that you should watch out for when cloning UI designs. 

1. Copying websites blatantly

The point of UI cloning is to learn. You should replicate the techniques used to set up your reference design—not the exact design itself.

That said, take the time and dissect your target UI. Break its layout down piece by piece and look at the code to see what it did right and why, and whether there are any areas you could improve.

Add your own unique twists for a personal touch and avoid any potential copyright risks.

2. Ignoring responsive design

Your layout might look great on desktops, but may be unusable on mobiles and tablets. You don't want to have it look something like this:

That said, make sure to code for responsiveness while you set up your clone UI.

That includes:

• Setting your viewport in the HTML meta tag

• Resizing images with CSS width or max-width media queries

• Specify different images for different window sizes through the <picture> HTML element

• Make texts responsive with the style="font-size= (your size)vw" snippet

3. Neglecting accessibility

Neglecting accessibility will render your website unusable for a significant user base. Here are a few best practices to keep in mind:

• Ensure enough contrast between backgrounds and texts to ensure copy legibility for people with visual impairments

• Your font selection should be clear-cut, while font sizes must be at least 16 pixels for body texts, and line height should be 1.5 times the font size at a minimum

• Buttons and other interactive elements should be navigable with keywords alone

• Write descriptive image alt texts for screen-reader users

• Implement feedback cues throughout your design—button hover effects, form submission confirmations, etc.

Here's a how-not-to example:

The layout here is incessantly busy. Some fonts are too small and don't contrast the background well enough, while some navigation links are too close to one another, which could cause issues for mobile users. Most buttons also offer little to no visual feedback whenever users hover over them.

4. Overcomplicating your design

Simple designs are fast, easy to navigate, and light on code. Don't overcomplicate your design hoping to give it a unique look. That will only throw first-time visitors off, causing them to bounce off the page.

Stick to web design conventions, a set of common best practices users have grown accustomed to and learned to expect across webpages.

Here are a few examples:

• Navigation menu bars should be placed horizontally at the top of the screen, and include just enough menu items to let users reach key website pages. Too many options might overwhelm users otherwise.

• The headline, supporting copy, and CTA should be stacked on top of each other to establish visual hierarchy

• Your design color scheme should include three colors: background, primary, and secondary colors

• The website logo should be placed on the navigation menu and double as a homepage button

• The CTA button color should contrast with the background

Patagonia applies these principles down to a tee:

5. Poor code quality when exporting code

Double-check your target UI's code when exporting it to your repository. You might find areas for improvement, like cutting down unnecessary lines of code, for example. Plus, the code itself might go wrong in the exporting process.

6. Lack of testing

Test your designs thoroughly. Check for responsiveness and accessibility, and verify that interactive elements function as intended.

Even if your design looks on point, things can go wrong behind the scenes. Tools like Chrome DevTools include features to test sitespeed and debug code, for example.

7. Ignoring copyright

Again, watch out for logos and unique illustrations, imagery, and content to avoid potential copyright infringement.

Also, pay close attention to color schemes. Although they cannot be copyrighted, cloning the exact color combinations, arrangements, and positioning can attract unwanted attention. It's best to use unique color schemes from your brand style guide, for example.

Tools for cloning UI designs

It's easier and faster to clone any site with the right tools. Here’s a rundown of popular software and platforms that help you capture, recreate, and customize website interfaces.

1. UX Pilot

UX Pilot is an AI-powered design assistant that generates UI components based on your text prompts—perfect for quick design system setups.

Plus, the platform natively integrates with Figma for easy customization. You can also view and export code for further development. There's also the Image-to-Design feature. UX Pilot takes your screenshotted web pages and turns them into fully-editable designs.

You can also ask the AI to create wireframes from web pages in question, which is helpful to get more creative freedom and boost originality. That said, UX Pilot is ideal for quickly prototyping designs inspired by existing websites.

2. Figma with plugins 

Figma is a collaborative design tool that lets you clone UIs through a pixel-perfect interface. The platform includes a massive plugin library to add to the core software's functionality.

For example, plugins like Figmify or HTML to Figma let you import live websites into fully editable UIs. You can also get extra inspiration through thousands of community-made templates and design components.

3. TeleportHQ

TeleportHQ instantly generates React, Vue, and HTML codes from your designs. You can also import already-existing websites and edit them directly in the platform through a drag-and-drop interface.

That said, TeleportHQ is a solid option to clone UI layouts quickly and efficiently.

4. Webflow

Webflow lets you edit HTML, CSS, and JavaScript elements via a no-code interface. That means you can set up functional, production-ready sites through a drag-and-drop layout—perfect for cloning UIs, experimenting with their structure, and seeing how your edits modify the code in real-time.

5. Chrome DevTools and browser extensions

As I showed you throughout the post, browser developer tools let you easily inspect and copy a website.

You can extract HTML/CSS with Extensions like CSS Peeper or SnappySnippet, which simplify grabbing styles and code snippets for your cloned designs.

6. WordPress Themes and Builders

If your target site is WordPress-based, page builders like Elementor or pre-made themes can help you replicate layouts quickly without coding. Recreating designs on the exact same platform they were made on helps you set up accurate clone UI layouts much faster.

Key takeaways

• UI design cloning is a skill-building practice that breaks down and recreates already-existing UI layouts. This process helps polish up your design skills and identify design best practices.

• UI design cloning is legal as long as you use it for non-commercial purposes. That means it's completely fine to clone UIs for internal prototyping and personal learning. But publishing cloned UIs as your own can land you in legal trouble due to copyright laws.

• Pick a UI you want to clone by browsing through different sites within your industry. Look for recurring patterns and make your choice based on your skill level and personal experience. Study the target layout thoroughly and use browser developer tools to analyze its code.

• Save key assets like code snippets and visuals to your computer for further analysis and set up your design system.

• Use a design tool and try to replicate your target UI. Use dummy texts to maintain focus on the layout itself, customize it with your own branded assets, and find ways to improve on the original design.

• You can add your UI to a website builder like WordPress or Elementor for further analysis and testing.

• Don't forget about copyright laws, responsiveness, and accessibility. Conduct thorough tests and pay particular attention to your code as you export it.