Codificação Vibe representa uma nova era de desenvolvimento de software em que a criatividade humana e a inteligência artificial trabalham juntas para produzir código em um fluxo contínuo e focado. Não se trata apenas de acelerar o desenvolvimento, trata-se de programar com sentimento, reduzir o atrito e aprimorar a experiência do desenvolvedor. Na Marvik, vemos a codificação vibratória com ferramentas de IA como uma evolução na forma como projetamos, construímos e abordamos o software. Os copilotos de IA ajudam com:

• Completando automaticamente a lógica complexa
• Refatoração instantânea do código.
• Geração de componentes padronizados ou completos.

Isso permite que os desenvolvedores se concentrem na arquitetura, na experiência do usuário e na solução criativa de problemas, enquanto as tarefas repetitivas são realizadas pela IA. O termo “codificação de vibração” começou a ganhar força após um tweet de fevereiro de 2025 de Andrej Karpathy, cofundador da OpenAI. Ele descreveu a sensação de programar junto com a IA como suave e quase meditativa. Desde então, a frase se espalhou pelas comunidades de tecnologia para descrever esse estilo de programação imersivo e aprimorado por IA.

O impacto da codificação vibracional com ferramentas de IA no desenvolvimento moderno

Na Marvik, estamos sempre procurando maneiras de otimizar processos sem sacrificar a qualidade. Como parte desse esforço, testamos uma variedade de ferramentas de desenvolvimento baseadas em IA para avaliar seu desempenho e até que ponto elas poderiam automatizar partes do nosso fluxo de trabalho de desenvolvimento web. O objetivo era simples: medir o quanto mais rápido poderíamos criar e integrar novas páginas em nossa base de código. Nós nos concentramos em ferramentas que se conectam diretamente ao Figma e geram código utilizável a partir de designs. Nossa programação incluiu:

• Adorável
• Tempo
• v0
• Dardo
• VSCode + Copiloto do GitHub
• Cursor

O objetivo: criação mais rápida de páginas

Nosso foco é automatizar a tarefa repetitiva, mas necessária, de adicionar novas páginas que sigam uma estrutura consistente. Isso normalmente inclui:

• Uma seção de heróis com texto e imagem de fundo personalizados.
• Seções informativas que reutilizam componentes e ícones comuns
• Carrosséis ou vitrines com conteúdo dinâmico
• Arquivos de tradução de idiomas que mapeiam texto para internacionalização.

Para agilizar esse processo, criamos modelos de prompt que poderiam gerar automaticamente os arquivos JSX/React e JSON relevantes com base no conteúdo de nossos designs Figma.

Ferramentas baseadas em Figma: Lovable, TempoAI, v0 e Bolt

Essas ferramentas são excelentes quando você está construindo algo novo do zero. Eles oferecem maneiras rápidas de transformar designs visuais em código. Ideal para páginas de destino, protótipos ou sites pequenos.

No entanto, enfrentamos desafios ao integrar sua saída em nossa base de código existente:

• Dardo foi útil para criar um ponto de partida, mas adaptá-lo à nossa arquitetura exigiu um esforço significativo.
• Adorável, Tempo AI e v0 teve um desempenho semelhante: eficiente no design até o código, mas sem flexibilidade para se adaptar à arquitetura personalizada ou à lógica de reutilização.

Essas ferramentas funcionam bem para projetos novos, mas são menos eficazes para integração em bases de código maduras.

Como usamos o cursor: um exemplo prático

O exemplo a seguir ilustra as solicitações necessárias para modificar o componente da seção ShowCase, alinhando-o ao design de destino. Inicialmente, tanto a imagem do novo design quanto o código do componente atual foram compartilhados no chat para definição do contexto.

Posteriormente, uma solicitação adicional foi emitida para corrigir um problema, pois as alterações implementadas fizeram com que as informações do cartão fossem renderizadas incorretamente.

A próxima etapa envolveu solicitar uma modificação de legenda: adicionar cor de gradiente e corrigir seu alinhamento.

A etapa final envolveu a modificação dos textos do idioma para a implementação do i18n, garantindo a exibição de títulos e conteúdos precisos na página.

Então, depois de todas essas etapas, finalmente alcançamos o resultado esperado:

Como usar o Cursor de forma eficiente

Para usar o Cursor de forma eficiente e tirar o máximo proveito de suas solicitações, recomendamos a seguinte abordagem estruturada: Entenda o que é o Cursor:

• Cursor é um editor de código com IA embutida, baseado no VS Code.
• Ele ajuda você a escrever, editar, refatorar e entender o código com a ajuda da IA.
• Ele usa o código real e o contexto do arquivo, tornando as solicitações muito mais precisas do que em um bate-papo independente.

Escreva instruções eficientes:

• Seja direto e específico sobre o problema: concentre-se em tarefas claras e direcionadas.
  • Exemplo: “Reescreva essa função usando async/await sem alterar a lógica”.
• Peça explicações: Útil ao trabalhar com código legado.
  • Exemplo: “O que exatamente esse redutor faz?”
• Solicite alternativas: compare várias abordagens.
  • Exemplo: “Dê-me outra maneira de fazer isso sem usar useEffect”
• Use comentários estruturados: o cursor interpreta os comentários como instruções.
  • Exemplo: “Melhorar o desempenho desse loop”
• Trabalhe em partes: ”Divida o código complexo em código menor e gerenciável seções”
  • Exemplo: Refatorar uma função por vez.

Dicas extras:

• Use o LLM para gerar testes de unidade e ajudar a depurar seu código.
• Use o botão direito do mouse e peça ao Cursor sugestões contextuais com base no código selecionado.

MCP - Protocolo de contexto do modelo

O MCP é um protocolo aberto que padroniza a forma como os aplicativos fornecem contexto e ferramentas para o LLM. Pense nisso como um sistema de plug-in para o Cursor, ele amplia os recursos da IA conectando-se a fontes de dados e ferramentas por meio de interfaces padronizadas. Ele traz os seguintes recursos:

• O MCP define como o contexto é selecionado e estruturado ao enviar solicitações para a IA.
• Organiza arquivos de projeto, ações do usuário, alterações de código e histórico de navegação em um contexto rico, mas compacto.
• Permite que a IA entenda no que você está trabalhando sem exceder os limites de tokens.

Exemplo em ação: Digamos que você esteja editando um componente chamado UserForm.tsx. O MCP fará as próximas etapas:

• Inclua arquivos relacionados, como UserSchema.ts ou FormStyles.scss
• Adicione edições recentes que você fez em Validations.ts
• Estruture isso em um prompt que o LLM possa processar de forma eficaz.

Os servidores MCP são programas leves, cada um deles expõe recursos específicos por meio do Protocolo de Contexto Modelo padronizado. Servidores MCP mais populares:

• Espaço de trabalho do Copilot do GitHub.
• Jupyter MCP.
• MCP SQLite.
• Docker MCP.

Se você estiver interessado em explorar todo o potencial dos MCPs, dê uma olhada em nossos blogs relacionados: Protocolo de contexto modelo: integração de agentes na nuvem de IA e Protocolo de contexto modelo: potencialize seus agentes com o MCP.

Regras do cursor

Como desenvolvedores, podemos definir regras para orientar o comportamento do agente de IA dentro do Cursor quando ele interage com nosso código, seja refatorando, completando o código ou gerando testes unitários. Essas regras são essenciais para evitar alucinações, a criação de estruturas inexistentes ou mudanças indesejadas. Exemplo: REGRAS: - Não crie novas funções, arquivos ou importações que não existam. - Use somente bibliotecas já importadas no arquivo atual. - Use a sintaxe ES6+ (const/let, funções de seta etc.). - Siga as convenções de nomenclatura e a estrutura de pastas existentes no projeto. - Não modifique blocos de código não relacionados. - Mantenha as alterações mínimas e focadas, a menos que especificado de outra forma. - Preserve as assinaturas e parâmetros das funções existentes. - Prefira assíncronas/aguarde as promessas com .then () ao lidar com código assíncrono. - Não introduza o TypeScript ou a digitação — use o JavaScript simples. - Adicionar comentários somente se necessário para maior clareza. - Modifique apenas o arquivo atual, a menos que seja explicitamente instruído a atualizar outros. Poderíamos incorporar essas regras em uma solicitação inicial ou como um comentário (//) dentro do código. O Cursor os reconhece e os respeita como orientação contextual para edição.

Prós - Contras de cada ferramenta

Ferramenta 🔧 Prós ✅ Contras ❌ Características ⭐ Tempo decorrido ⏱️ Lovable

• Ótimo para começar e desenvolver uma ideia do zero.
• Gera facilmente a estrutura inicial e a base de código

• Limitado para personalização avançada.
• Não é ideal para projetos complexos ou de grande escala.

• Editor visual de layout.
• Biblioteca de componentes.
• Exportar para código.
• Ideal para MVPs.

• 15-30 para uma landing page funcional.

v0

• Permite a geração de interface a partir de solicitações de linguagem natural.

• A qualidade do código pode variar.
• Limitado para lógica de negócios ou fluxos de usuário personalizados.

• AI Prompt-to-UI.
• Suporte Tailwind.
• Exportações limpas.
• Código React.
• Suporte simples para CMS.

• 10 a 20 minutos para um design e layout iniciais.

Dardo

• Geração rápida de sites completos.
• Bom para fluxos com navegação e páginas com várias seções.

• Pode gerar componentes redundantes.

• Construtor de fluxo de IA.
• Geração de páginas e componentes.
• Suporte para Tailwind + Next.js.

• 15 a 30 minutos para um site funcional básico.

Tempo AI

• Experiência focada no desenvolvedor.
• Produz código estruturado e reutilizável.

• Ainda limitado para uma personalização profunda.
• Pode exigir refinamento manual para casos extremos.

• Geração de página baseada em prompts.
• Pilha React + Tailwind.
• Integração com o IDE.

• 20 a 30 minutos para uma página bem estruturada e bem codificada.

Copiloto do GitHub

• Excelente para modificar e estender as bases de código existentes.
• Fornece uma forte ajuda contextual no IDE.

• Não foi criado para gerar páginas do zero.
• Requer orientação clara do desenvolvedor com instruções corretas e específicas.

• Preenchimento automático no IDE.
• Geração de código sensível ao contexto.
• Suporte multilíngue.

• 30 minutos para implementar uma nova página da web com a estrutura existente, incluindo alterações de layout. Depende do modelo usado.

Cursor

• Ótimo para trabalhar com bases de código existentes.
• Forte compreensão contextual do projeto.

• Não é adequado para construir do zero.
• Às vezes, fornece sugestões incompletas ou repetitivas, então precisamos reescrever solicitações mais específicas.

• IDE que prioriza a IA.
• Chat de código + preenchimento automático.
• Integração profunda com o GitHub.

• 30 minutos para implementar uma nova página da web usando a estrutura existente, incluindo alterações de layout. Depende do modelo usado.

Tempo economizado: métricas que importam

Medimos quanto tempo foi necessário para gerar e adaptar uma nova página usando ferramentas diferentes: Abordagem manual de tarefas Abordagem do GitHub Copilot/Cursor Crie JSX + i18n manualmente ~90 minutos ~15 minutos Ajustar layout e estilos ~30 minutos ~15 minutos (4 prompts) Total ~2 horas ~ 30 minutos Isso é um 75% de redução de tempo com fluxos de trabalho assistidos por IA.

O que funcionou melhor (e por quê)

Ferramentas baseadas em Figma, como v0, Tempo AI, e Dardo são fantásticos para prototipagem rápida e novas construções. Mas em bases de código maduras, sua saída exigia muita limpeza. É aqui que ferramentas como GitHub, Copiloto e Cursor se destacou. Ao combinar engenharia rápida com ambientes com reconhecimento de código, fomos capazes de:

• Gere novos modelos de página com dados e lógica reais.
• Gere e preencha automaticamente arquivos de tradução.
• Reutilize e ajuste os componentes existentes com o mínimo esforço.

A diferença está em consciência do contexto. Quando ferramentas como o Cursor ou o GitHub Copilot entendem a estrutura do seu projeto, elas se tornam muito mais do que preenchimento automático, elas agem como colaboradoras. Tarefas que antes levavam horas (copiar código, ajustar adereços ou vincular traduções) agora levam menos de 30 minutos com algumas instruções específicas e a configuração correta.

Considerações finais

Se você está lançando um novo projeto web, ferramentas baseadas em Figma, como v0 e Adorável são um ótimo lugar para começar. Eles ajudam você a passar do design ao código em pouco tempo. Mas se você estiver trabalhando em uma base de código maior e estruturada, nada supera a eficiência do Copiloto e Cursor com solicitações com escopo adequado. Codificação Vibe alimentado por ferramentas de IA como Cursor e Copiloto do GitHub está reformulando a forma como os desenvolvedores abordam a criação de software. Não se trata mais apenas de escrever linhas de código, trata-se de aprimorar o experiência de codificação por meio de fluxo, criatividade e colaboração com assistentes inteligentes. Em essência, Codificação Vibe usar ferramentas de IA não é apenas uma tendência, é uma nova filosofia de desenvolvimento. Ele aumenta a produtividade e o prazer, permitindo que as equipes criem um software melhor, mais rápido e com mais intenção. Na Marvik, essa combinação nos ajudou a reduzir drasticamente o tempo de desenvolvimento, sem sacrificar a consistência ou a qualidade.