How JetStyle’s Designers Build Websites With Webflow & ChatGPT
In December 2024, we launched our very own Advent calendar. The idea was simple: to engage our audience with a familiar and beloved format while offering something useful and entertaining. If you missed it, check it out here: https://jet.style/xmas. Even though the holiday season has passed, the content remains relevant. You’ll appreciate our advent gifts if you’re interested in XR, AI, music, product development & research, and inclusive design.
From the very beginning, we knew that the project would require both design and development expertise. We needed a landing page to host the Advent calendar, but December is a hectic time—our commercial teams were fully booked, and hiring external developers wasn’t an option.
So what do we do when we need to quickly acquire a new skill? We turn to neural networks, of course. This is the story of how our PR designer Alex Perminov and Art Director Kostya Ostro built an entire website for the campaign using ChatGPT and Webflow.
The Challenge of AI-Driven Development
ChatGPT is great at coding—something we were already aware of. We also knew its limitations:
- It tends to generate simple, generic code.
- It makes mistakes. Some are easy to spot, others require careful debugging or even asking the AI to check its own work.
With all this in mind, here’s how our process unfolded:
Step 1: Design First
At this stage, we weren’t thinking about ChatGPT or coding yet—that was a problem for our future selves. We focused on what we do best: crafting a compelling design in Figma.
The website design was inspired by JetStyle’s brand colors, infused with a festive twist—glitter, gradients, and a dash of New Year’s magic.
Step 2: Prompt Development
Our initial idea was to have the Advent slots unlock daily at a specific time. Since we planned to build the website on Webflow, we included all relevant specifications in our prompt to ChatGPT
Step 3: Testing the AI-Generated Code
ChatGPT provided us with a script, which we tested in CodePen—our go-to tool for quick validation. To our surprise, the code worked well on the first try.
Step 4: Web Implementation
Why do we choose Webflow to build sites? Because it assigns IDs and classes to elements, providing functionality similar to HTML. This made it easy to integrate the scripts generated by ChatGPT into our layout.
For seamless Figma-to-Webflow transfer, we recommend this official plugin. Once the design was in place, we began integrating ChatGPT’s code into Webflow.
That’s when we hit a snag. Some data arrays weren’t functioning correctly. We had to go through multiple iterations, fixing issues both manually and with ChatGPT’s assistance. Eventually, we got the website up and running.
One lesson for the future is to think through content management from the start. Initially, we wanted to convert data from a .csv file into a JavaScript array. However, we couldn’t figure out how to do it efficiently (if you’ve successfully done this before, let us know in the comments!). As a workaround, we used Webflow’s attributes feature to manage content. We also had to drop the automated Advent slot unlocking feature—it simply wasn’t feasible within our timeline.
What We Learned
Looking back, the process wasn’t entirely smooth, and we hit a few loops along the way. But in the end, we managed to save dozens of hours of high-quality development time, gained new expertise, and deepened our understanding of web design and frontend development. Here are the key areas where we saved resources:
- Communication. Delegating a task to another team requires time and effort to ensure it’s done properly.
- Developer onboarding. Introducing developers to Webflow can take time if they’re unfamiliar with the platform.
- Script development. We delegated much of the coding process to ChatGPT.
Key Takeaways
- Manage your expectations. ChatGPT is a great tool, but it struggles with complex web elements.
- Double-check everything. Whether working with AI or human developers, quality control is crucial.
- Basic HTML and JavaScript knowledge is essential. Just like AI-generated images require an eye for detail, web development needs a foundational understanding to differentiate good code from bad. Even minimal frontend knowledge helps spot errors and speed up iterations.
- Great for rapid prototyping. If designers can quickly test their ideas, it saves resources and improves the final product.
JetStyle’s philosophy is to experiment with emerging technologies and evaluate their real-world value. We’re not claiming that frontend developers are obsolete, but our designers are eager to expand their skill sets—even at a beginner level. Even basic knowledge of CSS and HTML can help cut costs on tasks like website development.
We’re ready to tackle your business challenges with our lifehacks and cost-optimization strategies. Let’s see how neural networks can help us along the way: orders@jet.style.
More articles about AI from JetStyle: https://jet.style/articles-ai.
