Edite diretamente no canvas
Refine um design HTML após a geração: edite textos, ajuste elementos selecionados, salve as alterações e confira o resultado antes de compartilhar.
Escolha como fazer a alteração
| Sua tarefa | Use | O que muda |
|---|---|---|
| Você sabe exatamente qual texto, cor ou espaçamento deseja | Edit | O arquivo HTML selecionado, após confirmar ou salvar a edição |
| Você quer que o agente refaça um elemento | Comment → Send to chat | O agente recebe uma instrução específica para o elemento |
| Você quer explicar uma região visual | Mark | Uma captura de tela e observações são adicionadas à conversa |
Para uma nova seção, um comportamento responsivo ou uma alteração em várias telas, forneça instruções claras ao agente. Use a edição direta para um pequeno ajuste visual. Consulte comentários e feedback marcado para conhecer os outros dois caminhos.
Abra uma visualização editável
- Abra um artefato HTML em Design Files e selecione Preview. Artefatos de slides HTML também usam o editor de visualização; os controles disponíveis dependem do arquivo.
- Escolha Edit na barra de ferramentas da visualização e selecione o elemento no canvas. Aguarde o contorno de seleção e o painel de parâmetros aparecerem.
- Saia de Edit antes de testar links, formulários ou botões como um usuário comum. Selecionar um elemento no modo de edição tem uma finalidade diferente de usar o protótipo.
Altere uma linha de texto
- Em Edit, clique no texto que deseja alterar. Textos e rótulos de links podem ser editados no canvas.
- Digite o texto substituto. Pressione Enter para confirmar esse texto; Shift+Enter insere uma quebra de linha. Pressione Escape para cancelar a entrada de texto atual.
- Confira o texto no modo Preview normal. Se a página gerar esse texto com JavaScript, teste também a ação que o renderiza novamente.
Ajuste um elemento ou seu layout
Selecione um elemento para ver as propriedades compatíveis. O inspetor inclui tipografia, cor, tamanho, espaçamento, borda e raio dos cantos. Contêineres Flex e Grid exibem controles de layout, como direção, alinhamento e Gap. Um link pode exibir seu Href; uma imagem pode ser substituída com Upload image. Esses controles são contextuais, portanto nem todo elemento tem todos os campos.
Você pode arrastar um elemento selecionado para ajustar sua posição. Faça alterações pequenas e verifique os elementos próximos e os layouts para dispositivos móveis; mover algo até que se encaixe em uma visualização para desktop não estabelece um layout responsivo.
| Campo | O que inserir ou verificar |
|---|---|
| Text / Href / Image URL / Alt text | Elementos de texto exibem o conteúdo; links também exibem o destino. Imagens exibem a origem e o texto alternativo. Os campos dependem do elemento selecionado. |
| Text / Background / Border color | Use uma cor hexadecimal, como #262626. Verifique o contraste e os estados de hover após salvar. |
| Opacity | Um número de 0 a 1: 0 é transparente e 1 é opaco. Isso afeta o elemento selecionado, não apenas o plano de fundo. |
| Font / Size / Weight / Line height / Letter spacing | Escolha a fonte e o peso e depois ajuste o tamanho e o espaçamento entre caracteres. Line height aceita um número positivo ou um valor em px; 1.5 é um multiplicador, enquanto 24px é uma altura fixa. |
| Width / Height | Um número sem unidade é convertido em px. Valores percentuais são aceitos para essas dimensões. Verifique layouts estreitos antes de escolher uma largura fixa. |
| Padding / Margin | Ajuste separadamente as partes superior, direita, inferior e esquerda. Padding é o espaço interno do elemento; margin o separa dos elementos próximos. Margin pode usar auto. |
| Border width / Style / Radius | Defina juntos a espessura, o estilo e a cor da borda. Uma largura sem um estilo visível pode parecer não produzir efeito. Radius arredonda os cantos. |
| Direction / Distribution / Gap / Align | Os controles de layout dependem da seleção de um contêiner de layout. Em um elemento comum, Align altera o alinhamento do texto; não é um comando para reorganizar o elemento pai. |
A maioria dos campos de espaçamento aceita números ou px, não expressões CSS arbitrárias. Se um valor for rejeitado, verifique sua unidade e o elemento selecionado em vez de tentar salvar repetidamente. Campos em branco podem refletir estilos herdados ou calculados, e não um valor igual a zero.
Salve, cancele ou desfaça
| Ação | O que significa |
|---|---|
| Enter durante a edição de texto | Confirmar a edição de texto atual |
| Save no painel de parâmetros | Gravar no arquivo as alterações atuais de conteúdo e estilo |
| Cancel / Reset | Descartar ou redefinir o rascunho atual; isso não apaga todas as alterações confirmadas anteriormente |
| Undo / Redo no editor | Reverter ou reaplicar edições manuais confirmadas |
| Delete element | Remover o elemento selecionado; verifique as dependências e use Undo se necessário |
Verifique o resultado salvo
- Saia de Edit e recarregue a visualização. Confirme que a alteração permanece.
- Mude o menu de viewport para um tamanho de dispositivo móvel e teste os controles reais.
- Use o histórico de versões se precisar de uma versão HTML anterior. Para um arquivo compartilhado, atualize o link depois de verificar a nova versão.
Editar uma animação HTML não altera um MP4 já renderizado. Solicite uma nova renderização e depois inspecione o novo vídeo.
Se você não conseguir selecionar ou salvar
Confirme que você abriu um arquivo HTML compatível em Preview e que o projeto pode ser editado. Um projeto compartilhado somente leitura pode permitir comentários e, ao mesmo tempo, desativar a edição. Saia e abra Edit novamente e depois recarregue o arquivo, se necessário. Se a seleção continuar sem exibir um contorno ou o inspetor, use Comment ou Mark para descrever a alteração ao agente e inclua a versão do aplicativo ao relatar o problema. Não continue clicando em Save sem um elemento selecionado ou um resultado confirmado.