With the Vibe Coding feature, you can not only create sections or pages, but also generate entire interactions, layouts, and website features.
In the following examples, we’ll show you typical use cases that you can try out right away.
Language Switcher
With AI, you can have an automatic language switcher created for your website.
However, this only works if the entire page was created using Vibe Coding. This feature is not available for individual classic sections. The AI creates separate language versions for each section (e.g., German & English).
Here’s how to do it:
Step 1: Open the page
Open your page in Onepage.
Step 2: Open the AI chat
Click Chat in the top-right corner of any section in Onepage, then remove the selected section by clicking the "X" so that the entire page, not just a single section, is included in the chat context.
Step 3: Enter your prompt
You can now formulate your prompt, describing your requirements in detail.
Sample prompt:
"Create a user interface with a language switcher in the upper-right corner of the page. The language switcher should support the following languages:
German (DE), English (EN), Spanish (ES), French (FR)
Requirements:
Dropdown menu or compact button (DE / EN / ES / FR)
Fixed in the top-right corner (sticky/fixed position)
When the language is changed, the entire page content should update accordingly
Optional: smooth animation when switching
The active language should be visually highlighted"
📌 Please note: In some cases, the AI may initially only generate a suggestion on how to implement the desired change. You can then review and confirm this suggestion.
The exact implementation and the AI’s responses may vary, as they depend on the structure and specific circumstances of each page.
Step 4: Check the results
Once the AI has finished the conversion, you can test the language switcher on your page.
If the result doesn't quite meet your expectations yet, you can give the AI further instructions. It often takes 2-3 additional iterations to achieve the desired result.
Be as specific as possible when describing what needs to be adjusted. Screenshots can also be helpful, as they allow the AI to better understand the changes you want.
Step 5: Make further adjustments
Once the language switcher has been successfully created, you can ask the AI at any time to add more languages or set up additional editing options.
It’s especially handy to have the AI create what are called controls. This allows you to edit the text for each language directly in the editor later on, without having to ask the AI to do it.
Example prompt:
"Please add Italian (IT) and Dutch (NL) to the language switcher. Also, create controls for all texts so that I can edit the content for each language directly in the editor. The existing translations should be preserved."
📌 Please note: You can also ask the AI to make specific sections of your page multilingual or to improve existing translations.
Optimized for Mobile, Tablet and Desktop
With AI, you can optimize the layout of your sections specifically for different screen sizes. You can specify how elements should be displayed on desktop, tablet, and mobile devices.
Possible adjustments include, for example:
Arrangement of elements
Order of images and text
Font sizes
Spacing (padding & margin)
Number of columns
Size of images, icons, or buttons
Content alignment
Visibility of individual elements on specific devices
Step 1: Select a section
Scroll to the desired section and open the AI chat.
Step 2: Describe requirements
Describe as precisely as possible how the section should appear on different devices.
Example 1: Customize the timeline
"The timeline should continue to be displayed vertically on desktop. On tablets and mobile devices, it should be converted to a horizontal timeline that can be navigated by swiping or scrolling."
Result:
Example 2: Changing the balance
"On desktop, the main image should remain large and prominent. On tablet, the image should be scaled down and displayed less prominently. On mobile, the image should appear only as a background element with slight transparency."
Result:
Step 3: Check the results
Publish the page and then test how it looks on different devices or screen sizes. Alternatively, you can use your browser’s developer tools to simulate different devices:
To do this, open the developer tools (F12 or Ctrl + Shift + I on Windows, Cmd + Option + I on Mac) and then enable device view. There, you can select different screen sizes, such as smartphone, tablet, or desktop and test right away how your page appears.
If the result doesn’t quite meet your expectations yet, you can provide specific feedback to the AI and describe exactly what needs to be adjusted.
Step 4: Create responsive controls
If you want to control the display yourself later on, you can ask the AI to create the appropriate controls.
Sample prompt:
"Create responsive controls for this section. I want to be able to configure the alignment, number of columns, font sizes, and spacing separately for desktop, tablet, and mobile devices using the controls."
This allows you to adjust many settings later directly in the editor without having the AI make changes again.
📌 Please note: Several iterations may be necessary. The more detailed your description (feel free to include screenshots), the better the result will be.
Uniform background for the entire page
You can create a continuous background for multiple sections or the entire page.
Here’s how to do it:
Step 1: Open the page
Open your page in Onepage.
Step 2: Open the AI chat
Click "Chat" in the top-right corner of any section in Onepage, then deselect the section using the "X" so that the chat takes into account the entire page, not just a single section.
Step 3: Enter a prompt
Now you can define the desired background directly using a prompt. Be as clear and specific as possible when formulating your request.
Example prompt:
"Use the following image as a continuous background for the entire page. The background should extend across all sections and be visible throughout. The individual sections should remain clearly separated from one another but should visually ‘rest’ on this shared background image and relate harmoniously to it."
You can upload the image you want directly in the chat, either:
by copying and pasting it directly into the chat window, or
by tapping the "+" icon on your device to upload it.
📌 Please note: You can not only use your own images, but also have the AI generate the background directly. To do this, describe the desired background as precisely as possible, for example:
Colors
Moods
Lighting conditions
Effects (e.g., blur, glow, noise)
Animations or a sense of movement, if applicable
The more detailed your description is, the better the AI can generate a background that matches the page.
Chatbot as a Website Widget
With Vibe Coding, you can have your own chatbot (not AI-based) created for your website. It can provide advice to visitors based on the information you provide in the prompt.
For example, the chatbot can:
answer frequently asked questions,
provide opening hours or contact information,
redirect visitors to forms or subpages,
provide information about products or services,
or serve as a general point of contact on your website.
The more detailed your prompt is, the better the chatbot can respond to your visitors.
Here’s how to do it:
Step 1: Open the AI Chat
Click Chat in the top-right corner of any section in Onepage and close the selected section using the "X" so that the entire page, not just a single section, is included in the chat context.
Step 2: Enter the prompt
Now describe as precisely as possible how you want your chatbot to behave.
This includes, for example:
Company name
Contact information
Business hours
Products or services offered
Frequently asked questions
Desired tone (e.g., friendly, professional, or casual)
How to handle unknown questions
Redirects to forms or specific pages
The chatbot’s position on the website
The more information you provide to the chatbot, the more helpful and natural its responses will be.
Sample prompt:
"Create a chatbot for my Italian restaurant. The chatbot should provide visitors with friendly, natural, and helpful advice, just as if a real employee were responding.
Basic information about the restaurant:
Name: Neo Crust
Address: Hackenstraße 7, 80331 Munich
Hours: Daily 12:00 PM - 11:00 PM
Reservations: exclusively via an online form
Allergies: gluten-free options available
Integration on the website:
The chatbot should be available throughout the entire website and integrated as a fixed element, e.g., as a chat widget in the bottom right corner of the page. It should be possible to open it at any time, and it should remain accessible at all times.
The chatbot should:
come across as friendly, warm, and inviting
use natural language (no bullet-point answers)
provide advice rather than just information
use short, easy-to-understand sentences
actively assist and guide users through the process
Example of response behavior:
If someone asks, "What are your hours of operation?"
the bot shouldn’t just reply, "12:00 PM–11:00 PM"
but rather, for example: "We’re open daily from 12:00 PM to 11:00 PM, so you can visit us for both lunch and dinner."
Typical Questions (including desired behavior):
Hours & Visits
Explain in a friendly manner, provide additional information if necessary
Mention the restaurant’s atmosphere
Menu / Food
Mention Italian dishes (pizza, pasta, antipasti, etc.)
If unsure, offer general advice rather than specific recommendations
Allergies / Diet
Actively highlight gluten-free options
Respond responsibly and carefully
Example: "Yes, we offer gluten-free options. Just let our team know when you place your order, and we'll be happy to help."
Reservations:
Always actively direct customers to the reservation form
Do not accept direct bookings via chat
Example: "You’re welcome to reserve a table directly through our reservation form; I’d be happy to direct you there."
Unknown Information:
Don’t make anything up
Stay friendly
Refer them to a contact option
Example: "I don’t have any confirmed information on that right now. It’s best if you give us a quick call at +49 89 123456, and we’ll be happy to help you right away."
Additional typical questions
Vegan/vegetarian options (Yes)
Popular pizzas (Pizza Hawaii & Pizza Tonno)
Outdoor seating (Yes)
Children’s meals (Yes)
Walk-ins vs. reservations (Walk-ins are possible, for groups of several people and after 8:00 PM, we recommend making a reservation)
Delivery or dine-in only (dine-in only)
The chatbot should:
Actively guide visitors toward making a reservation
Reduce uncertainty
Convey a warm, Italian restaurant atmosphere
Come across as a genuine host"
📌 Please note: This may take a little while, please be patient.
Step 3: Test the Chatbot
Once it's finished, you can test your chatbot right on the website and ask it various questions. This way, you can check whether it responds as intended and knows all the important information.
If you're not yet satisfied with the way the chatbot writes, or if any information is missing, you can add or adjust it at any time in the AI chat.
Simply give the AI new instructions, for example, regarding tone, response behavior, or additional information the chatbot should know. You can continue to optimize the chatbot as often as you like until it meets your exact expectations.
Step 4: Make changes
Even after you've created your chatbot, you can continue to customize and optimize it at any time directly through the Controls.
Depending on the chatbot, various settings are available there, such as:
Change the name of the chatbot / assistant
Customize the welcome message
Edit company or restaurant information
Add a reservation or contact link
Add, remove, or edit quick replies
Customize the colors of the chat window
Set the position of the floating button (e.g., bottom right or bottom left)
Additional custom settings depending on the chatbot’s feature set
This allows you to make many changes directly through the interface without having to completely recreate the chatbot. To do so, simply click the chat icon in the editor and make the changes.
If you want to make major adjustments to the behavior or responses, you can always add them via the AI chat.
Tab Switch
With Vibe Coding, you can create interactive tabs that display content clearly on a single page. Visitors can switch between different categories with a single click, without having to reload the page.
This feature is particularly useful when you need to display a lot of information in a space-saving way.
Examples:
Gym weekly schedule (Monday through Sunday)
Pricing overview (Basic / Pro / Premium)
Class offerings by day or category
Menu organized by appetizers, main courses, and desserts
Services organized by topic
Frequently asked questions by category
Step 1: Create a new section
First, create a new section where you want the tabs to appear. To do this, click the "+" icon between two existing sections and add a new section.
Then select the "Vibe section - Create with AI" option to have the section generated directly by the AI.
Step 2: Formulate the prompt
Describe as precisely as possible how your tab section should be structured.
Among other things, you can specify:
which tabs should be included,
what content should appear behind each tab,
animations when switching tabs,
icons,
hover effects,
and how it should behave on mobile devices.
Example prompt:
"Create an interactive weekly schedule for a gym. There should be tabs for Monday through Sunday. When a day of the week is clicked, the corresponding classes should be displayed along with the time, class name, and instructor.
The active tab should be highlighted in color. A modern, smooth animation should play when switching between tabs. The design should be modern, clear, and responsive, so that the tabs are easy to use even on smartphones."
Step 3: Make Changes
You can customize the tab section you created either through the AI chat or directly via the controls.
Depending on the tab’s structure, you can directly edit the following content in the controls, among other things:
Courses or content within the tabs
Times and schedules
Names
Colors and design settings, etc.
Depending on exactly what you’ve created. To do this, click on the section you’ve created and make the desired changes:
This allows you to make quick adjustments without having to use the AI chat every time. If further changes are needed, you can also describe them directly in the AI chat, for example:
Add more tabs
Change content
Adjust colors
Expand animations
Add icons
Optimize spacing or font sizes
Add more controls
This way, you can customize the tab area step by step to suit your preferences.
Generate Images
You can also use AI to create images. If you mention in the chat that you want to generate an image, the system automatically uses a built-in image generation feature (image generation with the NanoBanana model).
This allows you to create custom images for hero sections, landing pages, advertising campaigns, or other sections without having to use external tools.
Here’s how to do it:
Step 1: Open the AI chat
It depends on where and how you want to use the image. If you want to generate the image as a background for an existing section (e.g., header, hero section, or a specific layout), go directly to that section’s AI chat.
If, on the other hand, you want the image to be a standalone element in a new section (e.g., just a single image without any other content), first create a new section and open the AI Chat there.
This ensures that the image is created exactly where you want to use it later on your page.
Step 2: Specify that an image should be created
Clearly state that an image should be generated (e.g., "Create an image…", "Generate a hero image…").
Step 3: Enter the prompt
Describe the desired image in as much detail as possible.
Example prompt:
"Create a high-quality, futuristic image of an office setup featuring an elegant laptop on a minimalist desk. Abstract UI elements, charts, and data visualizations float around the laptop in a modern hologram style. Cinematic lighting, blue-and-white color scheme, clean, high-end tech aesthetic, no text."
Result:
Step 4: Review and adjust the image
After the image is generated, you can have it optimized right in the chat, for example, by giving instructions such as:
"Make the image brighter and more modern."
"Reduce the colors and make it more minimalist."
"Add more contrast and a higher-quality lighting atmosphere."
"Change the style to a premium tech/SaaS look."
"Make the image less cluttered and reduce the details in the background."
"Adjust the image so there’s more white space on the left for a headline."
"Make it more realistic and remove overly strong AI effects."
"Create a softer, more natural lighting."
This way, you can customize the image step by step to match your vision exactly.
📌 Please note: The image will first be saved to your library. However, you can also instruct the AI to use it directly as the background for a section or to automatically insert it as an image into your page.
💡Do you have any feedback about 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! 🙂