M3E Canvas

Cuando prototipas una aplicación Android o web y quieres que Claude Code, Cursor, Codex o Gemini CLI respeten Material 3 Expressive, bocetas las pantallas en el navegador, las enlazas y copias un prompt en lenguaje natural listo para pegar.

Arrastras piezas dibujadas según M3 Expressive: botones, FAB, chips, barras de app y de navegación, pestañas, tarjetas, listas, diálogos, campos, interruptores, sliders y más. Al acercar botones o filas de lista se fusionan en grupos conectados y las esquinas se suavizan. El indicador de carga con morphing de forma (portado de material-components-android) y los progress ondulados son los de la especificación. Añades tantas pantallas como quieras, las nombras y las cambias entre móvil 412×892 y escritorio 1280×800: las barras se estiran, la barra de navegación pasa a rail y el layout se recompone. Las pantallas con el mismo nombre entran en el prompt como una sola a dos anchos.

De lienzo a prompt, sin servidor

• Navegación por toque (destino, atrás y transiciones slide, fade o expand) y por swipe; en la vista previa recorres el flujo con el dedo.
• Tema en cuatro ejes: color (presets o color semilla, claro/oscuro, contraste y color dinámico), forma, tipografía (Roboto, Roboto Flex, Roboto Serif o la del sistema) y motion (muelle estándar o expressive).
• El diseño entero o una sola pantalla se convierte en un prompt conciso en inglés, japonés, chino o coreano, con tus notas de comportamiento y destino Android (por defecto) o web.
• Capas y grupos, botones que cambian al pulsar, un botón Tidy que alinea a 16 dp (y se deshace), exportar PNG y, en beta, enlaces para abrir el diseño. Todo vive en localStorage. Si pegas tu clave de OpenAI, Claude, Gemini o DeepSeek, el modelo redacta notas; la clave no sale del navegador.