Best practices for using the AI Website Builder

To get the best results from TeleportHQ's AI, think of it as a collaborative design partner rather than a magic wand. The AI works best when you guide it with clear, descriptive instructions and work iteratively.

1. Generating the design system
2. Best practices for editing with AI
3. How to structure prompts
4. Creating new pages

Generating the design system

To get the best results with an AI generated website in TeleportHQ you must first properly leverage the AI creation process where the website’s design system is generated.

The design system contains colors, fonts, sizes, radius, borders and more and will then be used to provide consistency to any future generated element, section or page.

During the creation process it is best to:

• Be as specific as possible in the initial prompt: add absolutely any information you feel is relevant when generating your website. This includes website type (ex: store, presentation, portfolio), industry (ex: tech, ecommerce, fashion, retail, food).

A good way to get a good prompt is to use the Generate from URL button. Add the URL from a similar website in the first step and AI will generate a high-quality prompt based on the information found on the website. After that, tweak the prompt with your specific requirements. This works just as well with the Upload Documents button that uses the information in TXT, DOC or PDF files to generate a prompt.

• Add precise styling instructions: To get a very good result in your AI generated website make sure to include in the prompt some or all of the following keywords: color scheme, spacing, font sizes, weight, radius, shadows, animations.

A good example for a prompt styling follow-up would be: “The main colors of the website need to be #8b45f2, #ffc928 and #1fcc76, the main font is Roboto, I want the border of the buttons to be 16px and make the layout spacing tight.”

Best practices for editing with AI

After the website is created you can use the AI tools available in the editor to further edit your website. This means editing the generated sections, components or individual elements but it can also mean changing the design system itself.

Here are a few best practices for editing websites with AI.

• Work Section by Section: Instead of trying to generate an entire complex page in one go, focus on one section at a time (e.g., "Hero Section," then "Features," then "Testimonials"). This gives you more control over the specific layout and details of each part.

• Iterate and Refine: Use the AI Assistant to create the base structure first and then use the editing capabilities to tweak specific details. For example, generate a "Pricing Table," and then ask the AI to "make the middle card highlighted blue."

• Combine Tools: Use the AI to generate the visual structure, but don't forget you can manually adjust the Design System tokens (colors, fonts) to instantly apply your brand's look to the AI-generated content.

• Use quick prompts to make small edits: Instead of using the AI assistant, when selecting an element you can use the quick prompt above it to give the editor a short instruction to edit that particular element. Mentioning to the AI that it should change all elements of the same type works as well.

• Generate images with AI: when generating the website the AI builder will add placeholder images based on the context from the prompt. In the editor you can manually change these images with your own assets but you can also click on the images and use the Generate with AI image and have AI create a brand new image for you based on your prompt.

How to Structure Your Prompts

The quality of the output depends heavily on the specificity of your prompt. A good prompt usually includes Context, Content, and Style.

The Formula:

"Create a [Section Type] for a [Industry/Context] that features [Specific Elements] and looks [Visual Style]."

Prompt examples:

❌ Weak Prompt:

"Make a hero section." (Result: You will get a generic hero that might not fit your needs.)

✅ Strong Prompt:

"Create a modern hero section for a SaaS startup. It should have a dark background, a large bold headline on the left, a signup form, and a 3D illustration on the right."

❌ Weak Prompt:

"Change the text." (Result: The AI won't know which text or what to change it to.)

✅ Strong Prompt:

"Update the headline to say 'Build Faster with AI' and make the font size larger and bold."

Key Keywords to Use

Including these types of keywords helps the AI understand your design intent:

• Layout: "3-column grid," "split screen," "centered content," "sticky header."
• Style: "Minimalist," "brutalist," "corporate," "playful," "dark mode," "glassmorphism."
• Elements: "CTA button," "accordion," "testimonial slider," "pricing cards," "social icons."

Creating new pages or sections

From the AI Assistant you can create new pages and sections using the two available buttons, New AI page and New AI Section. All of the best practices that you used when creating the website apply to new pages and sections as well. 

• Be specific: Just like for the initial prompt, use of technical keywords for colors, borders, margins, spacing and more.

• Create New Chat: A very good practice when creating or editing new pages or sections is to create a New chat inside of the AI assistant. This will ensure that the context that the AI uses does not mix with edits performed on other pages, sections or elements.

Updated on: 20/02/2026