UI kit for Framer Agent
The UI kit for AI startups, built for Framer Agent
46 native components, 6 animated AI product visuals and 9 skills that teach Framer Agent your design system. Describe a page, and the agent builds it in your brand.
Use the dock at the bottom to see Cairn in your brand.
/design-system Build a pricing page with seat plans, usage-based API pricing and an FAQ about data use
46
native components
6
animated AI visuals
34
color and text styles, light + dark
9
agent skills
How it works
Three commands from template to your site
Remix the template, then type three commands in the agent panel: one makes it yours, one builds pages, one checks them.
01
Make it yours
Give /rebrand your name, accent, logo and fonts. It edits the shared styles and the Logo, so every page follows.
/rebrand Brand: Northfield, accent #3A5BA0, logo attached, fonts: Instrument Serif + Geist
02
Describe a page
/design-system builds it from the kit’s sections and components, with breakpoints and copy for an AI product.
/design-system Build a pricing page with seat plans, usage-based API pricing and an FAQ about data use
03
Check before you publish
/system-check audits colors, type, widths, breakpoints and unsourced claims, then fixes what it finds.
/system-check Check the pricing page before I publish
AI visuals
Show the product, not a stock photo
Six animated code components show an agent at work: tool calls, parallel runs, approvals and recovery. They read your color styles, so they follow light, dark and your rebrand.
AgentChat
A conversation with tool calls, a cited source and a review gate. It's the demo on the left.
Sub-agent orchestration and Background runs
Parallel agents merge into one summary, and a runs list waits on your approval.
Run recovery
A step fails, the agent shows what it kept, then resumes from where it stopped.
Computer use and Context composer
An agent working through a web app step by step, and a composer with @context, /commands and a token ring.
Skills
Skills that know this kit
Nine Framer Agent skills come with the remix. Each one knows Cairn’s components, styles and page rules, so a one-line prompt comes back on-system.
Only in Cairn
Everything an AI startup needs to launch
The parts most kits leave out: a live brand preview, a Trust & AI data page and launch graphics that follow /rebrand.
The Trust & AI data page is live on the Halden example site.
Example site
A full example site, built from the kit
Halden is a made-up agent platform built only from Cairn components: a home page, pricing, a CMS changelog and careers. Open it, take it apart, keep what you need.
halden.example/pricing
Pricing
Seat plans, a usage table by model tier, a plan comparison and billing FAQ.
halden.example/changelog
Changelog
A CMS collection with versions and tags, plus a detail page for every release.
Compare
Why not a regular template?
A regular template gives you finished pages. A generic kit gives you parts. Cairn gives the agent the parts and the rules for using them.
Regular template
Pages to edit
Generic UI kit
Parts to assemble
Cairn
Parts + agent skills
Finished pages out of the box
—
4 example pages
Agent skills tuned to the kit
—
—
Section and page recipes
—
Section blocks
Self-check before publish
—
—
Animated AI product visuals
Static mockups
—
6 code components
Light + dark from one set of styles
Varies
One-pass rebrand
By hand
By hand
AI-startup copy rules
—
—
Example site with CMS
—
Trust & AI data page
—
—
Launch graphics in your brand
—
—
Live brand preview before you buy
—
—
Compared with typical Framer templates and UI kits; individual products vary.
FAQ
Questions before you buy
Short answers about the agent, the skills, fonts and the license.
The AI agent built into Framer. You describe a change in the agent panel and it edits your project: pages, sections, components and CMS. Cairn’s skills tell it how to use this kit.
No. Every component, style and page is native Framer and editable by hand. The skills are there for when you want the agent to do the assembly.
Yes — use the dock at the bottom of this site to switch between five niche palettes and warm or cool neutrals. Everything re-themes live, including the animated visuals.
They come with the remix. Open Settings → Skills in your copy of the project and all nine are there, ready to use or edit.
Host Grotesk for text and JetBrains Mono for code, both from Google Fonts and free to use. /rebrand swaps them for your own.
Yes, with a single-use license: one purchase covers one site. Buy one license per client site.
Yes. Updates to this version of Cairn are free.
Give the agent a design system worth using
46 components, 6 animated AI visuals and 9 skills in one remix. Run /rebrand, describe your first page, and publish it in your brand.