Articles on: AI Website Builder

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.

How to add an image as a reference
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.

Updated on: 21/05/2026

Was this article helpful?

Thank you!