{"slug": "how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot", "title": "How I Built a Production-Ready Design System With Claude Code, Mobbin, and Penpot", "summary": "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.", "body_md": "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.\n\nThe 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.\n\nUsing a collection of [skills](https://github.com/bjoxiah/buildloop) I built for my workflow, the `/design`\n\nskill returns two files when invoked: `DESIGN.md`\n\nand `tokens.json`\n\n. Claude Code derives these tokens from its research, then uses them to build consistent, traceable designs directly in Penpot.\n\nThe 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.\n\nIf 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.\n\nWhile you're there, consider subscribing to the [channel](https://www.youtube.com/@joxiahdev)", "url": "https://wpnews.pro/news/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot", "canonical_source": "https://dev.to/joxiahdev/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot-40il", "published_at": "2026-08-31 08:00:00+00:00", "updated_at": "2026-08-31 08:22:20.271056+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai"], "entities": ["Claude Code", "Mobbin", "Penpot", "joxiahdev", "buildloop"], "alternates": {"html": "https://wpnews.pro/news/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot", "markdown": "https://wpnews.pro/news/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot.md", "text": "https://wpnews.pro/news/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot.txt", "jsonld": "https://wpnews.pro/news/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot.jsonld"}}