How to clone a website's design with AI (legally)
4 min read
There is a website you have admired. You would like yours to look like it, in spirit, without the awkward "did I just rip them off" feeling. AI coding tools are great at this, if you understand what you can copy and what you can't.
What's legal to copy
Layout, structure, interaction patterns, and general visual style are not protected. The choice to put a hero image at the top, a three-column grid below, and a footer with two columns of links is the kind of pattern shared by millions of sites. Color palettes in the general sense (warm earth tones, cool blues) are not protected. Typography choices, with the caveat that the specific font files might be licensed, are reproducible.
What this means in practice. You can build a site that is clearly in the same neighborhood as the one you admire, and that is fine. Designers and developers do this routinely, and the result rarely looks identical because the content, voice, and brand make the personality.
What's not legal to copy
The actual brand assets. Logos, photographs, illustrations, custom icon sets, specific font files, distinctive product photography, all of that is owned by someone. Copying any of it lands you in trademark or copyright territory.
The body copy. Headlines, descriptions, taglines, marketing language. Words are protected.
The brand identity, in the sense of name, logo, and the visual cues that identify the company. Looking like a competitor is one thing. Looking like the same company is another.
The practical workflow
Open the site you admire in your browser. Take screenshots of the parts you want to emulate, especially the layout and the way sections flow. Open your AI coding tool and describe what you want, using the screenshots as references.
A prompt that works. "I want a one-page site for my consulting practice. Use the attached screenshots as a reference for the visual feel, the layout proportions, and the section order. Do not copy the colors or the headline. My brand is warm and minimal, more terracotta than the blue in the reference. Use these specific colors and these section headings instead."
The AI will produce something in the neighborhood of the reference, shaped to your specifics. From there, you iterate. The reference becomes a starting point that you progressively make your own.
A test you can run on the result
When you are done, open the original site in one tab and your site in another. Look at them side by side. If a friend of yours could tell which is which without reading the words, you are fine. If they would guess they came from the same company, push your site further from the reference until they would not.
That side-by-side test catches almost all of the borderline cases. The original gets to keep its identity. Yours becomes yours.
A different way to use this
If the site you admire is a well-known design system or template (Tailwind UI, ShadCN examples, a published portfolio template), you can often use it more directly because that is what those exist for. Read the license. Most of them allow re-use as long as you are not republishing the template itself.
For a one-off marketing site or a known competitor, treat the reference as inspiration, not source material. AI can give you the same visual rhythm. The rest you do yourself.
When to ask a designer instead
If the site you are trying to recreate is so specific to its brand that it cannot really be borrowed from without looking like a copy, that is a sign the design is doing real work. In that case, hire a designer to give you something equally distinctive. AI coding tools are great at generic-tier visual design. They are not yet a substitute for an actual designer with taste.
The steps, in order
Use a reference site as inspiration for your own AI-built site without crossing into copying.
Take screenshots of the layout you want to emulate
Capture the hero, the section flow, and any specific elements that caught your eye. Don't capture the logo or branded content.
Describe what you want, with the screenshots as references
Tell the AI to use the screenshots for layout proportions and section order, but to use your own colors, copy, and brand.
Specify your own colors, fonts, and copy
Give the AI your color palette, your typography choice, and the headlines you actually want, so the result isn't a recolor of the original.
Iterate the AI's first draft toward your brand
Ask for changes that push the result further from the reference and closer to what your business actually looks like.
Run the side-by-side test
Open the reference and your result in two tabs. If a friend could tell which is which without reading the words, you're done. If not, push further.
Replace any borrowed assets with your own
Make sure no logos, photographs, illustrations, or specific font files from the reference made it into your final result.
Frequently asked questions
Is it legal to use a website's design as inspiration?
Generally yes, as long as you're copying patterns, not assets. Layout, structure, color families, and interaction style are common property. Logos, photos, custom illustrations, and body copy are not.
Can I copy the HTML directly from a website?
Technically possible, often legally murky, and usually a bad idea. Modern sites are full of company-specific assets and tracking code you don't want. Use AI to produce a clean version inspired by the reference instead.
What if I'm worried my version looks too similar?
Change the color palette, change the typography, change one structural element (move the contact section, drop a column, alter the hero shape). Even small changes shift the result from "copy" to "in the same family."