Framer Ui Skills

This is a design constraint system for building interfaces that match Framer's aesthetic. It enforces a 4px grid, Inter typography, and dark mode with true black backgrounds. The skill includes specific color tokens, a full typographic scale from 14px to 93px headings, and opinionated rules like "never animate layout properties" and "always use AlertDialog for destructive actions." It's useful if you want Claude to generate UI code that looks like Framer without having to specify the same constraints repeatedly. The accessibility and performance guidelines are solid, though the color palette could use some consolidation given the 22 detected colors.

skills.sh installs: 337
GitHub stars: 105
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ihlamury/design-skills --skill framer-ui-skills --agent claude-code

Installs into .claude/skills of the current project.

Files

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