cerebro-vip INEMA.CLUB
início › INEMA.DEV Desenvolvimento

Compilação de técnicas de prompt engineering para uso no Bolt,…

INEMA.DEV Desenvolvimento · 2025-06-26 · ~16 min · ver no Telegram ↗

INEMA

Melhorias na interface do usuário (UI).

And our last example here is on improving the user interface of your app, which again we have a separate video for. But here we said: “Apply a modern UI design to the app using Tailwind CSS.” “It uses this by default, so you don’t have to actually mention it.” “For the homepage, make the header navigation bar sticky with a gradient background and style the buttons with Tailwind classes.”

In this case, you don’t have to say that again. “Ensure the overall layout is responsive for mobile and desktop.” Bonus prompts: “Add a subtle animation to improve the user experience.” “Make elements fade in on page load and add a hover animation to the primary call-to-action button.”

“Make sure the UI is fully responsive on small screens: collapse the navigation bar in the mobile menu, stack sections vertically, use larger, touch-friendly buttons, and ensure no content overflows off screen on mobile.”

And with that, you're off the prompting journey. And honestly, this is a skill that stacks over time. So the more you use these techniques, the better you'll become, and the more powerful of a Bolt builder you'll be.

Tradução para o português:⌗

Nosso último exemplo aqui é sobre melhorar a interface do usuário (UI), e também temos um vídeo separado para isso. Neste exemplo, dizemos: “Aplique um design de interface moderno ao app usando Tailwind CSS.” (Isso já é usado por padrão, então não precisa sempre mencionar.) “Na homepage, faça a barra de navegação fixada no topo com fundo em degradê e estilize os botões com classes do Tailwind.”

“Garanta que o layout seja responsivo para mobile e desktop.” Prompts bônus: “Adicione uma animação sutil para melhorar a experiência do usuário.” “Faça os elementos surgirem suavemente na tela e adicione uma animação ao passar o mouse no botão de chamada para ação.”

“Garanta que a interface seja totalmente responsiva em telas pequenas: colapse o menu de navegação, empilhe as seções verticalmente, use botões maiores e fáceis de tocar, e evite que qualquer conteúdo ultrapasse a tela no mobile.”

Com isso, você inicia sua jornada de prompts. Essa é uma habilidade que melhora com o tempo. Quanto mais você pratica essas técnicas, melhor você se torna, e mais poderoso será como criador no Bolt.

Resumo técnico prático (UI com Tailwind no Bolt):⌗

```## 🎨 Interface Moderna com Tailwind CSS

  1. Utilize Tailwind CSS para todo o design.
  2. Barra de navegação: - Fixa no topo (sticky) - Fundo com degradê
  3. Botões: - Estilizados com classes do Tailwind - Adicione animação ao passar o mouse

  4. Responsividade: - Layout adaptado para mobile e desktop - Colapse o menu em mobile - Empilhe seções verticalmente - Botões grandes e touch-friendly - Nenhum conteúdo deve ultrapassar a tela

  5. Animações: - Fade-in na carga da página - Hover suave no botão principal de ação```

Pagamentos com Stripe

"Another example is Stripe integration, even though we have a separate video just for this that you should definitely watch. So here we say: “Integrate Stripe payments for a subscription plan.” “Add a pricing page that lets logged-in users subscribe to a premium plan for \$10 a month.” “When the user clicks subscribe, use Stripe Checkout to process the payment and update the user subscription status in the app.”

And the bonus prompt you could add is: “Add a one-time payment feature using Stripe.” So you also want to be very specific about the type of payment structure. Is it recurring or is it one-time? The way the app is built will really depend on how this is structured.

Tradução para o português:⌗

"Outro exemplo é a integração com Stripe, embora haja um vídeo separado só sobre isso que você deveria assistir. Aqui, você pode dizer: “Integre pagamentos com Stripe para um plano de assinatura.” “Adicione uma página de preços que permita aos usuários logados assinarem um plano premium de US\$10 por mês.” “Quando o usuário clicar em assinar, use o Stripe Checkout para processar o pagamento e atualizar o status de assinatura no app.”

E um prompt extra que você pode incluir: “Adicione uma funcionalidade de pagamento único usando Stripe.” Você precisa ser muito claro sobre o tipo de pagamento. Se é recorrente ou único. A forma como o app será construído depende diretamente disso.

Resumo técnico prático (hack):⌗

Prompt completo para Stripe no Bolt:⌗

```Integre Stripe ao app para pagamentos:

  1. Crie uma página de preços acessível apenas para usuários logados.
  2. Ofereça um plano premium de US$10/mês.
  3. Quando o usuário clicar em "Assinar", use Stripe Checkout para processar o pagamento.
  4. Após o pagamento, atualize o status de assinatura do usuário no banco de dados.
  5. (Opcional) Adicione opção de pagamento único para compra avulsa, usando Stripe também.

⚠️ Especifique no código se é recorrente (assinatura) ou único (pagamento avulso).```

Autenticação

"Here are some examples of sample prompts. So for user authentication, you can ask for something like: “Implement a user authentication using Supabase.” And what you would do is go and hook up Supabase to your project. Then you can say the following: “Include a sign-up page and a login page with email and password, and require email verification for new users.”

And in this case, just mentioning email verification tells the app that it doesn't just have to create a login panel. It has to be able to create the infrastructure to listen in for email verification from Supabase’s system.

Tradução para o português:⌗

"Aqui estão alguns exemplos de prompts. Para autenticação de usuário, você pode pedir algo como: “Implemente uma autenticação de usuário usando Supabase.” A ideia é conectar o Supabase ao seu projeto. Depois, você pode adicionar algo como: “Inclua uma página de cadastro e uma página de login com e-mail e senha, e exija verificação de e-mail para novos usuários.”

Nesse caso, só de mencionar a verificação de e-mail, o app já entende que não é apenas uma tela de login. Ele deve também criar toda a infraestrutura para escutar a verificação de e-mail que vem do Supabase.

Resumo técnico prático (hack):⌗

  • Prompt eficiente para autenticação no Bolt:

Implemente autenticação de usuários com Supabase. - Crie uma página de cadastro com campos: nome, e-mail, senha. - Crie uma página de login. - Requeira verificação de e-mail via Supabase. - Após o login, redirecione o usuário para a dashboard.

  • Importância: Ao incluir termos como “email verification”, você aciona uma cadeia de automações que configura não só a UI, mas também o backend do Supabase para:

  • Enviar e-mails de verificação

  • Validar tokens
  • Liberar acesso apenas após verificação

1. Perplexity faz a pesquisa por você⌗

  • Após enviar o prompt ao Perplexity, ele começa a vasculhar a web:

  • Documentação oficial (como a da Anthropic para Claude 4)

  • Artigos do Reddit
  • Vídeos no YouTube
  • Posts no LinkedIn

2. Geração de prompt estruturado com Perplexity⌗

  • Perplexity retorna um prompt altamente estruturado, com seções como:

  • Task: objetivo principal (ex: criar app de receitas com restrições alimentares)

  • User Auth: autenticação de usuários (com Supabase)
  • Database: estrutura do banco de dados (nome, preço, etc.)
  • AI Features: substituição de ingredientes com IA, planejamento de refeições
  • UI moderna e acessível

3. Exemplos de prompts especializados⌗

Ele dá exemplos práticos de prompts para componentes específicos do app:

  • Autenticação (Supabase):

  • "Implemente autenticação de usuários usando Supabase com verificação de e-mail"

  • Inclui cadastro, login e lógica de verificação

  • Banco de Dados (CRUD):

  • “Crie uma tabela chamada ‘produtos’ com colunas: id, nome, preço, data de criação”

  • Adicione funcionalidades para criar, ler, atualizar e deletar registros

  • Stripe (Pagamentos):

  • “Integre Stripe para plano de assinatura mensal de US\$10”

  • Use Stripe Checkout, atualize status do usuário após o pagamento

  • Também sugere prompt para pagamento único

  • Interface Moderna (Tailwind CSS):

  • Use layout responsivo

  • Cabeçalho fixo com fundo degradê
  • Botões estilizados e com animações
  • Navegação mobile com menu colapsável
  • Adicione efeitos de fade-in e hover em botões

4. Considerações finais⌗

  • "Prompting é uma habilidade que acumula": quanto mais você pratica, melhor você fica.

  • Comparação com construção de uma casa:

  • Primeiro vem o projeto (blueprint), depois a estrutura, depois os detalhes

  • Encoraja a prática constante: quanto mais modular e claro o seu prompt, mais poderoso será o app construído com Bolt

Se usarmos algo como o ChatGPT, podemos dizer algo como: “Quero que você aja como um engenheiro de prompts e construa para mim um prompt em markdown sem formatação, dentro de um bloco de código, que construa um app para encontrar receitas com restrições alimentares como sem glúten ou vegano.” Ele deve ser um app muito bonito, com visual futurista e botões fáceis de localizar.

Um ponto importante a se lembrar é que atualmente o Bolt usa o Claude 4 por trás. Mesmo com toda a infraestrutura do Bolt para facilitar o processo de prompting, no fim das contas, você ainda está conversando com uma versão refinada do Claude 4.

Então, mesmo ao criar seus prompts — especialmente usando IA — você pode pedir para a IA pesquisar como se comunicar melhor com o Claude 4 e otimizar o prompt. Isso tornará seu prompt muito mais refinado e alinhado ao modelo usado no Bolt.

07:22 – Uma ferramenta que gosto muito para isso é o Perplexity, mas qualquer ferramenta de IA que acesse a web pode servir.

07:29 – Exemplo de prompt para usar no Perplexity: “Quero que você atue como engenheiro de prompts e designer. Pesquise toda a documentação e vídeos do YouTube sobre como criar os melhores prompts para o Bolt. E também pesquise boas práticas para criar prompts otimizados para o Claude 4, visando construir um app que ajuda pessoas com restrições alimentares a encontrar receitas com IA.”

Aqui está a versão aprimorada do prompt , estruturado com base nas boas práticas de engenharia de prompts para o Bolt:

```## 🎯 Objetivo Crie um prompt para construir um aplicativo de receitas voltado para pessoas com restrições alimentares (ex: sem glúten, vegano). O app deve ser bonito, moderno, com visual futurista e botões fáceis de localizar.

💡 Requisitos Gerais⌗

  • O app deve permitir a busca de receitas por tipo de restrição alimentar.
  • Interface moderna com foco em usabilidade e acessibilidade.
  • Design futurista, limpo, com cores contrastantes e botões visíveis.

🧪 Dados Temporários⌗

Use dados fictícios (mock data) para os seguintes campos: - Nome da receita - Ingredientes - Tipo de restrição (glúten-free, vegano, etc.) - Tempo de preparo - Imagem ilustrativa

🎨 Interface⌗

  • Layout responsivo (mobile e desktop)
  • Botões grandes com animações suaves
  • Barra de navegação fixa com fundo em degradê
  • Fonte legível e ícones intuitivos

🔧 Técnicas⌗

  • Use Tailwind CSS para estilização
  • Estruture o código para fácil integração futura com Supabase

✅ Saída Esperada⌗

Gere o prompt completo em markdown não formatado, pronto para ser usado no Bolt, separado por seções: Contexto, Design, Funcionalidades, Dados Mock, Observações.```

"I want you to act as a prompt engineer and I want you to build me a prompt in unformatted markdown in a code block that builds out an app for finding recipes for specific dietary restrictions like gluten-free or vegan. It should be a very beautiful future modern looking app and it should have very easy to locate buttons."

Tradução para o português:

"Quero que você atue como um engenheiro de prompts e crie para mim um prompt em markdown sem formatação, dentro de um bloco de código, que construa um aplicativo para encontrar receitas voltadas a restrições alimentares específicas, como sem glúten ou vegano. O app deve ter uma aparência muito bonita, futurista e moderna, e deve ter botões fáceis de localizar."

Aqui está uma estrutura padrão otimizada para você usar como modelo de prompts no Bolt, especialmente útil para construir apps com IA, Supabase, Stripe, interfaces modernas, etc. Essa estrutura é modular, clara e segue os hacks citados anteriormente.

Estrutura Padrão de Prompt para Bolt⌗

```## 🎯 Objetivo do Projeto Estou desenvolvendo um aplicativo que [descreva o propósito geral]. Exemplo: "um app de receitas personalizadas para pessoas com restrições alimentares (glúten, vegano, etc.)."

🧠 Contexto⌗

O app será usado por [tipo de usuário] e deve ter foco em [acessibilidade, performance, beleza visual, simplicidade, etc.]. Exemplo: "Usuários de todas as idades que desejam encontrar receitas com base em suas restrições alimentares."

⚙️ Funcionalidades Requeridas⌗

  1. Autenticação com e-mail e senha (via Supabase).
  2. Banco de dados com CRUD completo para [nome da entidade, ex: receitas, produtos, usuários].
  3. Integração com Stripe para assinatura mensal e pagamento único.
  4. Busca por filtros personalizados (ex: sem glúten, vegano, low carb).
  5. Sistema de recomendação simples com base nos filtros escolhidos.

🎨 Design e UI⌗

  • Estilo moderno e clean.
  • Utilizar Tailwind CSS.
  • Layout responsivo para mobile e desktop.
  • Barra de navegação fixa com fundo degradê.
  • Botões grandes e acessíveis, com animação ao passar o mouse.
  • Cores contrastantes para acessibilidade.

🧪 Dados⌗

  • Use dados fictícios como placeholders (mock data) inicialmente.
  • Banco de dados com as seguintes colunas: nome, categoria, ingredientes, tempo de preparo, imagem.

📦 Tecnologias⌗

  • Supabase para autenticação e banco de dados.
  • Stripe para pagamentos.
  • Claude 4 (modelo por trás do Bolt).
  • Tailwind CSS para a interface.

💬 Observações Importantes⌗

  • Antes de executar qualquer etapa, confirme o entendimento do plano.
  • Sempre me mostre o resultado em formato de preview, com opção de refinar.
  • Ao dividir em etapas, sempre me avise o que está sendo feito.
  • O app precisa ser escalável e modular.

🧩 Etapas de Execução (para orientação interna do AI)⌗

  1. Criar estrutura do app com base no layout desejado.
  2. Configurar autenticação.
  3. Criar banco de dados com Supabase.
  4. Integrar Stripe para pagamentos.
  5. Refinar design responsivo e animações.
  6. Testar com dados mock e depois preparar para produção. ```

Como usar:⌗

  • Copie e cole no Bolt.
  • Modifique os blocos conforme o seu projeto.
  • Use o modo discussão para validar o entendimento do AI antes de construir.

Aqui estão hacks práticos para usar no Bolt com engenharia de prompt:

Hacks para Criar Prompts Poderosos no Bolt⌗

  1. Use a metáfora do "estagiário de software" Imagine que você está explicando para alguém iniciante, mas dedicado. Seja claro sobre o que quer e o porquê. Exemplo: “Quero um app de receitas para pessoas com restrições alimentares, com filtros por tipo (glúten, vegano), visual moderno e botões grandes para mobile.”

  2. Escreva prompts modulares (em blocos): Divida o prompt em:

  • Contexto: por que o app existe.
  • Funcionalidade: o que o app deve fazer.
  • Design: como deve parecer.
  • Requisitos técnicos: como deve funcionar (ex: usar Supabase, Stripe, etc.).
  1. Use o modo Discussão antes de executar:
  • Clique no botão de alternar entre build e discuss.
  • Faça perguntas do tipo: “Repita o que entendeu do meu pedido” ou “Qual modelo você vai usar?”
  • Isso evita erros logo no início.
  1. Crie um prompt de sistema no menu Knowledge:
  • Vá em Settings > Knowledge.
  • Adicione instruções padrão que devem ser lembradas sempre, como estilo de design, preferências de linguagem ou frameworks favoritos.
  1. Reutilize e refine prompts com ChatGPT e Perplexity:
  • Peça ao ChatGPT: “Melhore esse prompt para Claude 4 dentro do Bolt.”
  • Ou: “Pesquise como estruturar prompt para criar app com Supabase + Stripe + Tailwind no Bolt.”
  1. Adicione instruções ocultas com comentários: Use // ou # para inserir notas que não são comandos, mas ajudam a organizar. Exemplo:

// Início da estrutura do app Crie uma interface inicial com logotipo centralizado...

  1. Inclua restrições e exceções no prompt:
  • Isso evita surpresas. Exemplo: “Não use banco de dados local. Use Supabase.” Ou: “Evite tons muito claros no design por causa de acessibilidade.”

  1. Use placeholders no início: Peça para usar dados falsos primeiro (mock data) e só depois substitua por dados reais. Isso agiliza testes e evita bugs.

  2. Descreva interações visuais:

  • "Botões devem ter animação hover suave",
  • "A barra de navegação deve ser fixa com fundo degradê",
  • "O layout precisa ser mobile-first e responsivo."
  1. Peça confirmação antes de prosseguir: Ao final do prompt, inclua: “Antes de executar, repita o plano que você entendeu em tópicos.”

Resumo do vídeo: Como se tornar um expert em prompts no Bolt

Como usar engenharia de prompt para criar aplicativos no Bolt, com foco em precisão, estrutura e eficácia.

Abaixo estão os principais tópicos:

1. Seis Princípios Fundamentais para Criar Prompts no Bolt⌗

  • Blueprint (Plano Diretor): Crie um prompt inicial detalhado como se estivesse instruindo um estagiário de software.

  • Dividir em partes menores: Não sobrecarregue com tarefas demais de uma vez. Isso melhora o foco do modelo.

  • Seja explícito e claro: Evite termos vagos como “está feio”. Diga exatamente o que não está funcionando.

  • Use contextos e prompts de sistema: Configure preferências gerais no menu Knowledge para evitar repetir instruções.

  • Modo Discussão (Clarify): Use o modo de conversa para confirmar o entendimento do Bolt antes de aplicar mudanças.

  • Estruturação clara do prompt: Separe por blocos (contexto, requisitos, interface etc.) para guiar o modelo.

2. Demonstrações Práticas⌗

  • Prompt para app de receitas com restrições alimentares: Mostra como pedir por app moderno, bonito, com filtros de busca e dados fictícios.

  • Conceito da “casa”: Antes de aplicar funcionalidades, defina bem a estrutura (como construir primeiro o alicerce de uma casa).

  • Uso do ChatGPT e Perplexity: Ferramentas para pesquisar melhores formas de conversar com o Claude 4 (modelo por trás do Bolt).

3. Exemplos de Prompts Funcionais⌗

  • Autenticação com Supabase: Solicitar login, cadastro e verificação por e-mail.

  • Banco de dados (CRUD): Criar tabelas com colunas específicas e permitir criar, editar, listar e excluir itens.

  • Pagamentos com Stripe: Implementar planos mensais, pagamentos únicos e atualizar status de usuário.

  • UI Moderna com Tailwind CSS: Interface responsiva, com animações sutis, botões estilizados e layout otimizado para mobile.

4. Conclusão⌗

A habilidade de criar bons prompts melhora com o tempo e prática. Quanto mais você usa essas técnicas, mais poderoso se torna ao construir com o Bolt.

Como Criar Prompts no Bolt Como um Rockstar

Seis Princípios Fundamentais de Prompting: O vídeo destaca técnicas essenciais para uma engenharia de prompts eficaz no Bolt, incluindo:

  • Escrever um prompt detalhado como um plano diretor
  • Dividir tarefas em pequenas partes
  • Ser explícito nas instruções
  • Usar prompts de sistema ou de contexto
  • Esclarecer a intenção usando o modo de discussão
  • Estruturar os prompts de forma clara

Demonstrações Práticas e Estruturação de Prompts: Mostra exemplos como:

  • Criar aplicativos de receitas
  • Configurar o Supabase para autenticação e banco de dados
  • Integrar pagamentos com Stripe
  • Desenvolver interfaces responsivas Tudo isso enquanto demonstra como formatar os prompts corretamente para obter melhores resultados.

Aproveitando Ferramentas de IA para Prompts Mais Eficientes: Os espectadores são incentivados a usar ferramentas como ChatGPT e Perplexity para pesquisar boas práticas de prompting no sistema baseado no Claude 4 do Bolt, ajudando a refinar as instruções e aumentar o sucesso na construção de apps.

Bolt Master 2025 - Prompts Instrução

chatgpt.com ↗

1

Recursos

↑ voltar ao topo · ver no Telegram ↗