How I Built a Production-Ready Design System With Claude Code, Mobbin, and Penpot

A developer known as joxiahdev has created a workflow that uses Claude Code, Mobbin, and Penpot to build production-ready design systems. The process leverages Mobbin's library of real app screenshots for research, then Claude Code connects to Penpot to generate a design system with tokens and design files. The developer has open-sourced the skills used in this workflow on GitHub.

I started a new series on my channel https://www.youtube.com/@joxiahdev on Claude Code https://code.claude.com/docs/en/overview 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 https://mobbin.com , 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 https://penpot.app/ — 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 https://github.com/bjoxiah/buildloop 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