HomeCasa Prompts

Criar um site profissional completo

Gere a estrutura, os textos e o código HTML/CSS de um site profissional responsivo para um negócio, com SEO básico e acessibilidade. Pensado para ChatGPT, Claude e Gemini. Inclui 7 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Intermédio · Código · Pendente de revisão editorial

Pensado para:

Prompt

Age como um programador web sénior e designer UX especializado em sites para pequenas empresas.

Quero criar o site profissional de {{business}}, um negócio de {{industry}} localizado em {{location}}.
Público-alvo: {{audience}}.
Objetivo principal do site: {{goal}}.

Entrega, por esta ordem:
1. Um mapa do site com as páginas necessárias e a finalidade de cada uma.
2. Para a página inicial: a estrutura de secções (hero, proposta de valor, serviços, prova social, apelo à ação, contacto) com textos reais prontos a usar, num tom {{tone}}.
3. HTML5 semântico e CSS moderno (Flexbox/Grid, variáveis CSS, mobile-first) para a página inicial num único bloco, sem frameworks externas.
4. Etiquetas SEO: title (máx. 60 caracteres), meta description (máx. 155) e dados estruturados JSON-LD do tipo LocalBusiness com campos de exemplo marcados como [PREENCHER].
5. Uma lista de verificação de acessibilidade (contraste, textos alternativos, navegação por teclado) aplicada ao código.

Restrições:
- Não inventes dados de contacto, preços nem avaliações: usa marcadores [PREENCHER].
- Paleta de cores: {{colors}}.
- Explica brevemente cada decisão de design importante.

Como utilizar

  1. Preencha as variáveis com os dados reais do seu negócio.
  2. Cole o prompt no seu assistente de IA.
  3. Reveja o código num editor e substitua todos os marcadores [PREENCHER] antes de publicar.
  4. Peça iterações concretas: «torna o hero mais compacto no telemóvel» ou «acrescenta uma secção de perguntas frequentes».

Exemplo de utilização

Negócio: Fisioterapia Lumen · Setor: fisioterapia desportiva · Localização: Porto · Objetivo: conseguir marcações de primeira consulta.

Exemplo de resultado

1. Mapa do site

  • Início: apresentar o estúdio e levar ao pedido de orçamento.
  • Serviços: remodelação integral, projeto de interiores, consultoria à hora.
  • Projetos: antes e depois de casas reais.
  • Contacto: formulário de orçamento e dados [PREENCHER].

3. Código da página inicial (excerto)

<header class="hero">
  <h1>A sua primeira casa, pensada para crescer consigo</h1>
  <p>O Estúdio Aurora desenha remodelações para famílias jovens em Lisboa: espaços luminosos, práticos e à sua medida.</p>
  <a class="btn" href="#orcamento">Peça o seu orçamento sem compromisso</a>
</header>

<style>
  :root {
    --branco-sujo: #f7f5f0;
    --salvia: #8a9a7b;
    --preto: #1c1c1c;
  }
  body { margin: 0; background: var(--branco-sujo); color: var(--preto); font-family: system-ui, sans-serif; }
  .hero { display: grid; gap: 1rem; padding: 4rem 1.25rem; max-width: 60rem; margin: auto; }
  .btn { justify-self: start; background: var(--preto); color: var(--branco-sujo); padding: .9rem 1.4rem; border-radius: .5rem; }
  .btn:focus-visible { outline: 3px solid var(--salvia); outline-offset: 3px; }
  @media (min-width: 48rem) { .hero { padding: 6rem 2rem; } }
</style>

Para o botão, escolhemos preto sobre branco sujo (contraste muito acima de 4,5:1); o verde-sálvia fica para detalhes e para o indicador de foco, porque sobre fundo claro não tem contraste suficiente para texto.

4. SEO

  • Title: Estúdio Aurora | Design de interiores em Lisboa
  • Meta description: Remodelações e design de interiores para famílias jovens em Lisboa. Espaços luminosos e práticos. Peça já o seu orçamento sem compromisso…

Dados-chave

Categoria
Programação e desenvolvimento · Criar páginas web
Tipo de resultado
Código
Nível
Intermédio
Pensado para
ChatGPT, Claude e Gemini
Verificado em
Pendente de verificação editorial
Variáveis
Nome do negócio, Setor, Localização, Público-alvo, Objetivo do site, Tom e Cores da marca
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Posso publicar diretamente o código que a IA gera?

Use-o como base: reveja o código num editor, teste o site no telemóvel e no computador, substitua os marcadores [PREENCHER] e verifique o contraste e os textos alternativos antes de publicar.

Serve para WordPress ou outros construtores de sites?

Sim. O mapa do site, os textos e as etiquetas SEO podem ser transpostos para qualquer construtor. O HTML e o CSS servem de referência de design ou para um site estático.

Quantas páginas deve ter o site de um pequeno negócio?

Depende do objetivo, mas normalmente bastam a página inicial, serviços, sobre nós, contacto e as páginas legais. O prompt propõe um mapa do site adaptado ao seu caso.

Para que serve este prompt?

Gere a estrutura, os textos e o código HTML/CSS de um site profissional responsivo para um negócio, com SEO básico e acessibilidade.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude e Gemini. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Nome do negócio, Setor, Localização, Público-alvo, Objetivo do site, Tom e Cores da marca). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados