Client First → Lumos · Deterministic converter

Convert Webflow classes. Instantly.

Paste your Client First markup. Morph maps every class to its Lumos equivalent — deterministically, with zero guesswork and zero hallucination.

Start converting free Open converter →

getmorph.dev/app/converter

Client FirstLumos

0/ 6 mapped

Ready

Input · Client First14 lines

1<section class="hero_section wf-section">

2 <div class="page_container">

3 <div class="hero_content_wrap">

4 <h1 class="hero_heading">

5 Convert Webflow classes

6 </h1>

7 <p class="hero_sub">

8 Instantly.

9 </p>

10 <a class="btn-primary w-button"

11 href="/app">Start free</a>

12 </div>

13 </div>

14</section>

Output · Lumos0/14

1<section class="section_hero">

2 <div class="padding-global">

3 <div class="container-large">

4 <h1 class="heading-style-h1">

5 Convert Webflow classes

6 </h1>

7 <p class="text-size-medium">

8 Instantly.

9 </p>

10 <a class="button is-primary"

11 href="/app">Start free</a>

12 </div>

13 </div>

14</section>

hero_sectionsection_hero

page_containerpadding-global

hero_content_wrapcontainer-large

hero_headingheading-style-h1

hero_subtext-size-medium

btn-primarybutton is-primary

Classes mapped

live

Conversion accuracy

live

Setup required

live

Deterministic

Every Client First class maps to an exact Lumos equivalent. Zero guessing, zero hallucination.

Live preview

See the converted output render in real time as your classes map — before you copy a single line.

Vault + Projects

Save conversions, organize by project, and revisit past work anytime. Cloud-native, no files.

How it works

Three steps from pasted markup to shipped Lumos output.

Paste your markup

Drop Client First HTML straight from Webflow. No export, no zip, no plugin.

Morph maps every class

Deterministic mapping — not LLM guessing. See each translation highlighted live.

Copy the Lumos output

Paste into your Lumos project. Classes, utilities, and structure — ready to ship.

Comparison

Manual rewrite vs Morph

The alternative is still a dev manually renaming classes for hours. This is the gap.

Manual rewrite

Baseline

Time per page

30–90 min

Consistency

Depends on the dev's memory

Missed classes

Common on long pages

Onboarding

Learn Lumos conventions

With Morph

Deterministic

Time per page

< 10 sec

Consistency

Deterministic, 100%

Missed classes

Zero — every class mapped

Onboarding

None — output is already correct

Pricing

Pricing that matches how you ship.

Start free, upgrade when the converter becomes part of your delivery workflow.

Save 20% with annual

Beta users: $29/mo locked for life — available at signup.

Free

try it out

5 conversions / month

Deterministic Client First → Lumos mapping
Live preview

Start free

Pro

single Webflow dev

$49 / mo

$39/mo billed annually

Everything in Free
Unlimited conversions
Cloud vault (save + revisit projects)
Email support

Go Pro

Agency

recommended

Recommended

$149 / mo

$119/mo billed annually

Everything in Pro
5 seats
All output targets: Lumos + Shopify Liquid + vanilla HTML/CSS/JS
Training-library access
Priority support

Start Agency

All plans: 30-day money-back. Cancel anytime.

FAQ

Questions you should not have to email us to ask.

Does Morph work with my Client First site?

If your site uses standard Client First naming, yes. Morph maps `hero_section`, `hero_heading`, `page_container`, and every other Client First utility class to its Lumos equivalent automatically.

Is the mapping accurate?

Every Client First → Lumos mapping is deterministic — hand-curated, not LLM-generated. We never "guess" a class name. If a class has no Lumos equivalent, Morph tells you instead of inventing one.

Do I need to install anything?

No. Paste your markup into the converter, copy the result, paste it back into Lumos. No plugin, no CLI, no build step.

Does Morph modify my Webflow site?

Never. Morph reads what you paste and outputs converted markup. Your original site is untouched.

Can I use Morph output in Shopify or vanilla projects?

Yes — Agency plan unlocks Shopify Liquid and vanilla HTML/CSS/JS targets. Pro is Lumos-only.

What if Morph gets it wrong?

Open an issue with the source markup. We fix the mapping, ship the update, and everyone's conversions improve. Morph gets smarter with every reported gap.

Ready when you are

Stop rewriting class names.

Start converting Client First to Lumos. Free while we're in beta.

Start free — no card