> ## 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 create website layouts or elements from an image

TeleportHQ’s powerful AI Assistant allows you to generate entire sections, components or elements based on a reference screenshot or image.

| We recommend building one section at a time when creating a website based on images in order to get the best results. 

1. [How to add an image as a reference](#2-how-to-add-an-image-as-a-reference)
2. [How to create your prompt](#2-how-to-create-your-prompt)

## How to add an image as a reference

To create something in TeleportHQ from a screenshot or image you will need to use the AI Assistant.

* **Open the AI Assistant** from the button in the **top right corner of the canvas**
* Click on the **Attach image button** next to the send prompt button in the **bottom right of the AI Assistant window**
* **Write the prompt** for the AI to create a layout or element from the attached image

## How to create your prompt

There are several ways to use the AI Assistant when attaching a reference image. Here are a few prompt suggestions you can use to get the best results. 

*“Based on the attached image, set up a design system to use when creating sections. Make sure the design system contains colors, text, including headings, spacing, borders, radius, shadows and animations.”* - Using a prompt like this will generate a list of variables (tokens) that the AI will later use to create consistent components from images.

*“Create the layout from the image based on the current design system.”* - With this prompt, the AI will attempt to generate the overall layout from the image but use the same variables used previously, to maintain design consistency.

| The more information you provide to the AI Assistant, the better the results will be. Be precise when adding information about animations, hover states, interactions, scripts and more. 

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/image-to-code_13h0le1.gif)