The 8 most common problems after an AI builds your website, and the fix for each

Find the symptom that matches what you see, read the reason, then copy the ready-made fix prompt from the help page and paste it into your AI tool. Fill in anything in [square brackets] first. Describe what you actually see in your own words; the tool fixes problems better when it knows the symptom.

Usually the animation library is not loaded, the script runs before the page elements exist, or the visitor's device has "reduce motion" turned on, in which case the page deliberately shows a calm version.

• Check that GSAP and its plugins are installed and registered before use.
• Check that every selector in the script matches an element on the page.
• If smooth scrolling is used, check it is connected to ScrollTrigger.
• Check your own device's reduce-motion setting, and see how reduced motion is handled.

The fix prompt asks the AI to check these in order and to fix them without changing any motion values.

Fixed widths, huge headings and 100vh full-screen sections often overflow on small screens. The fix is to make sizes flexible, not to change the design.

• Use clamp() for font sizes and spacing.
• Replace fixed widths with max-width: 100%.
• Use 100svh instead of 100vh for full-screen sections.
• Find the one element that makes the page wider than the screen and fix that element.

The template's fonts are not loading, so the browser shows a fallback. Fonts have to come with your site (self-hosted files) or be linked from a font service. Ask the AI to load exactly the fonts named in the tech stack, with font-display: swap, and to check in the network tab that every font file loads.

Templates use placeholder photos. Your files work best when they have the same shape (aspect ratio) as the placeholders, so the crop stays right. Ask the AI to list every image slot and the file it expects, keep images under about 300 KB, use WebP or JPG, and write clear alt text.

In the template viewer, "Edit on page" lets you click an image and choose your file to see how it crops before you write any prompt.

A new page should reuse the same header, footer, fonts, colours and motion, so the site feels like one piece. Ask for the page name, its path, what it should say, and a link in the main navigation, and say that the home page scripts must not change.

Colours should live in one place, as variables at the top of the stylesheet, so changing the brand is one edit. Ask the AI to change colours only there, to make canvas and WebGL colours read the same variables, and to keep text contrast at least 4.5 to 1.

AI tools sometimes "improve" timings on their own. The fix is a line-by-line comparison with your original spec: restore every duration, ease, delay, stagger, scrub, pin length and trigger position, list each difference, and change only content, colours and images from then on. The longer story is in Website prompts that keep your motion values.

Most deploy errors are a wrong build command or output folder, a missing Node version, or a file name with the wrong capital letters, because online hosting is case-sensitive. Paste the exact error into the fix prompt and ask for the exact build settings to type into your host. For the steps on each free host, see How to put your AI-built website online for free.

1. Start from a design that exists. A template with real source files removes the "AI interpreted it differently" class of problems.
2. Build in small steps and check each one on a phone.
3. Write exact values for the animation and say which ones must not change.
4. Keep colours and fonts in one place.
5. Publish early on a free host, so deploy problems show up while the site is still small.

If you would rather skip all of this, we can set it up for you.