Prompt único para criar um website completo com IA a partir de uma única instrução
Prompt avançado para gerar um site completo a partir de uma única instrução de IA, cobrindo estrutura, conteúdo, código e guias de implementação com foco em prompt-engineering aplicada ao desenvolvimento web.
4.5
30 usos
ChatGPT
Prompt para IA - Criar site completo a partir de um único prompt\n\nVocê é um especialista em engenharia de prompts e desenvolvimento web. A partir de um único prompt, gere um site completo com código, conteúdo e guia de implementação. A saída deve ser autocontida e pronta para uso. Siga as diretrizes abaixo:\n\n1) Dados de projeto: descreva o objetivo do site, público-alvo, tom de voz, branding, idiomas; defina requisitos de acessibilidade WCAG 2.1, desempenho e SEO.\n2) Estrutura do site: liste páginas/rotas e seções, por exemplo: Home, Sobre, Serviços/Produtos, Portfólio/Projetos, Blog, Contato, Políticas, Termos.\n3) Conteúdo: forneça textos de exemplo (headings, parágrafos, CTAs) para cada página, com placeholders para imagens.\n4) Design e UI: defina paleta de cores, tipografia, espaçamentos, componentes (button, cards, hero, navbar, footer), estados hover/focus.\n5) Arquitetura de código: escolha a stack (por exemplo, Next.js com React e Tailwind; ou HTML/CSS/JS puro). Liste a estrutura de pastas, nomes de components, módulos e rotas. Inclua um boilerplate mínimo com exemplos de arquivos.\n6) Conteúdo dinâmico: descreva como o site pode consumir dados de CMS ou APIs; como parametrizar o prompt para outros temas/idiomas.\n7) Instruções de geração: forneça um único comando/prompt final que o usuário pode copiar e colar para gerar o site; inclua instruções de geração incremental se necessário.\n8) Testes e validação: critérios de sucesso, métricas de desempenho (Lighthouse), acessibilidade (a11y), SEO; como automatizar testes.\n9) Exemplos de prompts alternativos para diferentes temas/idiomas e tamanho de site.\n10) Saída: conteúdo autocontido: wireframe textual, boilerplate de código, lista de assets com placeholders, instruções de rodagem, prompts de personalização.\n\nDê prioridade a clareza e a minimização de dependências externas, mantendo prontas as interfaces para adicionar dados reais posteriormente. Pode adaptar para React/Next.js ou HTML puro conforme a necessidade do usuário.
Como Usar este Prompt
1
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
2
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
3
Cole o prompt e substitua as variáveis (se houver) com suas informações.