Home  /  Articles  /  Framer

Framer

How to Edit a Framer Template With the Framer Agent and Skills Without Breaking the Design

PUBLISHED 2026-10-10

Framer now includes an AI agent that can edit your site from written instructions, and in September 2026 it introduced Skills, a way to teach the agent how you work. For anyone who has bought a Framer template, this changes how editing can feel. Instead of clicking through every layer, you can ask the agent to make a change.

It also brings a risk. A template has a design system: fonts, colours, spacing and layouts that work together. Ask the agent to change too much at once, or without clear instructions, and the design can drift. This guide explains what the agent and Skills are, which jobs to hand them, which to do by hand, and how to keep a template looking the way it was designed.

Framer is updating these features often. Check Framer's own help pages for the current details.

What the Agent and Skills are

The Framer agent is an AI assistant inside the Framer editor. You describe what you want, such as "add a pricing section below the services" or "make the hero headline shorter", and it makes changes to your project. It can work on layout, content and responsive behaviour. Framer has also been adding new AI models and capabilities to it.

Skills are instructions you write once and the agent follows every time. Framer describes them as a way to teach the agent how you work. A Skill could describe your brand's tone of voice, the fonts and colours to use, or rules such as "never use more than two fonts" or "keep all buttons in the brand colour". According to posts on X, Skills stay with a project when someone remixes it.

Using the agent consumes credits. Framer's paid plans include a monthly allowance, and you can add more.

Read the template's guide first

Before you ask the agent to change anything, understand how the template is built. Most good templates include a guide inside the project. getsites templates, for example, often include a Start Here or setup guide page that explains the structure, the CMS collections and the steps to take before publishing.

Look for:

  • Text and colour styles. Many templates define named styles for headings, body text and colours. Changing a style updates every place it is used.
  • Components. Repeated elements, such as cards or buttons, are often components. Edit the main component and every copy updates.
  • CMS collections. Content such as projects, articles, rooms or products may live in the CMS. You add and edit entries through a form, not on the page.
  • Pre-publish steps, such as connecting forms.

Knowing this helps you give the agent better instructions, and helps you see when it has done something unexpected.

Jobs to hand the Agent

The agent is most useful for well-defined, repetitive or fiddly tasks. Good jobs include:

  • Rewriting text in place. "Rewrite the about section using this information: [your details]. Keep it under 80 words."
  • Duplicating and adapting sections. "Duplicate the services section and change it to list our three packages."
  • Small layout changes. "Move the contact details above the form on mobile."
  • Responsive fixes. Framer has highlighted the agent's ability to handle responsive layouts. "Fix the spacing in the hero on tablet."
  • Bulk content edits. "Change every mention of 'clients' to 'guests'."
  • Adding a section in the template's style. "Add an FAQ section after the pricing section using the existing text styles."

Be specific. Name the section, say what should change and what should stay the same, and mention the template's existing styles when you want the agent to reuse them.

Jobs to do by hand

Some tasks are better done yourself, either because they are quick or because the risk of the agent getting them wrong is high:

  • Swapping photos. Click the image and replace it. It is faster than describing it.
  • Connecting forms. Follow the template's guide to point forms at your email. Check them yourself.
  • Changing global styles. If you want a new brand colour or font, change the named style once, by hand, so the whole template updates consistently.
  • Prices, legal text and factual details. Type these yourself and check them. Do not let an AI rewrite your fees, policies or regulatory information.
  • Publishing and domain settings. Do these manually.

Write a Skill for your brand

If you will edit your site regularly, a Skill can keep the agent consistent. A simple brand Skill might include:

  • Voice: "Write in plain, short sentences. Use British English. Avoid words such as 'stunning', 'world-class' or 'seamless'. Never invent facts, figures or testimonials."
  • Typography: "Use only the template's existing text styles. Do not add new fonts."
  • Colour: "Use only the colours defined in the project's colour styles."
  • Layout: "Match the spacing and grid of existing sections. Do not add decorative elements."
  • Content: "Keep prices, opening hours and contact details exactly as written unless told to change them."

Start small. Add a rule whenever the agent does something you did not want. Over time, the Skill becomes a short style guide that keeps every edit in line with the original design.

Check it on a phone

After any agent session, check your site on desktop, tablet and phone. Look for:

  • Text that wraps badly or overflows
  • Sections that changed when you only asked for one to change
  • Spacing that no longer matches the rest of the site
  • Buttons and links that no longer work
  • Forms that need reconnecting

Framer lets you preview each breakpoint in the editor, but also open the published site on your own phone. That is how your customers will see it.

A worked example

Say you are setting up Late August, a free restaurant template with 14 pages, including a full menu page and a reservation form. A sensible order:

1. Read the buyer guide page in the project.

2. By hand: point the reservation form at your email address, since it ships in demo mode.

3. By hand: replace photos of dishes and the room.

4. With the agent: "Rewrite the chef story section using these notes: [notes]. Keep the existing text styles."

5. By hand: update the menu with your dishes and prices.

6. With the agent: "Remove the private dining page and any links to it."

7. Check every page on a phone, then publish.

If you are working with a template that has a larger design system, such as Refrain, which has 38 named styles, a brand Skill that tells the agent to stick to those styles is especially useful.

For the basics of editing without AI, see our guides on how to edit a Framer template and how to use a Framer template.

The agent makes editing faster. The template's design is what makes the site look considered. Use the first without losing the second.

TEMPLATES IN THIS ARTICLE