How Webflow designers can use ChatGPT to write custom code: five example prompts, how to refine the output, and the tools that have changed since 2023.
Update, October 2026: Some of the tools in this post have moved on. The original OpenAI Codex model was switched off in March 2023 (the name now belongs to a newer coding agent OpenAI launched in 2025), and Notion AI is a live product rather than a waitlist beta. ChatGPT is still a handy way to get a first draft of custom code for Webflow, but test everything it gives you on staging before you publish.
ChatGPT is a powerful language model that can generate humanlike text based on a given prompt or context that became all the rage in the few months after it was released to the public in late 2022. This means that designers can use ChatGPT to write custom code for their Webflow sites without knowing how to code.
To use ChatGPT for custom code in Webflow, designers can provide the model with a clear and detailed description of the desired functionality. For example, if a Webflow designer wants to add a specific feature using JavaScript, they can explain the feature, what it should do, and any specific requirements to ChatGPT. The model will then generate the code, which can be copied and pasted directly into the Webflow designer. Since Milk Moon Studio is a small Webflow studio focussed on design, a tool like this is absolutely handy.
One of the advantages of using ChatGPT for custom code in Webflow is that it allows designers to quickly and easily add functionality to their sites without needing to spend time learning how to code or hunt down that elusive code snippet that someone already came up with somewhere on the web. Additionally, ChatGPT can help designers to save time and resources by generating code that is efficient and optimised for the task at hand.
The important part to remember is that it’s not perfect and you might not get what you need the first time round, but in essence your prompts to ChatGPT are a conversation. ChatGPT will remember this and you can keep the thread going by explaining what’s going wrong or not working and keep prompting ChatGPT to refine the code. In the end it might not be perfect, but we’ve seen instances where it very quickly gets you to a point where you can just perfect it on your own without an in-depth understanding of, for example, JavaScript. Just the other day we had ChatGPT write some very complex object intersection code for a project using tons of Vimeo videos and implemented their API beautifully, even warning us about abuse of the API user agreement when we tried to get a little eager with a prompt in ChatGPT.
Aside from the obvious, it’s also a great time saver that might get you to the finish line quicker than trawling through the Webflow forums and Googling to find just the right snippet of code. And remember, you can feed it code snippets to adapt to your use case as well, the possibilities are endless and you might learn along the way.
ChatGPT prompts for Webflow custom code
We even asked ChatGPT to generate a list of prompts a Webflow user might want to use as an example that we could include in this post, and here they are:
- "I need a JavaScript function that will add a smooth scroll effect to the links on my Webflow site when clicked. Can you generate the code for me?"
- "I'm building a landing page with a form on my Webflow site. I want to validate the form fields with JavaScript before submission. Can you write the code for me?"
- "I have a Webflow site with a gallery of images. I want to add a lightbox effect when the images are clicked. Can you generate the JavaScript code for me?"
- "I'm building a Webflow site with a fixed navigation bar. I want to make it responsive to scroll events and change the colour of the navbar when the user scrolls down. Can you write the JavaScript code for me?"
- "I want to create a JavaScript function that will detect the user's browser and display a message if the browser is out of date or not supported. Can you write the code for me?"
It might not be the most creative AI out there, but there you go, some things ChatGPT thinks we Webflow users might want to ask it.
These examples show how designers can use ChatGPT to generate custom code for their Webflow sites without needing to know how to code, by providing the model with a clear and detailed description of the desired functionality.
ChatGPT can be a valuable tool for Webflow designers and experts who need to add custom functionality to their sites. With its ability to code based on a given context or prompt, ChatGPT can help designers to write custom code for their Webflow sites with little to no coding knowledge or experience. This can save time, resources and help to increase the efficiency of the designer and the site.
As a final note, things are heating up in this space with Notion running a beta of its AI, also OpenAI based, that has similar functions and the ability to write code. The future is bright for low-code development, opening up more inroads for Webflow designers who don't want to bother learning to code but can now reap the benefits of custom code. You can sign up to the waitlist for the Notion AI beta here.
If code is all you're interested in and don't wanna use all the other great features of ChatGPT, why not give OpenAI's Codex a go? This guy is built to just help you with code and is also in beta, so head here to use OpenAI Codex. We'll let you in on a little secret: while ChatGPT can be overloaded and they are starting to trial a paid Pro version, you can skip the queue of waiting folks by just buying some API credits for Codex if you're gonna be using it a lot.
Update: We’ve been messing around with a Custom Webflow GPT, give it a try.
For more of the tools we lean on, take a look at our post on free and paid tools for small design agencies and freelancers, our essential Chrome extensions for Webflow, and how we audited the schema Webflow’s AI generated for a client site.
Frequently asked questions
Can ChatGPT write custom code for Webflow?
Yes, it can write JavaScript, CSS and HTML that you paste into a Webflow custom code embed or the page settings. Describe what you want, name the Webflow classes or elements involved, and test the result on your staging site before you publish.
What are good ChatGPT prompts for Webflow?
The best prompts are specific about the feature, the elements involved and any limits, like the five examples above. If the first answer isn’t right, tell ChatGPT what went wrong and ask it to refine the code.
Do I still need to know how to code?
Not to get started, but a little understanding helps you spot when the code is wrong. ChatGPT gets you most of the way there, and you perfect the rest yourself.
