Vibe Coding in Onepage

With Onepage AI 2.0 (Vibe-Coding), we are launching a completely new way to develop in Onepage, a method that bridges the gap between AI-powered code generation and visual editing.

For the first time, you can create fully customizable, React-based components and sections directly within your Onepage project via "Vibe-Coding." These appear right alongside your regular, visually editable content on the same page.

This is how you combine brilliant design implementation with full control. No other builder or vibe-coding tool offers this capability.

This feature is currently only available via the beta version: https://beta.onepage.io

Please ensure that you are actually in the beta environment. The new AI features are not yet available to you under app.onepage.io.

If you want to make changes to a website where you have already used features from the beta version, this is only possible via the beta link (beta.onepage.io) until the beta phase is completed.
​

Comparison:

Until now, Onepage AI generated pages and sections using our standard building blocks. This worked well but (for good reason) had its limits: it wasn’t possible to create truly custom designs or interactions beyond our element library.

That’s changing fundamentally. With Vibe Coding in Onepage, you now get the same creative capabilities as standalone AI code generators (such as Lovable, Bolt, or v0), without losing what makes Onepage unique: the visual editor, GDPR consent management, forms & funnels, high-quality templates, and the ability to hand over websites to clients who can manage them independently.

Why this is a big step:

The feature is powerful, but it is still in the beta phase. Please note the following points:

To create a section using AI 2.0, please proceed as follows:

Step 1: Log in to Onepage

Log in to Onepage at beta.onepage.io.

Step 2: Open an existing project or create a new one

You can either create a new project or open an existing project where you want to start with Vibe-Coding.

Step 3: Add a new section

Once you have opened your desired page, you can add a new section by clicking on the blue "+" icon and then selecting Vibe Section.
​

Step 4: Write a prompt

Now you can insert your prompt into the input field and describe exactly what the AI should create. The clearer and more detailed your prompt is, the better the result will be. ​

The AI can create not only layouts but also implement animations, effects, interactive elements, and completely individual designs. ​

For example: "Create a spectacular hero section in 'Matrix' style. The background should be a deep black, digital void where a vertical rain of glowing neon green code characters (Digital Rain) falls. The design must look futuristic and cyber-oriented, with subtle glitch effects and a high-tech aesthetic. In the center, place a prominent call-to-action button that appears through an animation like a sudden system popup and has a pulsing neon glow effect. Use a monospaced font (like in terminals) for the headline to reinforce the hacker feel. The entire section should feel like an entry into a digital simulation."

The AI analyzes your prompt and automatically generates the corresponding code for your section from it.

Step 5: Review the result

The AI will inform you as soon as the section has been successfully created. You will receive a brief overview of what was generated, as well as the available settings ("Controls"), which allow you to adjust content such as text, colors, or spacing yourself.
​

In the live version, the section would look like this:
​

You can find out how to make further changes to the section further down in the article in the section "Making subsequent changes."

You can also expand or adapt existing sections.

To do so, proceed as follows:

Step 1: Log in to Onepage

Log in to Onepage at beta.onepage.io.

Step 2: Open an existing project

Open your existing project and scroll to the section where you want to start Vibe-Coding.

Step 3: Add an element

Hover your mouse between elements at the spot where you want to insert the new element. Then click the "+"-symbol and select Create with AI.
​

Step 4: Write a prompt

Now you can insert your prompt into the input field and describe exactly what the AI should create. The clearer and more detailed your prompt is, the better the result will be. ​

For example: "Create a modern, clean opening hours section. Display the opening hours clearly as a list:

The AI analyzes your prompt and automatically generates the corresponding code for your section from it.

Step 5: Review the result

The AI will inform you as soon as the section has been successfully created. You will receive a brief overview of what was generated, as well as the available settings ("Controls"), which allow you to adjust content such as text, colors, etc., yourself.
​

In the live version, the section would look like this:
​

You can continue working with the AI and make changes at any time. Two options are available for this:

Option 1: Edit content via Controls

You can manually adjust text, URLs, colors, effects, or spacing (depending on what was created) at any time afterward, without the AI having to regenerate it for you. ​

To do this, simply click on the section created with Vibe-Coding. The individual elements will be displayed there, which you can then easily edit.

Option 2: Edit Code

If you want to adjust the layout, add or remove animations, or supplement content, you can simply tell the AI directly what should be changed, a complete restart is not necessary for this. ​

You can also specifically request new control options, for example, if you want to adjust the spacing at the top and bottom yourself or if you need other individual controls. ​

To do this, simply click on Edit Code and describe to the AI which adjustments should be made. ​

In our example, we told the AI:

"Please adjust the existing hero section as follows: The Digital Rain should not fall from top to bottom, but instead rise from bottom to top, so the effect looks as if the code is ascending from the depths of the digital void. ​

Additionally, add controls for spacing so that I can flexibly adjust the top and bottom spacing myself (e.g., padding/margin of the section). All other existing design elements, animations, and the 'Matrix' style should remain unchanged."
​

The AI has now adjusted the "Digital Rain" so that it rises from bottom to top. Additionally, another category has been added to the controls, allowing the spacing to be adjusted individually.
​

If the AI does not understand your instructions directly, you can simply upload a screenshot and show it exactly what you mean.

To achieve the best possible results with vibe coding, a clear and detailed description of your idea is most helpful. The more precisely you explain what you want to the AI, the better it can implement the desired result.

Vibe-Coding is a very powerful beta tool that allows you to quickly create creative and technical website elements. The possibilities are virtually limitless; a clear description of your idea is the decisive factor.

​

The better you communicate with the AI, the stronger the results will be.
​

💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂