ConvertexI want to recreate a site I've seen
You found a site with a stunning design and you want to reproduce it in Webflow. This guide shows you how to do it with the Convertex Capture extension and Claude.
Prerequisites:
- A Convertex account
- The AI setup configured (Claude + Skills + MCP)
- The Chrome extension installed
The process in a nutshell
- You capture a section of the site with the extension
- You send the capture to Claude
- Claude reproduces the design as Webflow code
- You convert and paste into Webflow
- You repeat for each section
The steps in detail
Navigate to the site that inspires you
Open the site in Chrome. Identify the sections you want to reproduce.
Tip: before you start, make a list of the sections to capture. For example: hero, features, testimonials, CTA, footer. This will help you work methodically.
Capture the first section
Click the Convertex Capture icon in your extensions bar. The selection tool activates. Hover over the page and click on the desired section.
The extension automatically captures the screenshot, the HTML, the CSS, the colors, and the fonts.
Copy and send to Claude
Click Copy in the extension, then open a conversation with Claude and paste the capture. Add your instruction:
"Here's a Convertex capture. Recreate this section faithfully. Responsive."
Claude analyzes the screenshot and the code, then generates an optimized version for Webflow conversion.
Check the result in Convertex
Open convertex.ai. The code appears in the editor with the preview on the right. Compare visually with the original site.
Request adjustments if needed
If details don't match, tell Claude in the same conversation:
"The title is too small, make it bigger." "The buttons should be more rounded." "Add more space between the elements."
Convert and paste into Webflow
Click Convert then Copy, and paste into Webflow Designer.
Repeat for each section
Go back to the site, capture the next section, and start the process again. Claude retains the conversation context, so the styles will stay consistent.
Tips for a faithful result
Work section by section
This is the golden rule. One capture = one section. Capturing an entire page at once produces poor results because Claude has to process too much information at the same time.
Stay in the same Claude conversation
For a complete page, do all your captures in the same conversation. Claude remembers the colors, fonts, and spacing from previous sections, which ensures visual consistency.
Be precise in your requests
The more details you provide, the better the result:
Good:
"Recreate this section. The title is about 48px, the text is centered. The buttons have 8px rounded corners. The background is a gradient from dark purple to dark blue."
Less good:
"Recreate this."
Add the fonts in Webflow
After pasting, check that the fonts used are available in your Webflow project. If a font is missing, add it in Project Settings > Fonts.
Limitations to know about
- JavaScript animations are not reproduced automatically. Scroll effects, page transitions, etc. will need to be recreated with Webflow Interactions.
- Images captured are URLs from the original site. Replace them with your own images in Webflow.
- Fidelity is not pixel-perfect. The result is a faithful reproduction, not an exact pixel-by-pixel copy.
Ethical note: Reproducing a design for inspiration is common practice. However, copying an entire site identically may raise intellectual property issues. Use captures as a basis for inspiration and add your own touch.
What's next
- Generate with AI: create original sections without capturing an existing site
- Add to an existing project: integrate your sections into a Webflow site that already has content