# How I Built a Production-Ready Design System With Claude Code, Mobbin, and Penpot > Source: > Published: 2026-08-31 08:00:00+00:00 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)