m3e-canvas: M3 Expressive UI를 드래그로 설계하고 AI 코딩 프롬프트로 변환

Material 3 Expressive 디자인 요소를 브라우저에서 드래그 앤 드롭으로 배치하고, 화면 간 이동 로직까지 시각적으로 연결할 수 있는 프로토타이핑 도구다. 버튼, FAB, 앱 바 등 다양한 컴포넌트를 조합해 실제 앱과 유사한 인터랙션을 미리 확인할 수 있다.

설계된 화면은 Claude Code, Cursor, Gemini CLI 등 AI 코딩 도구에 바로 붙여넣을 수 있는 자연어 프롬프트로 자동 변환된다. Android나 Web 중 타겟 플랫폼을 선택하면 그에 맞는 기술 스택을 명시한 프롬프트가 생성되어, 디자인 시안에서 실제 코드 구현까지의 단계를 대폭 줄여준다.

색상, 형태, 타이포그래피, 모션 등 M3 Expressive의 네 가지 축을 한 패널에서 세밀하게 조정할 수 있으며, 시드 컬러 하나로 전체 테마를 생성하거나 동적 색상까지 지원한다. OpenAI나 Claude 같은 외부 API 키를 연동하면 특정 컴포넌트의 동작 설명이나 화면 개요를 AI가 자동으로 작성해 주는 기능도 제공한다.