Framer Skills: Teach the Agent to Design Like You

Framer has just launched Skills, and this is one of those updates that sounds small until you try it.

A skill is a reusable set of instructions that tells the Framer Agent how to handle a specific task in your project. Design system rules. Brand voice. SEO checks. Launch reviews. Anything you keep repeating in chat.

In most AI tools, a skill just shapes an answer or a block of generated code. In Framer, the skill is connected to the canvas — to your components, text styles, colours, CMS fields, and pages.

That is the difference that matters.

If you have been using the Framer Agent on a real site, this is the layer that was missing. The Agent can already see your project. Skills tell it how you want that project to stay looking like your project.

See Framer Skills in action

TLDR

• Skills are reusable instructions you save inside a Framer project.

• You can call a skill with a slash command like /design-system, or the Agent can pull it in on its own when the task matches the skill’s description.

• A skill can @mention a page, so the Agent treats that page as the source of truth for components, styles, and layout.

• Skills stay with a project when someone remixes it — which is a big deal for template creators.

• You can write a skill yourself, or ask the Agent to capture one after a chat that already produced a result you want to repeat.

What is a Framer skill?

A prompt is a one-off request. You type it, the Agent does the work, and the instruction disappears.

A skill is the version of that instruction you want to keep. You write when to use it, what it should produce, and the rules it has to follow. Next time you need the same workflow, you type /design-system or /brand-voice instead of explaining the whole thing again.

Framer’s own framing is useful here: a prompt asks the Agent to complete one task. A skill saves the instructions you want it to follow every time.

Why this is useful

If you have used the Framer Agent for more than ten minutes, you already know the failure mode.

You ask it to add a page. It invents new colours. It picks a heading style that does not exist in your project. It writes copy that sounds like every other AI landing page. You spend the next twenty minutes putting it back on-brand.

That is not really an Agent problem. It is a context problem.

Your team already knows which hero belongs on a launch page, how headings should step down, and how much space a section needs. A sticker sheet can show the building blocks. A skill explains how those pieces work together, and which patterns fit which pages.

Once that is written down, the first pass is much closer to the rest of the site. You spend less time correcting the Agent and more time shaping the page.

Teach the Agent how the project is designed

The most useful skill for most teams will be a design-system skill.

You already have the raw materials on the canvas: components, text styles, colours, spacing. The skill is the missing instruction set. A typical design-system skill tells the Agent to:

• Reuse existing styles and components, and never invent new colours or text styles.

• Apply the project’s layout template to every new page.

• Set a meta title and meta description on every new page.

• Follow a heading scale, body width, and accent colour you already use.

• Keep sections full-width, with content sitting in an inner wrapper that matches the rest of the site.

Framer also lets a skill @mention a page. You can point the Agent at a page that already contains the right components and tell it to use that page by default when it designs something new.

That is much clearer than describing your system in prose. The Agent can see the example.

Framer published a design-system demo if you want to remix a working example and ask the Agent to create a new page with /design-system. The point of the demo is simple: the new page should reuse the project’s typography, colours, spacing, layouts, and components so it fits in.

The page still needs you

A skill gets you a stronger starting point. It does not finish the page for you.

Hierarchy, spacing, and composition still depend on the content. You can select a layer, swap a component, rewrite a line, or check breakpoints — then keep prompting the Agent from that new state.

Both you and the Agent are editing the same page. That is the same loop that made Framer 3.0 useful. Skills just make the Agent’s first move less random.

What this means for template creators

This is the part that should matter to anyone shipping Framer templates.

The current template workflow is backwards. Creators fill a project with dummy CMS items, extra collections, and example pages so customers can see how the template extends. Customers then spend their first hour deleting all of that.

Skills stay with a project when someone remixes it. So a template can include a skill that explains how the template was designed, which decisions shaped it, and how new pages and content should follow that direction.

Creators can ship a tighter starting point. Customers can ask the Agent to add a Careers page or six blog posts, and the result should still look like the template — instead of a cleanup job.

We already wrote about what Framer 3.0 means for template creators and how to make a template AI-ready. Skills are the missing instruction layer those articles were pointing at.

How to create and use a skill

You can write one from scratch or let the Agent draft it.

From project Settings

Open Skills in your project Settings. Give it a memorable name, a short description, and the instructions in the Content field. Then invoke it from Agent chat whenever you need that workflow.

From Agent chat

Type /skills and ask the Agent to write a new skill, or to capture the decisions from a conversation that already produced a result you want to repeat.

That second path is the one we expect to use most. After you have gone back and forth on an SEO pass, a copy cleanup, or a page audit, you can turn the working method into a skill instead of reconstructing it next week.

You do not have to call a skill with a slash command every time. If the skill’s description matches your task, the Agent can bring the instructions in on its own.

Copy-paste skills to start with

Framer’s skills page includes starters you can paste into a project today:

• Design system — reuse components, styles, spacing, and layouts when creating pages.

• Brand voice — keep new copy consistent with your terminology and tone.

• CMS content — rules for how new collection items should be written and structured.

• Remove AI writing — cut filler, vague claims, repetition, and generic AI phrasing.

• SEO check — metadata, social previews, image alt text, and other page SEO settings.

• Launch check — accessibility, SEO, links, content, and responsive layouts before you publish.

• Accessibility check — find issues and apply clear fixes.

• Effects — add motion with the durations and easing already used in the project.

The setup is straightforward: copy the skill, type /skills in Agent chat, paste it, then use the command (for example /brand-voice) the next time you need it. You can edit the skill later from Settings.

How to write a skill the Agent actually follows

Framer’s best-practices guide is worth reading in full. The short version:

• Use must for rules the Agent cannot change, prefer when there is a default, and can for optional choices.

• Do not write “make it better”. Say what has to improve.

• Say what the Agent can edit, and what it must leave alone — copy, link destinations, CMS bindings, component instances, and interactions.

• Type @ in the skill editor to mention the page, style, or component that should be the reference.

• Include details the Agent cannot see on the canvas: naming conventions, required breakpoints, which CMS fields stay connected.

• Group rules under headings, one rule per bullet. Put exceptions directly under the rule they change.

• Define what “done” looks like. Then test the skill on two real tasks and rewrite the instruction that failed.

If two reasonable Agents could produce incompatible results, the skill is still too vague. Specify the required outcome and what must remain unchanged.

Split a skill when its instructions apply to different triggers or outcomes. Keep instructions together when they share the same task, constraints, and checks. Each skill should have one job and a clear point at which that job is finished.