FontofWeb

O que você pode fazer

Encontre as referências de sites certas

Pesquise páginas reais por setor, tipo de página, layout, cor, fonte, captura de tela, URL ou ideia visual.

Entenda como um site ao vivo é projetado

Inspecione sua tipografia, cores, espaçamento, layout, componentes, mídia e estilos renderizados.

Extraia a paleta de cores de um site e verifique o contraste

Veja as cores de um site como uma paleta e verifique o contraste entre o texto selecionado e as cores de fundo.

Identifique as fontes e a tipografia de um site

Verifique suas famílias de fontes, pilhas, tamanhos, pesos, alturas de linha e onde cada estilo aparece.

Encontre alternativas práticas para um tipo de letra

Compare tipos de letra visualmente semelhantes, visualize as correspondências mais próximas e refine-as por licença ou disponibilidade.

Compare direções de design antes de se comprometer

Compare como diferentes sites abordam layout, hierarquia, tipografia, cor e estrutura de página.

Revise um site e decida o que mudar

Compartilhe uma página ou captura de tela, descubra problemas específicos de hierarquia e estilo e apoie melhorias com referências relevantes.

Crie um DESIGN.md e um sistema de design pronto para implementação

Transforme um site ao vivo em DESIGN.md, Tailwind, variáveis CSS, tokens de design ou JSON estruturado.

Salve sites e reutilize-os em projetos futuros

Capture sites com a extensão do Chrome, marque referências úteis e volte às suas capturas de tela e detalhes de design mais tarde.

Instale o Fudge para suas ferramentas de IA

1. 1. Instale o Fudge

   Entre ou assine aqui, depois execute o comando de configuração mostrado para sua conta.

2. 2. Configure outro cliente MCP

   Assinantes também podem revelar a configuração manual para outro cliente compatível.

3. 3. Comece com uma pergunta real de design

   Peça um resultado de design e deixe o Fudge trazer referências e detalhes relevantes de sites.