Claude MarketplacesSubmit
ihlamury avatar

Dribbble Ui Skills

ihlamury/design-skills

This is a design constraints file for building interfaces that match Dribbble's aesthetic. It locks you into Inter font, a 4px spacing grid, and a specific light mode palette with that signature pink accent (#F2B5D7). What's useful here is the opinionated stance on things like never animating layout properties, always using AlertDialog for destructive actions, and the pre-mapped semantic tokens for surfaces and text. It's basically a style guide extracted from Dribbble's own site, so if you're prototyping something in that clean, portfolio-site style, this gives you guardrails. The typography scale runs wild though, with 19 different font sizes, which feels like it defeats the purpose of constraints.

skills.sh installs
413
GitHub stars
105
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add ihlamury/design-skills --skill dribbble-ui-skills --agent claude-code

Installs into .claude/skills of the current project.

Files

Dribbble UI Skills

Opinionated constraints for building Dribbble-style interfaces with AI agents.

When to Apply

Reference these guidelines when:

  • Building light-mode interfaces
  • Creating Dribbble-inspired design systems
  • Implementing UIs with Inter font and 4px grid

Colors

  • SHOULD use light backgrounds for primary surfaces
  • MUST use #000000 as page background (surface-base)
  • MUST use #F2B5D7 for primary actions and focus states (accent)
  • SHOULD reduce color palette (currently 40 colors detected)
  • MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/ihlamury/design-skills
Categories
Frontend Development, Design & UI/UX
First seen
Jun 3, 2026

More from ihlamury/design-skills

All 10

Recommended

More Frontend Development
1ihlamury avatarnotion-ui-skillsihlamury/design-skillsNotion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.402skills.sh installs
2nuxt avatarcontributingnuxt/uiGuide for contributing to Nuxt UI. Provides component structure patterns, Tailwind Variants theming, Vitest testing conventions, and MDC documentation guideline400skills.sh installs
3buildermethods avatarfrontend-designbuildermethods/design-osCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat394skills.sh installs
4bobmatnyc avatarvuebobmatnyc/claude-mpm-skillsVue 3 - Progressive JavaScript framework with Composition API, reactivity system, single-file components, Vite integration, TypeScript support390skills.sh installs
5syncfusion avatarsyncfusion-blazor-dataformsyncfusion/blazor-ui-components-skillsImplement Syncfusion Blazor DataForm component for creating dynamic, data-bound forms with validation and field management. Use this when building forms in Blaz382skills.sh installs
6syncfusion avatarsyncfusion-blazor-pivot-tablesyncfusion/blazor-ui-components-skillsUse this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregati381skills.sh installs