Framer Skills: how to teach the Framer AI agent your rules

Framer Skills are saved instructions that tell the Framer AI agent how your team designs, writes and publishes, so you stop repeating the same rules in every prompt. Framer released Skills on September 22, 2026, three months after Framer 3.0 put agents on the canvas ^{[2, 3]}.

For studios that build client sites in Framer, this is the update that makes the agent usable on real projects. Below we cover what shipped, how Skills work, what we learned writing our own, and how a design and development team should adopt them.

Key takeaways

• A Skill stores reusable instructions for a design system, a writing style or a CMS workflow, and can point to @pages, @components and @styles ^[2].
• The agent can apply a Skill on demand when its description matches the task, or you can call it directly with a slash command ^[3].
• Skills stay with a project when it is remixed, so template creators can ship guidance with their templates ^{[2, 3]}.
• Framer’s own advice is to write rules with must, prefer and can, and to test each Skill on at least two different tasks ^[4].
• Firewall, launched October 1, redirects or blocks visitors by country, path or both on Advanced Hosting and Enterprise ^[2].

From Framer 3.0 to Skills: a timeline

Framer 3.0 launched on June 16, 2026. Its agents work inside the canvas and can generate pages from scratch or from screenshots, handle breakpoints, manage colour and text styles, add effects, write code components, import CMS content and generate SEO metadata ^[1]. They can also audit a site for broken links, accessibility issues and inconsistent styling ^[1]. The same release added Branching, so teams can experiment in isolated branches and review changes before merging, plus a rebuilt Community with a marketplace, gallery and awards ^[1].

Framer also opened the door to outside tools. The 3.0 announcement lists support for Claude Code, Cursor, Codex and similar workflows ^[1]. Framer says more than 188,000 companies use the platform across 200 countries, and that it paid $6.5 million to creators in 2025 while taking zero revenue share ^[1].

“Agents bring speed and scale. Humans bring taste, judgment, and control.”

The autumn updates filled in the gaps. On September 8 Framer added a CMS List field for repeating content such as FAQs and product features, and the agent can convert existing repeated fields into Lists ^[2]. Skills followed on September 22, and Firewall on October 1 ^[2].

How Framer Skills work with the Framer AI agent

Framer describes a Skill as a way to teach the agent how you work ^[2]. In practice it is a short document with a title, a description of when it applies, and the rules for the task. Inside the editor you use the @ symbol to reference real pages, styles and components in the project ^[4]. That link to the canvas is the important part. The agent is not reading a vague style guide. It is reading rules that point at the exact components it should reuse.

There are two ways a Skill gets used. You can call one directly with slash commands such as /skills or /design-system, or the agent can pick one up on its own when the Skill’s description matches what you asked for ^[3]. Framer also lets the agent write or update Skills for you, based on design work you have already finished ^[3].

“The agent can work within that system instead of interpreting the site from scratch.”

Skills are not limited to visual design. Framer’s examples include SEO audits, accessibility checklists, launch checks and content editing workflows ^[3]. And because Skills survive remixes, a template can arrive with its own instructions for how new pages should be added ^{[2, 3]}.

Writing a good Skill: what Framer recommends

Framer Academy’s best-practice guide is short and practical. It asks for clear headings, one rule per bullet and a section that defines what done means, with checks the agent should run before it finishes ^[4]. It also proposes a simple vocabulary for how strict each rule is ^[4]:

• Must, for requirements the agent cannot change ^[4].
• Prefer, for a default the agent can move away from when needed ^[4].
• Can, for choices that will not affect consistency ^[4].

On testing, the guide says to run a Skill on at least two tasks with different content and to check whether the agent follows each required rule without a follow-up prompt ^[4]. When it fails, rewrite the instruction that caused the mistake rather than adding rules for problems that have not happened yet ^[4]. That last point is easy to ignore. Long Skills full of hypothetical rules are harder for people to maintain and give the agent more to get wrong.

Why Skills matter for client work

The weak point of AI page builders has been consistency. Each prompt starts from zero, so spacing, tone and component choices drift from page to page. By week three of a project you have five slightly different card layouts and a footer nobody approved. A Skill turns a studio’s rules into something the agent loads every time.

It also changes the handover. Many of our clients edit their own Framer sites after launch, and most of them now ask the agent for help. Without written rules, the first new landing page a client builds tends to break the system we designed. With a design system Skill and a copy Skill attached to the project, the agent has the same brief our team had.

Firewall matters for a different reason. Regional rules and staged launches used to need a proxy or custom code in front of the site. Being able to redirect or block by country or path inside Framer is useful for brands that sell in several markets or need to restrict a page to one locale ^[2]. It is limited to Advanced Hosting and Enterprise, so check the plan before you promise it ^[2].

How your team should act now

Start with the design system Skill, because it carries the most risk. List the components the agent must reuse, the spacing scale and the text styles, using @ references so nothing is left to interpretation. Add a short done section: no new colours, no new text styles, every section checked at mobile width.

Next, write a tone of voice Skill from the copy you already approved with the client. Pull five real sentences and say what makes them right. Then add a launch Skill that mirrors your QA checklist, since Framer’s agents can already audit broken links, accessibility and styling ^[1]. Finally, review your Skills at every retainer check-in. A Skill that nobody updates goes stale as fast as any style guide.

For agencies selling templates, the remix behaviour is the opportunity. A template with good Skills is easier to extend correctly, which means fewer support requests and better reviews ^{[2, 3]}.

FAQ

What is a Skill in Framer? A Skill is a reusable set of instructions for the Framer agent, covering things like a design system, a writing style or a CMS workflow. It can reference @pages, @components and @styles in the project ^[2].

Do Skills carry over when a template is remixed? Yes. Framer says Skills stay with a project when someone remixes it, so the template’s guidance comes along ^[3].

Who can use Framer Firewall? Firewall is available with the Advanced Hosting add-on and on Enterprise plans ^[2].