How I Use AI Tools as a Webflow Developer
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Webflow handles the HTML and CSS beautifully — you build the page visually and it writes clean markup for you. But most real projects eventually need something Webflow's native interactions can't do cleanly: a custom scroll animation, a third-party API, a piece of logic that needs real JavaScript. The question isn't whether to use AI for that part. It's how to use it so the output actually fits the site you've already built.
Here's the workflow I actually run — the one that gets usable code instead of generic snippets.
Why context is everything
AI coding tools are only as good as what they can see. Ask one for "a scroll animation" with no context and you get plausible-looking code that targets class names which don't exist in your project. You then spend more time reconciling its markup with yours than you saved.
The fix is simple: give the AI your real, published markup. Once it can see the actual structure and class names Webflow generated, it stops guessing and starts writing code that drops straight in.
My actual workflow
The trick is to hand the AI the real page, not a description of it. So I start from the published site:
- Publish the site.
- Grab the full body markup from inspect element.
- Drop it into an HTML file.
- Open it in VS Code.
Then I tag the files and prompt:
Analyse@example.html— don't change anything here, this is just reference. The frontend is already built in Webflow. I only need JS and CSS for this interaction. Write it into@example.jsand@example.css.
Tagging the files with @ scopes the AI: it reads the HTML as read-only reference and writes only into the JS and CSS files. It sees the full picture — real markup, actual class names, exact structure. No guessing, no generic output.
A worked example: a scroll animation
Say I've built a grid of cards in Webflow that should stagger into view as you scroll. In the Designer the wrapper is .card-grid and each item is .card. I publish, copy the markup, and ask the AI for GSAP and ScrollTrigger that targets those exact classes. What comes back looks like this:
gsap.registerPlugin(ScrollTrigger);
gsap.from('.card', {
scrollTrigger: { trigger: '.card-grid', start: 'top 80%' },
y: 40,
opacity: 0,
duration: 0.6,
stagger: 0.12,
ease: 'power2.out',
});Because the AI could see .card-grid and .card in the real markup, the selectors match on the first try — no renaming, no "where did this class come from." That's the whole payoff of feeding it the published page.
Getting the code back into Webflow
Once the interaction works, the code goes back into Webflow's custom code. For a single page, that's Page Settings → Custom Code: the CSS goes inside the <head>, and the JavaScript goes before the closing </body> tag. If the interaction relies on a library like GSAP, load that library's CDN script first, then your own script below it.
Republish, and the interaction is live. Webflow stays the single source of truth for the design; the custom JS and CSS sit on top as a clean, self-contained layer.
The three tools I tested
I've run this workflow through three AI coding tools — Claude and ChatGPT as VS Code extensions, and Antigravity as a full IDE. My honest breakdown:
- Claude (VS Code) — fastest and most accurate. My go-to for tough interactions and API integrations.
- ChatGPT (VS Code) — solid for basic GSAP animations and simple third-party setups.
- Antigravity (IDE) — worth trying if you want an AI-native coding environment.
Right tool for the right job
None of these replaces knowing how Webflow builds a page — they speed up the part that lives outside Webflow, the custom JS and CSS. And they're only as good as the context you hand them. Give them the real markup, scope them to the right files, and let each one do what it's best at. That's the difference between AI that creates work and AI that removes it.
