M3E Canvas: arrastra componentes y genera prompts de Material 3 Expressive
Una herramienta web open source que convierte diseños visuales en instrucciones precisas para agentes de codificación tipo Cursor o Claude Code.
Un repositorio de GitHub llamada M3E Canvas está acumulando tracción rápida entre los desarrolladores que usan agentes de codificación. En apenas cuatro días desde su creación, el proyecto de lnkiai ha superado las 3.500 estrellas. La propuesta es sencilla: un lienzo web donde arrastrar componentes de Material 3 Expressive para construir pantallas de forma visual y exportar el resultado como un prompt natural dirigido a herramientas como Cursor, Claude Code o Gemini CLI.
El flujo de trabajo elimina la fase de descripción textual. El usuario diseña la interfaz arrastrando botones, barras de navegación, tarjetas, diálogos, campos de texto y marcadores de posición para mapas o cámaras. La aplicación gestiona la disposición automática y las transiciones. Al pulsar un botón, el sistema genera un prompt detallado que describe la estructura, el estilo y la lógica de navegación. El desarrollador copia ese texto y lo pega en su agente de IA, que se encarga de escribir el código para Android o web.
Adaptación visual y exportación
La herramienta distingue entre vistas para móvil (412×892) y escritorio (1280×800). Los componentes se reorganizan según el ancho disponible: las barras inferiores se convierten en barras laterales (rail) en pantallas grandes y viceversa. Se pueden vincular elementos para crear grupos cohesivos y definir la navegación entre pantallas mediante toques o gestos de desplazamiento (swipe), especificando las animaciones de entrada y salida.
La personalización visual se gestiona mediante los ejes de Material 3 Expressive. Se pueden ajustar colores (desde presets hasta una semilla personalizada que genera toda una paleta con variantes claras, oscuras y dinámicas), formas (esquinas cuadradas, redondeadas o completas), tipografías (Roboto, Roboto Flex, Roboto Serif o la del sistema) y animaciones (resortes expressivos o estándar). También incluye un indicador de carga con cambio de forma, portado originalmente de material-components-android.
El prompt generado exporta todo el diseño o una pantalla concreta en japonés, inglés, chino o coreano. El texto incluye notas sobre la función de cada elemento y la pila tecnológica objetivo, lo que permite al modelo de lenguaje respetar las superposiciones, los márgenes de 16dp y la alineación al generar la interfaz. Existe una opción para usar una clave propia de OpenAI o Claude para asistir en el proceso, pero la generación del diseño es local y funcional sin dependencias externas.
Para quien trabaja con interfaces móviles o web modernas, esta herramienta puede acortar drásticamente el ciclo entre diseño y código inicial. Es una capa de abstracción visual que traduce decisiones UX a instrucciones que los modelos actuales entienden mejor que las descripciones vagas.
El proyecto está escrito principalmente en TypeScript y utiliza tecnologías familiares como Next.js y React. Al ser un lienzo web, no requiere instalación compleja, aunque su utilidad depende de la calidad del agente de codificación que reciba el prompt.
