1 ano construindo sozinho uma biblioteca de UI real com servidor MCP pra IA parar de inventar tela
Faz 1 ano que eu toco o Refcat sozinho. Começou com uma frustração: todo mundo
que já pediu pro Claude ou Cursor "faz uma tela de checkout" conhece o resultado,
o mesmo layout genérico, sempre. A IA não tem referência real, então chuta.
O Refcat é uma biblioteca de telas e fluxos completos de produtos publicados
(iOS, Android e web), cada passo na ordem, e um servidor MCP que deixa o agente
consultar isso enquanto codifica.
Como funciona na prática
Você conecta no Claude Code ou Cursor:
{ "mcpServers": { "refcat": { "url": "https://mcp.refcat.app/mcp",
"headers": { "Authorization": "Bearer <SUA_KEY>" } } } }
E o agente ganha 23 ferramentas: buscar fluxos em linguagem natural ("cadastro
com trial grátis"), puxar um fluxo inteiro com o texto (OCR) e as posições dos
elementos, buscar por screenshot da tela que você está fazendo, ler e-mails reais
de produto, entre outras.
Também tem uma extensão do Chrome que exporta qualquer site para o Figma com
texto e SVG editáveis.
O que aprendi construindo
- Busca visual: embeddings das telas no Qdrant. "Telas parecidas com esta"
saiu quase de graça depois disso. - Tags de intenção são ruidosas: "checkout" marcava metade do catálogo. Pra
montar páginas por padrão tive que cruzar a tag com regex no nome do fluxo e
exigir 3+ telas. - SEO/GEO: landing pré-renderizada em 16 idiomas com React Router, llms.txt e
JSON-LD. O ChatGPT praticamente não citava o produto. Ele cita listas de
alternativas e páginas por intenção, então fui por aí.
Sendo dev solo
Um ano sozinho significa escolher muito bem onde gastar tempo. Captura, busca,
landing, pagamentos (incluindo Pix), extensão do Chrome, plugin do Figma e
servidor MCP: tudo passou por aqui. A regra que mais me salvou foi cortar escopo
cedo e deixar de fora o que ninguém usa.
Stack: Bun + Elysia, MongoDB, Qdrant, React Router, deploy com Dokploy numa VPS.
Tem plano grátis com 1 chave MCP. Exemplos sem login:
https://refcat.app/pt-br/patterns/checkout
Comparação com Mobbin, Refero e Page Flows:
https://refcat.app/pt-br/compare
Quero feedback principalmente de quem usa agente pra front: o que faria vocês
usarem referência real no fluxo de trabalho?