AI Studio - Vibe Code

O AI Studio é um construtor com inteligência artificial que ajuda você a criar sites, landing pages e outras experiências interativas mais rapidamente, usando comandos de linguagem natural. Em vez de construir tudo do zero, você pode descrever o que deseja, usar modelos, referenciar uma URL ou imagem e refinar o resultado com IA. O AI Studio foi projetado para acelerar a criação, mantendo seus projetos organizados em um espaço de trabalho dedicado.

O que é o AI Studio?

O AI Studio é um construtor conversacional com inteligência artificial que ajuda você a transformar ideias em experiências digitais funcionais mais rapidamente. Ele pode gerar layouts, conteúdo, imagens e experiências com várias páginas a partir de um comando, permitindo que você refine o resultado por meio de instruções adicionais.

O AI Studio pode criar uma página ou várias seções conectadas no mesmo projeto web, ajudando os usuários a chegarem a um ponto de partida mais completo mais rapidamente, em vez de construírem cada parte manualmente. Ele também aplica uma aparência consistente em toda a página, gera conteúdo com base no prompt e no objetivo da página e fornece aos usuários um rascunho robusto que pode ser refinado posteriormente. Se um usuário não fornecer imagens, o AI Studio pode gerar elementos visuais para as seções principais e áreas de apoio. Se o usuário enviar imagens e solicitar explicitamente que o AI Studio as utilize, ele poderá inseri-las na página.

O AI Studio não se limita a sites ou páginas de destino padrão. Ele também pode ser usado para criar experiências interativas de front-end, como pesquisas com várias etapas, fluxos de agendamento personalizados, formulários com a marca da empresa e outras experiências voltadas para o cliente. Isso torna o AI Studio um espaço de trabalho criativo mais amplo para a construção de experiências do cliente, e não apenas páginas estáticas.

O AI Studio pode te ajudar:

• Crie uma landing page usando um URL ativo como inspiração para o layout e a estrutura.
• Crie uma vitrine virtual usando as fotos de marca que você carregou.
• Gere um layout de painel para um caso de uso específico da empresa.
• Crie uma página de agendamento de consultas vinculada ao seu calendário.
• Crie um site com conteúdo, elementos visuais e chamadas para ação já definidos.

Principais benefícios do AI Studio

O AI Studio ajuda as equipes a criar mais rapidamente, experimentar com mais facilidade e passar da ideia ao lançamento com menos trabalho manual. Sua maior vantagem é combinar geração, iteração, pré-visualização e gerenciamento de projetos em um único espaço de trabalho.

• Criação mais rápida: Comece com um prompt em vez de construir cada seção manualmente.
• Edição Natural: Solicite alterações em linguagem simples e deixe a IA atualizar o projeto.
• Aprimoramento visual: Clique nos elementos da pré-visualização ao vivo para atualizar texto, imagens, ícones, espaçamento, cores e detalhes de layout sem editar o código.
• Inspiração flexível: use modelos, URLs, capturas de tela e imagens carregadas para orientar o resultado final.
• Iteração segura: utilize o histórico de versões e as opções de restauração para testar as alterações com mais confiança.
• Organização integrada: gerencie projetos, pastas, trabalhos recentes e itens favoritos em um só lugar.
• Fluxo de produção: Visualize, publique e conecte um domínio personalizado quando o projeto estiver pronto.

Onde encontrar o AI Studio

O AI Studio estará disponível na navegação à esquerda da sua subconta após ser ativado no Labs. Isso facilita o retorno aos seus projetos e a continuidade do trabalho no mesmo espaço de trabalho ao longo do tempo.

Permissões de usuário para o AI Studio

As permissões do AI Studio ajudam os administradores e proprietários da conta a controlar quais membros da equipe podem acessar, visualizar e gerenciar os recursos do AI Studio. O AI Studio inclui dois níveis de permissão:

• Visualizar AI Studio: Fornece acesso somente leitura ao AI Studio.
• Visualizar e gerenciar o AI Studio: Fornece acesso completo de leitura e gravação ao AI Studio.

Visão geral da página inicial e da interface do AI Studio

A tela inicial do AI Studio é onde você inicia novos projetos, retoma trabalhos anteriores e gerencia tudo o que você criou. Compreender esse layout facilita a alternância rápida entre criação, edição e organização.

Ao abrir o AI Studio, você verá:

• Uma caixa de descrição onde você pode digitar o que deseja construir.
• Abas como "Visualizados recentemente", "Meus projetos", "Favoritos" e "Modelos".
• Opções de modelos como páginas de destino, painéis de controle, lojas virtuais, portfólios e blogs.
• Uma barra lateral à esquerda com acesso ao projeto e trabalhos recentes.

Na área inicial, você pode iniciar um novo projeto, abrir um projeto existente, renomear um projeto, mover um projeto para uma pasta ou excluir um projeto.

Criando um projeto no AI Studio

O AI Studio oferece diversas maneiras de começar, o que ajuda diferentes usuários a partir do tipo de entrada que já possuem. Seja começando com uma ideia, um modelo, uma referência de um site ou uma imagem, o objetivo é o mesmo: chegar a um primeiro rascunho sólido mais rapidamente.

Comece com uma sugestão

Você pode digitar um texto explicativo descrevendo o que deseja criar. Quanto mais detalhes você fornecer, melhor o AI Studio poderá moldar a primeira versão. Além do texto explicativo, você também pode usar entradas complementares, como arquivos, imagens ou uma URL ativa, para inspiração de estrutura, layout ou estilo.

Exemplos de perguntas:

• Crie um site para uma clínica odontológica com agendamento online.
• Crie um site de portfólio para um designer freelancer usando as imagens de marca anexadas.
• Crie uma página inicial para um acampamento familiar usando este URL como inspiração para o estilo de navegação e a estrutura geral: https://www.campingvacation.com/
• Crie um site de cuidados com a pele de uma boutique usando a captura de tela da página inicial em anexo como direção visual para a seção principal, espaçamento e tipografia.

Preferências de Design Guiado

Os usuários não precisam escrever uma descrição perfeita para começar. Quando uma solicitação é ampla ou omite detalhes importantes de design, o AI Studio pode fazer perguntas adicionais antes de criar o projeto, para que a primeira versão corresponda melhor ao objetivo, à marca e à aparência desejada pelo usuário.

Por exemplo, se um usuário disser "criar um site para minha empresa", o AI Studio pode perguntar para que tipo de negócio o site se destina, qual deve ser o principal objetivo de conversão ou qual direção de design melhor se adequa à marca. Essas perguntas de acompanhamento podem incluir escolhas simples, opções visuais, controles deslizantes ou respostas de texto personalizadas.

O AI Studio pode solicitar que os usuários escolham preferências como:

• Paleta de cores: Selecione entre amostras visuais pré-selecionadas sem precisar fornecer cores exatas ou códigos hexadecimais.
• Estilo tipográfico: Escolha combinações de fontes que ajudem a definir a personalidade da página, como moderna, limpa, sofisticada, criativa, editorial ou enérgica.
• Direção do layout: Escolha entre opções de layout visual, como seções baseadas em grade, layouts divididos, layouts editoriais, layouts em estilo de galeria ou layouts baseados em seções.
• Objetivo de conversão: Escolha a ação principal que a página deve incentivar, como agendar uma chamada, vender um produto ou coletar leads.

As perguntas de design guiado só aparecem quando são úteis. Se o usuário já fornecer uma direção de estilo clara, o AI Studio pode começar a construir diretamente.

Os usuários também podem revisar suas respostas antes de enviar, pular perguntas individuais ou clicar em "Pular tudo" para permitir que o AI Studio escolha opções adequadas com base na solicitação.

Comece com um modelo

Os modelos são úteis quando você deseja um ponto de partida mais rápido com uma estrutura familiar. O AI Studio oferece modelos para tipos de projeto comuns, como:

• Página inicial
• Painel
• Loja virtual de comércio eletrônico
• Portfólio

Para começar a usar um modelo, clique na aba Modelos e selecione o modelo desejado.

Como editar e aprimorar projetos

O AI Studio funciona melhor como um construtor conversacional. Você não fica preso à primeira versão criada, o que facilita aprimorar o resultado até que ele atenda ao seu objetivo. Após a geração, você pode continuar solicitando ao AI Studio que faça alterações, como:

• Alterar cores ou estilo
• Reescreva os títulos ou o corpo do texto.
• Adicione um formulário de contato ou uma seção de reservas.
• Utilize um URL de referência ou uma captura de tela para uma seção específica.

Exemplos de perguntas de acompanhamento:

• Altere as cores para usar verde claro em vez de laranja.
• Adicionar uma página de contato
• Faça com que a navegação superior seja semelhante à URL de referência.
• Adicione uma seção de depoimentos semelhante à captura de tela em anexo.
• Altere o visual da seção principal para a imagem anexada.

O AI Studio também pode usar imagens carregadas no projeto. Se você não fornecer imagens, ele poderá gerar elementos visuais para você.

Edições visuais no AI Studio

A Edição Visual oferece aos usuários uma maneira direta de refinar projetos do AI Studio a partir da pré-visualização ao vivo. Em vez de usar prompts ou abrir o Editor de Código para cada pequeno ajuste, os usuários podem selecionar elementos na página e fazer atualizações visuais em textos, botões, imagens, ícones, cores, espaçamento e detalhes de layout.

Para entrar no modo de Edição Visual, clique em Edições Visuais na área de comando no canto inferior esquerdo do construtor.

Após ativar o modo de Edição Visual, a pré-visualização torna-se interativa. Os usuários podem clicar duas vezes no texto para editá-lo diretamente, selecionar elementos para abrir controles contextuais ou usar um aviso em elementos selecionados quando desejarem ajuda da IA para realizar uma alteração específica.

Para obter uma descrição completa dos recursos e funcionalidades, consulte: Edições Visuais no AI Studio.

Editor de código no AI Studio

O AI Studio também inclui um editor de código integrado para usuários que desejam um controle mais direto sobre seus projetos. O editor de código permite editar manualmente o código subjacente para uma personalização mais precisa.

Isso é especialmente útil para fazer alterações de design específicas, ajustar funcionalidades ou refinar a saída gerada por IA sem precisar regenerar todo o projeto. Você pode usar o Editor de Código para atualizar layouts, modificar estilos, depurar problemas e ajustar comportamentos avançados — tudo dentro do AI Studio, com as alterações refletidas em tempo real.

Para obter uma descrição completa dos recursos e funcionalidades, consulte: Editor de código no AI Studio.

Suporte avançado de SEO no AI Studio

O AI Studio inclui ferramentas de SEO integradas para ajudar seus projetos a serem descobertos por mecanismos de busca, plataformas sociais e experiências de busca com inteligência artificial.

Como os sites da AI Studio são desenvolvidos como aplicativos web modernos e rápidos, às vezes podem ser mais difíceis de serem lidos por mecanismos de busca e rastreadores por padrão. O Suporte Avançado de SEO resolve isso tornando seu conteúdo mais acessível e fácil de indexar, sem alterar a aparência ou o desempenho do seu site para os visitantes.

Com o SEO ativado, você pode:

• Melhore a forma como seu site é rastreado e indexado pelos mecanismos de busca.
• Certifique-se de que os links compartilhados exibam o título, a descrição e a imagem de pré-visualização corretos.
• Gere um sitemap para ajudar os mecanismos de busca a encontrarem suas páginas mais rapidamente.
• Torne seu conteúdo mais legível para ferramentas de busca com IA, como o ChatGPT e outros assistentes.

Esses recursos trabalham em conjunto para melhorar a visibilidade em buscas tradicionais, compartilhamento em redes sociais e na descoberta emergente orientada por IA.

Para obter instruções passo a passo e uma descrição completa dos recursos de SEO, consulte: Suporte avançado de SEO no AI Studio.

Pré-visualização e revisão do seu projeto

As ferramentas de pré-visualização ajudam você a verificar a aparência do projeto antes da publicação. Esses controles são úteis para revisar o layout, testar várias páginas e confirmar a experiência em diferentes tipos de dispositivos.

Dentro do editor, você pode:

• Alternar entre a visualização de pré-visualização e a visualização de código.
• Visualize o projeto nos modos desktop, tablet e celular.
• Use o menu suspenso de páginas para alternar entre as páginas em um projeto com várias páginas.
• Abra a página selecionada em uma nova aba ou atualize a pré-visualização após as alterações.

Histórico de versões

Cada alteração gerada por IA cria uma versão à qual você pode retornar posteriormente. Isso oferece uma maneira mais segura de aprimorar seu trabalho sem se preocupar em perder um rascunho anterior. A partir do histórico de versões, você pode:

• Abra versões anteriores
• Visualizar uma versão anterior
• Adicione esta versão aos seus favoritos
• Se necessário, volte para uma versão anterior.

Isso é útil quando você deseja comparar alterações, desfazer um resultado de uma solicitação ou retornar a uma versão que melhor se adequava ao seu objetivo.

Para visualizar o histórico de versões, clique no botão Histórico de Versões dentro do seu projeto.

Integração de formulários e calendário

Formulários e calendários ajudam a transformar uma página gerada por IA em uma experiência funcional que permite coletar informações ou agendar horários com sua empresa. O AI Studio pode criar a interface para essas ações e orientá-lo nas etapas de conexão necessárias para torná-las funcionais dentro da sua conta. Isso torna o resultado mais utilizável desde o início, permitindo que você controle quando os formulários e calendários serão conectados.

Como os formulários funcionam no AI Studio

O AI Studio pode criar seções e experiências de página baseadas em formulários a partir de uma solicitação. Por exemplo, você pode pedir para adicionar um formulário de contato, um formulário de inscrição, um formulário de feedback ou uma seção de captura de leads à página. Nesta etapa, o formulário começa como um layout de front-end. Isso significa que o formulário pode aparecer na página antes de ser conectado ao seu CRM.

Quando quiser que o formulário comece a coletar envios, peça ao AI Studio para conectá-lo ou clique em Conectar quando solicitado no chat. Isso aciona o fluxo Conectar ao CRM, que é usado para:

• Criar contatos na subconta
• Capturar envios de formulários
• Fluxos de trabalho de suporte por meio do rastreamento de gatilhos.

Após a conclusão dessa etapa de conexão, o AI Studio pode integrar o formulário à configuração existente para que os envios sejam direcionados à sua conta.

Para um passo a passo completo, consulte o artigo específico sobre como conectar formulários e calendários no AI Studio.

Como funcionam os calendários no AI Studio

O AI Studio também pode criar páginas focadas em agendamento. Se você solicitar uma página de agendamento de consultas, agendamento de consultas ou chamada de descoberta, ele pode criar a página em torno do agendamento e adicionar uma seção de reservas.

Para tornar essa experiência de reserva funcional, o AI Studio pode detectar calendários já existentes na subconta e solicitar que você escolha qual deles conectar. Em linhas gerais, o fluxo do calendário funciona assim:

• O AI Studio cria a área de reservas na página.
• Você seleciona um calendário da subconta.
• Esse calendário está vinculado à página.

Isso facilita transformar uma página de reservas em uma experiência de agendamento funcional sem precisar recriá-la manualmente.

Para um passo a passo completo, consulte o artigo específico sobre como conectar formulários e calendários no AI Studio.

Publicando seus projetos

Ao publicar seu projeto do AI Studio, ele fica disponível por meio de um URL ativo, permitindo que você o revise, compartilhe e publique em seu próprio domínio. O sistema oferece um fluxo de publicação simples que começa com um URL de pré-visualização e, em seguida, permite conectar um domínio personalizado e escolher o URL principal que os visitantes devem usar.

Após a publicação de um site, os usuários podem continuar fazendo edições. Essas alterações permanecem em rascunho até que o usuário publique novamente. Isso torna mais seguro aprimorar a página sem alterar a versão publicada imediatamente.

Quando um projeto do AI Studio está conectado a um domínio:

• O projeto está hospedado no AI Studio, na seção Sites.
• A conexão de domínio está visível em Domínios.
• A página publicada aparece nesse domínio associado.

Publicar em um domínio de pré-visualização

Publicar em um domínio de pré-visualização permite que você visualize uma versão ativa do seu projeto do AI Studio antes de conectar um domínio personalizado. Isso ajuda você a testar a experiência, revisar o layout e confirmar se tudo funciona conforme o esperado antes de publicar no seu domínio personalizado.

Conectar um domínio personalizado

Conectar um domínio personalizado permite que você publique seu projeto do AI Studio em um URL com a sua marca. Você não pode conectar um domínio personalizado até que o projeto tenha sido publicado primeiro em um domínio de pré-visualização.

Defina um URL de publicação principal

Ao definir um URL de publicação principal, você pode escolher o domínio principal ativo do seu projeto do AI Studio. Outros URLs conectados serão automaticamente redirecionados (301) para o domínio principal.

Clonagem de projetos no AI Studio

O AI Studio permite clonar um projeto dentro da mesma subconta ou entre subcontas da mesma agência. A clonagem de projetos facilita a reutilização de trabalhos bem-sucedidos sem a necessidade de recriar a experiência do zero.

Ao clonar um projeto, você pode:

• Duplique-o dentro da mesma subconta.
• Clone-a para outra subconta em sua agência.
• Coloque-o no nível raiz ou dentro de uma pasta existente.
• Escolha se deseja incluir a atividade do chat e o histórico de versões do projeto original.

Siga os passos abaixo para clonar um projeto:

Compartilhe projetos usando instantâneos

Você também pode usar Snapshots para compartilhar vários projetos do AI Studio entre agências ou subcontas. Os Snapshots permitem empacotar projetos selecionados de uma subconta de origem e reutilizá-los em subcontas existentes ou ao criar novas.

Use instantâneos quando quiser:

• Compartilhe vários projetos do AI Studio simultaneamente.
• Crie modelos de projeto reutilizáveis
• Padronize as configurações do AI Studio em todas as subcontas.
• Acelere o processo de integração sem precisar clonar cada projeto individualmente.

Dados de submissão do seu projeto

Uma vez conectados, os envios de formulários são registrados na configuração de CRM da subconta conectada, e não no próprio projeto do AI Studio. Isso significa que a página permanece no AI Studio, mas as respostas, os contatos e a atividade de envio são registrados na conta conectada. Após a conexão, os envios de formulários podem aparecer como envios de terceiros e também podem ser vinculados à atividade do fluxo de trabalho por meio do rastreamento de comportamento externo.

Os usuários podem visualizar as submissões em:

• Contatos
• Sites > Formulários > Submissões > Formulários externos

Como os fluxos de trabalho se conectam aos envios de formulários

Após o formulário ser conectado ao rastreamento do CRM, os envios podem ser usados em fluxos de trabalho por meio de gatilhos de rastreamento. O fluxo prático é o seguinte:

Limitações atuais e notas importantes

Conhecer as limitações atuais do AI Studio ajuda a definir expectativas e evita confusões durante a configuração. Como o AI Studio está disponível no Labs, alguns comportamentos podem continuar a evoluir com o tempo.

Observações importantes:

• Os projetos do AI Studio são gerenciados dentro do próprio AI Studio e não podem ser migrados para os construtores padrão de Sites ou Funis.
• A recriação baseada em URLs e imagens deve ser encarada como inspiração para a estrutura, o layout e a direção do estilo, e não como uma cópia exata.
• Formulários e calendários podem exigir etapas de conexão antes de funcionarem com seus dados e configuração de agendamento.