Pular para o conteúdo principal
DESIGN · 8 MIN

Domínio do Visual Editor

O Studio é a alma do App Mestre. Esqueça os dashboards engessados. Aqui você manipula cores, dark mode, tipografia e bordas em tempo real, vendo seu PWA (Web App) ser pintado diante de seus olhos no Mockup interativo.

Alterando a cor de fundo e vendo o QR Code Preview atualizar.

1

O Poder do Tempo Real (Live Preview)

A tela se divide em duas: à esquerda os seus controles (Tokens de Design), e à direita o Interactive Phone Preview. Qualquer alteração na sidebar esquerda é refletida IMEDIATAMENTE no "celular" que você tem em mãos virtuais na tela.

O QR Code Mágico

Aponte a câmera do seu celular Real para o QR Code no topo. Ele abrirá o Live Preview Link. As mudanças que você fizer no computador piscarão instantaneamente na palma da sua mão real, antes mesmo de você publicar!
2

Branding: Logo e Favicon

O primeiro passo é dar identidade:

  • Logo do App: Suba uma logo horizontal em PNG transparente. Ela brilhará no Header de navegação dos alunos.
  • Ícone do PWA: O ícone quadrado (`512x512`) será o "Aplicativo" que o aluno baixa para a tela inicial do iOS/Android.
3

Configurando o Ponto Crítico: Tela de Login

A primeira coisa que o aluno não-logado ou o lead curioso vê é a sua tela de Login. Ela precisa transmitir alto valor agregado.

  • Fundo do Login: Troque a cor chapada por uma Imagem Imersiva ou um Gradiente elegante.
  • Botões de Ação: Configure a cor de fundo e a Cor do Texto do botão de entrar para gerar contraste perfeito (Se o botão for branco, a fonte tem que ser preta).
  • Dark Mode vs Light Mode: Você ajusta como a tela inteira reage aos temas base do celular.
4

A Grande Fronteira: Publicar em Produção

Diferente das plataformas "on the fly" genéricas, no App Mestre você possui um Staging (Rascunho) e a Produção (A Vivo).

Enquanto você joga com as cores e testa botões, nenhum aluno seu está vendo isso. O app deles não quebra.

Apenas quando a arte final estiver impecável, você clica no imponente botão verde "Publicar para Produção". Nesse segundo histórico, o código final é empacotado e disponibilizado publicamente no seu PWA Link (`appmestre.app/pwa/slug`).

Mudança de URL (Slug)

Você pode alterar o caminho (Slug) final do seu app antes de plugar um domínio. Exemplo: `/pwa/segredos-do-milhao`. Mas atenção: mudar o slug de um app que já está rodando fará os links antigos deixarem de funcionar.