BEM
block, block__element, block--modifier. Real classes.
Describe a site and HTFlow’s agent builds it in real HTML, CSS and JavaScript, then converts it into native Webflow elements. Faster and far cheaper than asking an AI to drive Webflow directly—and you bring your own AI, so we never bill you for it.
- ~95%
- of the build done by AI
- 0%
- margin taken on AI
- 3
- ways to run it
Build fromWebflowClaudeChatGPTCursorVS Code
01Why HTFlow exists
Building inside a visual builder is not the same as building the web.
Visual builders need more than the final HTML and CSS. Their canvases represent pages as structured elements, styles and builder-specific data.
AI has more structure to think about
When an AI works directly through a visual builder, it may need to create the builder’s structured representation while it is also trying to make design decisions.
More structure means more context
Instead of focusing primarily on layout, typography, responsiveness and interactions, the model also has to manage platform-specific structure and properties.
Safe layouts are easier to generate reliably
The more constraints a model must satisfy at generation time, the more attractive predictable, simpler patterns can become.
HTFlow separates the two problems
Let the AI concentrate on creating the website first. HTFlow takes responsibility for keeping the generated frontend suitable for the Webflow conversion workflow.
02How it works
Four steps. Then it is a Webflow project.
You do not need to know any of the machinery. You describe it, the agent builds it, HTFlow converts it, and you finish in the Designer like always.
Describe
Tell the agent what the page is for, in a sentence or two.
Build
It writes HTML, CSS and JavaScript that is already Webflow-compatible.
Refine
Adjust it on the canvas, or ask for changes until it is right.
Paste
Copy it into Webflow and it lands as native Webflow elements.
And one rulebook keeps the build Webflow-safe.
The build step is the one that could go wrong, so it is the one that is constrained. The agent writes ordinary code, but only the subset Webflow can actually import.
3 Breakpoints
991, 767 and 479 pixels. Webflow’s own breakpoints.
Native Elements
Semantic elements that map to real Webflow elements.
Zero Dependencies
Vanilla HTML, CSS and JavaScript. No Tailwind, no jQuery, no CDN.
Of the work, before you open the Designer
The heavy lifting is already done.
Once HTFlow has generated the Webflow-compatible site, a designer can export it in minutes. Everything below is already done by the agent — the repetitive bulk of the build, finished before you open the Designer.
- Page layout and section structure
- Responsive styles at all three breakpoints
- Typography, spacing and hierarchy
- Ordinary interactions and states
- A first version of the whole multi-page site
What is left for you in Webflow: turn the elements you reuse into components, swap in your own images, and any minor tweaking.
The same builder also exports to WordPress, or as plain HTML and CSS.
03The builder
Watch a page go from a sentence to the Webflow canvas.
A visual canvas
Select anything on the page and change it directly, or ask the agent for the change in a sentence.
A real layer tree
Every element shows up in the navigator with its tag and class, so you always know what you are editing.
Webflow’s own viewports
Desktop, tablet, mobile landscape and mobile—the same four breakpoints you get in the Designer.
Shared design tokens
Colours and type live in one place, so a change lands everywhere instead of section by section.
Undo and run history
Step back through your own edits and the agent’s. Nothing it does is a one-way door.
Checked against Webflow
The agent is held to what Webflow can import, so the export is not where you find out something broke.
04Three ways in
Use the AI you already use.
You do not have to move to a new assistant, or learn one. Pick whichever of these you are already set up for.
01
HTFlow’s built-in agent
The builder has its own site-generation agent. Connect an OpenRouter key and it runs on that.
Whatever you use is billed by OpenRouter, at OpenRouter’s price.
02
ChatGPT or Claude
Already paying for one of them? Connect HTFlow’s MCP server or connector and build the same site from there.
Your existing subscription does the work. No second AI bill, no key to manage.
03
Any MCP client
For people who live in an editor: point any MCP-compatible client at HTFlow’s server and build from your own toolchain.
Plus any other MCP-compatible client you connect.
05What it costs
You pay your AI provider. Never us.
HTFlow is the platform and the conversion. The intelligence is yours to bring, and whatever it costs goes straight to whoever provides it.
- Your own API keyOn your account, under your control, revocable any time.Your account
- OpenRouter, or the subscription you havePick whichever model you want, or skip keys and drive it from ChatGPT or Claude over MCP.Billed by your provider
- HTFlowThe builder, the rulebook and the Webflow conversion.No AI markup
The part that matters: HTFlow does not sell AI credits and takes no margin on AI usage. There is no credit pack to buy first, and nothing is resold through us — whatever the build costs is your provider’s bill, at your provider’s price.
06Before you build
The questions people usually ask.
Looking for plans and limits instead? See pricing
How does HTML to Webflow work in HTFlow?
Describe the page you want and HTFlow's AI agent builds it in real HTML, CSS, and JavaScript, following a rulebook that keeps the markup Webflow-compatible. Refine it on a visual canvas, then press Export: HTFlow converts the page and copies it to your clipboard. Paste it into the Webflow Designer and keep working there.
Why not just let an AI build in Webflow directly?
Because the Webflow canvas does not store a web page. It stores structured data in Webflow's own format, which is compiled into HTML, CSS and JavaScript afterwards. An AI working through that API has to write the format rather than the code it knows best, which is slow, costs far more tokens, and pushes it toward simple layouts it is confident will import. HTFlow lets the agent write ordinary code and handles the conversion instead.
Does the export create real Webflow elements?
Yes. Headings, paragraphs, links, lists, images and form labels arrive as native Webflow elements with their own classes — not a custom-code embed you cannot edit in the Designer. Once the page is in, you can turn anything you reuse into a Webflow Component like any other project.
Does HTFlow charge me for AI?
No. HTFlow does not sell AI credits and takes no margin on AI usage. You connect your own OpenRouter API key and your provider bills you directly at their price, or you skip keys altogether and drive the build from a ChatGPT or Claude subscription you already pay for through HTFlow's MCP server.
Can I build from Claude, ChatGPT or Cursor instead?
Yes. HTFlow runs an MCP server, so any MCP-compatible client — Claude, ChatGPT, Cursor, VS Code, Antigravity, Kiro, Kimi Code, Z Code and others — can build and edit the same site. The export into Webflow works the same either way.
Is the generated layout responsive?
Yes. The builder works at Webflow's own four viewports, and the agent styles each one, so the page arrives responsive rather than needing a second pass in the Designer.
Can I export anywhere other than Webflow?
Yes. The same build also converts to WordPress through Elementor and Kirki. You can also download plain HTML and CSS.
Is HTFlow itself an AI?
No. HTFlow is the builder, the Webflow rulebook and the conversion into native Webflow elements. The intelligence comes from whichever AI you connect — your own OpenRouter key in the built-in agent, or a ChatGPT, Claude or other MCP client driving it from outside.
Is the 95% guaranteed?
It is the aim, not a promise. What the agent reliably covers is the repetitive bulk of the build — layout, responsive styles, typography and a first version of every page. After you paste into Webflow you still turn reusable elements into components, swap in your own images and make any minor tweaks, and complex CMS structures, ecommerce or custom logic still need a designer or developer.
Your next Webflow page is one prompt away.
Start free. Describe a page, refine it, and paste it into Webflow.