> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to edit an AI website manually

Here are a few ways in which you can edit an AI generated website if you do not want to consume AI tokens but want a more manual approach to editing.

| [1. AI Generated Design Variables](#2-2ai-design-variables) | [2. CSS Classes and manual editing](#2-4css-classes-and-manual-editing) |

## 1. AI Generated Design variables

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

You can edit the design variables to make project-level customizations easily. To do this:

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

![Editing tokens to restyle the website](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/2-ai-editing-tokens_14ovka4.gif)
## 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

![Editing CSS classes inside of the AI website builder](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/4-ai-editing-classes_figlyb.gif)

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

![Manually editing elements in the project](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/4-ai-editing-manually_1wy5uzk.gif)