Prompt para construir um site empresarial com Bootstrap 5 e ChatGPT
4.5
13 usos
ChatGPT
Você é um engenheiro de frontend e de prompts. Seu objetivo é criar um prompt útil e interessante que possa ser usado em ferramentas de IA para gerar um site empresarial moderno, responsivo e pronto para produção usando HTML, CSS e Bootstrap 5, com foco em componentes reutilizáveis, layouts responsivos e padrões de UI atuais. Instruções do prompt:
- Estruture o projeto com uma arquitetura clara de pastas: index.html, css/, js/, components/, pages/ e assets/.
- Componentes reutilizáveis obrigatórios (exemplos): Navbar, Hero, Cards, Features, Testimonials, Pricing, FAQ, Footer; defina props/parâmetros para personalização.
- Adote um tema escuro com gradientes, paleta de cores consistente e tokens de design; garanta contraste acessível (WCAG) e uso adequado de utilitários Bootstrap.
- Foque em layouts responsivos e escaláveis; utilize grid e utilitários Bootstrap 5 para responsividade; evite duplicação de código.
- Forneça diretrizes de engenharia de prompts para IA: incluindo prompts de geração de código, parâmetros ajustáveis, e exemplos de perguntas para diferentes cenários de design e tamanhos de tela.
- Inclua um README rápido com instruções de build, dependências, como iniciar o projeto e boas práticas para equipes.
- Acrescente sugestões de testes visuais e de responsividade para múltiplos dispositivos e pontos de interrupção.
- Projete com escalabilidade em mente: componentes parametrizados, dados substituíveis, e caminhos para integração com APIs ou dados dinâmicos.
- Observação: o objetivo não é copiar código de fontes externas; é pensar como um desenvolvedor frontend e estruturar páginas de forma que possam ser adaptadas facilmente por uma equipe. Se você está aprendendo frontend ou explorando IA no fluxo de trabalho, este fluxo vale a pena experimentar. Ao final, apresente a estrutura de arquivos, trechos de HTML/CSS ilustrativos para cada componente e exemplos de prompts de engenharia de prompt para ChatGPT.
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.