lnkiai/m3e-canvas

무엇을 해결하는가

M3E Canvas는 시각적 스케칭과 AI 기반 코드 생성 사이의 간극을 메워주는 브라우저 기반 디자인 도구입니다. 사용자가 Material 3 Expressive 화면을 빠르게 프로토타이핑하고, 이러한 시각적 디자인을 Cursor, Claude Code, 또는 Gemini CLI와 같은 AI 코딩 도구가 실제 애플리케이션을 구축하는 데 사용할 수 있는 구조화된 자연어 프롬프트로 변환할 수 있게 해줍니다.

작동 방식

이 도구는 사용자가 Material 3 Expressive 컴포넌트의 포괄적인 라이브러리를 사용하여 화면을 구성할 수 있는 드래그 앤 드롭 캔버스를 제공합니다. 사용자는 화면을 전환(슬라이드, 페이드, 확장)으로 연결하고 토글 버튼이나 스와이프 네비게이션과 같은 상호작용을 정의할 수 있습니다. 그런 다음 앱은 z-order, 그룹화, 테마 설정을 포함한 전체 시각적 레이아웃을 영어, 일본어 또는 중국어의 간결한 자연어 프롬프트로 변환하며, 사용자는 이를 복사하여 AI 코더에 붙여넣을 수 있습니다.

대상 사용자

모바일 인터페이스를 빠르게 프로토타이핑하고 AI를 사용하여 디자인 스케치에서 기능적인 앱으로의 전환을 가속화하려는 개발자와 디자이너를 위해 설계되었습니다.

주요 특징

• AI-Ready 프롬프트: 시각적 디자인을 AI 코딩 도구를 위한 설명적인 프롬프트로 변환합니다.
• Material 3 Expressive: shape-morphing 로딩 인디케이터와 동적 색상 체계를 포함하여 M3 Expressive 컴포넌트를 완벽하게 지원합니다.
• 대화형 프로토타이핑: 라이브 미리보기 모드와 함께 tap-to-navigate 및 swipe-to-navigate 전환을 지원합니다.
• Magnetic Connections: 버튼이나 리스트 아이템과 같은 컴포넌트가 서로 결합되어 부드러운 모서리를 가진 연결된 그룹으로 융합될 수 있습니다.
• 포괄적인 테마 설정: 색상(seed colors, light/dark, contrast), 모양(square에서 full rounded까지), 타이포그래피 및 모션 체계를 제어할 수 있습니다.
• Local Storage: 모든 디자인은 브라우저의 localStorage에 자동으로 저장됩니다.