Claude MarketplacesSubmit
ihlamury avatar

Figma Ui Skills

ihlamury/design-skills

A comprehensive style guide for building interfaces that match Figma's design language. You get specific constraints: Inter font throughout, a 4px spacing grid, light mode with #FFFFFF backgrounds and #BEBAF6 accents, plus detailed typography scales from 13px to 57px. The source includes semantic color tokens, border radius values (3px and 4px), and interaction patterns like focus states and loading skeletons. It's opinionated about what not to do too: no layout animations, no arbitrary spacing, no removing focus indicators. Useful if you're prototyping design tools or want that clean, systematic Figma aesthetic without guessing at the details.

skills.sh installs
363
GitHub stars
105
last updated
Aug 21, 2026
View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Figma UI Skills

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

When to Apply

Reference these guidelines when:

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

Colors

  • SHOULD use light backgrounds for primary surfaces
  • MUST use #FFFFFF as page background (surface-base)
  • MUST use #BEBAF6 for primary actions and focus states (accent)
  • SHOULD reduce color palette (currently 12 colors detected)
  • MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/ihlamury/design-skills
Categories
Frontend Development, Design & UI/UX
First seen
Jun 3, 2026

More from ihlamury/design-skills

All 10

Recommended

More Frontend Development
1majiayu000 avatarapp-ui-designmajiayu000/claude-arsenalapp ui design353skills.sh installs
2ihlamury avatarframer-ui-skillsihlamury/design-skillsFramer's UI design system. Use when building interfaces inspired by Framer's aesthetic - dark mode, Inter font, 4px grid.337skills.sh installs
3develite98 avatarangular-best-practices-v20develite98/angular-best-practicesAngular 20+ performance optimization guidelines with Signals, httpResource, signal inputs/outputs, @defer, and native control flow (@if, @for). Use when writing335skills.sh installs
4getsentry avatarsentry-svelte-sdkgetsentry/sentry-agent-skillsFull Sentry SDK setup for Svelte and SvelteKit. Use when asked to "add Sentry to Svelte", "add Sentry to SvelteKit", "install @sentry/sveltekit", or configure e319skills.sh installs
5sickn33 avatarvercel-react-best-practicessickn33/antigravity-awesome-skillsvercel react best practices287skills.sh installs
6alinaqi avatarui-webalinaqi/claude-bootstrapui web285skills.sh installs