framer-ui-skills — Claude Code skill: Framer design system
Hands the agent a fixed set of Framer-style UI rules: dark surfaces, Inter, a 4px grid. Useful when you want a predictable look without hand-tweaking every value.
npx skills add ihlamury/design-skills --skill framer-ui-skills -a claude-code
npx skills add ihlamury/design-skills --skill framer -a claude-codeWhat framer-ui-skills does
The skill encodes Framer's design system as constraints for an AI agent. It ships semantic color tokens with HEX values (surface-base #000000, surface-raised #141415), a table of text styles, and scales for spacing, radii and borders. The agent reads those rules and applies them while generating markup.
The rules are strict. Dark backgrounds for primary surfaces, text contrast at 4.5:1 or better, Inter as the only family, headings at 93px/700, body at 23px/500, spacing on a 4px grid. Animation runs on transform and opacity only, stays under 200ms, and appears only when you ask for it. Destructive actions need an AlertDialog, and the 2px focus outline in #5E6AD2 never gets removed.
Everything assumes a dark theme. On a light project you will have to override the tokens yourself, or the agent will paint black surfaces where they do not belong. The ban on animating layout properties like width and margin also kills a common class of performance bugs.
What it helps with
- build a dark interface from ready-made tokens
- snap spacing and radii to a single 4px grid
- pick one size and weight pair for headings and body text
- check text contrast against the 4.5:1 threshold
- keep the agent from animating layout-breaking properties
Example prompts for the agent
- Build a landing page with framer-ui-skills: dark background, Inter, 4px grid
- Make a product card in the Framer style from this skill
- Rewrite this section using framer-ui-skills rules and keep the focus outline
How to install framer-ui-skills
1Skills CLI (Vercel)
npx skills add ihlamury/design-skills --skill framer-ui-skills -a claude-codenpx skills add ihlamury/design-skills --skill framer -a claude-code2Manually: put the files in place
~/.claude/skills/framer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/framer/
1Skills CLI (Vercel)
npx skills add ihlamury/design-skills --skill framer -a codex2Manually: put the files in place
.agents/skills/framer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ihlamury/design-skills --skill framer -a cursor2Manually: put the files in place
.cursor/skills/framer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ihlamury/design-skills framer2Manually: put the files in place
.github/skills/framer/SKILL.md1Skills CLI (Vercel)
npx skills add ihlamury/design-skills --skill framer -a gemini-cli2Platform CLI
gemini skills install https://github.com/ihlamury/design-skills --path skills/framerManually: put the files in place
.devin/skills/framer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ihlamury/design-skills --skill framer -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about framer-ui-skills
How do I install framer-ui-skills in Claude?
Use the skills CLI: npx skills add ihlamury/design-skills --skill framer-ui-skills -a claude-code. The skill file then lives at ~/.claude/skills/framer/SKILL.md.
What does framer-ui-skills do?
It gives the agent Framer's design constraints: color tokens, text styles, spacing and radius scales, plus rules for animation and interactive states.
Does the skill work for a light theme?
It is built around dark surfaces, with surface-base set to #000000. For a light interface you need to override the tokens, otherwise the agent will keep reaching for a black background.
Source text
SKILL.md · MIT
--- name: framer-ui-skills description: Framer's UI design system. Use when building interfaces inspired by Framer's aesthetic - dark mode, Inter font, 4px grid. license: MIT metadata: author: design-skills version: "1.0.0" source: https://framer.com --- # Framer UI Skills Opinionated constraints for building Framer-style interfaces with AI agents. ## When to Apply Reference these guidelines when: - Building dark-mode interfaces - Creating Framer-inspired design systems - Implementing UIs with Inter font and 4px grid ## Colors - MUST use dark backgrounds (lightness < 20) for primary surfaces - detected lightness: 0 - MUST use `#000000` as page background (`surface-base`) - SHOULD reduce color palette (currently 22 colors detected) - MUST maintain text contrast ratio of at least 4.5:1 for accessibility ### Semantic Tokens | Token | HEX | RGB | Usage | |-------|-----|-----|-------| | `surface-base` | #000000 | rgb(0,0,0) | Page background | | `surface-raised` | #141415 | rgb(20,20,21) | Cards, modals, raised surfaces | | `surface-overlay` | #F8F8F1 | rgb(248,248,241) | Overlays, tooltips, dropdowns | | `text-primary` | #89786E | rgb(137,120,110) | Headings, body text | | `text-2` | #D8AD9D | rgb(216,173,157) | Additional text | | `text-tertiary` | #D1CFD0 | rgb(209,207,208) | Additional text | | `border-default` | #494453 | rgb(73,68,83) | Subtle borders, dividers | | `destructive` | #D8AD9D | rgb(216,173,157) | Error states, delete actions | | `warning` | #F8F8F1 | rgb(248,248,241) | Warning states, cautions | ## Typography - MUST use `Inter` as primary font family - SHOULD use single font family for consistency - MUST use `93px` / `700` for primary headings - MUST use `23px` / `500` for body text - SHOULD reduce font weights (currently 4 detected) - MUST use `text-balance` for headings and `text-pretty` for body text - SHOULD use `tabular-nums` for numeric data - NEVER modify letter-spacing unless explicitly requested ### Text Styles | Style | Font | Size | Weight | Color | Count | |-------|------|------|--------|-------|-------| | `heading-1` | Inter | 93px | 700 | #F4F4F4 | 1 | | `body` | Inter | 23px | 500 | #737373 | 1 | | `body-secondary` | Inter | 22px | 700 | #DCB8B8 | 1 | | `body-secondary` | Inter | 22px | 400 | #B2B2B1 | 1 | | `text-20px` | Inter | 20px | 300 | #777777 | 1 | | `text-18px` | Inter | 18px | 400 | #6D635E | 1 | | `text-16px` | Inter | 16px | 400 | #929290 | 1 | | `text-14px` | Inter | 14px | 400 | #949493 | 1 | | `text-14px` | Inter | 14px | 300 | #DFDBD7 | 1 | | `text-14px` | Inter | 14px | 300 | #2F2F31 | 1 | ### Typography Reference **Font Families:** - `Inter` (used 62x) **Font Sizes:** 3px, 4px, 5px, 6px, 7px, 8px, 9px, 11px, 13px, 14px, 16px, 18px, 20px, 22px, 23px, 93px ## Spacing - MUST use 4px grid for spacing - SHOULD use spacing from scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 9px - SHOULD use 2px as default gap between elements - NEVER use arbitrary spacing values (use design scale) - SHOULD maintain consistent padding within containers ## Borders - MUST use border-radius from scale: 1px, 2px, 3px, 4px, 7px, 8px, 15px, 17px - SHOULD limit border widths to: 1px, 2px - SHOULD use 4px as default border-radius - NEVER use arbitrary border-radius values (use design scale) - SHOULD use subtle borders (1px) for element separation ### Border Radius Reference **Scale:** 1px, 2px, 3px, 4px, 7px, 8px, 15px, 17px ## Layout - MUST design for 1920px base viewport width - SHOULD use consistent element widths: 22px, 21px, 43px, 34px, 10px - SHOULD maintain text-heavy layout with clear hierarchy - NEVER use `h-screen`, use `h-dvh` for full viewport height - MUST respect `safe-area-inset` for fixed elements - SHOULD use `size-*` for square elements instead of `w-*` + `h-*` ### Detected Layout Patterns - **Main Content**: width: 1920px, height: 1080px - **Main Content**: width: 1920px, height: 755px - **Header**: height: 72px ## Components ### Buttons | Variant | Background | Text | Border | Height | Radius | |---------|------------|------|--------|--------|--------| | Ghost | transparent | #4D4E4C | none | - | - | ## Interactive States ### Focus - MUST use `2px` outline with accent color (`#5E6AD2`) - MUST use `2px` outline-offset - NEVER remove focus indicators ### Hover - Buttons (primary): lighten background by 10% - Buttons (secondary): use `#141415` background - List items: use `#141415` background ### Disabled - MUST use `opacity: 0.5` - MUST use `cursor: not-allowed` ## Interaction - MUST use an `AlertDialog` for destructive or irreversible actions - SHOULD use structural skeletons for loading states - MUST show errors next to where the action happens - NEVER block paste in `input` or `textarea` elements - MUST add an `aria-label` to icon-only buttons ## Animation - NEVER add animation unless it is explicitly requested - MUST animate only compositor props (`transform`, `opacity`) - NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) - SHOULD use `ease-out` on entrance animations - NEVER exceed `200ms` for interaction feedback - SHOULD respect `prefers-reduced-motion` ## Performance - NEVER animate large `blur()` or `backdrop-filter` surfaces - NEVER apply `will-change` outside an active animation - NEVER use `useEffect` for anything that can be expressed as render logic
© design-skills · MIT · ihlamury/design-skills
