How I Built a Production-Ready Design System With Claude Code, Mobbin, and Penpot
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…
In this video, I demonstrate how to construct a production-ready design system using Claude Code, Mobbin, and Penpot. The process involves researching real application screenshots on Mobbin, a platform with a vast library of screenshots, to understand how successful products address design challenges. Claude Code then takes these references and integrates with Penpot, a free, open-source design platform that can be self-hosted, turning the research into a functional design system.
The /design skill of Claude Code produces two files upon invocation: DESIGN.md and tokens.json. Claude Code gathers these tokens from its research, subsequently employing them to create designs that are consistent and traceable within Penpot. It should be noted that the Mobbin MCP server necessitates a paid plan, but this can be circumvented by instead providing Claude Code with a personal collection of reference screenshots, which it will still utilize to build designs in Penpot.
If you need a refresher on Claude Code, I encourage you to watch my previous video in the Mastering Claude Code Series. Additionally, if you find this content useful, please consider subscribing to the channel.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
