> For the complete documentation index, see [llms.txt](https://docs.sprinthub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sprinthub.com/topicos/inteligencia-artificial/ai-landing-pages/ai-landing-pages-criando-a-primeira-pagina.md).

# AI Landing Pages - Criando a Primeira Página

Guia prático para gerar páginas personalizadas com IA.

## Escolhendo um título e alias

Ao acessar o módulo **AI Landing Pages**, você encontrará uma lista com todas as páginas já criadas.\
Cada item dessa lista exibe informações como o título da página, seu alias, status de publicação, URL (quando disponível), número de visitas, data de criação e quantidade de formulários enviados. Abaixo, o significado de alguns termos utilizados:

* Alias: alterar o alias redefine o endereço da sua página. A URL anterior deixa de funcionar e uma nova é criada automaticamente, baseada na última versão do seu código. Ele aparecerá no final do URL como neste exemplo: `https://seudominio.com/alias-da-pagina`.
* Título: é o nome que identifica a página dentro da lista. Ele não altera como a página aparece na aba do navegador nem em mecanismos de busca como o Google.

Após inserir o Título e o Alias, clique em **Salvar** para avançar ao Construtor.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2F6x7wBbPN3RnYqSdtg2oG%2Fimage.png?alt=media&amp;token=78623ff2-fb2b-429e-9528-46bb5af603e8" alt=""><figcaption><p><em>Lista de Páginas IA.</em></p></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2Fnw9fEF3yE1N8GfRNJ3H2%2Fimage.png?alt=media&amp;token=bc7278b5-35e8-4a10-ab3f-ec79ee130ad9" alt=""><figcaption><p><em>Tela 'Editar Página'.</em></p></figcaption></figure>

## Escolhendo o método de geração

São 4 os métodos de geração da página:

* **Padrão (recomendado):** esse método utiliza um prompt sobre a sua empresa e como você imagina o site. Nele, você pode indicar quais seções a página deve ter, sobre promoções, quais formulários ou dados deseja capturar e até detalhes de estilo, como cores e tipografia.
* **Por Imagem:** nesse método, você envia prints ou imagens de sites de referência, e a inteligência artificial gera uma página semelhante, tomando essas imagens como base.
* **Guiado:** nesse método, você responde a um questionário sobre a empresa, identidade visual, objetivos, referências, produto e público-alvo. As respostas ajudam a inteligência artificial a criar uma página mais alinhada às suas necessidades.
* **Manual:** semelhante ao método **Padrão**, mas sem utilizar bibliotecas pré-definidas de CSS (como Tailwind) ou de ícones. É indicado apenas para usuários avançados que desejam um nível de customização mais flexível.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FYyDBgPy0bdihBRxJJ7iV%2Fimage.png?alt=media&amp;token=5515a607-0c8c-4ddb-bb71-2b6f1fdbbb6e" alt=""><figcaption><p><em>Menu de Método de Geração.</em></p></figcaption></figure>

## Exemplo de Geração:  Padrão

Abaixo está um exemplo de prompt e da página gerada. Para tornar a ilustração mais completa, a única alteração feita foi a criação da logo e da imagem de introdução, ambas geradas dentro do próprio construtor.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FRv9UZsKbo9t7D90hqhLY%2Fimage.png?alt=media&amp;token=bc667644-555f-493a-a922-f420f6247c2e" alt=""><figcaption><p><em>Prompt utilizado na geração.</em></p></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FF23LMZnBDAJTA9i0C9cq%2FScreenshot_4.png?alt=media&amp;token=b52df3d1-261f-43c2-961c-7fd615fbd693" alt=""><figcaption><p><em>Construtor da página.</em></p></figcaption></figure>

## Salvando modificações e publicando a página

Sempre que você fizer alterações no construtor, é preciso salvá-las. No entanto, isso não é suficiente para atualizar o site em produção (a versão que aparece para os clientes). Para que a nova versão fique disponível, é necessário publicá-la clicando em **Sair**, no canto superior direito, após salvar.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2Fjrz14aZYsvhayEeyLl0q%2FScreenshot_5.png?alt=media&amp;token=a88d29fe-a5f2-45cb-8007-23a7a0b7d0c7" alt=""><figcaption><p><em>Construtor da página.</em></p></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FFjPK5YZpLEiRJtOVH2as%2Fimage.png?alt=media&amp;token=801533ea-3cae-4a6a-9957-0be18d301d4c" alt=""><figcaption><p><em>Tela 'Editar Página'. Aviso de página não publicada.</em></p></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2F9OjnLYuKI93kWOGcq49i%2Fimage.png?alt=media&amp;token=180193ad-2477-4859-b573-2f79cf664eef" alt=""><figcaption><p><em>Tela 'Editar Página'. URL disponível.</em></p></figcaption></figure>
