fassi.dev
Voltar aos projetos
2026Em desenvolvimento

Squint MCP

Um servidor MCP que cruza o que o navegador reporta (DOM/CSS) com o que é realmente pintado (pixels) para encontrar problemas visuais, sem precisar de baseline.

Repositório

Problema

Agentes de código geram UI e a validam pelo DOM ou pela árvore de acessibilidade, que dizem o que deveria aparecer, não o que foi pintado. Texto cortado ou contraste ruim sobre uma imagem passam despercebidos.

Solução

Capturar a página estabilizada em um Chromium headless e analisar os pixels junto com os dados de DOM/CSS, devolvendo ao agente o elemento com problema e a evidência: estilos computados, box model, cores amostradas e um recorte da imagem.

Resultado

Dá ao agente evidência visual do elemento que acabou de construir, para corrigir a UI antes da revisão humana em vez de depois.

Como funciona

  1. 01O agente de código chama uma tool do Squint passando a URL e um seletor CSS
  2. 02O Squint abre a página em um Chromium headless, com contexto isolado por chamada
  3. 03A página é estabilizada: espera fontes, zera animações e transições, aguarda a rede ficar ociosa
  4. 04É gerado um Capture: dados de DOM/CSS mais os pixels renderizados
  5. 05Os pixels são analisados: recorte do elemento e amostragem das cores realmente pintadas
  6. 06O agente recebe estilos computados, box model, cores amostradas e o recorte como evidência

Construído com

Python 3.12MCP SDK (FastMCP)PlaywrightChromium headlessPillowPydanticuvpytestPyrightRuffGitHub Actions