Anthropic Ui Skills

A design constraint system extracted from Anthropic's website that locks you into their aesthetic choices: beige backgrounds (#ECE9E0), Inter font exclusively, and everything snapped to a 4px grid. It's opinionated in the way good design systems should be, with specific rules about when to use 3px versus 15px border radius and a mandate to never animate anything unless explicitly asked. The typography scale feels a bit scattered with ten different font sizes, but if you're building something that needs to look like it came from Anthropic's design team, this gives you the exact hex codes and spacing values to match their light mode interface.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Anthropic UI Skills

Opinionated constraints for building Anthropic-style interfaces with AI agents.

When to Apply

Reference these guidelines when:

Building light-mode interfaces
Creating Anthropic-inspired design systems
Implementing UIs with Inter font and 4px grid

Colors

SHOULD use light backgrounds for primary surfaces
MUST use #ECE9E0 as page background (surface-base)
SHOULD limit color palette to 8 distinct colors
MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

Token	HEX	RGB	Usage
`surface-base`	#ECE9E0	rgb(236,233,224)	Page background
`surface-raised`	#DBD1C0	rgb(219,209,192)	Cards, modals, raised surfaces
`surface-overlay`	#0F0F10	rgb(15,15,16)	Overlays, tooltips, dropdowns
`text-primary`	#625F59	rgb(98,95,89)	Headings, body text
`text-secondary`	#9F9F9C	rgb(159,159,156)	Secondary, muted text
`text-tertiary`	#454036	rgb(69,64,54)	Additional text