Criar páginas web com o AI Studio
Crie uma página inicial, página única, página de produto ou pré-visualização social, teste o resultado ativo e escolha quem poderá abri-lo.
Um documento descreve uma página inicial e uma imagem mostra um quadro. Nenhum dos dois revela o que acontece ao abrir, como a hierarquia funciona no celular ou se a ação principal continua clara depois da primeira rolagem.
Escolha Página web quando a experiência for o rascunho. O AI Studio cria uma pré-visualização ativa no canvas para abrir, testar, revisar ao lado das fontes e compartilhar separadamente quando estiver pronta.
Resumo prático
Abra um canvas editável, escolha Página web e selecione as fontes. Escolha um Estilo, escreva público, objetivo, seções e ação principal e selecione Enviar. Abra Pré-visualização, teste desktop e celular e confira afirmações e links. O proprietário pode abrir Compartilhar pré-visualização, ativar Link público e Copiar link.
Escolha página web para uma experiência revisável
| Necessidade | Escolha | Motivo |
|---|---|---|
| Texto, pesquisa ou briefing editável | Documento | As palavras são a entrega. |
| Comparação ou grade | Tabela | Linhas e colunas definem a lógica. |
| Visual estático | Imagem | Um quadro basta. |
| História narrada | Arquivo de áudio | A escuta é parte da entrega. |
| Página para abrir, rolar e testar | Página web | Layout e interação fazem parte da entrega. |
A página gerada é uma pré-visualização, não hospedagem de produção nem CMS. Use-a para decidir a direção e leve conteúdo, mídia, métricas, formulários, textos legais e integrações aprovados ao sistema final.
Confira o acesso antes de começar
| Item | Detalhes |
|---|---|
| Disponível | Canvas editável e não incorporado na Web e desktop. |
| Quem gera | Membro com edição. |
| Quem abre | Quem consegue ler o objeto concluído. |
| Quem cria link público | Proprietário da sessão da página. |
| Início | Verificação de créditos aprovada. |
| Resultado | Objeto de pré-visualização ativa no canvas. |
Convidados, externos e pessoas com visualização ou comentário não geram páginas, mas podem revisar o objeto quando o acesso permitir.
Crie a página a partir do canvas
- Abra o canvas com briefing e referências.
- Selecione notas, imagens, arquivos, tabelas ou resultados.
- Escolha Página web.
- Escolha um Estilo.
- Defina público, objetivo, ação, seções, limites e dispositivo prioritário.
- Adicione arquivos ou URLs e aguarde.
- Selecione Enviar e acompanhe o objeto.
- Abra Pré-visualização quando pronto.
O resultado permanece como cartão com título, descrição, miniatura e conexão de pré-visualização. Mantenha-o ao lado do briefing para não separar a página de suas evidências.
Escolha o estilo de acordo com o trabalho da página
| Estilo | Quando usar | Direção |
|---|---|---|
| Auto | Resultado conhecido, formato aberto. | Decide pelo prompt e fontes. |
| Página inicial | Visitante precisa entender e agir. | Hero, proposta, provas e CTA. |
| Página única | Briefing ou atualização compacta. | Seções fáceis de percorrer e fatos-chave. |
| Detalhes do produto | Conceito precisa de revisão de compra. | Mídia, preço, opções, entrega, provas e compra. |
| Pré-visualização social | Post precisa parecer a rede de destino. | Mockup móvel com conta, mídia, ações e legenda. |
Nem toda página bonita é uma Página inicial. Uma atualização de cinco seções costuma ser Página única; um lançamento com galeria, opções e compra é Detalhes do produto.
Dê um briefing real à página
| Entrada | Uso |
|---|---|
| Objetos selecionados | Vincular briefing, texto, tabela e referências. |
| Imagens anexadas | Fotos, peças, logos e layouts. |
| Documentos e mídia | Fatos, especificações e entrevistas. |
| URLs HTTPS | Fontes públicas acessíveis. |
| Prompt | Público, ordem, ações, fatos e limites. |
Crie uma página de Detalhes do produto para o conceito de skincare selecionado. Use a imagem como visual principal. Público: novos clientes com pele sensível. Inclua benefícios, ingredientes, uso, envio e devolução, três avaliações provisórias e Adicionar ao carrinho. Preserve preço e alegações. Não invente certificações.
Entenda o objeto de pré-visualização ativa
Pré-visualização abre um visualizador dedicado com desktop, celular e código. Revise o objeto com quatro perguntas separadas:
- A primeira tela explica a página sem depender do briefing ao lado?
- A ação principal continua clara depois da primeira rolagem?
- A pré-visualização mobile preserva a hierarquia, em vez de apenas reduzir tudo?
- Links, controles, mídia e seções interativas funcionam como o texto promete?
Recursos HTTPS externos podem ser bloqueados ou alterados; teste-os novamente e substitua os frágeis na produção.
Revise a página antes de enviar o link
| Verificação | Confira |
|---|---|
| Mensagem | Valor, público e ação correspondem ao briefing. |
| Fatos | Nomes, preços, datas e alegações correspondem às fontes. |
| Desktop e celular | Ordem, leitura e uso funcionam. |
| Links | Destinos estão corretos ou são claramente protótipos. |
| Mídia | Carregamento, recorte e licença. |
| Metadados | Título, descrição e miniatura identificam a versão. |
| Sensíveis | Notas internas e promessas não aprovadas foram removidas. |
Use comentários para decisões humanas e a entrada de IA para revisões pontuais.
Compartilhe a pré-visualização com o público certo
- Abra a pré-visualização.
- Selecione Compartilhar pré-visualização.
- Ative Link público para acesso externo.
- Selecione Copiar link após a revisão.
Com o link desativado, é preciso acessar o canvas. Desativá-lo depois não apaga cópias já recebidas. Para mostrar fontes, compartilhe o canvas.
Deixe a construção terminar antes de tentar novamente
A página leva mais tempo porque prepara fontes, experiência, mídia e pré-visualização. Saia e volte ao mesmo objeto; não duplique. Excluir o objeto cancela, mas não garante estorno. Veja o histórico de créditos e corrija páginas próximas do ideal.
Quando a pré-visualização não funcionar como esperado
Ainda processando. Aguarde e atualize uma vez.
Sem pré-visualização. Confira o objeto e os créditos antes de duplicar.
Título ou miniatura genéricos. Atualize e, se persistir, contate o suporte.
Link, imagem, fonte ou interação falha. Confira a fonte externa e substitua recursos privados ou instáveis.
Formato errado. Escolha o Estilo exato e descreva a anatomia.
Link público não abre. O proprietário precisa ativar Link público.
Alegações sem fonte. Corrija fonte e prompt e veja Quando o resultado da IA não estiver correto.
Continua travado. Contate o suporte com workspace, link, tipo, horário, prompt, anexos e créditos. Não envie senhas ou dados desnecessários.
Guias relacionados
- Como usar o AI Studio
- Criar imagens com o AI Studio
- Criar documentos com o AI Studio
- Revisar o resultado da IA e compartilhar páginas web
- Entender os créditos de IA
- Quando o resultado da IA não estiver correto