How to copy a section of a website as code

A screenshot makes an AI guess at the spacing, the fonts and the colors. The code of the section does not. Here is how to take a section of any live page as Tailwind, HTML, React, Vue or Elementor, and hand it to your AI so it can rebuild the design exactly.

Updated October 2026 · by the Design Toolkit team

Why code beats a screenshot

Hand an AI a screenshot and it has to estimate everything. It guesses that the gap is about 24 pixels, the heading is about 48, the grey is about #6b7280. Each guess is close, and a page made of close guesses looks wrong in a way that is hard to name.

Hand it the code and the same numbers are written down. The layout is a real display: grid with real columns, the gap is the actual gap, the font is the font the page loads. The AI stops measuring and starts building.

1. Pick a section, not the page

A whole page is too much for one prompt and too hard to check. Pick a bounded piece: a hero, a pricing table, a feature grid, a footer, a navigation bar. Roughly, whatever a designer would call one component.

If a section is large, copy it in parts. An AI rebuilds three sections you can check one at a time better than one enormous block it has to take on faith.

2. Take the markup together with its styles

The route most people try first is DevTools: right-click the element, choose Copy → Copy outerHTML. It gives you the structure and loses nearly everything that made it look right:

• The CSS. The classes survive, the stylesheet they point to does not. A .btn-primary with no rule behind it is just a word.
• Inherited styles. The font, the color and the line height often come from a parent that you did not copy.
• Pseudo-elements and states. Anything drawn with ::before or changed on hover has no markup to copy.
• Fonts and images. The URLs are relative to the original site, so they break the moment you paste them anywhere else.

A copy that works has to read the computed style of every element, resolve the fonts and images, and write the result out as code that stands on its own.

3. Choose the format you work in

The right output is the one that drops into your project without a rewrite:

• Tailwind for a project that already uses utility classes. How to get Tailwind classes from a website.
• HTML for a plain page, an email or a quick test.
• React for a component you can import.
• Vue for the same, in a single-file component.
• Elementor for WordPress. It exports a template file you import under Templates → Saved Templates, and it works with free Elementor. The Elementor walkthrough.

4. Preview it at phone, tablet and desktop widths

A section is rarely one layout. The same pricing table is three columns on a desktop, two on a tablet and a stack on a phone, and the code has to carry all three. Look at it at each width before you paste it into anything, so you know exactly what the AI is being asked to rebuild, and so you can see if the page did something at one width that the code did not catch.

5. Paste it into your AI with a clear instruction

The code does most of the work. The instruction decides what you get back. A prompt that has worked well:

Rebuild this section as a React component using Tailwind.
Keep the layout, spacing, fonts and colors exactly as they are in the code.
Replace the image URLs with placeholders, split repeated parts into
components, and do not add anything that is not in the original.

Name your framework, say what must not change, and say what you do want replaced. If the AI gets something wrong, point at the exact part (“the gap between the cards”) and ask for it to match the code.

The shortcut

Design Toolkit does steps two to four in one place. Select a section on any page, press O to open the side panel and the Export card shows the section as code, with a tile for each format: Tailwind, HTML, React, Vue and Elementor.

• Copy or Download. Copy the code to paste into your AI, or download it as a file. The HTML formats open on their own in a browser.
• Preview. Opens the section full screen, as a phone, a tablet and a desktop, so you can check each width before you paste.
• The real details. Computed layout, spacing, fonts and images come along with the markup, including content inside open shadow DOM.

What it cannot do

Honest limits, because a copy that looks right in a demo and wrong in your project is worse than a clear warning:

• Pages that rebuild themselves with JavaScript. If a page builds a different layout at each width with script, rather than with CSS, the section can come out a little different. Some Framer and Shopify layouts do this. The preview shows you when it has.
• State at the moment you copy. An accordion that is open, a sticky bar mid-scroll or a popup inserted later is copied as it is when you press the button.
• Closed shadow roots and cross-origin iframes. The page does not let anything read them. An iframe is kept as a live frame, and a site may refuse to show it elsewhere.

Use what you copy well

A site's design and code belong to the people who made them. Use a copy as a reference, to learn how something was built, to rebuild your own page, or with permission, and not to put someone else's work out as yours. That holds for a screenshot as much as for code, and the code is simply more precise.

Common questions

Read next