Effects
Add smooth motion across a page or to selected elements using native Framer effects.
Search
Teach the agent to design like you and your team with skills
0:30
0:30
See skills at work in a demo project
Remix the Framer demo, then ask the agent to create a new page with /design-system. It will reuse the project’s typography, colors, spacing, layouts, and components so the page fits right in.
Remix the Framer demo, then ask the agent to create a new page with /design-system. It will reuse the project’s typography, colors, spacing, layouts, and components so the page fits right in.
Canvas
Sift®
·
blog
12
Invite
Publish
Pages
Layers
Assets
Search…
Pages
Home
/product
/teams
/pricing
/design-system
/blog/
1
100%
Desktop
1200
Agent
Style
Create a blog page
Use
/design-system
to build a
blog index page. Write six blog posts and add them to the CMS.
GPT 5.6 Sol
Turn a repeated task into reusable instructions
design-system
Use components, styles, spacing, and layouts to create new pages.
cms-content
When writing content, consider the following…
remove-ai-writing
Deletes commonly used AI filler writing, vague claims, repetition,
seo-check
Review and improve page SEO, such as metadata, social previews, image alt text, and other essential SEO settings.
Pick a repetitive task
Start with something you do often, like building a page or writing content.
Title
design-system
Description
Use components, styles, spacing, and layouts to create new
Content
Design system
Use dark color scheme. Reuse existing styles and components; never invent new colors or text styles.
Pages
Apply the Base layout template to every new page.
Set a meta title and meta description on every new page.
Sections fill the screen width (
1fr) and contain an inner wrapper withmaxWidth="1200px"that holds the content.
Colors
Container backgrounds: Color/Black.
Text:
Primary headings: Color/White
Secondary/body text: Color/White 60
Accent: Color/Red is the only accent. Use it very sparingly (one highlight per section at most).
Borders and dividers: Color/Border Solid or Color/Border Transparent.
Typography
Always use these text styles, never inline type styles:
Set Text Balance to Yes for text layers.
Use sentence case; do not use all caps.
Do not use eyebrow text (small text above a heading).
In heroes, use Text/Body L for supporting text.
For every paragraph, adjust its text-box width to produce 50–75 characters per line, targeting 65. Round the width up to the nearest 5 or 10 pixels. If that width is wider than the parent container, set the text box to Fill. Verify at every breakpoint before finishing.
Text/H0: jumbo headings and hero treatments
Text/H1: blog post titles and secondary page titles
Text/H2, Text/H3, Text/H4, Text/H5, Text/H6: all other headings, in hierarchy order
Text/Body L: sub heads
Text/Body: main body text
Text/Body M: small supporting text
Text/Button: button labels only
Write a skill
Define when to use the skill, what it should produce, and the rules to follow.
Use
/design-system
to build a new
Careers page. Include a couple job openings and a form.
GPT 5.6 Sol
Test and refine
Use the skill in your prompt, review the result, and refine it further if needed.
Copy-paste skills to get you started
1. Copy a skill
Choose a skill below and copy its instructions.
2. Add it in agent chat
Type /skills in your agent chat, then paste the skill you copied.
3. Use it in chat
Type your skill’s command, such as /brand-voice, in your agent chat to use it.
4. Edit your skill
Open Settings / Skills whenever you want to make changes.
Sift® reads every paper, you can read the right one.
An AI research assistant for teams who cite their sources.
Rewrite this using our
/brand-voice
Make it feel less corporate.
GPT 5.6 Sol
Brand voice
Keep new copy consistent with your brand’s voice and terminology.
Page Settings
Save
Title
My Framer Site
URL
/home
Description
Made with Framer
Preview
sift-ds.framer.ai
My Framer Site
Made with Framer
SEO check
Review and improve page metadata, social previews, image alt text, and other essential SEO settings.
Before
Agents aren’t just tools, they’re game-changers in today’s ever-evolving digital landscape. Seamlessly streamlining complex workflows, they empower teams to unlock their full potential focusing on what matters.
After
Agents triage support tickets, update customer records, and draft follow-ups. Your team reviews each action, handles exceptions, approves replies, and decides what reaches the customer before anything gets sent.
Remove AI writing
Remove filler, vague claims, repetition, and common AI writing patterns.
Publish
Preview
Navigation
Forms
Links
Responsiveness
Indexing
Accessibility
Metadata
Launch check
Check accessibility, SEO, links, content, and responsive layouts.
Accessibility
Accessibility check
Check pages for accessibility issues and clear fixes.
Frequently asked questions
What is a Framer skill?
What is a Framer skill?
A Framer skill is a reusable set of instructions that tells the AI agent how to handle a specific task in your project. It can capture your design system, brand voice, SEO checklist, launch process, or another workflow you repeat.
A Framer skill is a reusable set of instructions that tells the AI agent how to handle a specific task in your project. It can capture your design system, brand voice, SEO checklist, launch process, or another workflow you repeat.
How is a skill different from a prompt?
How is a skill different from a prompt?
A prompt asks the agent to complete one task. A skill saves the instructions you want it to follow every time, so you can reuse the same workflow from chat without writing it again.
A prompt asks the agent to complete one task. A skill saves the instructions you want it to follow every time, so you can reuse the same workflow from chat without writing it again.
Can a skill use my design system?
Can a skill use my design system?
Yes. A skill can tell the agent which components, text styles, colors, spacing rules, layouts, and breakpoints to use when it creates or updates pages.
Yes. A skill can tell the agent which components, text styles, colors, spacing rules, layouts, and breakpoints to use when it creates or updates pages.
What can I use Framer Skills for?
What can I use Framer Skills for?
Use skills to create pages with your design system, keep copy on brand, review SEO settings, check accessibility, add effects, and run launch checks, or define any other repeatable workflow your project needs.
Use skills to create pages with your design system, keep copy on brand, review SEO settings, check accessibility, add effects, and run launch checks, or define any other repeatable workflow your project needs.
How do I create a custom skill in Framer?
How do I create a custom skill in Framer?
Open Skills in your project Settings and create a new skill. Add a memorable name, a short description, and your skill’s instructions in the Content field. Then invoke it from the agent chat whenever you need that workflow.
Open Skills in your project Settings and create a new skill. Add a memorable name, a short description, and your skill’s instructions in the Content field. Then invoke it from the agent chat whenever you need that workflow.
Your next idea starts here
Create personal portfolio
Build startup site
Launch landing page
Start company blog
