A Claude Code skill (works in other AI coding agents too) that turns hand-coded or vibe-coded HTML/CSS/JS into clean, Webflow-importable bundles via the Modern HTML to Webflow Converter (moden.club/tools/html-to-webflow).
Install in Claude Code (two commands):
/plugin marketplace add febi-git/html-to-converter-webflow
/plugin install html-to-webflow@febinsha-webflow
Other agents (Cursor, Codex, Antigravity, …) →
It encodes ~48 fixes that came out of shipping a real production page through this workflow — the things you'd otherwise re-discover the hard way: class collisions with the live site, Designer canvas scroll lag, GSAP/ScrollTrigger timing issues, asset re-linking, and Webflow re-import cleanup.
You're a Webflow designer who occasionally writes (or has AI write) HTML/CSS — and you want to drop it into your Webflow site without your live-site classes mysteriously turning orange, your Designer canvas lagging, or your animations refusing to fire. You don't need to be a developer; you just need an AI coding agent (Claude Code is the smoothest fit) and Python installed.
If you don't write code at all and only use Webflow's visual Designer, this skill isn't for you. If you write code or have AI write code that you then need to bring into Webflow, this is exactly what it's for.
When you invoke the skill, it asks one question: what are you doing?
- a) Building a single component or section — quick scaffold, no full-page setup. Ship one card, one CTA strip, one hero, etc.
- b) Editing an existing Webflow site — point at a
.zipexport of your live site; the skill reads it, detects class collisions, and walks you through adding a new page, modifying an existing one, or extracting variables for reuse. - c) Starting a new multi-page project — full scaffold with tokens / base / components / per-page CSS. Defaults to BEM single-underscore convention; documents Lumos and Finsweet Client First as alternatives for very large projects.
Each mode walks through authoring → building → importing into Webflow → re-linking assets → publishing.
- An AI coding agent — Claude Code is the smoothest fit; Cursor, Codex, and Antigravity also work.
- Python 3 on your machine (already installed on most macOS and Linux; on Windows install from python.org if missing).
- A Webflow site you can publish to (any plan — Starter is fine for testing).
- About 15 minutes for your first end-to-end run.
Two commands inside Claude Code. No cloning, no manual restart.
/plugin marketplace add febi-git/html-to-converter-webflow
/plugin install html-to-webflow@febinsha-webflow
That's it. The skill is then available as /html-to-webflow:convert and auto-triggers when you mention Webflow conversion topics. To scope it to one project instead of your user account, append --scope project to the install command.
Non-interactive (terminal) equivalent:
claude plugin marketplace add febi-git/html-to-converter-webflow claude plugin install html-to-webflow@febinsha-webflow
For non–Claude Code agents, clone the repo into your project once:
git clone https://github.com/febi-git/html-to-converter-webflow .ai/html-to-converter-webflowThen point your agent at the skill using its rules/instructions file:
Add this line to your project's .cursor/rules/index.mdc (create the file if it doesn't exist):
When the user mentions importing HTML to Webflow, the moden.club converter, or Webflow paste tool, follow the workflow in
.ai/html-to-converter-webflow/skills/convert/SKILL.md.
Add this line to your project's AGENTS.md (Codex reads it automatically):
When the user mentions importing HTML to Webflow, the moden.club converter, or Webflow paste tool, follow the workflow in
.ai/html-to-converter-webflow/skills/convert/SKILL.md.
Add the same line to your project's AGENTS.md (or Antigravity's rules file):
When the user mentions importing HTML to Webflow, the moden.club converter, or Webflow paste tool, follow the workflow in
.ai/html-to-converter-webflow/skills/convert/SKILL.md.
The skill is plain Markdown — any LLM-based agent can follow it. Clone the repo anywhere, then tell your agent:
Read
skills/convert/SKILL.mdin [path/to/cloned/repo] and follow its workflow when I mention importing HTML to Webflow.
Plugins update through the marketplace — no git pull, no re-clone:
/plugin update html-to-webflow@febinsha-webflow
Updates are delivered only when the plugin's version is bumped (it tracks the version: in SKILL.md). Changes are listed in CHANGELOG.md.
Run git pull in whichever folder you cloned into:
git -C .ai/html-to-converter-webflow pullTo check whether you're behind, compare the version: field at the top of your local SKILL.md against GitHub. If you locally edited your copy (custom prefix, COLLIDE_RENAMES baseline), git pull may report merge conflicts — resolve them or re-clone fresh.
- Install using the commands for your agent (above). Claude Code plugin users are ready immediately — no restart.
- Open your agent in any folder — a scratch folder works fine for the first run.
- Type
/html-to-webflow:convert(Claude Code) or "use the html-to-webflow converter workflow" (other agents). - Answer "a" for "Building a single component or section" — the smallest, fastest path to your first successful Webflow import.
- Follow the prompts. The skill asks for your component idea, writes the HTML/CSS/JS, runs the build script, and walks you step-by-step through pasting into moden.club and importing into Webflow.
After your first successful component, try mode b (editing an existing site) or mode c (new multi-page project).
In Claude Code:
/html-to-webflow:convert
Or just describe what you want — the skill auto-triggers on phrases like:
- "I want to import this page into Webflow"
- "Convert HTML to Webflow"
- "Use the moden.club converter"
- "Webflow paste tool"
- "Help me ship this code into Webflow"
html-to-converter-webflow/ # plugin + marketplace repo
├── .claude-plugin/
│ ├── plugin.json # plugin manifest
│ └── marketplace.json # marketplace: febinsha-webflow
├── README.md # you are here
├── LICENSE # MIT
├── CHANGELOG.md
└── skills/
└── convert/
├── SKILL.md # entry — frontmatter + mode router
├── modes/
│ ├── component-or-section.md # mode (a)
│ ├── existing-site.md # mode (b)
│ └── multi-page-project.md # mode (c)
├── reference/
│ ├── css-rules.md # 7 BEM rules with examples
│ ├── designer-canvas-fixes.md # inDesigner guard + workarounds
│ ├── webflow-runtime.md # Webflow.push, GSAP CDN, body overflow-x
│ ├── class-collisions.md # detection + COLLIDE_RENAMES protocol
│ ├── variable-mapping.md # VAR_TO_LITERAL inlining + sanity check
│ ├── asset-handling.md # placehold.co + Asset Manager re-link
│ ├── frameworks-comparison.md # BEM vs Lumos vs Client First tradeoffs
│ └── webflow-designer-checklist.md # full Webflow-side steps + MCP integration
└── templates/
├── _build.py # parameterized build script
├── page-template.html # starter scaffold
├── tokens.css # empty design tokens
├── base.css # reset + typography + layout
├── components.css # button placeholder
├── page.css # empty page CSS
├── page.js # IIFE + inDesigner guard
└── inDesigner-canvas-snippet.js # canonical canvas guard, copy-pasteable
| Problem encountered | Fix encoded |
|---|---|
| Class names from your import collide with the live Webflow site and silently merge | Build script prefixes colliding names with acme- (configurable). COLLIDE_RENAMES list maintained in _build.py. |
| Webflow Designer canvas lags / scroll feels broken when you have ScrollTrigger animations | inDesigner guard pattern: detect Designer mode and short-circuit scroll-driven animations to a static frame. |
| Inline-flex pill badges stretch full-width in Designer | width: fit-content workaround for flex children in Designer. |
| ScrollTrigger entrance animations fire from a stale layout on cold load (first-load mismatch) | Custom rAF-throttled scroll listener instead of scrub; refresh on image / font load. |
| Page CSS variables disappear or behave unpredictably after import | Inline every var(--...) as a literal hex/value at build time. Sanity check fails the build if any leak through. |
Asset paths (<img src=...>) are useless after import |
Use placehold.co placeholders in source; re-link to Webflow Asset Manager assets after import. Skill walks through it. |
| Re-importing a page leaves orphan classes from the previous attempt | Skill walks through "delete the page in Webflow first" before re-importing. |
| Page JS runs before Webflow's runtime is ready | Build script wraps source IIFE in Webflow.push(). Source stays as plain IIFE so local preview works. |
body shows a thin horizontal gap on Webflow's mobile breakpoints |
body { overflow-x: hidden } in base.css template. |
The skill ships with one opinionated default: single-underscore BEM with state modifiers as combo classes. Example:
.tool-card { ... }
.tool-card_title { ... }
.tool-card.is_live { ... }This convention plays cleanest with the converter. Mode (c) (multi-page-project) discusses Lumos and Finsweet Client First as alternatives, with a tradeoff table — but the skill doesn't natively support them out of the box.
MIT — see LICENSE.
If you've found a Webflow converter quirk that isn't in the reference docs, PRs welcome — please include:
- The exact symptom (screenshot if it's visual).
- The minimum source code that reproduces it.
- Whether it shows up in Designer canvas, the published site, or both.
- The fix, with comments explaining why.