lnkiai/m3e-canvas

O que é?

Recursos principais

• 01Arraste componentes reais do Material 3 Expressive para telas de celular ou desktop, com encaixe em uma grade de 4dp.
• 02Conecte elementos a outras telas com transições de deslize, esmaecimento ou expansão e confira o fluxo.
• 03Gere um briefing de design em quatro idiomas, para Android ou web, voltado a ferramentas de programação com IA.
• 04Ajuste as cores do tema, as formas, a tipografia e os modos claro ou escuro em um único painel.
• 05Use assistentes opcionais de IA com sua própria API key da OpenAI, Claude, Gemini ou DeepSeek.
• 06Compartilhe um design por link, com salvamento automático no navegador.

Casos de uso

• Esboçar o fluxo de telas de um app antes de pedir a um agente de programação com IA para implementá-lo.
• Prototipar layouts Material 3 para um projeto mobile ou web sem precisar de uma licença de ferramenta de design.
• Apresentar uma ideia de UI a desenvolvedores como um fluxo clicável acompanhado de um briefing escrito.
• Explorar paletas de tema e variações claras ou escuras de uma interface Material 3.

Início rápido

1. 1

   Instale as dependências

   npm install
2. 2

   Inicie o servidor de desenvolvimento em localhost:3000

   npm run dev
3. 3

   Gere uma exportação estática em ./out (opcional)

   npm run build

Antes de usar

• !Para executar localmente, você precisa do Node.js e do npm para instalar e compilar o app Next.js.
• !Os recursos de assistência com IA exigem sua própria chave de API da OpenAI, Claude, Gemini ou DeepSeek.

Tópicos

Perguntas frequentes

O que é m3e-canvas?

Um sketchpad no navegador para telas de apps com Material 3 Expressive que transforma seu design em um prompt para ferramentas de programação com IA. O M3E Canvas é uma ferramenta de desenho no navegador para criar telas de apps com componentes do Material 3 Expressive. Você arrasta elementos como botões, cards, barras, abas e seletores para telas de celular ou desktop, conecta as telas com transições e confere o fluxo tocando nos elementos. Tudo funciona no navegador, sem precisar de conta ou servidor, e as alterações são salvas automaticamente no dispositivo.

m3e-canvas é gratuito? Qual é a licença?

m3e-canvas é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

m3e-canvas ainda é mantido?

Manutenção ativa. O último commit de m3e-canvas foi em 16 de out. de 2026.

Para que posso usar m3e-canvas?

Esboçar o fluxo de telas de um app antes de pedir a um agente de programação com IA para implementá-lo. Prototipar layouts Material 3 para um projeto mobile ou web sem precisar de uma licença de ferramenta de design. Apresentar uma ideia de UI a desenvolvedores como um fluxo clicável acompanhado de um briefing escrito. Explorar paletas de tema e variações claras ou escuras de uma interface Material 3.

Como instalar m3e-canvas?

Instale as dependências: npm install Inicie o servidor de desenvolvimento em localhost:3000: npm run dev Gere uma exportação estática em ./out (opcional): npm run build

Onde consigo m3e-canvas?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/lnkiai/m3e-canvas