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.

With Vibe-Coding, you can create fully customizable components, sections, or entire pages directly within your Onepage project. These are displayed seamlessly 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.

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:

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

Log in to Onepage: Onepage Login

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

Once you've opened the page you want, you can add a new section by clicking the blue "+" icon and then selecting Vibe section - Create with AI.
​

When you create a new page, click + Add section and then select Vibe section - Create with AI.
​

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. ​
​
We've also written a helpful article on this topic, where you'll find tips on creating prompts: Vibe Coding: How to write effective prompts for better results

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

For example:

Since you're only creating one section, the "Vibe section" tab must remain selected in this case.

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

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 adjust text, URLs, colors, effects, or spacing (depending on what was created) yourself at any time using the controls, without the AI having to regenerate it for you.

​

To do this, simply click on the section created with Vibe coding. There, you’ll see the individual elements, which you can then easily edit.
​

If you want to customize the layout, add or remove animations, or add content, you can simply tell the AI directly what needs to be changed, there’s no need to start over from scratch.

​

You can also request specific new control options, such as adjusting the top and bottom margins yourself or adding other custom controls.

​

To do this, simply click on Chat in the upper-left corner of the section and tell the AI what changes you want to make.

​

​In our example, we told the AI:

​The AI has now adjusted the "Digital Rain" so that it rises from the bottom up. Additionally, a new category has been added to the controls that allows you to adjust the spacing individually.
​

If the AI doesn't understand your instructions right away, you can simply upload a screenshot to show it exactly what you mean.
​

Once you're satisfied with your section, you can move on to the next one and create it the same way as before.​

Alternatively, you can click the "+" icon in the top bar of the chat to add another section and create it right away.
​

This way, you can switch between the different sections afterward and will always be in the right chat to make further adjustments.

You can also expand or adapt existing sections. To do so, proceed as follows:

Log in to Onepage: Onepage Login

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

Use your mouse to move between the elements to the spot where you want to insert the new element. Then click the "+" icon and select Create with AI.
​

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:

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

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.
​

You can adjust text, settings, colors, or effects (depending on what was created) yourself at any time using the controls, without the AI having to regenerate it for you.

​

To do this, simply click on the section created with Vibe coding. There, you’ll see the individual elements, which you can then easily edit.
​

If you want to adjust the layout, add or remove animations, or add content, you can simply tell the AI directly what needs to be changed, there’s no need to start over from scratch.

​

You can also request specific new control options, such as adjusting the top and bottom margins yourself or adding other custom controls.

​

To do this, simply click on the element you created, then click on Chat, and describe to the AI what changes you want to make.

In our example, we instructed the AI:

The AI has now aligned the text to the left. In addition, another category has been added to the controls that allows you to adjust the spacing individually.
​

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

With Vibe Coding, you can not only create individual sections but also generate entire pages with multiple sections all at once.​

All you have to do is describe to the AI how your page should be structured, what content it should include, and what style you want. The AI will then automatically create the entire page structure for you.

First, create a new page in your project by clicking the blue "Create" button in the upper-right corner.

Click the button: Create page with AI.
​

Alternatively, you can click + Add Section and then select Vibe Section - Create with AI.
​

To do this, remove the "Vibe Section" tab.

Now you can explain to the AI exactly which sections your page should include.

Sample prompt:

The AI first analyzes your prompt and creates the first section of your page. It then asks you if you're satisfied with the style, colors, animations, and overall design.

If you'd like to make any further adjustments, you can continue writing directly with the AI and have it make changes until the result meets your expectations.​

Once you're satisfied, you can simply tell the AI to continue. It will then automatically generate the remaining sections of your page in the same style, ensuring a consistent design and smooth transitions between the individual sections.

The AI will notify you as soon as your page is ready. You'll receive a brief overview of what has been generated, as well as the available settings ("Controls") that you can use to customize content such as text, colors, etc., on your own.​

The page would look like this when live:

You can adjust text, settings, colors, or effects (depending on what was created) yourself at any time using the controls, without the AI having to regenerate it for you.​

To do this, simply click on the section you want to edit. The individual elements will be displayed there, and you can easily edit them.
​

If you want to make changes to the entire page, click on Chat in the top-left corner of any section, then select the "Vibe Section" tab or the section you've chosen. ​

You can then use a prompt to tell the AI what adjustments to make to the entire page.​
​
​For example:

You can also make changes on a section-by-section basis and add any controls you like. Scroll to the section you want to edit, click Chat, and enter your prompt. ​

Alternatively, you can click Chat on any section and then select the section to which your request applies.​​

For example:

The AI has now arranged the timeline horizontally. In addition, another category has been added to the controls that lets you customize how the steps are displayed.
​

​If the AI doesn't understand your instructions right away, you can simply upload a screenshot to 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.

With Vibe Coding, you can create almost anything, from simple components to complex applications. The better you describe your idea, the more impressive the results will be. This allows you to build individual components, complete hero sections, or even complex applications directly from a prompt.
​
​Here are two sample projects to inspire you:

To get started, we also recommend our Prompting Guide. In it, we use many examples to show you how to achieve even better results with Vibe Coding.
​

💡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! 🙂