Framer skills for designers: the short answer

Framer released Skills for the Framer agent on 22 September 2026. According to Framer's Skills announcement, Skills let you save instructions for your design system, writing style or CMS workflow and reuse them across tasks. You create one in Project Settings under Skills, or type /skills and ask the agent to write or update one for you. The skill's title becomes a slash command, its description tells the agent when to use it, and the agent can pull a skill in on its own when the task matches.

So how should a designer use Framer skills? Treat each one as a written brief for a junior designer who is fast, literal and has never seen your project before. Name the components it must reuse, the parts of the page it must not touch, and the checks it must pass before it calls the job done. Do that well and the Framer agent builds sections that look like your site instead of a generic template. Do it badly and you get confident, off-brand pages faster than before.

What Framer actually shipped

Kept to what Framer's own pages state:

A skill has three parts. Per the Framer Academy lesson on project skills, each skill has a title (which becomes the slash command), a description (when the agent should use it) and instructions (the rules and project context).

Two ways to create one. Write it yourself in Project Settings, or use /skills and let the agent draft it from the work you just did, then refine it.

Project references. Instructions can point at @pages, @components and @styles, so the agent sees real examples from your file instead of guessing from words.

On-demand use. The Skills launch post on the Framer blog says the agent can bring in relevant skills without you asking, when the description matches the task.

Skills survive a remix. Skills stay with a project when someone remixes it. For template makers, that means the guidance ships with the template.

That is the release. It does not add a new layout engine or a new AI model. It changes how much of your intent the existing agent can carry from one task to the next.

Hype vs reality

The hype reads like this: "teach the agent your taste and it designs like you". Framer's own tagline leans that way, describing Skills as a way to teach the agent "how you work".

What holds up: the biggest weakness of AI site builders has been drift. Every new section prompt started from zero, so spacing, type scale and component choices wandered. A skill that says "reuse the Card component from @Components, never create a new card, keep section padding from the Spacing style" removes much of that drift. For teams, it also means two people prompting the same project get closer results.

What does not hold up: a skill is written instructions plus references. It does not learn from your edits, it has no taste of its own, and it cannot follow a rule you never wrote. If your design system lives mostly in your head, the skill will expose that gap rather than fill it.

Verdict: Framer skills are the most useful thing to happen to the Framer agent for working designers, and they are slightly oversold as "design like you". They make the agent consistent. You still decide what consistent should mean.

Prompting without skills vs with Framer skills

How to use Framer skills as a designer: a five-step workflow

These steps follow Framer's documented features and its best practices for writing skills. They are a recommended approach, not test results.

1. Start from a page you already like. Polish one section by hand or with the agent until it is right. Then type /skills and ask the agent to capture the decisions behind it. Starting from a finished example beats writing rules in the abstract.

2. Edit the draft down to checkable rules. Framer's guidance suggests a clear vocabulary: "must" for requirements, "prefer" for a default you can break, "can" for free choices. "Must reuse the Button component" is checkable. "Make it feel premium" is not.

3. Point at real things. Add @components, @styles and an @page that shows the pattern done right. Visual and subjective rules are where references matter most, because a word like "airy" means something different to every model and every person.

4. Write down what must not change. This is the part designers skip. List the CMS field connections, link destinations, interactions and component instances the agent may not touch, and name the pages it may edit. Most broken agent edits come from things nobody thought to protect.

5. Test on two different tasks, then rewrite. Run the skill on two pieces of work with different content. Note where the agent guessed, where it changed something it should not have, and rewrite the instruction that caused it. Rewriting beats piling on more "do not" rules.

The Protect, Point, Prove framework

A simple way to remember what every good Framer skill contains.

Protect. What the agent must leave alone: CMS bindings, links, interactions, existing copy, pages outside scope.

Point. What the agent should build from: named components, styles, tokens and one reference page.

Prove. How the agent checks its own work before finishing: breakpoints to review, contrast and touch target checks, no new styles created, no orphaned components.

If a skill is missing one of the three, you will see it in the output. Missing Protect breaks things. Missing Point looks generic. Missing Prove ships mistakes.

Four Framer skills worth building first

Suggestions based on the use cases Framer lists, not hands-on results.

/new-section. Your layout rules for marketing sections: grid, padding, heading hierarchy, which components to use for cards, quotes and logos.

/cms-post. For blog or case study pages: which CMS fields map to which layers, image ratios, and a rule that existing bindings must never be removed.

/brand-copy. Voice, terminology, words you never use, sentence length, and how calls to action are phrased.

/launch-check. A pre-publish review across desktop, tablet and phone breakpoints, plus accessibility and SEO basics. It flags issues for you to fix rather than silently fixing them.

Where design work is going

Framer is not alone. Google moved Gemini to the same pattern a week later, covered in Gemini skills for designers. The unit of AI customization is becoming a named, reusable, written skill, inside every tool designers use.

Over the next one to three years, expect a few things. Design systems will ship with agent instructions next to the components, and teams will review skills the way they review component changes. Templates will compete on the quality of their built-in guidance, not only their looks. And as interfaces get assembled on the fly, the topic of generative UI and interfaces that assemble themselves, the written rules behind a system become as important as the screens.

The fear: will Framer skills replace web designers?

No, but the work moves. If your role is mostly assembling sections from an existing system, an agent with a good skill will do a large part of that. Being honest about it is more useful than pretending otherwise.

What the skill cannot do is write itself well. Someone has to decide the system, define which rules are must and which are prefer, protect the things that matter, and judge whether the result is any good. That is design work, and it is becoming the valuable part. The broader argument is in will AI replace UX designers.

Moves for this week: turn your most repeated agent prompt into a skill, add a Protect section to it, and run it on two pages. If you sell templates, add one skill that explains how to extend yours.

When Framer skills are the wrong tool

Skills help with repeatable, rule-based work inside one Framer project. They do not decide information architecture, run user research, or fix a weak design system. For complex products, a site builder is also not the whole answer; the trade-offs are in Framer vs Webflow for modern websites.

If you want a team to set up the system and the build properly, DIGCY offers UI/UX design services and custom web development. DIGCY is a Dribbble Selected Agency and a UI/UX agency in Casablanca working with clients globally.

FAQ

What are Framer skills?

Framer skills are saved, reusable instructions for the Framer agent, released on 22 September 2026. Each skill has a title that works as a slash command, a description that tells the agent when to use it, and instructions that can reference project pages, components and styles.

How do I create a skill in Framer?

Open Project Settings, select Skills and create a new skill with a title, description and instructions. Alternatively, type /skills in the agent and ask it to create or update a skill based on the work you just did, then refine the draft.

Do Framer skills stay with a remixed template?

Yes. According to Framer, skills stay with a project when someone remixes it, so template creators can include guidance for adding new content in their style.

Will Framer skills replace web designers?

No. Skills automate repeatable assembly inside an existing system. They cannot define the system, judge quality or decide what a site should say, and they only apply the rules a designer writes into them.

Are Framer skills overhyped?

Somewhat. The consistency gain from written rules and project references is real and useful. The idea that the agent learns your taste is overstated: a skill does what its instructions say and nothing more.