How to create an Agent Template

Agent Templates are Marketplace templates built to work with Framer’s agent. Next to the site itself, each one includes skills, a design system page that shows every building block, and a short video that explains how the pieces fit together. When a buyer asks the agent for a new page or section, the agent follows your skills and reuses your styles and components, so the result still looks like your template.

You can build an Agent Template from scratch or turn a template you already sell into one. The steps are the same for both. Where they differ, each step tells you what to do for your situation.

What an Agent Template includes

• Skills that tell the agent how to work in your template, such as a /design-system skill for building new pages.

• A design system page that shows your color styles, text styles, components, and example sections in one place.

• A walkthrough video that shows buyers how the template, design system page, and skills work together.

Keep it focused

An Agent Template doesn’t need a large set of different pages. Buyers use the agent to create the pages they need, so your job is to give it strong building blocks and clear rules. A small, well-structured template often works better than a big one.

The Framer-made Sift template is a good example. It has a single home page with a hero, features, updates, pricing, and FAQ, plus a design system page and a /design-system skill. Buyers ask the agent for a careers page, blog index, or pricing page, and the skill builds it with Sift’s components, styles, imagery, and responsive layout rules.

Focus your time on the parts the agent reuses: consistent sections, complete components, and skills that explain how to combine them.

1. Set up your foundations

The agent reuses what it can find in the project: color styles, text styles, components, and layout templates. Anything left as a one-off is harder for it to match.

Starting from scratch: create your styles and components before you design pages. Build every page with them from the first section, and put the navigation and footer in a layout template.

Starting from an existing template: audit what you already have.

• Replace hardcoded colors with color styles.

• Move text with inline styling to text styles.

• Turn repeated elements, such as buttons, cards, and badges, into components with variants.

• Move the navigation and footer into a layout template and apply it to every page.

• Delete unused styles, components, and pages so the agent doesn’t pick them up.

2. Name everything clearly

Your skills point to styles, components, and layouts by name, so each needs to describe its role.

• Name color styles by purpose, like Color/Text Primary or Color/Border, instead of by value.

• Name text styles by hierarchy, like Text/H1, Text/Body, and Text/Button.

• Give components and variants descriptive names, like Button with Primary and Secondary variants.

• Rename generic layers such as Frame 12 in sections you plan to reference in a skill.

3. Build the design system page

Create a dedicated page that shows every building block. Buyers use it to see what’s available. The agent uses it as a reference when it builds something new.

• Show each color style and text style with its name.

• Place every component with each of its variants.

• Add a few example sections that combine these parts the way you intend them to be used.

• Label each part with a short note on when to use it.

If you change a component or style later, update this page too.

4. Write your skills

A skill is a saved set of instructions the agent follows every time you invoke it. To add one, open Settings, go to Skills, and create a new skill. Give it a short name, a description that says when to use it, and your instructions in the Content field. Buyers run it by typing its command, such as /design-system, in the agent chat.

Start with a design system skill, since that’s the one buyers will use most. Cover these areas:

• Pages: which layout template to apply, how wide sections are, and the max width of the content inside them.

• Colors: which color styles to use for backgrounds, headings, body text, borders, and accents, and how often to use the accent.

• Typography: which text style to use for each role, from hero headings to button labels, and a rule to never use inline type styles.

• Components: which components to reuse for buttons, cards, and other repeated elements instead of building new ones.

• What to keep: spacing, copy tone, and anything else the agent should leave unchanged.

Add more skills for other tasks buyers will repeat, such as writing CMS content in your template’s voice or checking SEO before publishing. Keep each skill focused on one task.

For guidance on wording and structure, read Best practices for writing skills. To see a finished example, remix the design system demo project.

5. Test with real requests

Asking the agent for pages your template doesn’t include yet is the best way to test it. Remix your template and use it the way a buyer would, just like the Sift example above. Invoke your skills and ask the agent for a pricing page, a new hero, or a careers page with a form. Then compare the result to your original pages.

• Check that the agent reuses your components instead of building new ones.

• Check that new pages use your color styles, text styles, and layout template.

• When the agent makes an unexpected choice, add a clearer rule, default, or example to the skill.

• Repeat until common requests give results you’d ship yourself.

6. Record the walkthrough video

Record a short video that shows buyers how everything fits together.

• Give a quick tour of the design system page.

• Open a skill and explain what it controls.

• Run one or two agent requests with your skills and show the result.

• Keep it short and focused on what a buyer needs to get started.

7. Submit your Agent Template

Run through a final check before you submit.

1. Color styles, text styles, and components cover the whole template.

2. Every page uses the layout template.

3. The design system page is complete and up to date.

4. Each skill has a clear name, description, and command.

5. You tested the skills with real agent requests.

6. The walkthrough video is recorded.

Then submit your template to the Marketplace as an Agent Template.