How to style an AI generated website, AI Asistant and more.

Here are the tools at your disposal to turn the newly AI generated website into a version of your website that is ready to be published.

1.AI Assistant

The AI Assistant is a fully conversational AI agent that empowers you to edit any part of your website. When making any changes the assistant will use the design system that was generated when you created the AI website to keep the design consistent.

There are almost no limits to what you can ask it to do. **Anything that includes HTML, CSS or Javascript **is within the capabilities of the Assistant. This means that you can ask the Assistant to: create layouts (cards, grids, etc), perform edits, add effects and animations, ask it about TeleportHQ capabilities, ask it to improve the code, even have it tell a joke. 

To use the AI Assistant:

• Click on the Show AI Assistant button in the Toolbar **at the **bottom of the Canvas, this will open the Assistant window
• Click on the element or section you want to edit; this will add it to the Assistant’s context (target).
• Type the instructions (edit, improve, change something inside of the context) for the Assistant and press the Enter key
• After the new code is generated, above the preview you will have two options:

1.Add to selection button - Will insert the newly generated elements inside of the context

2.Replace original button  - Will replace the context with the newly generated elements

To improve on the code that was generated you can click on the Add to chat context button and any changes you ask of the Assistant will be made to that exact code.

2.AI Generated Tokens

During the website generation process, based on the description and styling decisions you make, a set of tokens is created. These token values include colors, fonts, sizes, spacing, animations and more.

You can edit these tokens to make project-level customizations easily. To edit a token:

• Click outside of the Canvas
• Go to the Right panel
• Click on any token and edit it
• Click the Update button

3.Ask AI Functionality

The Ask AI Functionality allows you to make quick edits to text, image and video elements at page level and individual level.

1. Page level - To make changes at page level click on the Ask AI button above any page. There you will have a few presets for text and images as well as the option to write your own prompt.
2. Individual text element - Click on any text element and then use the Rewrite with AI button. Similarly to page level you will have presets as well as a prompt field that you can use.
3. Individual image and video elements - Click on any image or video element and then use the Regenerate icon button to either Re-run the image or video generation based on the original prompt or give it a different instruction.

4.CSS Classes and manual editing

To make the websites as optimized as possible, AI generates CSS classes that are reused throughout the entire project. You can make edits to the classes to make changes everywhere the CSS classes are used and additionally. you can make manual edits to every element of the website, giving you complete control.

1. How to edit an AI generated CSS class:

• Select an element that has a CSS class
• Go to the Right panel -> Classes
• Click on the Edit class button (diagonal right arrow)
• Make changes to the Class

2. How to make manual edits to an element in your AI website:

• Select any element in your website
• Use the properties in the Right panel to make changes to that element

Updated on: 31/10/2025