Pular para o conteúdo principal
Ferramentas de design reúnem tudo o que você precisa para personalizar visualmente seu projeto — desde temas de alto nível até edições visuais detalhadas. Você pode gerenciar a aparência geral do seu projeto por meio de Temas ou fazer alterações rápidas e específicas usando Edições visuais, sem escrever código ou usar créditos. Para acessar as ferramentas de design, vá para Visualização de design pelo botão + ao lado de Pré-visualização. Changelog Design View 11 26 25 Pn

​
Por que usar ferramentas de design

Ferramentas de design permitem que qualquer pessoa — designers, profissionais de marketing e colegas não técnicos — faça alterações de design de forma visual, mantenha a identidade da marca e avance mais rápido.

​
Principais benefícios

  • Branding consistente: Aplique temas compartilhados que reflitam a identidade da sua marca
  • Iteração mais rápida: Atualize layouts e textos visualmente — sem precisar de código ou Prompt de IA
  • Edição acessível: Usuários não técnicos podem fazer alterações de design com confiança
  • Pré-visualização ao vivo: Veja cada alteração visual em tempo real antes de publicar

​
Casos de uso comuns

  • Designers mantendo a consistência da marca em vários projetos
  • Profissionais de marketing lançando novas páginas de campanha sem sair das diretrizes de marca
  • Gerentes de produto refinando layouts e textos diretamente
  • Equipes criando rapidamente protótipos e variantes com estilos visuais compartilhados

​
Temas

Temas definem o sistema de estilos principal do seu Projeto — cores, fontes, espaçamento e arredondamento de bordas — formando a base da identidade visual da sua marca.

​
Principais recursos

  • Aplicar: Escolha entre modelos prontos da Lovable ou aplique um tema personalizado
  • Criar: Gere um tema a partir do seu projeto atual
  • Importar: Faça upload de um arquivo CSS personalizado (como index.css ou globals.css) para transformá-lo em um tema
  • Personalizar: Edite cores, tipografia e espaçamento diretamente na interface
  • Compartilhar: Os temas ficam disponíveis para todos os membros na sua área de trabalho
  • Pré-visualização: Teste alterações em tempo real antes de aplicá-las

​
Edição visual

O modo Edição visual permite que você altere seu projeto visualmente, diretamente na página. Ele foi criado para ajustes rápidos e intuitivos, com controle total sobre layout e espaçamento.

​
Principais recursos

  • Selecionar vários elementos para edições em lote mantendo pressionada a tecla ⌘ Command (Mac) ou ⊞ Win (Windows).
  • Controles de layout para alinhamento e posicionamento
  • Ajustar margens e espaçamentos internos (padding) em cada lado dos contêineres
  • Editar texto, cores e fontes diretamente na barra lateral
  • Formatação de texto aprimorada com quebras de linha e estilos inline
  • Substituir imagens fazendo upload de arquivos ou adicionando URLs de imagem
  • Gerar imagens com IA editando imagens com instruções

​
Início rápido

  1. Abra a Visualização de design pelo botão + ao lado de Pré-visualização.
  2. Alterne entre as abas Temas e Edições visuais para trabalhar no design do seu projeto no painel à esquerda.
    • Vá para Temas para selecionar um tema ou criar o seu próprio e aplicá-lo ao projeto.
    • Vá para Edições visuais para selecionar elementos na pré-visualização ao vivo e editá-los visualmente.
    Para acessar rapidamente as edições visuais, use o atalho Edições visuais na caixa de Prompt de IA.
  3. Pré-visualize e salve quando estiver satisfeito com o resultado.
Personalizar visualmente o seu projeto não consome créditos, exceto quando:
  • Você faz alterações em elementos dinâmicos.
  • Você solicita ao Lovable Agent que modifique o design. Em vez disso, use as ferramentas de design.