🏗️ Framework CIRF: Contexto, Instrucao, Restricao, Formato
O CIRF e o framework fundamental para escrever prompts que geram codigo utilizavel. Cada letra representa um pilar que adiciona precisao ao seu pedido. Sem CIRF, voce esta jogando na loteria: as vezes a IA acerta, as vezes gera lixo. Com CIRF, voce controla o resultado.
A grande maioria dos prompts que geram codigo ruim falha em pelo menos um dos quatro pilares. Normalmente o Contexto (a IA nao sabe que stack voce usa) ou a Restricao (a IA gera algo generico demais). Dominar o CIRF transforma a qualidade do que a IA entrega.
Os 4 Pilares do CIRF
C - Contexto
O que a IA precisa saber sobre o seu projeto antes de executar qualquer coisa. Stack, arquitetura, estado atual, convencoes.
// Bom contexto:
"Projeto Next.js 14 com App Router, Tailwind CSS, Supabase para auth e DB. TypeScript strict mode. O projeto ja tem layout base com sidebar e header. Estou usando Zustand para state."
I - Instrucao
O que voce quer que a IA faca. Quanto mais especifico, melhor. Nao diga "crie uma pagina". Diga exatamente o que deve estar nessa pagina.
// Boa instrucao:
"Crie o componente ProjectCard que exibe: titulo do projeto (h3), descricao truncada em 2 linhas, badge de status (ativo/pausado/concluido), data de criacao formatada, e botao de abrir que navega para /projects/[id]."
R - Restricao
O que a IA NAO deve fazer. Limites tecnicos, de estilo, de tamanho. As restricoes evitam que a IA tome decisoes que voce nao quer.
// Boas restricoes:
"Nao use bibliotecas externas alem de Tailwind. Nao crie arquivos extras. Maximo 150 linhas. Server Component (sem 'use client'). Nao faca fetch de dados, use props tipadas."
F - Formato
Como voce quer receber a resposta. Formato do arquivo, estrutura, comentarios, tipos.
// Bom formato:
"Retorne um unico arquivo .tsx. Inclua interface Props no topo. Adicione comentarios JSDoc na funcao principal. Use export default. Nao inclua explicacoes fora do codigo."
Impacto Mensuravel do CIRF
mais codigo correto na primeira tentativa com contexto especifico (Microsoft Research)
menos iteracoes quando restricoes sao explicitas no prompt
mais rapido chegar ao resultado final com CIRF vs prompts vagos
dos prompts que geram codigo ruim falham em Contexto ou Restricao
Dica Pratica: Prompt Completo vs Prompt Vago
Prompt VAGO (vai precisar de 5+ iteracoes):
"Cria uma pagina de login"
Prompt CIRF (funciona de primeira):
[C] Projeto Next.js 14, App Router, Tailwind, Supabase Auth. TypeScript.
[I] Crie a pagina de login com: form de email+senha, botao "Entrar", link "Criar conta" que vai para /signup, link "Esqueci senha" que vai para /forgot. Ao submeter, chamar supabase.auth.signInWithPassword e redirecionar para /dashboard.
[R] Client component. Sem bibliotecas de form (use useState). Validar email e senha nao vazia antes de submeter. Mostrar erro do Supabase em um toast simples. Nao criar o layout, so a pagina.
[F] Arquivo page.tsx com types inline. Comentarios nas secoes principais.
Fazer
- ✓Sempre incluir os 4 pilares em prompts de codigo
- ✓Especificar stack, versoes e convencoes no Contexto
- ✓Listar o que NAO fazer nas Restricoes
- ✓Definir tipo de arquivo e estrutura no Formato
Evitar
- ✗Prompts de uma linha sem contexto
- ✗Assumir que a IA sabe sua stack
- ✗Deixar a IA decidir bibliotecas e padroes sozinha
- ✗Pedir "refaz tudo" quando so precisa mudar uma parte
🎨 Prompts para Frontend: UI, Componentes, Layout
Frontend e onde a maioria dos builders comecar, e e onde a IA brilha mais. Ferramentas como v0, Cursor e Claude Code geram componentes React/Next.js com qualidade surpreendente quando voce sabe descrever o que quer. O segredo esta em ser visual com palavras.
O erro mais comum em prompts de frontend e ser funcional demais e visual de menos. Dizer "crie um card" gera um card generico. Dizer "crie um card com cantos arredondados, sombra sutil, borda na esquerda em emerald, titulo em bold 18px, descricao em gray-400 truncada em 2 linhas" gera exatamente o que voce imaginou.
Padroes de Prompt para Frontend
Padrao 1: Componente Isolado
Para criar um componente reutilizavel com props tipadas:
"Crie um componente React [Nome] que recebe [props com tipos]. Visualmente: [descricao visual detalhada]. Comportamento: [interacoes, hover, click]. Responsivo: [como muda em mobile]. Use Tailwind, sem libs extras."
Padrao 2: Layout de Pagina
Para gerar o layout completo de uma pagina:
"Crie o layout da pagina [nome] com: [header: descricao], [sidebar: descricao], [area principal: descricao], [footer: descricao]. Grid/flex: [como distribui o espaco]. Breakpoints: [sm, md, lg comportamento]."
Padrao 3: Estilizacao de Componente Existente
Para refinar visual de algo que ja existe:
"Este componente [cole o codigo]. Mude: [lista especifica de mudancas visuais]. Mantenha: [o que nao deve mudar]. Adicione: [novas interacoes ou estados visuais]."
Exemplo Real: Prompt para Dashboard Card
// Prompt completo usando CIRF:
[C] Next.js 14, Tailwind, TypeScript. Componente para dashboard de SaaS. Tema escuro com emerald como accent.
[I] Crie StatsCard que mostra: icone (recebe como prop, Lucide React), titulo (string), valor (number formatado com Intl), variacao percentual (number, positivo=verde, negativo=vermelho), e sparkline simplificado (array de 7 numeros renderizado como barras minusculas).
[R] Sem chart library. Sparkline com divs e alturas proporcionais. Lucide React e a unica lib externa permitida. Max 80 linhas. Client component so se precisar de interacao.
[F] Arquivo StatsCard.tsx. Interface Props exportada. Componente com export default. Comentarios inline nas partes nao-obvias.
Este prompt gera um componente funcional, tipado e estilizado de primeira porque a IA sabe exatamente o que construir, como construir e o que nao fazer.
Dica Pratica: Vocabulario Visual para Prompts
Aprenda a descrever UI com precisao. Estes termos fazem a IA gerar exatamente o que voce quer:
Fazer
- ✓Descrever visualmente: cores, espacamentos, tamanhos
- ✓Especificar comportamento responsivo
- ✓Definir estados: hover, loading, empty, error
- ✓Usar referencia visual ("parecido com o card do Stripe Dashboard")
Evitar
- ✗"Faz um card bonito" (bonito como?)
- ✗"Cria uma pagina responsiva" (como se adapta?)
- ✗Nao especificar tema (light? dark? ambos?)
- ✗Pedir tudo de uma vez (pagina inteira com 20 componentes)
⚙️ Prompts para Backend: APIs, Banco, Logica
Backend e onde a maioria dos bugs criticos vivem. Prompts de backend precisam de mais rigor que prompts de frontend porque erros aqui afetam dados, seguranca e confiabilidade. Uma API mal feita pode expor dados do usuario. Um query mal escrito pode derrubar o banco.
A diferenca entre um prompt de backend "bom o suficiente" e um prompt de backend profissional esta nos detalhes: validacao de input, tratamento de erros, tipagem de retorno, permissoes de acesso. A IA nao vai incluir isso automaticamente a menos que voce peca.
Padroes de Prompt para Backend
Padrao 1: API Route
"Crie a API route [metodo] /api/[path] que: [o que faz]. Input: [body/query params com tipos]. Output: [formato da resposta com tipos]. Validacao: [regras]. Auth: [requer auth? como verificar?]. Erros: [quais erros tratar e status codes]. DB: [qual tabela, qual operacao]."
Padrao 2: Modelo de Dados
"Defina o schema para [entidade] com campos: [lista de campos com tipos, constraints, defaults]. Relacoes: [foreign keys, one-to-many, many-to-many]. Indices: [quais campos indexar]. RLS: [regras de acesso por usuario]. Migrations: [como criar a tabela]."
Padrao 3: Logica de Negocio
"Implemente a funcao [nome] que: [o que faz, passo a passo]. Params: [tipos]. Return: [tipo]. Side effects: [o que muda no sistema]. Edge cases: [lista de casos especiais]. Error handling: [como tratar cada tipo de erro]."
Exemplo Real: API de Criacao de Projeto
// Prompt CIRF para API route:
[C] Next.js 14 App Router, Supabase, TypeScript. Tabela "projects" com: id (uuid), user_id (uuid FK), title (text), description (text nullable), status (enum: active/paused/done), created_at (timestamptz).
[I] Crie POST /api/projects que: valida o body, verifica auth via Supabase, insere na tabela projects com user_id do usuario logado, retorna o projeto criado.
[R] Title obrigatorio, min 3 chars, max 100. Description opcional, max 500. Status default "active". Retornar 401 se nao autenticado, 400 se validacao falhar, 500 se DB error. Nao usar ORM, usar Supabase client direto.
[F] Arquivo route.ts. Zod para validacao do body. Types inline. Try/catch com erro tipado.
Note como o prompt especifica validacao, auth, erros e formato. Sem esses detalhes, a IA geraria uma API sem validacao e sem tratamento de erro.
Dica Pratica: Checklist de Backend no Prompt
Antes de enviar um prompt de backend, verifique se voce incluiu:
Fazer
- ✓Especificar validacao de TODOS os inputs
- ✓Incluir tratamento de erro com status codes
- ✓Definir auth requirements na rota
- ✓Pedir Zod ou outra lib de validacao explicitamente
Evitar
- ✗"Cria uma API de projetos" (qual operacao? CRUD todo?)
- ✗Nao mencionar auth (a IA vai gerar sem auth)
- ✗Confiar que a IA vai validar inputs por conta
- ✗Pedir CRUD completo em um unico prompt
🧩 Chain-of-Thought para Problemas Complexos
Nem todo problema se resolve com um unico prompt. Quando voce esta tomando decisoes arquiteturais, resolvendo bugs complexos ou planejando features com multiplas dependencias, a tecnica de Chain-of-Thought (CoT) faz a IA raciocinar passo a passo antes de gerar codigo.
Chain-of-Thought foi popularizado por um paper do Google Research em 2022 e se tornou a base de prompts avancados. A ideia e simples: ao inves de pedir o resultado final direto, voce pede para a IA pensar em etapas. Isso reduz erros logicos drasticamente, especialmente em problemas com multiplas variaveis.
Quando Usar Chain-of-Thought
Decisoes Arquiteturais
"Preciso decidir entre Supabase e Firebase para meu SaaS de [descricao]. Pense passo a passo: 1) Liste os requisitos do meu app. 2) Compare como cada um atende cada requisito. 3) Considere custo, escala e DX. 4) Recomende com justificativa."
Debug de Problemas Complexos
"Este codigo [cole o codigo] deveria fazer [X] mas faz [Y]. Analise passo a passo: 1) O que cada linha faz? 2) Onde o fluxo diverge do esperado? 3) Quais sao as possiveis causas? 4) Qual a correcao mais simples?"
Features com Dependencias
"Quero adicionar sistema de notificacoes ao meu SaaS. Antes de codar, pense: 1) Que tipos de notificacao existem? 2) Qual o modelo de dados? 3) Como o frontend consome? 4) Quais eventos disparam notificacoes? 5) Agora gere o plano de implementacao."
Multi-Turn: Conversas em Cadeia
Chain-of-Thought nao precisa acontecer em um unico prompt. Em ferramentas como Claude Code e Cursor, voce pode usar conversas multi-turn para construir raciocinio progressivo:
Turn 1: "Descreva a arquitetura ideal para [feature]. Nao gere codigo ainda."
Turn 2: "Bom. Agora defina o schema de banco para essa arquitetura."
Turn 3: "Agora crie a API route baseada nesse schema."
Turn 4: "Agora o componente frontend que consome essa API."
Cada turn constroi sobre o anterior. A IA mantem o contexto e gera codigo coerente em toda a stack.
Dica Pratica: "Think Step by Step" Quando Ajuda vs Quando Atrapalha
O famoso "think step by step" (pense passo a passo) nao e magico. Ele ajuda em problemas de raciocinio e atrapalha em problemas de execucao:
Ajuda (problemas de raciocinio):
- - Decidir entre tecnologias
- - Debugar problemas complexos
- - Planejar arquitetura
- - Analisar trade-offs
Atrapalha (problemas de execucao):
- - Gerar um componente simples
- - Criar um CRUD basico
- - Estilizar com Tailwind
- - Converter formato de dados
Fazer
- ✓Usar CoT para decisoes arquiteturais
- ✓Quebrar features complexas em turns sequenciais
- ✓Pedir "analise antes de gerar" para problemas nao-triviais
- ✓Validar cada etapa antes de prosseguir
Evitar
- ✗Usar CoT para tarefas simples (gera verbosidade)
- ✗Pedir tudo em um mega-prompt de 500 palavras
- ✗Pular etapas de planejamento e ir direto ao codigo
- ✗Aceitar o plano da IA sem questionar
⚙️ System Prompts vs User Prompts
Todo modelo de IA opera com dois tipos de instrucao: o system prompt (instrucoes persistentes que definem comportamento, personalidade e regras) e o user prompt (o pedido especifico de cada interacao). Entender essa diferenca e saber como configurar system prompts e o que separa um usuario casual de um power user de IA.
No contexto de Vibe Coding, system prompts aparecem em varios formatos: o arquivo CLAUDE.md no Claude Code, o .cursorrules no Cursor, o copilot-instructions.md no GitHub Copilot. Sao instrucoes que persistem em toda sessao e moldam como a IA se comporta no seu projeto especifico.
System vs User: A Hierarquia
System Prompt (Persistente)
Define quem a IA e e como ela se comporta. Regras que valem para TODA interacao. E como o "manual do funcionario" da IA.
O que incluir:
- Stack do projeto (Next.js, Tailwind, Supabase, etc.)
- Convencoes de codigo (naming, estrutura de pastas, patterns)
- O que nunca fazer (ex: "nunca use any em TypeScript")
- Estilo de resposta (ex: "seja direto, sem explicacoes longas")
- Contexto do projeto (o que ja existe, o que falta)
User Prompt (Por interacao)
O pedido especifico de cada momento. Assume que o system prompt ja esta ativo.
O que incluir:
- A tarefa especifica (CIRF focado na task)
- Contexto adicional relevante para essa task
- Restricoes especificas desta task
- Formato de saida desejado
Exemplos de System Prompts por Ferramenta
CLAUDE.md (Claude Code)
# Projeto: SaaS de Gestao
Stack: Next.js 14, Tailwind, Supabase, TypeScript strict
Convencoes: camelCase, components em /components, pages em /app
NUNCA: use 'any', gere console.log em producao, crie arquivos sem types
SEMPRE: valide inputs com Zod, trate erros, use Server Components quando possivel
.cursorrules (Cursor)
You are a senior Next.js developer working on a SaaS project.
Always use TypeScript strict mode.
Prefer Server Components. Use 'use client' only when needed.
Style with Tailwind CSS only. No CSS modules, no styled-components.
Validate all API inputs with Zod schemas.
Dica Pratica: Template de System Prompt para seu Projeto
Copie e adapte este template para o system prompt do seu projeto:
# [Nome do Projeto]
## Stack
- Framework: [Next.js 14 / Remix / etc]
- Styling: [Tailwind / CSS Modules / etc]
- Database: [Supabase / Firebase / Prisma+Postgres]
- Auth: [Supabase Auth / NextAuth / Clerk]
- Language: [TypeScript strict]
## Convencoes
- Naming: [camelCase funcs, PascalCase components]
- Structure: [/app routes, /components shared, /lib utils]
- State: [Zustand / Context / etc]
## Regras
- NUNCA: [lista do que a IA nao deve fazer]
- SEMPRE: [lista do que a IA deve fazer]
## Contexto Atual
- [O que ja esta implementado]
- [O que esta em progresso]
- [Proximos passos]
Fazer
- ✓Criar CLAUDE.md ou .cursorrules no dia 1 do projeto
- ✓Incluir stack, convencoes e regras de "nunca/sempre"
- ✓Atualizar o system prompt conforme o projeto evolui
- ✓Versionar o system prompt junto com o codigo
Evitar
- ✗Repetir contexto do projeto em todo user prompt
- ✗Nao usar system prompt (a IA vai assumir defaults)
- ✗System prompt generico ("voce e um bom programador")
- ✗System prompt com 5000 palavras (muito longo perde eficacia)
📚 Exercicio: Biblioteca de Prompts para seu SaaS
Uma biblioteca de prompts e uma colecao curada de prompts testados e refinados que voce reutiliza ao longo do projeto. Em vez de inventar um prompt novo toda vez que precisa de algo, voce consulta a biblioteca, adapta e executa. Isso economiza tempo e garante consistencia.
Este exercicio pede que voce crie 7 prompts: 3 para frontend, 3 para backend e 1 system prompt. Cada prompt deve ser testado contra o seu projeto real. Nao adianta criar prompts teoricos que nunca vai usar.
Os 7 Prompts da sua Biblioteca
Frontend (3 prompts)
1. Componente de UI Reutilizavel
Prompt CIRF para gerar um componente que voce vai usar em multiplas telas (ex: card, botao, modal, form input).
Teste: gere o componente e use em 2 lugares diferentes do seu projeto.
2. Layout de Pagina Completa
Prompt CIRF para gerar o layout de uma das suas 5 telas (ex: dashboard, core feature).
Teste: a pagina gerada deve ser navegavel e responsiva sem ajustes.
3. Formulario com Validacao
Prompt CIRF para gerar um form com inputs tipados, validacao client-side e estados de erro.
Teste: submeta com dados invalidos e verifique se os erros aparecem corretos.
Backend (3 prompts)
4. API Route com Auth
Prompt CIRF para gerar uma API route protegida com validacao, auth e error handling.
Teste: chame sem auth (deve dar 401), com body invalido (400), e com dados corretos (200).
5. Schema de Banco + Migration
Prompt CIRF para definir modelo de dados com tipos, constraints, indices e RLS.
Teste: execute a migration e verifique que a tabela foi criada corretamente.
6. Funcao de Logica de Negocio
Prompt CIRF para implementar uma funcao com edge cases, error handling e tipos de retorno.
Teste: chame com inputs normais, nulos, invalidos e de borda. Todos devem retornar corretamente.
System Prompt (1)
7. System Prompt do Projeto
CLAUDE.md ou .cursorrules completo com stack, convencoes, regras e contexto atual.
Teste: inicie uma nova sessao com o system prompt e faca 3 pedidos. O codigo gerado deve seguir as convencoes sem voce repetir.
Processo de Refinamento
Nenhum prompt fica perfeito na primeira tentativa. O processo de criar uma biblioteca de prompts envolve iteracao:
Escreva: Crie o prompt usando CIRF.
Teste: Execute e veja o resultado.
Analise: O que ficou certo? O que precisa mudar?
Refine: Ajuste o prompt com restricoes ou contexto que faltou.
Salve: Quando o prompt gera resultado bom consistentemente, salve na biblioteca.
Dica Pratica: Onde Guardar sua Biblioteca
Sua biblioteca de prompts deve estar acessivel e versionada. Opcoes:
Opcao 1 (Recomendada): Arquivo prompts.md na raiz do projeto. Versionado com Git. Disponivel em toda sessao de Claude Code.
Opcao 2: Notion, Obsidian ou outra ferramenta de notas. Bom para busca, ruim para versionamento.
Opcao 3: Pasta /prompts no projeto com um arquivo por categoria (frontend.md, backend.md, system.md).
O importante nao e onde guardar, e guardar. Prompt bom que voce nao salva e prompt que vai ter que reinventar semana que vem.
Fazer
- ✓Criar os 7 prompts e testar cada um
- ✓Iterar ate gerar resultado consistente
- ✓Salvar prompts versionados no repositorio
- ✓Expandir a biblioteca conforme o projeto avanca
Evitar
- ✗Criar prompts teoricos que nunca testa
- ✗Salvar o primeiro draft sem iterar
- ✗Guardar prompts so na memoria ("eu lembro")
- ✗Copiar prompts genericos da internet sem adaptar
Resumo do Modulo 1.5
Voce agora domina a arte de escrever prompts que geram codigo funcional. A qualidade do que a IA produz depende diretamente da qualidade das suas instrucoes.