Articles in this category

GOOD STUFF!

AI Website Builder: General guidelines and best practices

Andrija Krstic Updated by Andrija Krstic

This article provides general guidelines on how to write effective prompts for the builder to achieve the best results while keeping token usage low. Article doesn't include troubleshooting and problem solving suggestions and tips. For troubleshooting guide please visit this page.

Use Instructions widget

Setting up instructions should always be the first step before starting any project. These instructions provide clear guidelines for the AI agent, ensuring it follows the right direction when building both the main and inner pages of the site.

Instructions should define essential elements such as font families, font sizes, site hierarchy, typography rules, and the general color palette. Establishing these guidelines upfront not only keeps the design consistent across the build but also helps save a significant number of tokens during the process.

You can find the Instructions under the Project Settings tab of the builder admin.

Using Element selector tool

Element selector tool is located inside the chat widget (see image below). It allows you to target specific elements on the site that the AI agent should modify.

Furthermore, selecting specific element (such as paragraph, title or image), will open an in-chat editor where you can make modifications without prompting the AI agent to do that. This can drastically save the amount of tokens spent on smaller modifications.

Using Prompt enhancer tool

Prompt enhancer is found inside the context chat widget as in the picture below. It is used for enhancing the prompt to be more AI-friendly. If your prompts are not specific enough or you're concerned that the prompts are not yielding good results, it's probably a good idea to use the tool in order to get the prompts better formatted.

Using Prompt Enhancer tool doesn't carry token usage cost so use it as much as you need. Always make sure to double check the output as AI might not always summarize the prompt exactly the way you needed it.

Attach resources and call resources within the prompt

Builder has built-in functionality for calling resources (such as products) from the Subbly backend. When writing the prompt, you can use "@" to call resources from the backend.

This is handy when creating the product pages and UX flow of the pages. Builder needs to know what product it should call from the backend and how it needs to present and interpret the data. Knowing how to correctly prompt the builder is crucial here.

As an example, let's say that we're looking to build the product page for a product that has surveys attached to it and we'd want the survey to be presented in the multi step (breadcrumb) style format. At the same time, we'd want to include the prepurchase funnel upsell step to the same survey. In that instance, we will need to call those items from the admin. You can find an example prompt below.

Using the Attach files icon will enable you to attach resource (image, font, PDF...) from your local hard drive and include the resource in your build. Currently supported formats are visible on hover. Max size of an uploaded resource is capped at 10MB, although we strongly suggest using smaller and compressed images for better site loading speeds.

You can upload custom fonts to your project or instruct the builder to use publicly accessible fonts from the public repository (such as Google Fonts). An example of uploading the fonts to an existing build, by calling a font publicly available can be found in an image below.

Prompt optimization tactics

General guidelines and rules of thumb when working with an AI agent are listed below. It's important to note that the output doesn't exclusively rely on the quality of the input prompt, but also on the structure of previous prompts/chats (due to machine learning) as well as on site structure (as AI agent will try to find the pattern and apply the same logic previously applied on another segment of the site).

Improve clarity of the prompts

In order for AI agent to execute correctly, it's absolutely imperative that we're able to prompt it in a concise manner. If we need to apply changes within the specific element, it's best to use Element selector tool to isolate the element we're trying to make changes to. If we're looking to apply changes to a specific part of an element (border around the image, for example), we need to specify that in our prompt. If we need changes to only apply on the desktop view (and not on mobile), we also need to be specific about it.

Don't perceive AI agent as a human

One of the most common misconceptions when working with AI tooling is treating the agent as if it were a human being. In practice, the way we naturally converse in real life doesn’t always translate well into effective prompts for AI. This disconnect often leads to errors, misunderstandings, or unsatisfactory results. To avoid these pitfalls, it’s important to recognize that some styles of prompting simply don’t work well. For example, prompts we should avoid include:

  • But that's not what I wanted, the image is still not yellow
  • Ahhhhh, why does this have to be so complex?! I told you to change the hover only on this specific element, not the entire site.
  • Continue working on the previous prompt, you didn't fix it.
Read more on how to fix the errors by utilizing backtracking concept in the Troubleshooting guide.

Understand the changes AI agent is implementing

Builder includes a built-in code view that allows users to review the entire branch and monitor the changes the AI agent is applying to the site in response to prompts. Actively reviewing these changes, both while a prompt is being processed and after execution, is essential for effective troubleshooting and for ensuring the site’s structure remains organized and future-proof. Neglecting this can result in poor site structures, which often cause recurring errors and make it difficult to implement new functionality as the build matures.

Two mandatory things we should always do are:

  1. Reviewing the code and site structure after each prompt
  2. Review the changelog summary of what was done (available on the chat widget sidebar
Familiarity with development or programming languages is not a prerequisite for reviewing the code branch in the editor. What’s more important is applying common sense to understand the changes the Builder has made.

For instance, if your intention was to update the header of a specific page but the change instead modified the header as a shared asset across the entire site, it’s a clear sign that the prompt should be reverted and reattempted. The key is to focus on the site structure and recognize how the most recent changes have affected it.

Understanding Subbly backend vs. Builder's capabilities

Understanding the scope of the AI Builder’s capabilities is essential for setting the right expectations. While the AI Builder is powerful and able to create sophisticated builds (including solutions for flows that were once considered highly complex) it does have limitations. In particular, it cannot perform backend tasks or write data directly into the Subbly admin.

What the AI Builder can do

  • Build product pages that fetch product information from the backend, while allowing full customization of the checkout funnel and layout.
  • Create customized survey flows with conditional branching, pulling data into the checkout.
  • Integrate the frontend with Subbly’s backend or external applications (e.g., by installing tracking tools on site pages or passing form data to Subbly or an external system).
  • Design custom layouts that fetch and display data from the Subbly backend (such as funnels or bundles).

What the AI Builder cannot do

  • Automatically create backend products based on a builder prompt.
  • Write or modify customer subscription/order data via frontend prompts (e.g., “apply coupon ABC to a customer’s subscription after checkout”).
  • Automate email campaigns triggered by site activity (e.g., “send a retargeting email when a visitor lands on /main-product”).

If you’re unsure whether the AI Builder can handle a specific functionality, please reach out to the support team for guidance.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free