MIT · Node.js CLI · MCP-ready
Qualquer site, todo design token, um comando.
O DesignRefs extrai o design system de um site em segundos: logo, cores, tipografia, espaçamento, bordas, sombras, componentes e breakpoints — com pontuação de confiança em cada valor.
$
npx designrefs stripe.comExperimente agora, direto no navegador
Prévia leve no navegador (cores, fontes, logo, espaçamento). Para a extração completa, use a CLI.
Cores
Tipografia
Espaçamento
O que ele extrai
CoresPapéis semânticos, paleta, variáveis CSS, gradientes
TipografiaFontes, tamanhos, pesos, alturas de linha
EspaçamentoEscala de margin/padding, inferência de grid
BordasRaio, larguras, estilos, cores
SombrasPadrões de elevação
ComponentesBotões, inputs, links, estados ARIA
BreakpointsRegras responsivas extraídas do CSS
Ícones e frameworksFont Awesome, Tailwind, MUI e mais
Também funciona como servidor MCP
$
claude mcp add --transport stdio designrefs -- npx -y --package designrefs designrefs-mcp