Tech

Cursor AI Tutorial em Português: Como Criar um App do Zero em 30 Minutos [2026]

Time da MarfinTime da Marfin14 min de leitura
Cursor AI Tutorial em Português: Como Criar um App do Zero em 30 Minutos [2026]

TL;DR

  • Instalar e configurar o Cursor leva menos de 5 minutos, e a maior parte do ganho vem de três ajustes iniciais que quase ninguém faz.

Levar para a IA

Leve este artigo para o ChatGPT, o Claude ou a sua IA preferida.

Se você procurou por cursor ai tutorial e caiu em vídeo de quarenta minutos que não sai da tela de instalação, este guia resolve. Em meia hora, seguindo os passos abaixo na ordem, você vai ter o Cursor instalado, configurado para responder em português e um app rodando no navegador. Sem teoria antes da hora, sem tela de configuração que não muda nada no resultado.

Escrevemos isso usando o Cursor todos os dias na Marfin. Ele é a IDE onde construímos os projetos de clientes, e o que aparece aqui saiu de erro cometido em projeto real, não de leitura de documentação. Para dar a dimensão do tamanho da coisa: em fevereiro de 2026 a Anysphere, empresa por trás do Cursor, chegou a US$ 2 bilhões em receita anual recorrente, dobrando o faturamento em três meses, com mais de 1 milhão de usuários e avaliação de US$ 29,3 bilhões. É o SaaS que cresceu mais rápido na história, e boa parte desse crescimento vem de gente que não é programadora de formação.

O tutorial cobre instalação, as configurações que valem a pena mexer, as quatro formas de conversar com a ferramenta, a construção de um app completo do zero, como escrever prompts que acertam de primeira, os planos e preços atualizados de 2026, os erros mais comuns de quem está começando e onde o Cursor ainda trava. Se você nunca escreveu uma linha de código, dá para acompanhar. Se você já programa há dez anos, pule direto para a parte de regras de projeto e contexto, que é onde mora a diferença de produtividade.

O que é o Cursor AI e para quem esse tutorial serve

O Cursor é um editor de código com inteligência artificial integrada no núcleo do produto. Ele nasceu de um fork do VS Code, então quem já usa VS Code encontra os mesmos atalhos, as mesmas extensões e o mesmo visual. A diferença aparece no momento em que você pede algo em linguagem natural.

O primeiro pilar é o contexto do projeto inteiro. Quando você pede "adicione um sistema de login", o Cursor lê a estrutura de pastas, as rotas existentes, o esquema do banco e as dependências instaladas antes de escrever qualquer coisa. O resultado é código que encaixa no seu projeto, com os seus nomes de variável e o seu padrão de pasta, em vez de um trecho genérico copiado de tutorial.

O segundo pilar é a edição coordenada de múltiplos arquivos. Ferramentas de autocomplete mexem no arquivo aberto. O Cursor cria um componente novo, importa ele na página, ajusta o tipo no arquivo de tipos e atualiza a rota, tudo na mesma resposta. Para qualquer projeto que passe de três arquivos, isso muda o jogo.

O terceiro pilar é a conversa. Você descreve, ele gera, você olha, pede ajuste, ele refina. Esse ciclo é o que chamamos de vibe coding, e se o conceito é novo para você, vale ler antes o nosso guia completo sobre o que é vibe coding para entender a lógica por trás do que vamos fazer aqui.

Quem tira mais proveito desse tutorial: profissional de marketing que quer parar de esperar fila de desenvolvimento para subir uma página, fundador validando MVP antes de contratar time, designer que quer entregar protótipo funcional em vez de tela estática, e desenvolvedor que quer cortar pela metade o tempo gasto em tarefa repetitiva.

Cursor AI tutorial: instalação e configuração em 5 minutos

Essa parte é rápida e vale fazer com o computador aberto, executando junto.

Passo 1: download e importação do VS Code

Acesse cursor.com e baixe a versão do seu sistema, Windows, macOS ou Linux. A instalação é a padrão, sem nada fora do comum. Na primeira abertura, o Cursor detecta se você já tem VS Code e oferece importar extensões, temas, atalhos e configurações. Aceite. Isso poupa meia hora de reconfiguração e evita a sensação de estar em terreno estranho.

Passo 2: conta e escolha de plano

Crie a conta com Google ou GitHub. O plano Hobby é gratuito e entrega crédito suficiente para percorrer este tutorial do começo ao fim, incluindo o app completo. Faça o upgrade só quando bater o limite duas ou três vezes na mesma semana, o que costuma acontecer por volta do terceiro projeto sério.

Passo 3: as três configurações que mudam o resultado

Abra as configurações com Cmd+Shift+J no Mac ou Ctrl+Shift+J no Windows. Vá em Models e escolha o modelo padrão. Nossa recomendação em 2026 é deixar um modelo Claude como padrão para geração de código, porque ele acerta mais em lógica de negócio e escreve componentes mais organizados. Deixe também um modelo rápido habilitado para mudanças pequenas, porque gastar modelo premium para trocar a cor de um botão queima crédito à toa.

Ainda em configurações, ative o Tab completion e confirme que o modo Agent está ligado. O Tab é o autocomplete inteligente que prevê a próxima edição em vez da próxima palavra, e ele sozinho já justifica a troca de editor. O Agent é onde acontece a construção de projeto inteiro.

Em Rules, adicione as regras globais que valem para tudo que você faz. As nossas incluem instruções de linguagem, de estilo e de comunicação. Um exemplo direto para copiar e colar: "Responda sempre em português do Brasil. Escreva código em TypeScript com tipos explícitos. Use Tailwind CSS para estilo. Antes de mudar mais de três arquivos, explique o plano em uma frase e espere confirmação."

Passo 4: deixando o Cursor falando português

A regra global acima já resolve a maior parte, mas há um detalhe que economiza confusão. Peça também que os comentários de código e as mensagens de commit saiam em português, e que nomes de variáveis e funções continuem em inglês. Misturar idioma dentro do código gera bagunça em projeto que cresce, e essa separação evita ter que decidir isso arquivo a arquivo depois.

As quatro formas de conversar com o Cursor

Cada uma serve para um tamanho de tarefa. Usar a errada é o motivo número um de frustração de quem começa.

Tab: o autocomplete que prevê a edição

Você digita e ele sugere o restante em cinza. Aperta Tab e aceita. A diferença para o autocomplete tradicional é que o Cursor prevê edições em cadeia: se você renomeia uma variável no topo do arquivo, ele sugere a mesma troca nas outras ocorrências, uma por uma, e você vai aceitando com Tab. Em refatoração pequena, isso é mais rápido que qualquer chat.

Chat com Cmd+L: para entender e diagnosticar

Selecione um trecho, aperte Cmd+L (ou Ctrl+L) e pergunte. "O que essa função faz?", "por que esse teste está falhando?", "esse código tem problema de performance?". O chat é o lugar de investigar antes de mexer. Também é onde você cola mensagem de erro do terminal, que é a operação que mais fazemos no dia a dia.

Inline Edit com Cmd+K: para cirurgia pontual

Selecione exatamente as linhas que quer mudar, aperte Cmd+K e descreva a mudança em uma frase. "Converta para async/await", "adicione tratamento de erro com mensagem amigável", "extraia isso para uma função separada". A mudança aparece como diff verde e vermelho, e você aceita ou rejeita. Para edição pequena e localizada, é mais rápido e mais previsível que pedir ao Agent.

Agent com Cmd+I: para construir de verdade

O Agent (herdeiro do antigo Composer) opera no nível do projeto. Ele lê arquivos, cria arquivos novos, roda comandos no terminal, instala dependências, executa o app e corrige o próprio erro quando algo quebra. É aqui que o app deste tutorial vai nascer. As versões recentes do Cursor também permitem rodar mais de um agente em paralelo em tarefas independentes, o que ajuda quando você quer que um mexa no backend enquanto o outro ajusta a interface.

Cursor AI tutorial na prática: criando um app do zero em 30 minutos

Vamos construir um gerenciador de tarefas com cadastro, edição, exclusão, marcação de concluída, filtros por status, busca e persistência dos dados. É simples o bastante para caber em meia hora e completo o bastante para você aprender o ciclo inteiro.

Passo 1: preparando o terreno

Crie uma pasta vazia no seu computador com o nome do projeto. No Cursor, vá em File, Open Folder e selecione essa pasta. Abrir uma pasta vazia em vez de deixar o editor solto faz diferença, porque o Agent usa a pasta como raiz do projeto e organiza tudo dentro dela.

Passo 2: o primeiro prompt

Abra o Agent com Cmd+I e escreva um pedido longo e específico. Prompt curto gera projeto genérico que você vai passar vinte minutos ajustando. Use este como modelo:

"Crie um app de gerenciamento de tarefas usando React com Vite, TypeScript e Tailwind CSS. Requisitos: lista de tarefas mostrando título, descrição e data de criação; botão de adicionar que abre um modal com formulário; opção de editar e excluir cada tarefa; checkbox para marcar como concluída com risco no texto; filtros de todas, pendentes e concluídas; campo de busca que filtra por título e descrição; persistência no localStorage para os dados sobreviverem ao refresh; design escuro, moderno e responsivo, funcionando bem no celular. Crie a estrutura de pastas separando componentes, hooks e tipos. Ao terminar, rode o projeto e me diga a URL local."

O Agent vai listar o plano, criar os arquivos, instalar as dependências e subir o servidor. Acompanhe as mudanças na aba de diff. Você pode aceitar tudo de uma vez ou revisar arquivo por arquivo, e no começo vale revisar, porque é assim que você aprende o que ele está fazendo.

Passo 3: rodando e vendo na tela

Se o Agent não subiu o servidor sozinho, abra o terminal integrado com Ctrl+crase e rode a instalação de dependências seguida do comando de desenvolvimento. O endereço local aparece no terminal, normalmente na porta 5173 quando o projeto usa Vite. Abra no navegador e teste cada função: adicionar, editar, excluir, filtrar, buscar, atualizar a página para conferir se os dados ficaram salvos.

Passo 4: quando der erro, e vai dar

Erro faz parte. A rotina que funciona é simples: copie a mensagem inteira do terminal ou do console do navegador, cole no chat com Cmd+L e escreva uma frase de contexto, tipo "esse erro aparece quando clico em salvar no modal". O Cursor identifica a causa na maioria das vezes e propõe o ajuste. Evite só colar o erro sem contexto, porque o diagnóstico fica pior.

Se o mesmo erro voltar duas vezes depois de aceitar a correção, mude a estratégia: peça para ele explicar a causa antes de corrigir. "Não altere nada ainda. Explique por que esse erro acontece e liste duas formas de resolver." Isso quebra o ciclo de correção que gera outro problema.

Passo 5: iterando com pedidos pequenos

Com o app rodando, comece a melhorar. Um pedido por vez, verificando o resultado no navegador antes do próximo. Alguns que usamos com frequência: adicionar reordenação por arrastar e soltar; criar categorias com cores diferentes; mostrar no topo um resumo com total de tarefas, pendentes e concluídas; adicionar animação suave quando uma tarefa é marcada; incluir data de vencimento com destaque para as atrasadas.

O erro clássico aqui é empilhar cinco pedidos no mesmo prompt. Quando algo quebra, você não sabe qual dos cinco causou, e o Cursor também não. Pedido pequeno, teste, próximo pedido.

Passo 6: salvando o trabalho no Git

Peça ao Agent: "Inicialize um repositório Git, crie um gitignore adequado para projeto Vite e faça o primeiro commit com mensagem descritiva em português." A partir daí, comite depois de cada bloco de melhoria que funcionou. Isso te dá um ponto de retorno seguro, e ter para onde voltar é o que permite experimentar sem medo.

Passo 7: colocando no ar

Para publicar, peça: "Prepare o projeto para deploy na Vercel e me diga o passo a passo." Ele ajusta o que precisa e explica o processo de conectar o repositório. Em poucos minutos o app está com URL pública. Se o próximo passo do seu projeto for guardar dados de verdade em vez de localStorage, aí entra banco de dados, e a comparação entre as opções mais usadas está no nosso artigo sobre Supabase vs Firebase.

Como escrever prompts que funcionam de primeira

A qualidade da saída acompanha a qualidade da entrada, e essa é a habilidade que mais separa quem acha o Cursor mágico de quem acha o Cursor frustrante.

Compare os dois pedidos. O vago: "adicione autenticação". O específico: "Implemente autenticação com NextAuth.js usando provider do Google. Crie a página de login em /login com um botão de entrar com Google e o logo do app. Proteja as rotas /dashboard e /settings com middleware, redirecionando para /login quem não estiver autenticado. Guarde a sessão e mostre nome e foto do usuário no header, com menu de sair."

O segundo gera código que funciona na primeira tentativa. O primeiro gera três rodadas de ajuste e uma escolha de biblioteca que você não queria. A regra prática: descreva o comportamento visível, a stack a usar e o que acontece nos casos de borda.

Três hábitos que aumentam a taxa de acerto. Primeiro, diga a stack sempre, mesmo quando parece óbvio. Segundo, descreva o resultado esperado em termos de tela, não de implementação, deixando a decisão técnica com ele quando você não tem preferência. Terceiro, peça o plano antes da execução em tarefas grandes, com um "me mostre o plano em cinco linhas antes de escrever código". Quem quiser se aprofundar nisso, nosso guia de prompt engineering em português tem as técnicas em detalhe.

Regras de projeto: o arquivo que muda tudo

Na raiz do projeto, crie um arquivo de regras. O Cursor lê tanto o formato .cursorrules quanto arquivos de instrução por pasta em .cursor/rules, e projetos mais novos vêm adotando também o AGENTS.md como padrão comum entre ferramentas de IA. Escolha um e mantenha ele atualizado.

Dentro dele, escreva o que você repetiria em todo prompt. Um exemplo real do tipo de conteúdo que colocamos: "Este projeto usa Next.js com App Router, TypeScript em modo strict, Tailwind CSS e Shadcn/UI. Prefira server components. Nomeie arquivos em kebab-case e componentes em PascalCase. Escreva testes com Vitest para toda função de cálculo. Comentários e mensagens de commit em português. Nunca instale biblioteca nova sem perguntar antes."

Aquela última linha economiza mais tempo do que todas as outras juntas. Sem ela, um pedido simples de gráfico pode trazer três dependências que você vai carregar para sempre.

Contexto: o símbolo @, o codebase e o MCP

O Cursor acerta na proporção do contexto que recebe. Use o @ para apontar exatamente onde ele deve olhar. Digitando @ no chat ou no Agent, você referencia arquivos e pastas específicos, algo como "@components/header.tsx inclua um menu de perfil com foto e opção de sair".

Além dos arquivos, existem referências que ampliam o alcance. O @codebase faz uma varredura no projeto inteiro antes de responder, ideal quando você não sabe onde uma lógica está implementada. O @docs puxa documentação oficial de bibliotecas, o que reduz muito a chance de ele inventar uma função que não existe. O @web busca informação atualizada na internet, útil quando a biblioteca mudou depois do treinamento do modelo.

Em 2026, o próximo nível de contexto vem do MCP, o protocolo que conecta a IDE a sistemas externos como banco de dados, ferramentas de design e serviços internos da empresa. Com um servidor MCP ligado ao seu banco, o Cursor consulta o esquema real antes de escrever a query, em vez de adivinhar nomes de coluna. Explicamos o funcionamento com calma no artigo sobre MCP, o Model Context Protocol.

Cursor AI vs Claude Code, Copilot, Lovable e v0

Nenhuma dessas ferramentas resolve tudo, e o setup que usamos combina várias.

Contra o GitHub Copilot, a diferença é de escopo. O Copilot continua sendo o melhor autocomplete linha a linha e vive dentro do editor que você já usa. O Cursor planeja, executa e coordena mudança em vários arquivos. Quem escreve muito código à mão ganha com o Copilot, quem delega tarefas inteiras ganha com o Cursor.

Contra o Claude Code, a diferença é de ambiente. O Claude Code roda no terminal e é a ferramenta de programação com IA que mais usamos globalmente na Marfin, principalmente em refatoração de projeto inteiro, migração de dependência, investigação de bug difícil e automação de tarefa repetitiva. O Cursor é onde ficamos no dia a dia de construir interface e iterar visualmente. A combinação dos dois é o nosso padrão, e ela aparece descrita dentro do nosso tech stack de 2026.

Contra Lovable e v0, a diferença é de estágio do projeto. Lovable entrega app visual completo sem você abrir editor nenhum, com Supabase integrado, e é imbatível para validar ideia em minutos. O v0 da Vercel gera componentes de interface muito bons a partir de descrição ou print. O Cursor entra quando o projeto amadurece e você precisa de código organizado e controle fino. Migrar do Lovable para o Cursor quando o protótipo vira produto é um caminho comum, e o comparativo detalhado está em Lovable vs Bolt.new vs v0. Para quem está decidindo só a IDE, temos também o comparativo entre Replit, Cursor e Windsurf.

Planos e preços do Cursor em 2026

O Hobby é gratuito e inclui um volume limitado de completions e algumas requisições com modelos premium por mês. Dá para fazer este tutorial inteiro e decidir com calma se vale pagar.

O Pro custa US$ 20 por mês e é o plano da maioria. Ele libera uso ilimitado dos modelos rápidos, uma cota generosa de modelos premium e o modo Agent sem restrição prática para uso individual. É o que usamos na Marfin. Acima dele existem tiers com cota multiplicada, o Pro+ e o Ultra, voltados para quem roda agente o dia inteiro e esbarra no limite mensal antes da segunda semana.

O plano de times sai por volta de US$ 40 por usuário por mês e agrega administração centralizada, faturamento único, política de privacidade aplicada a todos e SSO. Vale registrar que a fatia enterprise já responde pela maior parte da receita do Cursor, o que explica o ritmo de recursos voltados a equipe grande.

Duas observações práticas sobre custo. A cota some rápido quando você usa modelo premium para tarefa boba, então mantenha o modelo rápido como padrão e troque para o premium só na hora do trabalho pesado. E confira a página de preços antes de assinar, porque o Cursor mexeu na estrutura de cobrança mais de uma vez nos últimos dois anos.

Os erros mais comuns de quem está começando no Cursor AI

1. Pedir tudo de uma vez depois do primeiro prompt. O prompt inicial longo funciona porque não existe nada para quebrar ainda. Depois que o app está de pé, pedido grande vira bagunça difícil de desfazer. Um item por vez, testando entre eles.

2. Aceitar todos os diffs sem olhar. Aceitar no automático funciona até o dia em que ele apaga uma função que você tinha ajustado à mão. Olhe o resumo das mudanças, principalmente quando o número de arquivos alterados for maior do que você esperava.

3. Não usar Git desde o primeiro minuto. Sem commit, voltar atrás significa reconstruir. Com commit a cada bloco funcional, voltar atrás é um comando. Esse é o hábito que mais reduz ansiedade em vibe coding.

4. Ignorar o arquivo de regras. Quem repete as mesmas cinco instruções em todo prompt está pagando pedágio à toa. Cinco minutos escrevendo as regras do projeto economizam horas ao longo do mês.

5. Usar o Agent para trocar a cor de um botão. Mudança pequena e localizada pede Cmd+K. Chamar o Agent para isso gasta crédito, demora mais e às vezes mexe em arquivo que não precisava.

6. Confiar em código de segurança sem revisão. Autenticação, autorização, validação de entrada e qualquer coisa que toque em dado de usuário precisam de leitura humana. A IA escreve rápido, e escreve rápido também o que está errado.

7. Desistir na primeira sequência de erros. A curva existe. As primeiras horas costumam ser mais lentas que fazer à mão, e a virada acontece por volta do terceiro projeto, quando você já sabe como pedir.

Os limites reais do Cursor

Projeto muito grande ainda derruba contexto. Em base de código com centenas de arquivos, o Agent às vezes reescreve algo que já existia em outro lugar. O contorno é apontar com @ os arquivos relevantes e manter o arquivo de regras descrevendo a arquitetura em cinco linhas.

Lógica de negócio complexa continua sendo o ponto fraco de qualquer modelo. Cálculo financeiro, regra fiscal, integração com API mal documentada, tudo isso sai com erro sutil que passa no teste superficial. Escreva teste para essas partes, ou peça para o Cursor escrever e revise o teste com atenção.

A qualidade varia com o modelo escolhido, e a diferença entre um modelo rápido e um premium em tarefa difícil é grande o suficiente para explicar quase toda reclamação de "o Cursor está burro hoje". Antes de reclamar, confira qual modelo está selecionado.

E existe o custo de revisão. Gerar código ficou barato, revisar código continua custando o mesmo tempo de sempre. Quem gera mais do que consegue revisar acumula problema para depois.

Casos de uso reais que vemos funcionando

Times de marketing constroem landing pages personalizadas por campanha, calculadoras de ROI, quizzes de diagnóstico e dashboards de métricas sem abrir chamado para o time de desenvolvimento. Se essa for a sua rota, vale combinar com o nosso material sobre ferramentas de IA para marketing digital e sobre páginas que convertem.

Designers transformam layout do Figma em protótipo clicável e testável, o que muda a conversa com stakeholder de "imagine que aqui tem um filtro" para "clica no filtro". Fundadores validam ideia com MVP funcional em dias, testam com usuário de verdade e só então decidem se contratam time. Analistas montam dashboards internos e automações de processamento de planilha que antes viviam em macro de Excel abandonada.

Um plano de sete dias para sair do zero

Dia um: instale, configure as regras globais e refaça o app de tarefas deste tutorial do começo ao fim, sem pular passo. Dias dois e três: escolha um problema real e pequeno do seu trabalho, algo que hoje você resolve com planilha, e construa a versão web dele. Dias quatro e cinco: adicione banco de dados e autenticação nesse projeto, porque é aí que você descobre o que ainda não entendeu. Dias seis e sete: publique, mostre para três pessoas usarem e corrija o que elas reclamarem.

Sete dias assim ensinam mais que qualquer curso, porque cada trava vira um diálogo com o chat e cada diálogo desses vira conhecimento que gruda. Quando quiser subir o nível e montar algo mais completo, siga com o nosso passo a passo de como criar um site com IA na prática.

O Cursor já é o presente da programação, e a vantagem hoje está com quem constrói repertório de projetos entregues enquanto o resto ainda está assistindo tutorial. Instale, escolha um problema seu e comece pelo primeiro prompt.


Leia também:

▸ THE_DOWNLOAD.SUBSCRIBE

Carregue a semana.
Instale na segunda.

Um digest do blog da Marfin. Todo sábado.

Grátis. Eject quando quiser.

A Marfin é uma venture builder de empresas tech.

Quer conhecer nossos serviços e produtos?