ConvertexAdding to an existing Webflow project
You already have a Webflow site with content and styles. You want to add converted sections without breaking what exists. This guide shows you how to do it properly.
Prerequisites: a Convertex account.
The risk: class duplicates
When you paste converted content into a Webflow project that already has styles, conflicts can occur. For example, if your Webflow project already has a .button class and the converted code also creates a .button class, the styles get mixed up.
The solution: reference styles. By importing your existing Webflow styles into Convertex, the conversion engine knows which classes already exist and reuses them instead of creating new ones.
The steps
Export your styles from Webflow
In your Webflow Designer project:
- Select an element that uses your main classes (or select the entire page with Cmd+A).
- Copy it with Cmd+C.
The clipboard now contains a JSON with all the style definitions.
Import the styles into Convertex
- In Convertex, open the project settings (click on the project name in the top bar).
- Click Upload Reference Styles.
- Paste the JSON copied from Webflow.
Convertex analyzes the classes and stores them as a reference.
Convert your new content
Paste your HTML/CSS (or generate it with Claude) and click Convert as usual.
Convertex now compares each generated class with your reference styles:
- Identical class found -> Convertex reuses the existing class
- New class -> Convertex creates it normally
- Name conflict -> Convertex adjusts the name to avoid collisions
Paste into Webflow
Click Copy and paste into your Webflow page. Existing classes are recognized, new ones are added cleanly.
Best practices
Use one Convertex project per Webflow site
Create a dedicated Convertex project for each Webflow site. Reference styles are saved per project.
Update reference styles regularly
If you add classes in Webflow, re-upload the reference styles so Convertex stays in sync. Copy a representative element again and replace the reference styles in the project settings.
Test in a draft page
Before pasting into a production page, paste into a test page to verify that everything integrates well with your existing styles.
Name your classes consistently
If your Webflow project uses a naming convention (like Client-First), ask Claude to follow the same convention so the new classes integrate naturally.
Reference styles are particularly useful for ongoing projects where you progressively add converted pages. The more content you convert for the same site, the more valuable the reference styles become.
What's next
- Projects & history: organize your conversions by project
- Client-First: if your project follows this methodology
- Reference styles in detail: in-depth technical details