Skills

Skills that know this kit

Nine Framer Agent skills ship with Cairn. Each one knows the components, styles and page rules, so a one-line prompt comes back as an on-system page.

How to use a skill

01

Open the agent panel

Open Framer Agent in your Cairn project. The kit’s skills load with the template.

02

Type a skill command

Start your message with a command, like /page-recipes or /rebrand.

03

Describe what you want

Name the page, the product and the facts. The skill picks the components, styles and breakpoints.

9 skills

One command for each job

A skill is a set of instructions Framer Agent reads before it touches your project. Start a prompt with the command and the agent follows the kit’s rules for that job.

/design-system

Builds any section or page from Cairn’s components, color styles, text styles and layout rules. New work matches the kit without detaching anything.

/design-system

Builds any section or page from Cairn’s components, color styles, text styles and layout rules. New work matches the kit without detaching anything.

/page-recipes

Section-by-section plans for home, pricing, product, changelog, careers, contact and legal pages. Pick a recipe and fill it with your facts.

/page-recipes

Section-by-section plans for home, pricing, product, changelog, careers, contact and legal pages. Pick a recipe and fill it with your facts.

/rebrand

Swaps in your name, logo, accent color, fonts and neutrals by editing the shared styles and the Logo component. Every page follows.

/rebrand

Swaps in your name, logo, accent color, fonts and neutrals by editing the shared styles and the Logo component. Every page follows.

/product-demo

Re-scripts the animated visuals and AI product components (chat, runs, tool calls, review gates, recovery, code) around your real workflow, tools and results. Run it after /rebrand.

/product-demo

Re-scripts the animated visuals and AI product components (chat, runs, tool calls, review gates, recovery, code) around your real workflow, tools and results. Run it after /rebrand.

/ai-copy

Writes headlines, leads, CTAs and FAQs in a plain, specific voice, with a source under every number.

/ai-copy

Writes headlines, leads, CTAs and FAQs in a plain, specific voice, with a source under every number.

/system-check

Audits a page for off-system colors and fonts, heading order, widths, breakpoints, accent overuse and unsourced claims, then fixes them.

/system-check

Audits a page for off-system colors and fonts, heading order, widths, breakpoints, accent overuse and unsourced claims, then fixes them.

/changelog

Turns what shipped into a Changelog CMS entry: title, version, summary, body and tags. For a headline feature it updates the announcement bar too.

/changelog

Turns what shipped into a Changelog CMS entry: title, version, summary, body and tags. For a headline feature it updates the announcement bar too.

/compare-page

Builds a fair, sourced comparison page (you vs a competitor, alternatives, or vs doing it by hand) with a comparison table, honest trade-offs and switching steps.

/compare-page

Builds a fair, sourced comparison page (you vs a competitor, alternatives, or vs doing it by hand) with a comparison table, honest trade-offs and switching steps.

/launch-check

Gets the site ready to publish: metadata, favicons, kit pages to remove, legal and AI-data pages, links, forms and llms.txt.

/launch-check

Gets the site ready to publish: metadata, favicons, kit pages to remove, legal and AI-data pages, links, forms and llms.txt.

Prompts

Try these prompts

Paste one into the agent panel, then change the details to match your product.

/design-system Build a pricing page with seat plans, usage-based API pricing and an FAQ about data use

Builds a pricing page: three Pricing Cards, a usage table and a data-use FAQ

/product-demo Our agent reconciles our store’s refunds — make the hero demo show that

Composes the hero demo: prompt, run steps, tool calls and a refund review gate

/page-recipes Make a careers page with four open roles, our team and one quote from an engineer

Follows the careers recipe: stats, Job Rows, Team Cards and an Editorial quote

/system-check Review the home page before we publish and fix anything off-system

Audits colors, type, widths, breakpoints and unsourced claims, then fixes them

Start your next page with a skill

Get Cairn, open Framer Agent and type /page-recipes. Your home page is the first recipe.

Try your brand

Create a free website with Framer, the website builder loved by startups, designers and agencies.