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

dribbble-ui-skills

Enforce Dribbble-style UI constraints with light mode, Inter font, and a 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for creating user interfaces that emulate the distinct aesthetic of Dribbble designs, ensuring consistency and adherence to popular visual trends.

Core Features & Use Cases

  • Aesthetic Replication: Apply Dribbble's signature light mode, Inter font, and 4px grid system.
  • Color Palette Guidance: Utilize a defined set of semantic color tokens for consistent branding and UI elements.
  • Typography Standards: Implement precise font sizes, weights, and families as seen in Dribbble showcases.
  • Spacing and Borders: Enforce a strict 4px grid for spacing and a defined scale for border-radius.
  • Use Case: When designing a new marketing website that needs to feel modern, clean, and visually appealing, referencing these Dribbble UI skills will help maintain a cohesive and on-trend look.

Quick Start

Apply the dribbble-ui-skills to create a light mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about dribbble-ui-skills

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

FAQPage Schema
How do I build Dribbble-style interfaces using AI agents?▼

Building Dribbble-style interfaces requires applying opinionated design constraints to AI agents, enforcing light mode, the Inter font, and a 4px grid system to maintain consistent visual aesthetics.

What design constraints are needed to replicate Dribbble's aesthetic?▼

Replicating Dribbble's aesthetic involves applying specific semantic color tokens, typography scales for the Inter font, strict 4px grid spacing rules, and defined border-radius values to ensure visual consistency.

Can I use this 4px grid and light mode system for a marketing website?▼

Yes, applying this light mode, Inter font, and 4px grid system to a marketing website ensures a modern, clean, and visually appealing look while maintaining cohesive and on-trend branding.

How do I enforce consistent typography and spacing in UI design?▼

You enforce consistent UI typography and spacing by implementing defined semantic color tokens, precise Inter font sizes and weights, and a strict 4px grid for spacing to replicate a clean design aesthetic.

Does this UI design approach support dark mode or other font families?▼

This UI design approach focuses exclusively on light mode and the Inter font to replicate Dribbble's signature aesthetic, providing opinionated constraints rather than supporting dark mode or alternative font families.

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
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate
rally19rally19

liveblocks-ui-skills

Apply Liveblocks-inspired dark-mode UI constraints with Inter font and a 4px grid.

Community
Advanced
ihlamuryihlamury
73

framer-ui-skills

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

Community
Intermediate