Help Centre
Home AI AI App & Site Builder

Your first project: From idea to finished website

Valid for AI App & Site Builder.

This article uses an example to explain how to create a website using the AI App & Site Builder.

Requirement

You have already ordered an AI App & Site Builder package.

Open AI App & Site Builder dashboard

  • Log in to your IONOS account.
  • Click on Menu > Web Projects in the title bar.
  • Click on Set up Website within the relevant tile for your AI App & Site Builder project. The AI App & Site Builder interface will open.
  • Click the Start a new project button to create a new project.

If you have already created web projects, select them below the AI App & Site Builder chat window.

Give the AI App & Site Builder instructions

Communication with the artificial intelligence behind the AI App & Site Builder takes place in normal, everyday language. Please bear in mind the following recommendations when formulating your instructions (prompts):

  • Identity and sector: Who are you and what exactly do you do? For example: “Modern physiotherapy centre“ rather than simply ‘practice’
  • Target audience: Who is the web project intended to appeal to? For example: “young families”, “B2B companies”, “older people with chronic pain”
  • Unique selling point (USP): What makes you special? For example: “Focus on sustainability”, “24/7 emergency service”, “locally sourced ingredients”
  • Desired sections and features: What content is particularly important to you? For example: “Appointment calendar”, “About us”, “Contact form”
  • Style and atmosphere: What visual and emotional impact should your web project have? For example: “minimalist and professional”, “warm, welcoming, and friendly”

In summary, your instructions or prompt would look as follows. Replace the text in brackets with your own details.

Create a website for [identity and industry]. Our primary target audience is [target audience]. What makes us special is [unique selling point]. The website must include the following sections: [sections and features]. The visual and emotional style should be [style and atmosphere].

For an independent car repair workshop, the AI App & Site Builder prompt might look like this:

Create a website for an independent car repair workshop with no brand affiliation. Our primary target audience is price-conscious customers. What sets us apart is our specialisation in older cars and classic cars from before 2000, which we also restore and sell ourselves. The website must include the following sections: About Us, a gallery with photos of the workshop and completed restoration projects, a contact form, and a booking form with a calendar showing available workshop appointments. The visual and emotional style should be professional and elegant.

Create and publish a web project

Once you have submitted instructions via the AI App & Site Builder chat window, the screen will be split into two sections. On the left-hand side, you will find the chat window, where you can enter further instructions and receive information from the AI App & Site Builder. To the right of this, you will find a preview of the web project you have created.

Above the preview, on the right-hand side, you’ll find a toolbar offering further options:

  • Desktop view and mobile view: This is what your website will look like once published.
  • Refresh
  • Open preview in new tab
  • Version history: Jump back to a previous version of your web project. This allows you to try out different instructions without fear of data loss, and without the need for time-consuming backups.
  • Publish: Publishes your web project, either at an IONOS address, or at your own domain address.

Hover your mouse pointer over the icons to display the respective function.

Editing content in a targeted manner

To edit content, such as your contact details, use the toolbar at the bottom of the preview window:

  • Point & ask: Select an element to change it using instructions in the chat window, e.g. “Change the shape of the button to a star”. If you hold down the CTRL key while selecting, you can select multiple elements.
  • Edit text: Click on a text element to edit it directly.

Carry out changes and adjustments

For global changes and adjustments to your web project, enter your instructions directly into the chat window without selecting any elements. For example: “Use a sans-serif font” or “Add a new background image to every page”.

Additional information

Content