Skills
.Work. You
Rest

dribbble-ui-skills

Community

Build Dribbble-style interfaces.

Design & Creative#design system#ui design#light mode#inter font#4px grid#dribbble
Authorihlamury
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: dribbble-ui-skills
Download link: https://github.com/ihlamury/design-skills/archive/main.zip#dribbble-ui-skills

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.