The Webflow rulebook

Why the rulebook exists

HTFlow builds pages you can move into Webflow. Webflow only understands web code written in a particular way. The rulebook is that way, written down — and checked for you, so you never have to remember it.

The short version

Think of Webflow as a country with its own plug sockets. Ordinary web code is an appliance with a foreign plug: it works fine at home, but in Webflow it either does not fit or fits badly — a colour goes missing, a layout collapses, a button stops working.

The rulebook makes sure every section is built with the right plug from the start. You do not need to learn it to use HTFlow: the AI follows it, and HTFlow checks every section before saving it. This page is for when you want to know why things are written the way they are.

Words you will see

If you are new to web code, these are the only terms you need:

Word	What it means	Everyday comparison
HTML	The structure: headings, paragraphs, images, buttons.	The walls and rooms of a house.
CSS	The looks: colours, sizes, spacing, layout.	Paint, furniture and where it stands.
JavaScript	The behaviour: menus that open, things that animate.	The electricity — switches and lights.
Section	One horizontal block of a page, like a hero or a pricing table.	One room of the house.
Class	A name given to an element so CSS can style it, e.g. `hero__title`.	A label on a box saying what is inside.
Attribute	Extra information on an element, e.g. `alt` or `data-ht-menu`.	A sticker with a note on it.
Breakpoint	The screen width at which the layout changes for smaller devices.	Clothing sizes: S, M, L.
Webflow Designer	Webflow's visual editor, where your pasted section ends up.	The new house you are moving into.

What goes wrong without it

When you paste a section into Webflow, it does not keep your code as text. It takes it apart and rebuilds it as Webflow elements, and puts every CSS value into a box in its Style panel. Anything that has no box is dropped, or squeezed into the wrong one.

When the rules are checked

Every section the AI writes — through the Site Agent or through an MCP client like Claude — is checked before it is saved. On Flow sites the check always runs. On other websites it runs when Webflow Mode is switched on in the site settings.

If a section breaks a rule, it is not saved. The AI gets the error HTFLOW_WEBFLOW_RULES_VIOLATED with a list of exactly what broke and how to fix it, and it normally fixes the section and tries again on its own. You usually never see this happen.

What the rules do not limit

The rules never decide how your page looks. Colours, fonts, layouts, animations, how bold or how quiet the design is — all of that is up to you and what you ask for. The rules only decide how the code is written.

Grammar rules do not tell you what story to write; they make sure the reader can understand it. The rulebook is grammar for Webflow.

Two kinds of rule

Every rule on the next pages carries one of two tags:

Checked automatically — HTFlow refuses to save a section that breaks it.
Not auto-checked — the AI is told to follow it and it matters for a clean result, but a computer cannot reliably tell whether it was followed, so it is not a hard stop.

All the checked rules at a glance

Rule	In plain words	Details
One section, no page shell	Send one room, not a whole house.	HTML
No `ul` / `ol` lists	Build lists from plain boxes.	HTML
No `style="…"` or `onclick="…"`	Looks go in CSS, behaviour goes in JavaScript.	HTML
No outside files	Everything the section needs is inside it.	HTML
Photos from Unsplash, icons as SVG, no emoji	Pictures that will still be there tomorrow and look the same everywhere.	HTML
Longhand CSS	One value per box on the form.	CSS
Styles stay inside the section	Paint your room, not the whole building.	CSS
No `::before` / `::after`	No invisible furniture.	CSS
Grids declare rows	Tell the grid both its columns and its rows.	CSS
Only 991, 767 and 479 px breakpoints	Webflow has exactly three smaller sizes.	CSS
No `outline`, no `background-image`, no `opacity: 0`	Each one fights something Webflow's Designer does.	CSS
No `var`, no `function`	`const`, `let` and arrow functions only.	JavaScript
Find elements by `data-ht-*`	Use the name badge, not the shirt colour.	JavaScript
No `classList` for state	Change the traffic light, not the car's paint.	JavaScript

The rules in detail

HTML rules The structure: one section, class names, lists, images and icons.CSS rules The looks: longhand values, staying inside the section, grids and screen sizes.JavaScript rules The behaviour: finding elements, keeping state, animating in safely.Form rules The exact shape Webflow needs to collect form submissions.

Handing the rules to an AI

Any MCP client can read the rules HTFlow actually enforces with the get_flow_webflow_rules tool, so an agent always works from the current version rather than a copy that has gone out of date.