앱 화면을 그리면 코딩 프롬프트가 나오는 오픈소스
M3E Canvas · 설치 없이 브라우저에서 쓰는 무료 도구
앱 아이디어를 말로 설명하기 어렵다면 그려서 넘기면 됩니다. 화면을 스케치하면 AI 코딩 도구에 넣을 프롬프트로 바꿔 주는 도구가 별 8천 개를 받았습니다.
M3E Canvas는 구글 머티리얼 3 부품으로 앱 화면을 그리는 웹 도구입니다. 화면을 잇고 테마를 정한 뒤 프롬프트를 복사해 클로드 코드나 코덱스에 넣으면 됩니다. 설치 없이 브라우저에서 돌고 MIT 라이선스입니다.
- 프롬프트를 한국어로도 뽑아 줍니다
- 안드로이드 앱과 웹 중에서 대상을 고릅니다
- 화면끼리 연결해 탭하고 넘기는 흐름까지 미리 봅니다
- 서버 없이 브라우저에만 저장됩니다
- 원하면 내 API 키로 부품 설명 문구를 AI가 써 줍니다
영상과 화면은 모두 공식 자료입니다. ASAP이 직접 만들어 본 결과는 아닙니다.
lnkiai/m3e-canvas
Sketch Material 3 Expressive screens in the browser and turn them into vibe-coding prompts.
- GitHub 별
- 9,621
- 라이선스
- MIT
- 언어
- TypeScript
- 확인한 날
- 2026.10.23
웹앱 · 출처 공식 사이트
https://lnkiai.github.io/m3e-canvas/출처 M3E Canvas (github.com/lnkiai/m3e-canvas)
광고
카드 내용
- 스케치부품을 끌어다 앱 화면을 그립니다
버튼과 목록, 탭 바를 끌어 놓고 색과 모양을 한 번에 바꿉니다. 화면끼리 이어 누르며 넘겨 볼 수 있습니다.
출처: M3E Canvas 공식 데모 영상 - 프롬프트설계가 프롬프트 한 장이 됩니다
오른쪽이 뽑힌 프롬프트입니다. 화면은 일본어판입니다. 한국어·영어·중국어로도 뽑습니다.
출처: M3E Canvas 공식 스크린샷 - 완성붙여 넣으면 폰에서 도는 앱이 됩니다
복사한 프롬프트를 클로드 코드에 넣어 안드로이드 앱을 만들었습니다. 코덱스·제미나이 CLI·커서에도 그대로 씁니다.
출처: M3E Canvas 공식 데모 영상
광고
