ConvertexChrome Extension (optional)
The Convertex Capture extension lets you capture a section of an existing website — screenshot + HTML/CSS — and send it to Claude so it can faithfully recreate it as Webflow components.
This is an optional step. It is useful if you want to reproduce an existing design found on the web.
Watch your token usage. Each capture includes a screenshot and the section's HTML/CSS code. This significantly increases the context size sent to Claude. Use this feature in a targeted way (section by section) to keep costs under control.
Install the extension
Download the extension
Go to the Chrome Web Store and search for Convertex Capture, or request the download link from your Convertex account.
Add it to Chrome
Click Add to Chrome and confirm the permissions. The Convertex icon appears in the extensions bar.
Pin the extension
Click the puzzle icon in the Chrome bar, then pin Convertex Capture for quick access.
How it works
- Navigate to the website from which you want to capture a section.
- Click the Convertex Capture icon in the extensions bar.
- Select the section to capture by clicking on it on the page. The extension captures the screenshot and extracts the HTML/CSS of the selected area.
- Copy the result — the extension formats everything automatically for Claude.
- Paste into Claude and ask it to recreate the section with Convertex.
Example prompt after a capture:
"Here is a Convertex capture. Recreate this section with Convertex, faithfully matching the original design."
Claude will use the screenshot as a visual reference and the HTML/CSS as a base to generate a result optimized for Webflow conversion.
Best practices
Capture section by section
Never capture a full page at once. Each capture generates a significant volume of data (screenshot + code). Capturing an entire page:
- Overloads Claude's context and degrades generation quality.
- Consumes a lot of tokens unnecessarily.
- Produces less accurate results because Claude has to process too many elements at once.
Prefer capturing each section separately: the hero, then the features, then the footer, etc. Claude will produce a better result on each individual section.
Choose well-defined sections
Select sections with clear visual boundaries — a hero, a card grid, a footer. Avoid capturing areas that overlap multiple sections.
Next step
The extension is installed. Return to the setup to continue, or run your first test.