How to create a layout from a screenshot or image
To create a layout from a screenshot in TeleportHQ, open the AI Assistant, click Attach image next to the message box, and pick your image. Then ask, for example, Create this layout using my design system. The assistant builds the section on your page. You can attach up to 3 images per message.
Before you start
- The AI Assistant uses AI tokens. Images make a message larger, so it costs more. See What uses AI tokens, and how much?.
- Use a PNG, JPEG, GIF or WebP image up to 20 MB.
- Recreate one section at a time for the best result: crop your screenshot to the hero, the pricing table or the footer, rather than a whole page.
Steps
- In the TeleportHQ editor, above the top right of the canvas, click AI Assistant.
- On the canvas, click the section you want to replace, or the place where the new section should go. It appears as a chip above the message box.
Next to the message box, click Attach image, then pick your screenshot. You can also drag the image onto the chat (Drop image to attach). A thumbnail appears above the message box.
- In the message box, describe what you want. For example:
Create the layout from this image, using my project's colors and fonts. - Press Enter.
Check that it worked
The TeleportHQ AI Assistant shows an AI Edit card marked Applied, and the new layout appears on the canvas. Compare it with your image, then ask for fixes in the same chat, for example Make the cards three columns, like in the image.
Prompt ideas
- Match your whole site to an image first:
Based on the attached image, set up my design system: colors, heading and body text styles, spacing, borders, corner radius, shadows and animations.The assistant asks before changing the design system (Confirm design change). Later sections then reuse these values. - Then build section by section:
Create the layout from the image based on the current design system. - Add details the image can't show: hover states, animations, what a button should do. For example:
The cards should lift slightly on hover, and the button should open the contact page. - Put the picture itself on the page:
Add the attached photo as the background of the hero section.The assistant saves it to your assets (Image uploaded: {name}).
Dictate instead of typing
Click the microphone (Dictate with your voice) next to the message box and speak your request. The microphone only shows in browsers that support speech recognition.
Troubleshooting
The image doesn't appear after I pick it The file was too big, the wrong type, or you already attached 3 images. Nothing is shown in that case. Use a PNG, JPEG, GIF or WebP file under 20 MB, and remove an image (Remove image) if you have 3.
"The attached image is too large. Please crop or compress the image and try again." Crop the image to the part you need, or save it at a smaller size, then attach it again.
The Attach image button is greyed out You have attached 3 images already (tooltip Maximum 3 images), the assistant is still working, or the chat has reached its memory limit. See Why does the AI Assistant say the chat is too long?.
"Microphone access denied. Enable it in your browser settings" Allow microphone access for TeleportHQ in your browser's site settings. Other voice messages: "No microphone found", "Voice input needs an internet connection", "No speech detected. Click to try again".
The result doesn't look like my image Ask for specific fixes in the same chat, one at a time. If the design is complex, crop it into smaller parts and recreate each part separately.
Good to know
- The assistant rebuilds the layout with real, editable elements. It doesn't paste your screenshot as a picture unless you ask it to.
- Images are resized before they are sent. Each image also takes up room in the chat's memory, so long chats with many images reach the limit sooner. See Why does the AI Assistant say the chat is too long?.
- Only reuse designs you have the right to use.
- To bring in a complete design from Figma instead, see How to turn a Figma design into a website.