{"id":48874,"date":"2025-12-02T14:04:18","date_gmt":"2025-12-02T17:04:18","guid":{"rendered":"\/pt\/tutoriais\/prompts-para-a-hostinger-horizons"},"modified":"2026-03-10T12:59:30","modified_gmt":"2026-03-10T15:59:30","slug":"prompts-para-a-hostinger-horizons","status":"publish","type":"post","link":"\/pt\/tutoriais\/prompts-para-a-hostinger-horizons\/","title":{"rendered":"Prompts para a Hostinger Horizons: desenvolva sua aplica\u00e7\u00e3o web de maneira eficaz"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p class=\"wp-block-paragraph\">A Hostinger Horizons &eacute; uma ferramenta de IA sem c&oacute;digo que permite que voc&ecirc; crie aplica&ccedil;&otilde;es web apenas escrevendo prompts. Ela usa processamento de linguagem natural (NLP) para interpretar seus comandos e criar designs com recursos totalmente funcionais, sem necessidade de conhecimento em programa&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Para ter resultados melhores, voc&ecirc; precisa dar instru&ccedil;&otilde;es claras e detalhadas. Fornecer instru&ccedil;&otilde;es detalhadas garante que a Hostinger Horizons compreenda suas necessidades e ofere&ccedil;a os melhores resultados poss&iacute;veis. Se faltar clareza nas instru&ccedil;&otilde;es, os resultados podem n&atilde;o atender &agrave;s suas expectativas.<\/p><p class=\"wp-block-paragraph\">Neste artigo, voc&ecirc; vai aprender como escrever prompts claros e precisos para a Hostinger Horizons. Com dicas, exemplos pr&aacute;ticos e os principais erros a evitar, voc&ecirc; vai aprender a escrever bons prompts. E com esse aprendizado, voc&ecirc; criar&aacute; aplica&ccedil;&otilde;es web do seu jeito, precisando de poucos ajustes.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-dicas-para-escrever-prompts-para-a-hostinger-horizons\"><strong>Dicas para escrever prompts para a Hostinger Horizons<\/strong><\/h2><p class=\"wp-block-paragraph\">Da concis&atilde;o &agrave; itera&ccedil;&atilde;o e ajuste dos inputs, estas dicas v&atilde;o ajudar voc&ecirc; a desenvolver sua aplica&ccedil;&atilde;o web de forma eficaz com a Hostinger Horizons.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-clareza-e-especificidade\"><strong>1. Clareza e especificidade<\/strong><\/h3><p class=\"wp-block-paragraph\">Para garantir precis&atilde;o total, seu comando deve ser direto e detalhado, sem margem para interpreta&ccedil;&otilde;es erradas. Explique de forma clara a tarefa, o resultado esperado e o contexto.<\/p><p class=\"wp-block-paragraph\">Usando instru&ccedil;&otilde;es detalhadas, voc&ecirc; ajuda a<strong> <a href=\"\/pt\/horizons\">Hostinger Horizons<\/a><\/strong> a entender seus crit&eacute;rios, reduzir a necessidade de ajustes manuais e garantir que a ferramenta com IA responda de acordo com as suas exig&ecirc;ncias.<\/p><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um bom prompt:<\/strong><\/p><p class=\"wp-block-paragraph\"><em>&ldquo;Crie uma ferramenta alimentada por IA para sugest&atilde;o de receitas que permita aos usu&aacute;rios inserir os ingredientes dispon&iacute;veis e receber recomenda&ccedil;&otilde;es de receitas personalizadas. Mostre detalhes da receita, incluindo tempo de preparo, n&iacute;vel de dificuldade e instru&ccedil;&otilde;es passo a passo. Construa uma interface moderna com cores de fundo em tons pastel e imagens de alimentos com alta qualidade.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Esse prompt fornece instru&ccedil;&otilde;es claras sobre o conte&uacute;do, estrutura e elementos de design, para que a Hostinger Horizons possa gerar uma p&aacute;gina que se aproxime ao m&aacute;ximo da vis&atilde;o do usu&aacute;rio.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-prompt-be-clear-and-specific.png\/w=1024,h=1024,fit=scale-down\" alt=\"hostinger horizons prompt\" class=\"wp-image-48885\" style=\"object-fit:cover;width:1024px;height:546px\"><\/figure><\/div><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um prompt que precisa de melhorias:<\/strong><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma ferramenta para receitas.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Esse pedido &eacute; muito vago e n&atilde;o possui detalhes importantes sobre o tipo de ferramenta de receita que o usu&aacute;rio precisa, como o prop&oacute;sito, caracter&iacute;sticas, conte&uacute;do e prefer&ecirc;ncias de design. Assim, a Hostinger Horizons vai te dar uma ferramenta de receita, mas pode estar distante do que voc&ecirc; realmente precisa e vai exigir adapta&ccedil;&otilde;es manuais.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Boas pr&aacute;ticas para escrever prompts claros e espec&iacute;ficos<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Descreva a intera&ccedil;&atilde;o entre usu&aacute;rio e o app <\/strong>: descreva como os usu&aacute;rios devem navegar pela aplica&ccedil;&atilde;o e interagir com seus recursos.<\/li>\n\n\n\n<li><strong>Especifique prefer&ecirc;ncias de design e est&eacute;tica<\/strong>: d&ecirc; detalhes sobre os aspectos visuais para que a Hostinger Horizons possa alinhar o design com a identidade da sua marca ou estilo pessoal.<\/li>\n<\/ul><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Sugest&atilde;o de leitura                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Conhe&ccedil;a a interface e as principais caracter&iacute;sticas da <a href=\"\/pt\/horizons\">Hostinger Horizons<\/a> lendo nosso guia.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-2-simplifique-os-conceitos-mais-complexos\"><strong>2. Simplifique os conceitos mais complexos<\/strong><\/h3><p class=\"wp-block-paragraph\">Quando usar a Hostinger Horizons, voc&ecirc; pode adicionar v&aacute;rios recursos &agrave; sua aplica&ccedil;&atilde;o web. Pode at&eacute; parecer eficiente solicitar tudo em um &uacute;nico comando para economizar no seu limite de mensagens. Mas, se voc&ecirc; dividir as ideias mais complicadas em tarefas menores, os resultados v&atilde;o ser bem melhores.<\/p><p class=\"wp-block-paragraph\">Essa t&eacute;cnica, chamada de <strong>prompting decomposto<\/strong>, ajuda a Hostinger Horizons a focar no que importa, sem se perder em detalhes demais. Separar as tarefas tamb&eacute;m ajuda a identificar e corrigir erros de forma mais r&aacute;pida em &aacute;reas espec&iacute;ficas.<\/p><p class=\"wp-block-paragraph\"><strong>Aqui est&atilde;o alguns exemplos legais de prompts:<\/strong><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie um formul&aacute;rio para que os usu&aacute;rios possam avaliar filmes em uma escala de 1 a 5 estrelas e escrever uma cr&iacute;tica em um texto de at&eacute; 500 palavras.&rdquo;<\/em><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Desenvolva uma p&aacute;gina de banco de dados de filmes exibindo os t&iacute;tulos de filmes com p&ocirc;steres, g&ecirc;neros, datas de lan&ccedil;amento e classifica&ccedil;&otilde;es m&eacute;dias dos usu&aacute;rios, orden&aacute;vel por classifica&ccedil;&atilde;o e data de lan&ccedil;amento.&rdquo;<\/em><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma ferramenta de pesquisa onde os usu&aacute;rios possam encontrar filmes por t&iacute;tulo, g&ecirc;nero ou ator, com sugest&otilde;es de preenchimento autom&aacute;tico.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;?<\/strong> Ao falar de cada fun&ccedil;&atilde;o em prompts espec&iacute;ficos, o desenvolvimento fica mais focado, e o resultado &eacute; uma aplica&ccedil;&atilde;o web para cr&iacute;ticas de filmes pr&aacute;tica e f&aacute;cil de usar.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-prompt-break-down-complex-ideas.png\/w=1024,h=1024,fit=scale-down\" alt=\"prompt decomposto na hostinger horizons\" class=\"wp-image-48886\" style=\"object-fit:cover;width:1024px;height:543px\"><\/figure><\/div><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um prompt que precisa de melhorias:<\/strong><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>Crie um site para cr&iacute;ticas de filmes com contas de usu&aacute;rios, lista de filmes, envio de cr&iacute;ticas e fun&ccedil;&atilde;o de pesquisa.<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Esse prompt &eacute; muito amplo e faltam instru&ccedil;&otilde;es detalhadas para cada uma das fun&ccedil;&otilde;es. Como consequ&ecirc;ncia, a IA pode criar respostas que n&atilde;o est&atilde;o completas ou s&atilde;o inconsistentes, o que aumenta o risco de erros.<\/p><p class=\"wp-block-paragraph\"><strong>Boas pr&aacute;ticas para descomplicar ideias<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Defina a ordem das tarefas conforme as conex&otilde;es entre elas<\/strong> &ndash; Identifique os recursos que dependem de outros e organize o desenvolvimento com isso.<\/li>\n\n\n\n<li><strong>Defina objetivos claros para cada recurso<\/strong> &ndash; Estabele&ccedil;a metas e resultados espec&iacute;ficos para que cada componente funcione conforme o esperado.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-3-comece-pela-funcao-principal\"><strong>3. Comece pela fun&ccedil;&atilde;o principal<\/strong><\/h3><p class=\"wp-block-paragraph\">Dando sequ&ecirc;ncia &agrave; dica anterior, &eacute; sempre bom come&ccedil;ar pela fun&ccedil;&atilde;o principal antes de incluir recursos extras. Isso ajuda a Hostinger Horizons a definir as necessidades principais, criando uma base s&oacute;lida antes de incluir recursos adicionais.<\/p><p class=\"wp-block-paragraph\">Priorizar as caracter&iacute;sticas principais desde o come&ccedil;o ajuda a usar seu tempo e os limites de mensagem de forma mais eficiente, evitando complica&ccedil;&otilde;es tanto para voc&ecirc; quanto para a ferramenta logo no in&iacute;cio.<\/p><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um bom prompt:<\/strong><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Desenvolva uma plataforma de rede social que permita aos usu&aacute;rios criar perfis e compartilhar fotos com legendas. Inclua recursos b&aacute;sicos como registro de usu&aacute;rio, personaliza&ccedil;&atilde;o de perfil e um feed de fotos exibindo posts dos usu&aacute;rios que s&atilde;o seguidos.<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;?<\/strong> Esse prompt destaca o essencial da plataforma, dando um escopo claro e tranquilo de gerenciar para a Hostinger Horizons trabalhar bem.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-prompt-start-only-with-core-functionality.png\/w=1024,h=1024,fit=scale-down\" alt=\"prompt com recursos b&aacute;sicos na hostinger horizons\" class=\"wp-image-48888\" style=\"object-fit:cover;width:1024px;height:551px\"><\/figure><\/div><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um prompt que precisa de melhorias:<\/strong><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma plataforma de rede social com perfis de usu&aacute;rios, mensagens, compartilhamento de fotos, transmiss&atilde;o ao vivo, uma loja, uma se&ccedil;&atilde;o de blog, integra&ccedil;&atilde;o com realidade virtual e recomenda&ccedil;&otilde;es de conte&uacute;do impulsionadas por IA.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;?<\/strong> Esse prompt sobrecarrega a Hostinger Horizons com recursos demais, sem priorizar as fun&ccedil;&otilde;es mais importantes. Isso pode produzir resultados incompletos ou desorganizados.<\/p><p class=\"wp-block-paragraph\"><strong>Boas pr&aacute;ticas para come&ccedil;ar pela fun&ccedil;&atilde;o principal<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Defina o prop&oacute;sito da sua aplica&ccedil;&atilde;o web<\/strong> &ndash; Tenha clareza sobre oque sua aplica&ccedil;&atilde;o foi projetada para fazer. Identifique o problema que ela resolve ou o valor que ela traz.<\/li>\n\n\n\n<li><strong>Teste as fun&ccedil;&otilde;es principais<\/strong>&ndash; Antes de adicionar mais recursos, teste todas a fun&ccedil;&otilde;es principais da sua aplica&ccedil;&atilde;o web e resolva quaisquer problemas.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-4-adicione-restricoes-e-preferencias\"><strong>4. Adicione restri&ccedil;&otilde;es e prefer&ecirc;ncias<\/strong><\/h3><p class=\"wp-block-paragraph\">Al&eacute;m de descrever o que voc&ecirc; espera que a Hostinger Horizons fa&ccedil;a, especificar o que ela n&atilde;o deve fazer tamb&eacute;m ajuda a gerar um resultado melhor.&nbsp;<\/p><p class=\"wp-block-paragraph\">Adicionar restri&ccedil;&otilde;es ajuda a tornar seu prompt mais espec&iacute;fico e menos amb&iacute;guo.&nbsp;&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um bom prompt<\/strong>:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma aplica&ccedil;&atilde;o web b&aacute;sica para minha lista de tarefas. Aqui est&atilde;o as limita&ccedil;&otilde;es a serem consideradas:<\/em><\/p><ul class=\"wp-block-list\">\n<li><em>N&atilde;o inclua autentica&ccedil;&atilde;o para usu&aacute;rios.<\/em><\/li>\n\n\n\n<li><em>Evite usar transi&ccedil;&otilde;es ou anima&ccedil;&otilde;es.<\/em><\/li>\n\n\n\n<li><em>Use apenas HTML, CSS e JavaScript, n&atilde;o incorpore nenhum framework ou outras bibliotecas.&rdquo;<\/em><\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Adicionar restri&ccedil;&otilde;es permite que a Hostinger Horizons exclua tecnologias ou recursos indesejados da sua aplica&ccedil;&atilde;o, tornando o resultado mais alinhado com seus desejos e ajudando a economizar tempo.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-prompt-incorporate-constraint-preferences.png\/w=1024,h=1024,fit=scale-down\" alt=\"adicionando prefer&ecirc;ncias na hostinger horizons\" class=\"wp-image-48887\" style=\"object-fit:cover;width:1024px;height:546px\"><\/figure><\/div><p class=\"wp-block-paragraph\"><strong>Um exemplo de prompt que precisa de melhorias<\/strong>:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma aplica&ccedil;&atilde;o web simples para minha lista de tarefas.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Nesse prompt, n&oacute;s vemos falta de detalhes e clareza sobre as especifica&ccedil;&otilde;es da aplica&ccedil;&atilde;o. Isso vai criar uma resposta geral que pode n&atilde;o atender &agrave;s suas necessidades.<\/p><h3 class=\"wp-block-heading\" id=\"h-6-mostre-exatamente-o-que-voce-quer-usando-imagens-nbsp\"><strong>6. Mostre exatamente o que voc&ecirc; quer usando imagens&nbsp;<\/strong><\/h3><p class=\"wp-block-paragraph\">A Hostinger Horizons permite que voc&ecirc; importe imagens para orientar a IA na cria&ccedil;&atilde;o de sua aplica&ccedil;&atilde;o web.<\/p><p class=\"wp-block-paragraph\">&Eacute; muito &uacute;til se voc&ecirc; tiver um esbo&ccedil;o, wireframe, paleta de cores ou refer&ecirc;ncia de design que voc&ecirc; quer que a Hostinger Horizons siga. Em vez de descrever tudo em texto, voc&ecirc; pode enviar uma refer&ecirc;ncia visual para deixar o resultado mais preciso.<\/p><p class=\"wp-block-paragraph\">Basta clicar no bot&atilde;o <strong>Carregar arquivo<\/strong> no campo de prompt, selecionar a imagem que voc&ecirc; deseja usar e escrever um comando descrevendo o que voc&ecirc; quer que a IA fa&ccedil;a.<\/p><p class=\"wp-block-paragraph\">Para deixar o design ainda melhor, voc&ecirc; pode enviar capturas de tela. Se perceber que algo n&atilde;o est&aacute; como gostaria, tire uma captura de tela da pr&eacute; visualiza&ccedil;&atilde;o &agrave; direita e indique o que deseja mudar. E ent&atilde;o, a Hostinger Horizons vai fazer os ajustes.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-update-a-specific-part-of-the-application-based-on-the-image-input.png\/w=1024,h=1024,fit=scale-down\" alt=\"ajustando web app na hostinger horizons usando imagem\" class=\"wp-image-48889\" style=\"object-fit:cover;width:1024px;height:494px\"><\/figure><\/div><p class=\"wp-block-paragraph\">Inspire-se &agrave; vontade em sites existentes, <strong>mas tenha cuidado para n&atilde;o copiar designs protegidos por direitos autorais<\/strong>, n&atilde;o &eacute; recomendado e pode causar problemas legais. Voc&ecirc; pode pedir para a Hostinger Horizons criar uma aplica&ccedil;&atilde;o web com fun&ccedil;&otilde;es semelhantes, mas com uma apar&ecirc;ncia &uacute;nica e original, assim:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Oi, eu quero criar uma aplica&ccedil;&atilde;o web parecida com o LetterBox, que permite aos usu&aacute;rios procurar por filmes, avali&aacute;-los e ler cr&iacute;ticas. Anexei a captura de tela da plataforma. Queria que voc&ecirc; usasse a imagem como inspira&ccedil;&atilde;o para adicionar os recursos e decidir sobre a posi&ccedil;&atilde;o dos bot&otilde;es. Mas por favor, use um design &uacute;nico, com escolha de cores diferentes.&rdquo;<\/em><\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-generate-a-web-application-using-an-image-as-inspiration.png\/w=1024,h=1024,fit=scale-down\" alt=\"usando imagem pra criar web app na hostinger horizons\" class=\"wp-image-48884\" style=\"object-fit:cover;width:1024px;height:501px\"><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-7-peca-para-a-ferramenta-corrigir-problemas\"><strong>7. Pe&ccedil;a para a ferramenta corrigir problemas<\/strong><\/h3><p class=\"wp-block-paragraph\">A Hostinger Horizons est&aacute; em <strong>acesso antecipado<\/strong>, ent&atilde;o pequenos erros podem surgir ao criar aplica&ccedil;&otilde;es web. &Eacute; por isso que oferecemos uma <strong>garantia de reembolso de 30 dias<\/strong> se voc&ecirc; mudar de ideia depois de experimentar.<\/p><p class=\"wp-block-paragraph\">A boa not&iacute;cia &eacute; que a Hostinger Horizons inclui um recurso <strong>de depura&ccedil;&atilde;o<\/strong> integrado que localiza e corrige problemas com base no seu comando. Quando um erro ocorre, a pr&eacute;-visualiza&ccedil;&atilde;o no painel direito n&atilde;o ser&aacute; exibida, em vez disso, a ferramenta mostrar&aacute; uma mensagem de erro e indicar&aacute; as linhas de c&oacute;digo impactadas.<\/p><p class=\"wp-block-paragraph\">O que voc&ecirc; pode fazer &eacute; copiar a mensagem de erro e o c&oacute;digo, colar no campo de prompt e pedir para a Hostinger Horizons para analisar e corrigir, assim:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Opa, encontrei um erro na minha aplica&ccedil;&atilde;o web. Voc&ecirc; pode analisar esse c&oacute;digo e corrigir o problema?<\/em> <em>[insira as linhas de c&oacute;digo afetadas]<\/em>&ldquo;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/hostinger-horizons-fix-the-given-error-message.png\/w=1024,h=1024,fit=scale-down\" alt=\"corrigindo erros na hostinger horizons\" class=\"wp-image-48883\" style=\"object-fit:cover;width:1024px;height:496px\"><\/figure><\/div><p class=\"wp-block-paragraph\">Se aparecerem outros erros, repita o processo: copie o erro, pe&ccedil;a para a ferramenta identificar e fazer a corre&ccedil;&atilde;o, at&eacute; que sua aplica&ccedil;&atilde;o funcione como voc&ecirc; espera.<\/p><h2 class=\"wp-block-heading\" id=\"h-dicas-avancadas-para-criar-bons-prompts\"><strong>Dicas avan&ccedil;adas para criar bons prompts<\/strong><\/h2><p class=\"wp-block-paragraph\">Al&eacute;m das dicas b&aacute;sicas, use as seguintes t&eacute;cnicas avan&ccedil;adas ao escrever prompts para a Hostinger Horizons para melhorar ainda mais a qualidade das respostas:&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-separe-seu-prompt-por-etapas\"><strong>Separe seu prompt por etapas<\/strong><\/h3><p class=\"wp-block-paragraph\">N&oacute;s sugerimos dividir ideias maiores em v&aacute;rias solicita&ccedil;&otilde;es, mas voc&ecirc; tamb&eacute;m pode preferir manter as tarefas relacionadas em uma &uacute;nica solicita&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Se esse for o seu caso, tente escrever sua instru&ccedil;&atilde;o como um passo a passo, em vez de um &uacute;nico par&aacute;grafo. Usar etapas ajuda a Hostinger Horizons a seguir suas instru&ccedil;&otilde;es em ordem cronol&oacute;gica, gerando resultados mais coerentes e consistentes.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, um prompt bem definido permite ajustes e melhorias de forma mais eficiente.<\/p><p class=\"wp-block-paragraph\"><strong>Aqui est&aacute; um exemplo de um bom prompt<\/strong>:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma p&aacute;gina na minha aplica&ccedil;&atilde;o que os usu&aacute;rios possam fazer cadastro e login. Como voc&ecirc; deve fazer:<\/em><\/p><ol class=\"wp-block-list\">\n<li><em>Crie uma p&aacute;gina separada para usu&aacute;rios fazerem cadastro ou login.<\/em><\/li>\n\n\n\n<li><em>Adicione formul&aacute;rios com nome de usu&aacute;rio, endere&ccedil;o de e-mail e senha.&nbsp;<\/em><\/li>\n\n\n\n<li><em>Conecte esses formul&aacute;rios com suas respectivas tabelas no banco de dados.<\/em><\/li>\n\n\n\n<li><em>Insira um bot&atilde;o de a&ccedil;&atilde;o para entrar ou se cadastrar.<\/em><\/li>\n\n\n\n<li><em>Adicione um hiperlink que mude o usu&aacute;rio da p&aacute;gina de login para a p&aacute;gina de cadastro se eles ainda n&atilde;o tiverem uma conta.<\/em><\/li>\n\n\n\n<li><em>Mostre uma mensagem de erro se os dados inseridos forem inv&aacute;lidos.&rdquo;<\/em><\/li>\n<\/ol><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Com um fluxo estruturado e separa&ccedil;&atilde;o de t&oacute;picos, esse prompt descreve passo a passo o que a Hostinger Horizons deve gerar.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Um exemplo de prompt que precisa de melhorias<\/strong>:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Crie uma p&aacute;gina na minha aplica&ccedil;&atilde;o que os usu&aacute;rios possam fazer cadastro e login.&rdquo; Adicione formul&aacute;rios para nome de usu&aacute;rio, endere&ccedil;o de e-mail e senha, que est&atilde;o conectados &agrave;s respectivas tabelas no banco de dados. Adicione dois bot&otilde;es para entrar\/cadastrar e redirecionamento para usu&aacute;rios que n&atilde;o t&ecirc;m uma conta. Se os dados inseridos forem inv&aacute;lidos, mostre um erro.<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>A falta de uma organiza&ccedil;&atilde;o mais clara no prompt pode dificultar o entendimento, fazendo com que a Hostinger Horizons perca informa&ccedil;&otilde;es importantes e gere um resultado incompleto.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-inclua-termos-tecnicos-nbsp\"><strong>Inclua termos t&eacute;cnicos&nbsp;<\/strong><\/h3><p class=\"wp-block-paragraph\">Se voc&ecirc; tem no&ccedil;&otilde;es de programa&ccedil;&atilde;o ou design de sites, inclua termos t&eacute;cnicos no seu prompt. Por exemplo, voc&ecirc; pode usar termos como <strong>flexbox<\/strong>, <strong>lazyloading<\/strong> e <strong>design minimalista<\/strong>.&nbsp;&nbsp;<\/p><p class=\"wp-block-paragraph\">Adicionar termos t&eacute;cnicos torna seu prompt mais eficiente e espec&iacute;fico, minimizando a ambiguidade. Isso tamb&eacute;m garante que a resposta da IA esteja mais alinhada com as suas expectativas.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Exemplos de bons prompts<\/strong>:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Mude o design da minha aplica&ccedil;&atilde;o web para um design minimalista, use apenas elementos bidimensionais e uma paleta de cores monocrom&aacute;tica.&rdquo;<\/em><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Implemente o lazyloading na minha aplica&ccedil;&atilde;o web usando CSS e JavaScript. Use a API <\/em><em>IntersectionObserver<\/em><em> para carregar imagens quando elas aparecem na viewport do usu&aacute;rio.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;?<\/strong> Esses prompts fornecem detalhes t&eacute;cnicos e uma explica&ccedil;&atilde;o clara do que incluir na aplica&ccedil;&atilde;o, permitindo que a Hostinger Horizons compreenda melhor suas demandas.<\/p><p class=\"wp-block-paragraph\"><strong>Exemplos de prompts que precisam de melhorias<\/strong>:<\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Mude o design da minha aplica&ccedil;&atilde;o web. Eu quero que seja muito simples e b&aacute;sico, tanto em termos de cor quanto de design.&rdquo;<\/em><\/p><p class=\"has-text-align-center wp-block-paragraph\"><em>&ldquo;Fa&ccedil;a minha aplica&ccedil;&atilde;o web carregar imagens apenas quando os usu&aacute;rios as visualizarem.&rdquo;<\/em><\/p><p class=\"wp-block-paragraph\"><strong>Por qu&ecirc;? <\/strong>Essas instru&ccedil;&otilde;es s&atilde;o vagas e podem ser mal interpretadas. Por exemplo,<strong> design simples e b&aacute;sico<\/strong> nem sempre significa um design plano.<\/p><h2 class=\"wp-block-heading\" id=\"h-gerenciando-creditos-e-evitando-os-limites-de-prompts\"><strong>Gerenciando cr&eacute;ditos e evitando os limites de prompts<\/strong><\/h2><p class=\"wp-block-paragraph\">Assim como outras ferramentas de IA para desenvolvimento, a Hostinger Horizons tem um limite para prompts, tornando importante gerenciar seu cr&eacute;dito de forma eficiente.<\/p><p class=\"wp-block-paragraph\">Um erro comum ao usar a Hostinger Horizons &eacute; gastar muitos cr&eacute;ditos na constru&ccedil;&atilde;o da aplica&ccedil;&atilde;o web. O ideal &eacute; separar alguns cr&eacute;ditos para integra&ccedil;&atilde;o de servi&ccedil;os externos e resolu&ccedil;&atilde;o de problemas.<\/p><p class=\"wp-block-paragraph\">Mesmo que o limite de mensagens seja reiniciado mensalmente, e que voc&ecirc; tenha a op&ccedil;&atilde;o de fazer upgrade para ter mais cr&eacute;ditos, administrar bem seus cr&eacute;ditos ajuda a tornar seu desenvolvimento mais eficiente.<\/p><p class=\"wp-block-paragraph\">Confira as estrat&eacute;gias de incentivo da Hostinger Horizons para te ajudar a usar seus cr&eacute;ditos de comandos da forma mais eficiente poss&iacute;vel.<\/p><ul class=\"wp-block-list\">\n<li>Escreva um prompt detalhado e claro para evitar repetir pontos b&aacute;sicos depois.&nbsp;<\/li>\n\n\n\n<li>Revise seu prompt antes de envi&aacute;-lo para que voc&ecirc; n&atilde;o desperdice seus cr&eacute;ditos para completar a instru&ccedil;&atilde;o inicial.&nbsp;<\/li>\n\n\n\n<li>Pegue o primeiro resultado como base e v&aacute; refinando cada aspecto do desenvolvimento separadamente. Primeiro, ajuste os elementos visuais, depois passe para as funcionalidades.<\/li>\n\n\n\n<li>Para cada novo ajuste, mantenha a estrutura do prompt original: esclare&ccedil;a o objetivo, forne&ccedil;a especifica&ccedil;&otilde;es detalhadas e alinhe suas expectativas.<\/li>\n\n\n\n<li>Um prompt bem estruturado garante melhores resultados.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">No entanto, lembre-se de que a quantidade de cr&eacute;ditos consumidos depender&aacute; principalmente da complexidade da sua aplica&ccedil;&atilde;o web.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Como uma ferramenta de desenvolvimento alimentada por IA, a Hostinger Horizons precisa receber prompts de alta qualidade para fornecer resultados mais precisos. Seu prompt deve ser detalhado, fornecendo informa&ccedil;&otilde;es suficientes sobre as exig&ecirc;ncias do seu projeto.&nbsp;<\/p><p class=\"wp-block-paragraph\">Comece descrevendo a fun&ccedil;&atilde;o principal da sua aplica&ccedil;&atilde;o e, depois, passe para os detalhes. Para tornar suas instru&ccedil;&otilde;es mais claras, divida tarefas complexas em v&aacute;rias solicita&ccedil;&otilde;es e inclua restri&ccedil;&otilde;es para que a Hostinger Horizons entenda melhor o que incluir no seu projeto.&nbsp;<\/p><p class=\"wp-block-paragraph\">Caso tenha um design ou refer&ecirc;ncia visual voc&ecirc; pode fazer o upload na interface da Hostinger Horizons para ajudar no desenvolvimento.&nbsp;<\/p><p class=\"wp-block-paragraph\">Esperamos que este artigo ajude voc&ecirc; a criar comandos mais eficientes e tornar o desenvolvimento web ainda mais produtivo.Se voc&ecirc; tem perguntas sobre a Hostinger Horizons, deixe um coment&aacute;rio abaixo ou leia nosso FAQ da Hostinger Horizons.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-perguntas-frequentes-faq-sobre-prompts-para-a-hostinger-horizons\"><strong>Perguntas Frequentes (FAQ) sobre prompts para a Hostinger Horizons<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694410966e8e1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Que tipo de aplica&ccedil;&otilde;es web eu posso criar?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>A Hostinger Horizons permite que voc&ecirc; construa praticamente qualquer tipo de aplica&ccedil;&atilde;o, desde um jogo de damas on-line que conecta jogadores aleat&oacute;rios at&eacute; uma plataforma mais elaborada de controle de horas trabalhadas. Por&eacute;m, voc&ecirc; n&atilde;o pode construir aplica&ccedil;&otilde;es de n&iacute;vel empresarial, como uma ferramenta para controle de caixa da empresa ou folha de pagamento, devido &agrave;s limita&ccedil;&otilde;es da IA.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694410966e8e4\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Qu&atilde;o detalhados devem ser meus prompts?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Quanto mais detalhados forem seus prompts, melhores ser&atilde;o os resultados dados pela Hostinger Horizons. O ideal &eacute; explicar a tarefa, o resultado desejado, contexto e requisitos da aplica&ccedil;&atilde;o de forma clara. &Eacute; melhor come&ccedil;ar com um prompt mais amplo que abrange as &aacute;reas b&aacute;sicas do seu projeto e refinar os detalhes em seguida.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694410966e8e5\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">O que devo fazer se o resultado n&atilde;o sair como esperado?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>&Eacute; normal que uma ferramenta de IA forne&ccedil;a um resultado inicial um pouco diferente do que voc&ecirc; espera. Neste caso, d&ecirc; mais comandos para refinar o resultado, para que ele esteja mais alinhado com as suas expectativas. Altere um aspecto da sua aplica&ccedil;&atilde;o de cada vez at&eacute; obter o resultado desejado, depois passe para o pr&oacute;ximo.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A Hostinger Horizons &eacute; uma ferramenta de IA sem c&oacute;digo que permite que voc&ecirc; crie aplica&ccedil;&otilde;es web apenas escrevendo prompts. Ela usa processamento de linguagem natural (NLP) para interpretar seus comandos e criar designs com recursos totalmente funcionais, sem necessidade de conhecimento em programa&ccedil;&atilde;o. Para ter resultados melhores, voc&ecirc; precisa dar instru&ccedil;&otilde;es claras e detalhadas. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/prompts-para-a-hostinger-horizons\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":473,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Prompts para a Hostinger Horizons","rank_math_description":"Neste artigo, voc\u00ea vai aprender como escrever prompts para a Hostinger Horizons com dicas, exemplos pr\u00e1ticos e os principais erros a evitar.","rank_math_focus_keyword":"Prompts para a Hostinger Horizons","footnotes":""},"categories":[],"tags":[],"class_list":["post-48874","post","type-post","status-publish","format-standard","hentry"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/prompting-with-hostinger-horizons","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/prompts-para-a-hostinger-horizons","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/prompting-avec-hostinger-horizons","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/tips-prompt-untuk-hostinger-horizons","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/hostinger-horizons-prompting","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/prompting-con-hostinger-horizons","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/prompting-with-hostinger-horizons\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/prompting-with-hostinger-horizons","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/prompting-with-hostinger-horizons","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/prompting-with-hostinger-horizons","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/prompting-with-hostinger-horizons","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/prompts-para-a-hostinger-horizons","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/473"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=48874"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48874\/revisions"}],"predecessor-version":[{"id":49013,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48874\/revisions\/49013"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=48874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=48874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=48874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}