TL;DR

  • Mowgli는 모바일·웹·데스크톱 앱의 기획부터 고해상도 디자인과 프로토타입까지 한 캔버스에서 다루는 AI 디자인 도구임.
  • 새 아이디어를 설명하거나 기존 Figma 파일 또는 코드베이스를 가져오면 제품 범위와 맥락을 반영한 명세를 구성함.
  • 16개 이상의 스타일을 살펴보는 무드보드와 제품의 화면·흐름·상태 전반을 아우르는 디자인 생성을 제공함.
  • 대화형 편집과 실시간 협업을 지원하며, 변경 사항에 맞춰 제품 명세를 동기화함.
  • Claude Code, Codex, Cursor 등과 MCP로 연동하고 Figma, React 코드 또는 AI 에이전트용 패키지로 내보낼 수 있음.

Mowgli 소개

  • Mowgli는 모바일·웹·데스크톱 앱을 위한 AI 디자인 캔버스임.
  • 제품의 흐름, 사용자 여정, 디자인을 한곳에 담고, 명세 기반으로 제품 맥락을 유지함.

시작하기와 제품 가져오기

  • 새로 시작할 때는 아이디어를 설명하고 범위 설정 및 이해를 위한 질문에 답함.
  • 기존 제품은 Figma 파일을 가져오거나 코딩 에이전트를 연결해 Mowgli로 전달할 수 있음.
  • 가져온 디자인을 시각화하고 백그라운드에서 제품 명세를 구성함. 코드에서 가져오는 예시에서는 화면 24개를 불러옴.

무드보드

  • 본격적인 디자인을 시작하기 전에 앱에 맞춘 16개 이상의 디자인 방향을 탐색함.
  • 제안된 스타일을 조합하거나 변형하고, 참고 자료를 올려 맞춤형 테마를 구성함.
  • 아이디어를 구체화하고 마음에 드는 디자인을 골라 캔버스에서 미리 봄.

모든 화면과 흐름의 디자인

  • 새 제품과 가져온 제품 모두 모바일·웹·데스크톱 전반의 제품 구조를 매핑함.
  • 아이디어를 제안하고 일반적인 성공 경로뿐 아니라 각 화면·흐름·상태에 대한 고해상도 디자인을 생성함.

빠른 반복 작업과 협업

  • 채팅으로 세밀한 수정, 새로운 흐름, 재설계를 요청할 수 있음.
  • 디자인 변경에 맞춰 제품 명세를 동기화함.
  • 팀을 위한 실시간 협업과 공유 기능을 제공함.

AI 에이전트와 Figma로 전달

  • Claude Code, Codex, Cursor 또는 MCP 앱을 연결해 디자인을 코드베이스로 가져오고 양방향으로 동기화함.
  • 수동 전달 방식으로는 Figma에 내보내거나 React + Tailwind 코드를 내려받을 수 있음.
  • 내보내기 결과에는 상세 명세와 정밀한 스타일 정보가 포함됨.

주요 기능

  • AI 디자인 생성: 앱 또는 기능의 전체 고해상도 UI 디자인을 만들고, 화면·흐름·상태를 살펴보며 AI 어시스턴트로 반복 편집함.
  • 무드보드: 16개 이상의 시각 스타일과 색상 팔레트, 타이포그래피 분위기를 탐색함.
  • 프로토타이핑: 실제 탐색, 전환, 흐름이 있는 인터랙티브 프로토타입을 코드 작성 없이 공유함.
  • Figma 가져오기: 기존 디자인을 가져와 채팅으로 레이아웃, 문구, 스타일, 흐름을 편집하고 코드 또는 Figma로 내보냄.
  • 디자인과 채팅: 요소를 선택하고 일상적인 영어 문장으로 요청해 특정 부분이나 전체 디자인을 수정함.
  • 코드 내보내기: MCP로 코딩 에이전트를 연결해 디자인을 코드베이스와 양방향 동기화하거나 React 컴포넌트, Figma 파일, AI용 패키지로 내보냄.
  • 스타일 조정: 색상 팔레트와 스타일 설명으로 브랜드에 맞는 일관된 디자인을 조정함.
  • 반응형 전환: 모바일과 데스크톱 사이에서 전환하면 대상 플랫폼에 맞춰 디자인을 새로 구성함.

예시 프로젝트

  • Datadog Lite: 메트릭, 트레이스, 로그, 알림 — Lang 제작.
  • Smash: 수업, 진행 상황 추적, 어휘 연습 — 제작자 표기 Social Feed.
  • Posts, stories, reels, messaging: 제작자 표기 Whitfield Dashboard.
  • Artist analytics, streaming trends: 제작자 표기 Off Menu.
  • Chef drops, local pickup, order tracking: 제작자 표기 iOS UI Kit.
  • 픽셀 단위로 정밀한 가져오기와 맞춤 위젯 확장: Figma에서 가져옴.
  • BankShare: 그룹 카드, 비용 분할, 정산 — 제작자 표기 PostHog.
  • 제품 분석, 세션 리플레이, 기능 플래그: Figma에서 가져옴.

사용자 의견

  • Opacity Labs의 CPO Aaron Marz는 기획의 세부 사항을 파악하고 포괄적인 디자인을 구성한 뒤 개발 환경으로 옮기는 흐름이 유용하다고 평가함.
  • Hey Lilie의 CEO 겸 공동 창업자 Sam Alanbari는 화면 제작 전에 문제를 검토하는 기획 단계와 브랜드·디자인 시스템을 반영하는 결과물을 장점으로 언급함.
  • Aezan의 CEO 겸 창업자 Romuald Gauvin은 UX 대안 모델링, 수정 요청에 대한 AI 응답, 코딩 AI용 패키지 내보내기가 업무에 도움이 된다고 설명함.
  • Soa의 공동 창업자 Julian Arida는 온보딩 단계의 아이디어 발굴, PRD부터 디자인까지의 흐름, 디자인 품질과 내보내기 옵션을 높이 평가함.

자주 묻는 질문

  • Mowgli란 무엇인지, 디자인 경험이 필요한지, 기존 제품을 가져올 수 있는지에 대한 질문이 제시됨.
  • 디자인 완료 후 절차, 코딩 에이전트 연결, AI 채팅 작동 방식, 무료 이용 등급, 모바일 앱 외 지원 여부에 대한 질문이 제시됨.