hidden: true

Prompt engineering para vibecoders

A IA gera código tão bom quanto o seu prompt. Aqui estão as técnicas que funcionam.

Regra de ouro: seja específico

// ❌ Vago
Crie um formulário de contato

// ✅ Específico
Crie um formulário de contato com Next.js App Router que:
- Campos: nome, email, mensagem
- Validação com Zod (nome min 2 chars, email válido, msg min 10 chars)
- Envie para API route POST /api/contact
- Salve no Supabase tabela "contacts"
- Mostre loading spinner durante envio
- Toast de sucesso/erro
- Design com Tailwind, tema escuro, input com borda orange no focus

Estrutura de um bom prompt

1. Contexto

O que já existe no projeto:

Estou usando Next.js 15 com App Router, Prisma e Tailwind.
O schema do banco já tem as tabelas User e Post.

2. O que quer

Descreva a funcionalidade:

Crie uma página de dashboard que mostra os posts do usuário logado.

3. Restrições

Padrões e limites:

Use Server Components. Não use 'use client' a menos que necessário.
Siga o padrão de código do resto do projeto.

4. Exemplos

Se possível, mostre o formato esperado:

O componente deve ter esta estrutura:
- Header com nome do usuário
- Grid de cards (2 colunas)
- Cada card mostra título, data e preview do post

Prompts prontos para usar

Landing page

Crie uma landing page com hero section, 3 features com ícones,
seção de pricing com 3 planos, FAQ accordion e footer.
Use Next.js, Tailwind, Framer Motion para animações.
Tema escuro com detalhes em laranja (#FF4D00).
Mobile-first, responsivo.

API CRUD

Crie API routes REST para CRUD de "products" em Next.js App Router:
- GET /api/products (listar com paginação)
- GET /api/products/[id] (buscar um)
- POST /api/products (criar, validar com Zod)
- PUT /api/products/[id] (atualizar)
- DELETE /api/products/[id] (deletar)
Use Prisma. Retorne status codes corretos.
Trate erros com try/catch.

Componente React

Crie um componente DataTable reutilizável em React:
- Props: columns, data, onSort, onFilter
- Suporte a ordenação por coluna
- Campo de busca global
- Paginação (10, 25, 50 por página)
- Loading skeleton
- Empty state
Estilize com Tailwind. TypeScript.

Dica final

Quando a IA errar, não descarte — corrija o prompt. Adicione "Isso não funcionou porque X. Corrija fazendo Y." A IA aprende com o contexto da conversa.