Vibe Coding Discoverm3e-canvas
View on GitHubSketch Material 3 Expressive screens in the browser and turn them into vibe-coding prompts.
Browser design canvas for sketching Material 3 Expressive screens with drag-and-drop parts, multi-screen navigation and theming, then exporting a concise prompt in EN/JA/ZH/KO for AI coding tools like Claude Code, Codex or Cursor. Optional BYO-key LLM helper writes part notes; designs stay in localStorage.
Use Cases
Sketching Material 3 Expressive mobile/desktop screens in the browserTurning a UI design into a natural-language prompt for Claude Code, Codex, Gemini CLI or CursorPrototyping multi-screen apps with tap and swipe navigation and animated previewExporting a design as a PNG or shareable linkGenerating behavior notes for UI parts with your own LLM API keyTheming a Material 3 app (color, shape, type, motion) before generationAgent-driven drafts: a coding agent reads agent.md and returns a shared design linkProducing Android or web implementation prompts from one canvasTeaching Material 3 Expressive components via drag-and-drop parts
Built With
- Language
- TypeScript
- Frameworks
- Next.js · React · Tailwind CSS · Vitest · Motion
Tags
prompt-generation · vibe-coding · material-design · design-tool · ui-prototyping · mockups · nextjs · react · typescript · tailwindcss · byo-api-key · pwa · static-export · i18n · design-to-code · localstorage