skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

framer-ui-skills

Enforce Framer design constraints for dark mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#ui design#dark mode#spacing#framer
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill framer-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/framer
Command: npx skills add https://github.com/ihlamury/design-skills --skill framer-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Framer's design system, ensuring a polished and professional look.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for dark themes.
  • Consistent Typography: Utilizes the 'Inter' font family with defined heading and body text styles.
  • Grid-Based Spacing: Adheres to a 4px grid system for uniform spacing and layout.
  • Use Case: Apply these guidelines when developing a new feature that needs to match the aesthetic of Framer, ensuring brand consistency and a familiar user experience.

Quick Start

Use the framer-ui-skills to generate a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about framer-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI design system that matches Framer's dark mode aesthetic?▼

Building a Framer-style dark mode UI requires applying specific design system constraints, including a dark color palette, the Inter font family, a 4px grid for spacing, and accessibility-compliant contrast ratios.

What typography and spacing rules should I use for a Framer-inspired interface?▼

Framer-inspired interfaces utilize the Inter font family with defined heading and body text styles, adhering strictly to a 4px grid system to enforce uniform spacing and consistent layout principles.

Can I use framer-ui-skills to ensure my dark mode UI meets accessibility contrast ratios?▼

Yes, framer-ui-skills enforces accessibility contrast ratios alongside its specific color palettes, ensuring your dark mode interface maintains both a polished aesthetic and required visual accessibility standards.

Does this design system approach work for generating consistent UI components?▼

Yes, by enforcing opinionated constraints like specific color palettes, typography scales, and layout principles, this approach ensures consistent UI development and a professional look across all generated components.

What are the limitations of using a strict 4px grid system for UI design?▼

A strict 4px grid system limits spacing flexibility, requiring all layout dimensions and padding to adhere to multiples of four, which may constrain highly custom or asymmetrical interface designs.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
ihlamuryihlamury
73

plaid-ui-skills

Enforce Plaid's UI design system with dark mode, Inter font, and 4px grid.

Community
Intermediate
0xRayAI0xRayAI

frontend-ui-ux-engineer

Apply UI/UX design principles and WCAG 2.1 AA accessibility guidelines to web interfaces.

Official
Intermediate
ihlamuryihlamury
73

monzo-ui-skills

Enforce Monzo's light-mode UI design system with Inter font and 4px grid.

Community
Intermediate