r/vibecoding•4개월 전•60•15
AI 양산형 디자인의 해독제, 'Vibecoded'를 만들었습니다! 디자인 정체성 탐색을 위한 무드보드
Vibecoded an antidote to AI slop design! Moodboard for exploring design identities
핵심 요약
Claude의 뻔한 디자인 스타일에서 벗어나, 사용자가 직접 스타일을 탐색하고 실제 앱에 적용해 볼 수 있는 디자인 툴 'Mowgli'를 소개합니다.
- 스타일 탐색 — 무드보드를 통해 16가지 초기 디자인 아이디어를 제공하고 자유롭게 조합 가능함
- 실시간 프리뷰 — 디자인을 확정하기 전에 실제 앱 환경에서 스타일을 미리 확인 가능함
- 코드 기반 캔버스 — 모든 화면이 React 컴포넌트로 구성되어 수정 및 확장이 용이함
- AI 연동 기능 — Claude Code, Codex, Figma 등 다양한 플랫폼으로 결과물 내보내기 지원함
Claude의 눈에 띄는 디자인 스타일이 정말 정말 지겨워졌습니다. 세리프체, 베이지색 등등. 좋긴 하지만 시간이 지나면 지루해지죠.
요즘은 눈에 띄지 않으면 승산이 없다고 생각합니다. 각 앱마다 다른 무언가가 필요하죠.
그래서 DESIGN md 파일들과 씨름하는 대신 Mowgli - https://mowgli.ai - 를 만들었습니다. 무드보드를 중심으로 스타일을 탐색하는 단계가 포함된 디자인 툴입니다. 여기서 앱을 위한 16가지 초기 스타일 아이디어를 얻을 수 있고, 이미지를 업로드하거나 색상을 지정하고, 가이드 피드백을 주는 등의 방식으로 스타일을 섞고 새로운 것을 만들 수 있습니다.
모든 스타일은 모든 화면을 디자인하기 전에 실제 앱에서 미리 볼 수 있습니다. 제가 구현한 기능은 다음과 같습니다:
- code-backed infinite canvas (every displayed screen is a React component)
- agent for experimenting, tweaking, extending and polishing your designs
- detailed PRD generation (something I called spec driven design)
- AI package export for Claude Code and Codex (full code
- Figma export
- AI-based prototype builder to play with the design IRL (but you can also have Claude build it on your own computer)
I'm super happy to hear feedback if you end up trying it, and I hope it's useful for your own vibe coded apps!
