How to Build a Framer Website With AI From a Brief

You can build a Framer website with AI by giving it a written brand brief and one clear prompt. I tried this with Fable 5 and got a three page website in one go. It still needed a few rounds of changes, but the start was strong.

A one line prompt leaves the AI guessing about the brand. A written brief gives it something real to design from.

Here is the brief I used, the prompt I wrote and what I changed after the first version.

Start with a brand brief, not a prompt

For this test I used a vitamin brand called Nucleus. Before I opened Framer, I wrote a brief in a markdown file.

The brief had everything a designer would want to know:

• The brand story.

• Instructions for the website.

• Details about the product.

• The target audience.

The brief does the heavy lifting, so the prompt can stay short. It is the same as briefing a designer. The better the brief, the less guessing.

The prompt I used

In Framer, I changed the model to Fable 5. Keep in mind that it uses double the tokens.

Then I pasted in my prompt and dragged the markdown file into the chat. The prompt asked for these things:

1. Create a three page website to advertise this business.

2. Add a hero section and two other sections beneath it that sell the product in a relevant way.

3. Make all the design decisions on colour, typography and so on.

4. Use Framer's new interactive shaders.

5. Add motion to the site.

Leaving the design decisions open was on purpose. I wanted to see what it would choose on its own. Being specific about shaders and motion made sure it used the newer features.

What the first version got right

It built the whole site from that one prompt. I previewed it page by page.

• A dark theme with colours that pop.

• A shader in the hero background.

• Clean, simple fonts that worked well with the colours.

• A formula page with a clean table and nice hover effects.

• A pricing page for building a subscription.

• Clean scroll animations throughout.

• All the copy written for the brand.

For one prompt and a markdown file, it was looking really good.

What still needed fixing

It was not perfect. These are the things I noticed straight away:

None of these are big problems. But you need to check every page before you treat it as finished.

Iterate in small rounds

For the next rounds I used Claude Code, which I had connected to the Framer project. You can keep going with the AI inside Framer as well.

The dark theme felt too techie for a health brand. To me it felt less trustworthy. So I asked for a light theme and a few tweaks to the hero.

The second version was much more airy. It had a white background and the icons I asked for. Because it is a biotech style brand, the clean, clinical look suited it better. It also felt more professional and more trustworthy.

In the third round I added three things:

1. A product image I had made, placed as the main hero.

2. A testimonial ticker, because the site had no social proof.

3. Payment logos on the pricing page, like Afterpay and Klarna.

The product image and payment logos worked well. The pricing page now had a secure checkout feel. The ticker did not come out right, so that was the one thing left to fix.

Small rounds work better than one giant prompt. Ask for one or two changes, check them, then ask for the next.

Fix the shader by hand

Some changes are faster to do yourself. The shader not reacting to the mouse was one of them.

1. Click the shader on the canvas.

2. Open its mouse settings.

3. Increase the push and the radius.

4. Preview and move your mouse over the hero.

Now it had a nice liquid effect that follows the mouse. I also made the heading size a little smaller, because it was too big.

This is the balance with AI. Let it build the bulk of the site, then use your own eye for the details. That design eye is what I help designers build in Designer School.

Check these before you publish

Even when the AI does most of the work, the final check is yours. Go through the whole site in preview, page by page.

• Is all the text easy to read on its background?

• Do the hover effects sit inside the layout?

• Does the shader react to the mouse the way you want?

• Are the headings the right size?

• Do moving parts like a testimonial ticker work properly?

• Are there tablet and phone views, not just desktop?

On this site, the ticker was the last thing on my list. With that fixed, I think the site is ready to publish and would look really good live.

The bottom line

Write a proper brand brief, pick a strong model and keep your first prompt clear. You can get a three page site in one go, then refine it in small rounds. Check readability, interactions and breakpoints before you publish.