With an @page mention, a skill can point the agent to a page containing components and tell it to use that page by default when designing something new. With that context, the agent can create and polish sections or entire pages faster and more accurately, while every result remains editable on the canvas. Check out the skills page for a few great examples and a /design-system skill demo project.
Teach the agent how your project is designed
Your team knows which hero suits a launch, how headings should step down, and how much space a section needs. A sticker sheet can show the building blocks, while a skill explains how they work together and which patterns fit different pages.
Arrange your components, text styles, colors, and spacing on the canvas. Use a skill to document how those pieces should be combined.
When someone asks for a new landing page or product section, the agent can work within that system instead of interpreting the site from scratch. First passes are much closer to the rest of the site, giving designers more time to shape the story and page.
Review and refine on the canvas
A skill gives the agent a stronger starting point, but each page still calls for design judgment. Hierarchy, spacing, and composition depend on the content and purpose of the page.
Framer keeps that review in the same space where the page was created. You can select a layer, swap a component, adjust the copy, or check the design across breakpoints. You can also continue prompting the agent from the current state. Both approaches update the same page.
Agent optimized Templates with skills
Today’s template workflow is backwards: creators spend time making dummy content so customers can spend time deleting it. You fill projects with dozens of CMS entries, extra collections, and example pages to demonstrate how the template can be extended.
A template with skills offer a different approach. Because skills stay with a project when someone remixes it, template creators can include a skill that teaches the agent how the template was designed, which decisions shaped it, and how new content should follow the original direction.
Creators can ship a focused starting point instead of filling the project with disposable examples. The agent can add pages and content when the customer needs them, while customers avoid starting with a cleanup job. We made a demo design-system skill project so you can explore how this works in practice.
Start with work you repeat
skills can capture much more than your design system. Use /skills to have the agent write a new skill or update an existing one for you. This is especially useful after a conversation where you worked your way to a result you want to repeat: the agent can capture the instructions, decisions, and examples that got you there, then use that process the next time you audit a page, improve SEO, refine copy, or clean up a project.
You don’t need to invoke a skill with a slash command each time. The agent can use skills on demand when a skill’s description matches your task, bringing in the relevant instructions without you having to ask for them.
We can’t wait to see how you’ll use skills in Framer. Check out our skills page for inspiration and share you skills with us on X, LinkedIn, or Threads.
