figma-ui-skills
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
#FFFFFFas page background (surface-base) - MUST use
#BEBAF6for 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
More from ihlamury/design-skills
awwwards-ui-skills
Awwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid.
211apple-ui-skills
Apple's UI design system. Use when building interfaces inspired by Apple's aesthetic - light mode, Inter font, 4px grid.
158dribbble-ui-skills
Dribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.
135airbnb-ui-skills
Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.
124linear-ui-skills
Linear's UI design system. Use when building interfaces inspired by Linear's aesthetic - dark mode, Inter font, 4px grid.
112notion-ui-skills
Notion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.
110