• CÓDIGO
  • RENDERIZAÇÃO
  • PRÉVIA
  • HUMANO

Como criar layouts de e-mail responsivos com sua IA

Conecte o MJML ao seu agente para transformar descrições de texto em código de e-mail pronto para uso. Depois de conectado, basta descrever o layout que você deseja.

Pergunte à IA sobre esta página

Resposta rápida

Como posso criar e-mails responsivos usando IA?

Você descreve a estrutura, as colunas ou o conteúdo que precisa em linguagem natural. Seu agente usa a ferramenta MJML para escrever a marcação e renderizar o HTML final. Você recebe um código válido e responsivo, pronto para o seu provedor de e-mail.

Os resultados que você recebe

O que seu agente produz

Dependendo do seu comando, seu agente entrega diferentes ativos técnicos.

CÓDIGO

Marcação MJML válida

O agente escreve o código-fonte MJML com base nos seus requisitos de layout. Você pode copiar isso diretamente para o seu editor.

RENDERIZAÇÃO

HTML pronto para uso

O agente converte a marcação em HTML padrão. Esta é a versão que você realmente carrega na sua plataforma de e-mail.

PRÉVIA

Verificação visual do layout

O agente renderiza o código para que você veja como as colunas e imagens se comportam em diferentes telas.

HUMANO

Refinamentos manuais

Você revisa o código gerado para ajustar cores específicas, espaçamentos ou detalhes de marca que exigem um olhar humano.

O fluxo

O que sua IA faz quando recebe a descrição.

O agente atua como uma ponte entre suas ideias e a sintaxe MJML.

  1. Interpretar layout

    Seu agente lê sua descrição de colunas, seções e blocos de texto para entender a estrutura pretendida.

    render_mjml

  2. Escrever marcação

    O agente traduz esses requisitos estruturais em um código MJML limpo e válido.

    render_mjml

  3. Converter para HTML

    O agente processa a marcação através de um renderizador para produzir o resultado final em HTML.

    render_mjml

  4. Verificar responsividade

    O agente garante que o código gerado siga as regras de responsividade para funcionar bem no celular e no desktop.

    render_mjml

Teste

Copie estes exemplos para começar.

Use estes comandos para iniciar seu primeiro layout de e-mail.

Pontos de partida

Substitua os detalhes entre colchetes pelas cores da sua marca ou pelas suas necessidades de conteúdo.

MJML Connector

Tudo pronto. Escolha seu cliente MCP e siga as instruções de configuração.

Link do conectorhttps://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp

Claude Desktop

Siga os passos abaixo para conectar em segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — MJML capabilities are ready to use.
Configuração · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "mjml-email-markup-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp"
    }
  }
}
Copie no chat04

  • Crie um layout MJML para uma newsletter com uma imagem de destaque, duas colunas de texto e um rodapé.

  • Gere um template de e-mail responsivo usando um fundo azul escuro e texto branco para um anúncio de produto.

  • Construa um layout MJML de coluna única para um e-mail de boas-vindas que inclua um botão e uma seção de ícones de redes sociais.

  • Escreva o código MJML para um e-mail promocional com um cabeçalho grande e uma grade de três colunas para produtos em destaque.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Comece aqui

Conecte o MJML uma vez e pronto.

Uma única conexão dá ao seu agente a capacidade de escrever e renderizar código de e-mail. Você encontra as instruções completas na página do Connector.

Conectar MJML ao seu AI

FAQ

Como esta tarefa funciona

  • 01

    A IA pode editar meus arquivos HTML existentes?

    Não. O agente cria novos arquivos MJML e HTML com base nas suas instruções; ele não modifica arquivos no seu computador.

  • 02

    A IA cuida da hospedagem de imagens?

    Não. Você deve fornecer as URLs das suas imagens no seu comando para que o agente possa incluí-las na marcação.

  • 03

    O e-mail vai funcionar no Outlook?

    Sim, pois o agente usa MJML para gerar o HTML, que foi projetado especificamente para lidar com as particularidades de renderização do Outlook.

  • 04

    A IA pode enviar o e-mail para mim?

    Não. O agente apenas produz o código e o HTML renderizado. Você ainda precisa carregar esse código na sua plataforma de e-mail para realizar o envio.

  • 05

    O agente decide as cores da marca?

    Não. O agente segue as instruções específicas de cores e estilo que você fornecer no seu comando.

  • Mais dúvidas sobre MJML? A página do Connector responde. Veja tudo o que o MCP de MJML pode fazer

Conecte MJML ao Claude, Cursor, ChatGPT e outros