Summary
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-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
