Módulo 11, Aula 1: baixe um template pronto, personalize com IA e coloque no ar
Passo 1
+
O primeiro passo é criar o endereço onde o site vai ficar. Dentro do painel da Hostinger você cria um subdomínio, por exemplo cliente.seudominio.com.br, e ganha um espaço próprio para hospedar esse projeto.
No painel, procure por Subdomínios, digite o nome desejado e confirme. Em poucos minutos o endereço fica pronto para receber os arquivos.
Passo 2
+
Antes de mexer no código, suba para o subdomínio as imagens que o site vai usar: logo, fotos e banners. Assim cada imagem ganha um link próprio, que você vai usar dentro do HTML na hora de personalizar.
Envie os arquivos pelo Gerenciador de Arquivos da Hostinger e copie o link de cada imagem. Guarde esses links, eles entram no prompt de personalização.
Deixe as imagens com nomes simples e sem espaços, por exemplo logo.png ou banner-desktop.png. Isso evita erro no link e mantém o carregamento leve.
Passo 3
+
Agora escolha um dos templates prontos e baixe o arquivo HTML. Cada botão abaixo já inicia o download automático. Nesta aula uso o site da nutricionista como exemplo, mas você pode usar qualquer um deles.
Depois de baixar, abra o arquivo no navegador para conhecer o layout antes de personalizar. Assim você já sabe o que vai mudar.
Passo 4
+
Com o template baixado, cole o código completo no chat da IA e envie o prompt abaixo. A IA mantém a estrutura, o layout e as animações do template e troca só a identidade, as cores, os textos e as imagens para o novo nicho.
Prompt: Personalizar o template com IA
Vou enviar o código completo de um site em HTML, CSS e JavaScript que atualmente pertence a uma nutricionista.
Sua tarefa é transformar esse site em um site para uma médica dermatologista chamada Dra. Dani Medeiros.
IMPORTANTE:
1. Preserve a estrutura visual, o layout, a responsividade, os efeitos, as animações, os cards e as funcionalidades do site original.
2. Não crie um site novo do zero.
3. Altere apenas identidade visual, imagens, textos, ícones e informações necessárias para adaptar o template.
4. Remova todas as referências à nutrição, alimentação, emagrecimento e saúde metabólica.
5. Garanta que nenhuma cor verde ou informação da identidade anterior continue aparecendo.
6. Entregue o código completo e funcional em um único arquivo HTML.
7. Não invente CRM, RQE, endereço, telefone, formação ou instituições. Use os campos entre colchetes quando a informação ainda não estiver disponível.
O prompt completo traz também a paleta de cores, o link da logo, os banners de desktop e celular, o menu, a copy de cada seção e os ajustes finais. Clique em Copiar tudo para levar o prompt inteiro.
Este prompt é o exemplo da aula, que transforma o site da nutri em um site de dermatologista. Para o seu cliente, troque o nicho, a paleta, a logo, os banners e a copy de cada seção mantendo a mesma estrutura de comando.
Recebeu o código pronto? Salve como um arquivo .html, suba para o subdomínio pelo Gerenciador de Arquivos e abra o endereço no navegador para conferir.
Passo 5
+
Subdomínio criado no painel da Hostinger.
Imagens do site enviadas e com link próprio.
Template escolhido e baixado.
Template personalizado com a IA para o novo nicho.
Site publicado no subdomínio e testado no celular.