How to Use the Framer AI Agent to Build Your Website

The Framer AI agent lets you build sections, fill your CMS and make responsive layouts by typing a prompt inside the canvas. It understands the context of your whole project. You stay in control and edit everything it makes.

Building a site by hand takes time. You lay out every section, wire up the CMS, then rebuild it all for tablet and phone. That is the work the agent speeds up.

I tested it on one of my own portfolio sites. Here is how I used it, step by step.

Where to find the Framer agent

The agent lives in its own panel on the right of the canvas, next to the style panel. Click it to open the chat.

At the bottom you can pick the model you want to use. I used one of the GPT models for these tests. You can also drag a reference image straight into the chat.

A few things make it easy to work with:

• It runs in the background, so you can keep designing while it works.

• Every chat is saved, so you can go back to an earlier one.

• The plus button starts a new chat for a new task.

Build a new section from a reference image

I wanted a services section for a design studio portfolio. I found a layout I liked and used it as a reference.

1. Open the agent panel.

2. Drag your reference image into the chat.

3. Describe what you want. I asked for three core services for a design studio.

4. Add any interaction. I asked for the portfolio image to show when you hover over a service.

5. Send it, then preview the result.

The hover effect worked first time. It also handled the small details I would normally build myself.

• It turned the section into a component I could edit.

• It used Phosphor icons, so the icons are real and editable, not flat images.

• It set up text variables inside the component.

Fill your CMS from a markdown file

This is the part that saves the most time. I had a markdown file with the text for three projects, plus a folder of images for each one.

1. Drop the markdown file into the chat.

2. Drop in the images for each project.

3. Ask it to create a CMS for the projects, connect it to the section and update the content.

When it finished, it told me what it had done. It filled my existing work collection with the projects. It added the short description, summary, thumbnails, gallery images, duration and tags.

The portfolio page I already had now showed the real projects. Clicking a project opened its own page with the right content. On one project it used the wrong images, but that took a minute to swap. Press Alt and 2 to jump straight to the CMS.

The fix after any AI build is the same. Check every page in preview before you call it done.

Match the agent to your styles

New sections often come in with their own fonts and colours. Mine used a condensed font that did not match the rest of the site.

So I asked the agent to update the portfolio section to match my project text styles and colour styles. It swapped everything over to Inter and my brand blue in one go.

The chat also has shortcuts that help it target the right thing:

Make code components and hero options

You can also ask for a code component. For fun, I asked for a 3D rotating spiral of portfolio images that moves as you scroll.

Start with a simple prompt, then work with the agent to tweak it. The spiral it made was fully editable. I could change the view width and height, the radius and the rotation, and remove the glow.

While that was building, I opened a new chat and asked for three new hero designs on design pages. It made three separate options. One had a shader in the background that I liked.

1. Pick the hero you like on the design page.

2. Duplicate it.

3. Customise it, then drop it into your home page.

Generate tablet and phone breakpoints

This is my favourite part. My new home page only had a desktop view.

Click the plus next to your breakpoints and choose generate. The agent builds the tablet and phone versions for you.

When I tested them, almost everything worked. One stack needed a small tweak on phone. That was it. I barely had to do anything.

Test changes safely with branching

Branching lets you make AI changes on a copy of your site without touching the main version. Look at the top centre of the editor, next to your project name. You will see the word main.

1. Click main to open branching.

2. Click the plus to create a new branch.

3. Make your changes. I asked the agent to change the hero fonts to something elegant.

4. Switch between branches to compare. The main branch stays as it was.

5. When you are happy, merge the branch into main.

When you publish from a branch, it only publishes that branch. If you work with a team or a client who wants to see another version, this stops you breaking the live site.

If you want to get faster at client websites, this is the kind of workflow I teach inside Designer School.

The bottom line

The Framer agent is a much faster way to build websites, and you still have full control over the creative. Give it a reference, a clear prompt and your content, then check everything in preview. You get free credits every month, and you can add more if you use it for everything.