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

mobbin-ui-skills

Enforce Mobbin UI design constraints for light-mode interfaces using Inter font and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides precise design constraints and guidelines to help AI agents create user interfaces that are visually consistent with the Mobbin aesthetic, ensuring pixel-perfect replication of their style.

Core Features & Use Cases

  • Style Replication: Adheres to Mobbin's light mode, Inter font, and 4px grid system.
  • Constraint Enforcement: Enforces specific color palettes, typography scales, spacing rules, and border-radius values.
  • Use Case: When tasked with designing a new feature for a mobile app that needs to feel like it belongs on Mobbin, use this Skill to guide the AI's design choices for colors, fonts, and spacing.

Quick Start

Apply the mobbin-ui-skills to ensure the new interface uses the Inter font and a 4px grid.

Frequently Asked Questions about mobbin-ui-skills

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

FAQPage Schema
How do I replicate Mobbin's UI design system using AI?▼

Mobbin's UI design system is replicated by enforcing constraints for light mode, Inter font, a 4px grid, and specific color tokens. This ensures AI-generated interfaces achieve pixel-accurate visual consistency with the Mobbin aesthetic.

What is a 4px grid system and how does it affect UI design?▼

A 4px grid system is a layout methodology where all spacing, padding, and sizing align to a 4-pixel base unit. Enforcing this grid ensures visual rhythm and structural consistency across AI-generated interface components.

Can I use this approach for dark mode interface generation?▼

This approach is configured exclusively for light-mode interfaces. It enforces Mobbin's light mode color tokens and aesthetics, and does not support dark mode generation out of the box.

Does the Mobbin style guide work with fonts other than Inter?▼

The Mobbin style guide strictly enforces the Inter font family alongside defined typography scales. Substituting other fonts will break the pixel-accurate replication of the Mobbin aesthetic.

What are the limitations of enforcing design tokens for AI UI generation?▼

Enforcing design tokens restricts AI generation to predefined color palettes, border-radius values, and spacing rules. This ensures branding consistency but limits creative deviation from the established Mobbin aesthetic.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

mercury-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

gusto-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

wise-ui-skills

Enforce Wise UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

raycast-ui-skills

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

Community
Intermediate