Repolode
Enviar
lnkiai

lnkiai/m3e-canvas

Un bloc de bocetos en el navegador para diseñar pantallas de apps con Material 3 Expressive y convertir los diseños en prompts para herramientas de programación con IA.

Alternativa open source a:Figma

Ver en GitHubSitio web
Estrellas
9,510
Forks
1,028
Issues abiertos
9
Último commit
hace 4 días

¿Qué es?

M3E Canvas es una herramienta de bocetado en el navegador para crear pantallas de apps con componentes de Material 3 Expressive. Puedes arrastrar elementos como botones, tarjetas, barras, pestañas y selectores a pantallas de móvil o escritorio, conectarlas con otras pantallas mediante transiciones y recorrer el flujo tocando la pantalla. Funciona completamente en el navegador, sin necesidad de cuenta ni servidor, y guarda los cambios automáticamente de forma local.

El resultado principal es un prompt. El diseño completo o una sola pantalla se convierte en una descripción concisa en japonés, inglés, chino o coreano, con notas sobre la función de cada elemento y la distribución de filas y cuadrículas. Puedes elegir Android o la web como destino, editar el texto y pegarlo en una herramienta de programación con IA, como Claude Code, Codex, Gemini CLI o Cursor, para generar una app funcional.

La ayuda opcional de IA te permite proporcionar tu propia API key para OpenAI, Claude, Gemini o DeepSeek y generar borradores de diseños o redactar notas; las solicitudes se envían directamente desde el navegador al proveedor. El proyecto es una exportación estática de Next.js, creada con React y TypeScript, y cuenta con licencia MIT.

Funciones clave

  • 01Arrastra componentes reales de Material 3 Expressive a pantallas de móvil o escritorio, donde se ajustan a una cuadrícula de 4dp.
  • 02Conecta elementos con otras pantallas mediante transiciones de deslizamiento, fundido o expansión, y previsualiza el flujo.
  • 03Genera una descripción del diseño en cuatro idiomas, con Android o la web como destino, para herramientas de programación con IA.
  • 04Ajusta los colores del tema, las formas, la tipografía y el modo claro u oscuro desde un solo panel.
  • 05Usa asistentes de IA opcionales con tu propia API key para OpenAI, Claude, Gemini o DeepSeek.
  • 06Comparte un diseño mediante un enlace; los cambios se guardan automáticamente en el navegador.

Casos de uso

  • Bocetar el flujo de pantallas de una app antes de pedirle a un agente de programación con IA que lo implemente.
  • Crear prototipos de diseños Material 3 para un proyecto móvil o web sin una licencia de herramienta de diseño.
  • Comunicar una idea de interfaz a desarrolladores mediante un flujo interactivo y una descripción escrita.
  • Explorar paletas de temas y variantes claras u oscuras de una interfaz Material 3.

Inicio rápido

  1. 1

    Instala las dependencias

    npm install
  2. 2

    Inicia el servidor de desarrollo en localhost:3000

    npm run dev
  3. 3

    Genera una exportación estática en ./out (opcional)

    npm run build

Antes de usarlo

  • Para ejecutarlo localmente, necesitas Node.js y npm para instalar y compilar la aplicación Next.js.
  • Las funciones de asistencia con IA requieren tu propia clave de API de OpenAI, Claude, Gemini o DeepSeek.

Temas

#material-design#design-tool#prompt#vibe-coding#react#typescript#ui-prototyping#material-3-expressive#material3#nextjs

Preguntas frecuentes

¿Qué es m3e-canvas?
Un bloc de bocetos en el navegador para diseñar pantallas de apps con Material 3 Expressive y convertir los diseños en prompts para herramientas de programación con IA. M3E Canvas es una herramienta de bocetado en el navegador para crear pantallas de apps con componentes de Material 3 Expressive. Puedes arrastrar elementos como botones, tarjetas, barras, pestañas y selectores a pantallas de móvil o escritorio, conectarlas con otras pantallas mediante transiciones y recorrer el flujo tocando la pantalla. Funciona completamente en el navegador, sin necesidad de cuenta ni servidor, y guarda los cambios automáticamente de forma local.
¿m3e-canvas es gratuito? ¿Qué licencia tiene?
m3e-canvas es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿m3e-canvas sigue mantenido?
Mantenimiento activo. El último commit de m3e-canvas fue el 16 oct 2026.
¿Para qué puedo usar m3e-canvas?
Bocetar el flujo de pantallas de una app antes de pedirle a un agente de programación con IA que lo implemente. Crear prototipos de diseños Material 3 para un proyecto móvil o web sin una licencia de herramienta de diseño. Comunicar una idea de interfaz a desarrolladores mediante un flujo interactivo y una descripción escrita. Explorar paletas de temas y variantes claras u oscuras de una interfaz Material 3.
¿Cómo se instala m3e-canvas?
Instala las dependencias: npm install Inicia el servidor de desarrollo en localhost:3000: npm run dev Genera una exportación estática en ./out (opcional): npm run build
¿Dónde consigo m3e-canvas?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/lnkiai/m3e-canvas

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados