Como uso vibe coding para Lighthouse 100% em performance, acessibilidade e SEO

Introdução

Eu quero explicar o quanto que as pessoas podem estar erradas ao usar vibe coding para criar sites incrivelmente bonitos. Todo mundo foca na beleza aparente, naquele visual que impressiona à primeira vista, sendo que na verdade o que realmente importa é o quão seu produto é bom e performático junto dessa mesma beleza. Beleza sem performance é só fachada.

Neste tutorial, você vai aprender o fluxo exato que uso para alcançar 100% no Lighthouse em performance, acessibilidade, SEO e melhores práticas, usando vibe coding com Cloud Code e DeepSeek. Basicamente, é o processo que aplico em todos os meus projetos web, e que separa um portfólio real de um portfólio de fachada.

Tempo estimado de leitura: 9 min

O verdadeiro portfólio é quando alguém abre o seu site, dá F12 e roda o Lighthouse. É isso que importa.

Pré-requisitos

Antes de a gente começar, deixa eu ser bem direto sobre o que você vai precisar pra acompanhar esse fluxo sem tropeçar. Software primeiro: o Cloud Code, que é o meu harness preferido pra vibe coding, e uma injeção do DeepSeek V4 Pro, o modelo que mudou o jogo depois da atualização de 12 de agosto. Você também vai precisar de um browser Chromium com o Lighthouse disponível, e se quiser rodar as métricas de forma automatizada, o headless browser resolve.

De conhecimento, o ideal é que você já tenha alguma familiaridade com vibe coding, mesmo que básica, e noções de performance web, acessibilidade e SEO. Não precisa ser especialista, mas entender o que cada uma dessas áreas significa ajuda muito na hora de avaliar as sugestões da IA.

De ambiente, qualquer projeto web em Node.js ou JavaScript serve, sendo que na verdade o que importa é que sua stack rode num browser Chromium, porque é nele que o Lighthouse roda e reporta tudo que a gente precisa.

Por que isso importa

O problema da beleza aparente é que ela engana todo mundo, inclusive o dono do site. Você sobe uma landing page com efeitos bonitos, animações suaves, aquela estética impecável, e acha que o trabalho está feito. Sendo que na verdade o que sustenta um produto não é o visual, é o quão performático ele é, o quanto que ele é acessível, o quanto que ele está bem ranqueado no SEO e o quanto que ele segue as melhores práticas de desenvolvimento. E o Lighthouse reporta exatamente essas quatro coisas em qualquer browser Chromium, que é basicamente a métrica que separa um site de fachada de um site de verdade.

Se o desenvolvedor não faz acessibilidade no próprio site, como é que ele vai fazer no cliente? Se ele não faz performance no próprio site, como é que vai fazer no cliente? Se as melhores práticas não estão no site dele, como é que vão estar no cliente? Eu venho aplicando essa abordagem em todos os meus projetos web, e em projetos Node.js e JavaScript eu uso outras ferramentas de métrica, mas o foco aqui é o que o Lighthouse consegue te dizer sobre qualquer página.

Então, basicamente, o verdadeiro portfólio é quando você abre o seu site, dá um F12 e roda o Lighthouse nele. Esse é o teu portfólio real, e é por isso que ele tem que ser perfeito.

Setup

Antes de qualquer coisa, você precisa configurar o ambiente de vibe coding que realmente entrega resultado, e não fica só na beleza aparente. Eu uso o Cloud Code porque ele tem, na minha opinião, o melhor harness para gerenciar o fluxo de desenvolvimento com agentes de IA, mas a mágica acontece quando você faz uma injeção do DeepSeek nele. Vou te mostrar o arquivo de configuração que uso, basicamente um config.json dentro da pasta .cloudcode do projeto.

// .cloudcode/config.json
{
  "provider": {
    "type": "openai",
    "apiKey": "${DEEPSEEK_API_KEY}",
    "baseUrl": "https://api.deepseek.com/v1"
  },
  "model": {
    "name": "deepseek-chat",
    "version": "deepseek-v4-pro",
    "parameters": {
      "temperature": 0.3,
      "maxTokens": 4096
    }
  },
  "harness": {
    "waves": true,
    "subAgents": true,
    "lighthouseIntegration": true
  }
}

Você pode estar se perguntando por que eu uso o DeepSeek em vez de outros modelos, e a resposta é que, depois da atualização de 12 de agosto, o DeepSeek V4 Pro atingiu um nível de raciocínio equivalente ao GLM 5.2, que era o estado da arte para modelos open source, por um preço que, basicamente, nenhum concorrente consegue bater, sendo que na verdade o que importa é ter um modelo barato e inteligente o suficiente para tomar decisões de otimização sem quebrar o orçamento do projeto. O harness do Cloud Code gerencia todo o fluxo de waves de desenvolvimento, sub-agents e a integração com o Lighthouse, e o DeepSeek entra como o motor de raciocínio que vai propor e iterar nas mudanças. É uma combinação que, na prática, me permite focar na qualidade real enquanto a IA cuida das experimentações chatas.

Passo 1: Configurando o DeepSeek no Cloud Code

Eu pessoalmente gosto muito de usar o Cloud Code, que tem o melhor harness pra esse tipo de fluxo, mas a mágica acontece quando você injeta o DeepSeek como modelo de raciocínio. Depois das atualizações de agosto, principalmente a do dia 12, o DeepSeek V4 Pro chegou ao mesmo nível de raciocínio de um GLM 5.2, que era o nosso SOTA pra modelos open source, por um preço que só a DeepSeek consegue colocar no mercado. Isso muda o jogo porque você pode iterar rápido sem medo de estourar o orçamento.

A configuração é direta. Você define o modelo no arquivo de configuração do Cloud Code e aponta pro endpoint da DeepSeek:

# Configura o DeepSeek V4 Pro como modelo de raciocínio no Cloud Code
cloud-code config set model deepseek-v4-pro
cloud-code config set model.thinking enabled true
cloud-code config set model.endpoint https://api.deepseek.com/v1

O que importa aqui é o model.thinking enabled true. É isso que ativa o modo de raciocínio, que é o que vai permitir que a IA pense antes de propor otimização. Sem isso, você tá só usando um autocomplete caro.

Uma dica: antes de seguir pro próximo passo, roda cloud-code config get model e confere se o modelo ativo é o DeepSeek V4 Pro. Já perdi uma tarde inteira otimizando com o modelo errado, achando que o problema era o código quando na verdade era a configuração.

Passo 2: Integrando o Lighthouse no fluxo

Com o DeepSeek rodando no Cloud Code, o próximo passo é fazer o Lighthouse virar parte do seu ciclo de desenvolvimento, e não uma auditoria que você roda uma vez no final, depois que tudo já foi feito. A forma que eu uso é integrar o Lighthouse direto no fluxo com browser headless, sendo que a construção do seu software pode chamar essa integração em várias etapas que você definir, com vários subagents, e usando waves de desenvolvimento.

O conceito de waves é basicamente o seguinte: em cada wave, você roda uma métrica, deixa a IA livre pra propor experimentações, e ao final ela te relata as ideias dela. Você corrige o que não fez sentido e tenta de novo caso alguma experimentação degrade o produto de um jeito que não valha o ganho de performance.

O script abaixo é um exemplo de como rodar o Lighthouse via browser headless no Node.js. Ele abre a URL, executa a auditoria e salva o relatório em JSON. Você pode plugar isso num cron, num hook do seu harness de vibe coding, ou chamar manualmente quando quiser medir uma wave:

// lighthouse-runner.js
import { chromium } from 'playwright';
import lighthouse from 'lighthouse';

const url = process.env.URL || 'http://localhost:3000';

const browser = await chromium.launch({ headless: true });
const { port } = await browser.startServer();

const { lhr } = await lighthouse(url, {
  port,
  output: 'json',
  logLevel: 'info',
  onlyCategories: ['performance', 'accessibility', 'seo', 'best-practices'],
}, {
  extends: 'lighthouse:default',
  settings: {
    formFactor: 'desktop',
    throttling: { rttMs: 40, throughputKbps: 10240, cpuSlowdownMultiplier: 1 },
  },
});

console.log(`Performance: ${lhr.categories.performance.score * 100}`);
console.log(`Acessibilidade: ${lhr.categories.accessibility.score * 100}`);
console.log(`SEO: ${lhr.categories.seo.score * 100}`);

await browser.close();

O que isso permite é medição contínua sem interromper o fluxo de vibe coding. A cada wave, você tem um número concreto pra decidir se a mudança que a IA propôs vale a pena, em vez de confiar em achismo ou em "a beleza aparente" do resultado visual.

Passo 3: Rodando métricas e experimentações

Com o Lighthouse integrado no fluxo, o próximo passo é deixar a IA trabalhar de verdade. Em cada wave, você dá liberdade pra ela propor otimizações, rodar o Lighthouse de novo e ver o que muda. A ideia é simples: em vez de você ficar tentando adivinhar o que melhora a performance, a IA testa hipóteses sozinha e te traz os resultados.

Aqui está um script que dispara uma wave de experimentação. Ele roda o Lighthouse, coleta as métricas, pede pra IA sugerir uma otimização e roda tudo de novo pra comparar:

// scripts/experiment-wave.js
const { runLighthouse } = require('./lighthouse');
const { askAI } = require('./ai');

async function runWave(url, context) {
  const before = await runLighthouse(url);
  console.log('Métricas antes:', before);

  const suggestion = await askAI(`
    O Lighthouse reportou: ${JSON.stringify(before)}.
    Proponha uma otimização e implemente ela.
  `);

  await suggestion.apply();
  const after = await runLighthouse(url);
  console.log('Métricas depois:', after);

  return {
    before,
    after,
    suggestion: suggestion.summary(),
  };
}

Ao final de cada wave, a IA te relata as ideias dela, com o antes e depois. Você pode corrigir essas ideias ou descartar se o ganho não compensar. O que acelera a busca pelo 100% é justamente essa autonomia: a IA tenta coisas que talvez você nem pensaria, e você só valida o que faz sentido. Isso transforma o processo de otimização em algo contínuo, não em um esforço manual que você faz uma vez e esquece.

É assim que eu cheguei no resultado do vídeo abaixo, com o Lighthouse em 100% em tudo. Cada wave foi uma pequena vitória, e no fim os fogos de artifício apareceram.

Agora, se uma wave degrada o produto de um jeito que não compensa, aí entra o passo seguinte: corrigir e iterar até manter a qualidade.

Passo 4: Corrigindo degradações e iterando

Na verdade, o ponto que mais separa quem usa vibe coding para um portfólio de fachada é esse: saber o que fazer quando a experimentação degrada o produto. Isso acontece o tempo todo, a IA propõe uma otimização que parece óbvia, mas na prática quebra a hierarquia visual da página, ou então o ganho de performance não compensa o que se perde em acessibilidade. Sendo que a graça do ciclo está exatamente aí, na correção.

Eu estruturei isso com uma função de rollback que roda no fim de cada wave, comparando o resultado Lighthouse no branch principal com o branch experimentação:

// rollback.js
const categories = ['performance', 'accessibility', 'seo', 'bestPractices'];
const tolerance = 2.5;

function decideToKeep(before, after) {
  const degraded = categories.filter((cat) => after[cat] < before[cat] - tolerance);

  if (degraded.length > 0) {
    console.warn('Revertendo wave, perda em:', degraded.join(', '));
    rollback();
    return false;
  }

  acceptWave();
  return true;
}

A lógica é direta: uma tolerância de 2,5 pontos por categoria, se algum valor caiu além disso, a experimentação é descartada e o baseline volta. É claro que 2 pontos de perda em acessibilidade para ganhar 5 de performance pode ser um trade-off interessante, mas isso eu posso ajustar na tolerância em cada rodada, ou rejeitar a wave mesmo assim. A decisão final é minha, não é o script que manda.

É esse ciclo repetido que mantém a qualidade: a IA gera, eu passo o Lighthouse de novo, quando piora eu desfaço, quando melhora eu incorporo e tomo outro. Eu uso esse espectro em todos os meus projetos web, desde testes pessoais até site de cliente, e é basicamente o que me deixou descansado com resposta em todo o rol. Quando alguém abre o portfólio e roda o F12, o 100% em tudo não é fórmula mágica, é o resultado de ter corrido atrás das correções até sobrar só o que funciona.

Problemas Comuns

Olha, o fluxo todo funciona bonito na teoria, mas na prática sempre tem umas arestas. O problema mais comum que vejo é o Lighthouse simplesmente não rodar no headless. Você dispara o comando, e nada. Na maioria das vezes é porque as flags do Chromium estão faltando, sem a flag --headless=new ou o --no-sandbox em ambientes restritos, o headless simplesmente não engrena. Então, verifique as flags antes de sair debugando o código da IA.

Outro problema recorrente é o DeepSeek não responder como você espera. Aí você confere a injeção no Cloud Code e descobre que a versão do modelo está errada. Depois da atualização de 12 de agosto, o DeepSeek V4 Pro é o que realmente tem raciocínio decente. Se você está usando uma versão antiga, a IA vai sugerir besteiras. Roda deepseek --version no terminal só pra garantir.

E tem as experimentações que pioram a performance, a IA propõe uma otimização, você aplica, e o Lighthouse cai de 98 pra 70. Isso acontece quando ela mexe em coisas que não deveria, tipo fontes carregadas de forma síncrona ou imagens sem lazy loading. O segredo é rodar o Lighthouse manualmente após cada wave, antes de aceitar a sugestão. Parece óbvio, mas a gente sempre quer confiar cegamente na IA. Basicamente, você precisa validar com os seus próprios olhos, a máquina não sente o contexto do seu projeto.

Conclusão

O fluxo tá na sua mão agora. Pega qualquer projeto web que você já tenha, roda o Lighthouse nele hoje e vê qual é a tua pontuação atual. Depois aplica esse mesmo ciclo de waves com a IA propondo experimentação e medindo o resultado a cada iteração, e basicamente você vai ver o número subir sem precisar decorar manual da documentação de acessibilidade. Sendo que na verdade é isso que separa quem só empilha framework de quem entrega produto de verdade.

Esse é o teu verdadeiro portfólio. Não é a landing page bonita com animaçãozinha de scroll, é o que o browser reporta quando alguém dá F12 e roda a auditoria. Por isso que o teu portfólio tem que ser perfeito, porque é a única métrica que cliente e recrutador conseguem ver sem te pedir explicação.

Se você chegar no 100, me conta. Manda o print no Slack do time ou no WhatsApp, porque quando você vê os fogos de artifício do Lighthouse pela primeira vez, é difícil não querer compartilhar. E se bater 90 e travar, volta no passo 4 e deixa a IA experimentar mais uma wave. O fluxo aguenta.