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

개요

Claude Code, Mobbin, Penpot을 활용하여 실제 서비스에 적용 가능한 수준의 디자인 시스템을 구축하는 워크플로우가 소개된다.

주요 내용

• Mobbin의 방대한 실제 앱 스크린샷 라이브러리를 사용하여 기존 제품들이 디자인 문제를 어떻게 해결했는지 조사한다.
• Claude Code는 이러한 레퍼런스를 기반으로 Penpot과 연동하여 디자인 시스템을 구축한다. Penpot은 무료 오픈소스 디자인 플랫폼으로 자체 호스팅이 가능하다.
• Claude Code의 /design 스킬은 호출 시 DESIGN.md와 tokens.json 두 개의 파일을 반환하며, 이 토큰들은 Claude Code의 조사 결과에서 파생된다.
• Claude Code는 이 토큰들을 사용하여 Penpot 내에서 일관되고 추적 가능한 디자인을 직접 생성한다.
• Mobbin MCP 서버는 유료 플랜이 필요하지만, 이를 건너뛰고 자체 레퍼런스 스크린샷 컬렉션을 Claude Code에 연결하여 Penpot에서 디자인을 구축하는 것도 가능하다.

시사점

이 워크플로우는 실무에서 디자인 시스템을 효율적으로 구축하고 관리하는 데 유용한 방법론을 제공하며, 특히 무료 오픈소스 도구를 활용하여 비용 효율적인 구현이 가능하다.