m3e-canvas: la herramienta que convierte bocetos UI en prompts de IA arrasa en GitHub
El repositorio lnkiai/m3e-canvas ha sumado 4.635 estrellas en seis días. Permite diseñar pantallas Material 3 Expressive arrastrando componentes y genera prompts para Claude Code, Cursor y otras herramientas.
Un repositorio de GitHub está escalando posiciones a velocidad inusual: m3e-canvas cuenta con 4.635 estrellas en seis días, una media de 819 al día. Es una herramienta de diseño de interfaz, escrita en TypeScript, que permite esbozar pantallas con el lenguaje visual Material 3 Expressive del navegador y, a partir del boceto, generar un prompt natural para herramientas de codificación por IA como Claude Code, Codex, Gemini CLI o Cursor. El resultado: diseñas la UI visualmente y un asistente la convierte en código para Android o web.
El proyecto destaca por su enfoque práctico. En lugar de limitarse a dibujar, establece conexiones magnéticas entre componentes: acercas dos botones y se fusionan en un grupo, con las esquinas redondeándose. También incluye transiciones entre pantallas (deslizamientos, fundidos) y permite especificar navegación por gestos, no solo táctil. Las pantallas pueden ser de teléfono (412×892) o escritorio (1280×800), y los componentes se redistribuyen automáticamente al cambiar de tamaño. El panel de capas reordena elementos en el eje Z, y la herramienta describe explícitamente solapamientos y filas para que el prompt resultante conserve la intención del diseño.
La generación de prompts es una pieza clave: el diseño completo de una pantalla se convierte en una descripción concisa en japonés, inglés, chino o coreano, con la posibilidad de elegir Android o web como plataforma objetivo. El prompt incluye notas propias, de modo que el desarrollador puede indicar funciones específicas de cada componente. Al estilo de las herramientas modernas, incorpora un botón de limpieza que ajusta márgenes a 16dp, acopla barras y une elementos con un solo clic, y permite deshacerlo.
El interés que ha despertado en tan poco tiempo sugiere que cubre un hueco real: los equipos que trabajan con IA generativa necesitan una forma de traducir decisiones de diseño a instrucciones textuales sin perder detalle. No es la primera herramienta del estilo, pero sí parece ofrecer un acabado cercano a Material 3 Expressive, con soporte para componentes como botones flotantes, menús y barras de navegación dinámicas.
El repositorio está en fase temprana, pero su tracción en GitHub indica que ha tocado una necesidad. Habrá que ver si mantiene el ritmo, pero de momento quienes usan asistentes de codificación tienen una opción más para unir diseño y desarrollo sin salir del navegador.
