> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizar projetos com ferramentas de design

> Use ferramentas de design para aplicar e personalizar temas, modificar elementos da UI e manter a consistência da marca em todo o seu projeto.

**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.

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/changelog-design-view-11-26-25.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=08a6483a1839b8ed34bfb420913293df" alt="Changelog Design View 11 26 25 Pn" width="937" height="277" data-path="images/changelog-design-view-11-26-25.png" />

<div id="why-use-design-tools">
  ## Por que usar ferramentas de design
</div>

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.

<div id="key-benefits">
  ### Principais benefícios
</div>

* **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

<div id="common-use-cases">
  ### Casos de uso comuns
</div>

* 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

<div id="themes">
  ## Temas
</div>

**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.

<div id="key-capabilities">
  ### Principais recursos
</div>

* **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

<div id="visual-editing">
  ## Edição visual
</div>

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.

<div id="key-capabilities">
  ### Principais recursos
</div>

* **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

<div id="quick-start">
  ## Início rápido
</div>

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.

   <Tip>
     Para acessar rapidamente as edições visuais, use o atalho **Edições visuais** na caixa de Prompt de IA.
   </Tip>
3. **Pré-visualize e salve** quando estiver satisfeito com o resultado.

<Warning>
  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.
</Warning>