{
  "id": 4603243,
  "title": "How I Built a Production-Ready Design System With Claude Code, Mobbin, and Penpot",
  "url": "https://urgent.news/2026/08/31/how-i-built-a-production-ready-design-system-with-claude-code-mobbin",
  "topic": "ai",
  "section": "AI",
  "published": "2026-08-31T08:00:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/joxiahdev/how-i-built-a-production-ready-design-system-with-claude-code-mobbin-and-penpot-40il"
  },
  "original_language": "en",
  "account": "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.\n\nThe /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.\n\nIf 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.",
  "summary": "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…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}