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

# Refinar

> Molde o frame vencedor com precisão: converse com o Agent com suas próprias palavras ou ajuste elementos diretamente com o Visual Editor.

Explorar amplia as possibilidades; refinar aprofunda os detalhes. Quando um frame já está perto do que você quer, duas ferramentas o moldam com precisão, de acordo com o seu jeito de trabalhar:

* Converse com o Agent com suas próprias palavras, sobre um frame inteiro ou um único elemento
* Ajuste elementos diretamente com o Visual Editor, com edições simples aplicadas instantaneamente e sem gastar créditos

## Chat

Explique ao Agent como você explicaria a um designer no meio de uma revisão. Selecione um frame e descreva as mudanças no chat principal (*"cores mais quentes"*, *"o hero está parecendo vazio"*), ou selecione a ferramenta **Chat** na barra de ferramentas e clique em um elemento para restringir sua mensagem apenas a essa parte.

<Frame caption="O frame selecionado é anexado ao chat principal como um chip.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/chatbox.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7bd3c1dcb75e20723767ba25e90e5c72" alt="Um frame de Design selecionado (Configurator First) no canvas com o painel de chat principal à esquerda, sua caixa de mensagem exibindo 'Describe what you want to design…' com um chip do Configurator First anexado" width="2000" height="1250" data-path="images/design/replit-design/chatbox.png" />
</Frame>

Veja [Chat](/pt/design/chat-about-your-design) para os dois pontos de entrada.

## Visual Editor

Quando você já sabe exatamente o que quer, pule o prompt. Selecione a ferramenta **Edit** na barra de ferramentas e clique em qualquer elemento; o Visual Editor abre com as propriedades que aquele elemento pode editar, como conteúdo, layout, cor e borda. Edições simples, como mudanças de texto, escolhas de cor e ajustes de espaçamento, são aplicadas ao código-fonte instantaneamente, sem gastar créditos.

<Frame caption="A ferramenta Edit ativa com um elemento selecionado, e o Visual Editor mostrando suas propriedades editáveis.">
  <img src="https://mintcdn.com/replit/ID8VXS1QcqWgcJeY/images/replitai/visual-editor-edit-tool.png?fit=max&auto=format&n=ID8VXS1QcqWgcJeY&q=85&s=54c7f32c42f7d95a306a845319295c68" alt="Um frame de configurador de superesportivo com a ferramenta Edit ativa e um elemento selecionado, mostrando o painel do Visual Editor à direita com as seções Layout, Color e Border, além dos botões Discard e Save edits" width="2000" height="1250" data-path="images/replitai/visual-editor-edit-tool.png" />
</Frame>

Veja [Visual Editor](/pt/design/visual-editor) para a referência completa de controles.

## Qual ferramenta usar

| Você quer…                                                                             | Use           |
| -------------------------------------------------------------------------------------- | ------------- |
| Descrever um resultado e deixar o Agent resolver os detalhes                           | Chat          |
| Mudar o texto, a cor, o espaçamento ou a imagem de um elemento para um valor conhecido | Visual Editor |
| Refazer a estrutura ou o comportamento de uma seção                                    | Chat          |
| Fazer um ajuste rápido e sem custo de créditos                                         | Visual Editor |

As duas ferramentas se combinam naturalmente: converse para definir uma direção e depois clique com o Visual Editor para aperfeiçoar os detalhes.

## Explore cada ferramenta

<Columns cols={2}>
  <Card title="Chat" icon="comments" href="/pt/design/chat-about-your-design">
    Direcione um frame ou um único elemento com suas próprias palavras.
  </Card>

  <Card title="Visual Editor" icon="pen-to-square" href="/pt/design/visual-editor">
    Edições diretas e sem custo de créditos para texto, cores, layout e imagens.
  </Card>
</Columns>

## Próximos passos

Quando o frame estiver certo, pare de refinar e torne-o real:

* [Construa seu design](/pt/design/build-your-design): transforme o frame em um app funcional.
* [Crie um sistema de design](/pt/design/create-a-design-system): extraia o que você refinou para que todo frame futuro comece dentro do padrão da marca.
