Dribbble Ui 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.

Install to Claude Code

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