I started a new series on my channel on Claude Code to help you understand and use it confidently, and in this video, I show you how to build a production-ready design system.
The workflow uses Mobbin, a platform with a huge library of real application screenshots, to research how real, shipped products solve the same design problems. Claude Code takes those references and connects to Penpot — a free, open-source design platform you can self-host — to turn that research into an actual, working design system.
Using a collection of skills I built for my workflow, the /design
skill returns two files when invoked: DESIGN.md
and tokens.json
. Claude Code derives these tokens from its research, then uses them to build consistent, traceable designs directly in Penpot.
The Mobbin MCP server does require a paid plan. If you'd rather skip that, you can point Claude Code at your own collection of reference screenshots instead, and still have it connect to Penpot to build the designs from there.
If you need a quick brush-up on Claude Code itself, check out my [previous video](https://www.youtube.com/watch?v=NbIGQbNF-Ks) in the Mastering Claude Code Series.
While you're there, consider subscribing to the [channel](https://www.youtube.com/@joxiahdev)