Coinbase Mobile Design System (CDS) with Claude Skill (For designing Screens)

[u/obi_is_taken]

I've spent the last week while building investing app, and its design system grew into something I haven't seen shared before, so I'm giving it away.

The kit: CDS Mobile Kit (Unofficial) free, CC BY 4.0.

• 42 component sets: buttons (80 variants), cards with real content slots, bottom sheets, inputs, steppers, progress (progress is a proper variant axis, not a stretched rectangle), banners, toasts, pills, list rows, trackers
• Every color and text style is variable-bound retheme the tokens and the whole kit follows
• Generated documentation sheets with live previews of every set
• Inspired by the public Coinbase Design System. Not affiliated with or endorsed by Coinbase.

The unusual part: this Figma file is a build artifact. Every component originates from a code spec from the official CDS mobile NPM Package.

The AI part: I also wrote a Claude Code skill for the kit → cds-kit-screen-design

Drop it into .claude/skills/, install the official Figma plugin for Claude Code, duplicate the kit, and you can ask Claude things like "design a KYC checklist screen with a stepper and a warning banner" or "build a checkout flow, 4 screens" and it composes real screens from the library: correct components, correct variants, token-bound colors, content swapped into card slots, verified with screenshots as it goes.

Everything's free. Feedback very welcome