Refero Styles vs Design Extractor
O Design Extractor gera um DESIGN.md a partir de qualquer URL pública que você informar. O arquivo segue a especificação DESIGN.md do Google e entrega cada componente que ele seleciona na página como uma receita de HTML e CSS que seu agente de código consegue reconstruir. Cada receita é verificada no site real ou sinalizada com o motivo. O Design Extractor também funciona em sites que só respondem a visitantes de certos países.
O Refero Styles é uma biblioteca grande e gratuita de estilos de sites, cada um com suas cores, tipografia, espaçamento e componentes em vários formatos. Ainda não conhece o formato? Leia o que é um DESIGN.md.
Verificado em com base em styles.refero.design, uma das suas páginas de estilo e seu sitemap de estilos. Ofertas e preços mudam, então confira o site deles antes de decidir.
Por que o Design Extractor
Segue a especificação DESIGN.md do Google
O front matter YAML usa apenas as propriedades que a especificação define, sem chaves personalizadas de nível superior. As seções canônicas vêm na ordem da especificação, de Overview a Do's and Don'ts. As entradas de componentes no front matter usam apenas as oito propriedades da especificação, com valores literais. Verifique qualquer arquivo com o Validador de DESIGN.md gratuito.
Uma receita para cada componente que ele seleciona na página
O cabeçalho, o rodapé, os botões, os campos de entrada, os cards e outros componentes selecionados na página vêm, cada um, como uma receita: HTML e CSS enxutos com valores literais, dentro da seção Components do DESIGN.md. Cada receita lista suas partes e os estados de hover e foco vistos no site, para que seu agente de código reconstrua o componente em vez de adivinhá-lo.
Verificado no site real
Cada receita é renderizada isoladamente e verificada no site real: uma correspondência estrutural das partes renderizadas com o que foi medido na página e uma comparação de pixels com uma captura nova do elemento real. Uma receita que falha é reconstruída e verificada de novo. Se ainda assim não passar, ela é sinalizada com o motivo, nunca entregue como verificada. A página de resultado mostra o quanto os componentes correspondem e quantas das cores e dos estilos de texto do site estão cobertos: veja o Stripe na galeria.
Funciona em sites com restrição regional
Alguns sites só respondem a visitantes de certos países. Quando uma extração falha por isso, a página de resultado oferece um seletor de país, com primeiro os países de onde detectamos que a página carrega, e executa a mesma extração por um navegador no país que você escolher. Uma extração a partir de outro país custa o preço do modo Pro mais uma taxa adicional de 6 em créditos (16 créditos no total). Se a extração falhar, devolvemos seus créditos.
Lado a lado
| Refero Styles | Design Extractor | |
|---|---|---|
| Conformidade com a especificação | Não oferecido | Segue a especificação DESIGN.md do Google: front matter apenas com as propriedades da especificação e sem chaves personalizadas de nível superior, as seções canônicas na ordem da especificação e entradas de componentes limitadas às oito propriedades da especificação, com valores literais. |
| Receitas de componentes | Cada componente é descrito em texto corrido, com seu papel e suas medidas, sem HTML. | Cada componente que ele seleciona na página, como o cabeçalho, o rodapé, os botões, os campos de entrada e os cards, vem como uma receita: HTML e CSS enxutos na seção Components, para que seu agente de código possa reconstruí-lo. |
| Verificado no site real | Não oferecido | Sim. Cada receita é renderizada isoladamente e verificada no site real: uma correspondência estrutural das suas partes e uma comparação de pixels. Um componente que não passa é sinalizado com o motivo, nunca entregue como verificado. |
| Sites com restrição regional | Não oferecido | Sim. Quando um site bloqueia visitantes de alguns países, a extração que falhou oferece um seletor de país, com primeiro os países de onde a página carrega, e executa a mesma extração por um navegador nesse país. Uma extração a partir de outro país custa o preço do modo Pro mais uma taxa adicional de 6 em créditos (16 créditos no total). |
| O que é | Uma biblioteca gratuita de estilos de sites, em beta, da Refero, o produto de referências de UI em refero.design. | Um gerador: você informa uma URL pública e ele devolve o DESIGN.md desse site. |
| Qualquer site sob demanda | Não oferecido | Sim. Cole qualquer URL pública e a extração começa na hora. |
| Cobertura | 1.342 páginas de estilo, listadas no seu sitemap de estilos. | Qualquer site público, mais uma galeria de marcas já extraídas. |
| Formatos por estilo | DESIGN.md (compact e extended), Tailwind v4, variáveis CSS e tokens de design. | Um DESIGN.md, com tokens no front matter e receitas de componentes em HTML e CSS. |
| Preço | Grátis para navegar e copiar. | Créditos pré-pagos, sem assinatura. Os pacotes começam em US$ 5 por 50 créditos; uma extração Pro custa 10 créditos. |
| Atualização | Retratos de um momento. O estilo da Apple foi extraído em 2026-09-20. | Feito a partir do site real no momento em que você executa a extração. |
| Acesso para agentes | Cada página de estilo tem link para o MCP da Refero para Claude, ChatGPT, Cursor, Codex e outros. | Um servidor MCP remoto cuja ferramenta de extração aceita qualquer URL, a partir do Claude Code, claude.ai, ChatGPT, Codex, Cursor e outros clientes. |
| Extensão de navegador | Não oferecido | Uma extensão do Chrome que extrai a aba em que você está. |
O que o Refero Styles oferece
- Uma biblioteca gratuita de estilos de sites, que você pode explorar por clima visual, como SaaS em modo escuro ou layouts editoriais.
- Vários formatos por estilo: DESIGN.md (compact e extended), Tailwind v4, variáveis CSS e tokens de design.
- Links para o MCP da Refero para Claude, ChatGPT, Cursor, Codex e outros.
Uma biblioteca vs qualquer URL sob demanda
Uma biblioteca cobre os sites que alguém já adicionou a ela. O Design Extractor lê o site real que você indicar, então cobre seu próprio produto, um cliente, um concorrente ou uma marca de nicho, como está hoje.
Cole a URL na página inicial ou deixe seu agente fazer isso pelo servidor MCP. Veja arquivos prontos, com suas receitas e resultados de verificação, na galeria.
Como migrar do Refero Styles
- Cole a URL do site na página inicial do Design Extractor e execute uma extração Pro.
- Salve o resultado como DESIGN.md na raiz do seu repositório e mantenha a referência no AGENTS.md ou CLAUDE.md. Verifique edições feitas à mão com o Validador de DESIGN.md gratuito.
- Ou deixe seu agente fazer isso: conecte o servidor MCP e peça para ele extrair o site.
Veredito
Escolha o Design Extractor se você precisa de um DESIGN.md de qualquer site público, não apenas dos sites de uma biblioteca, com receitas de componentes verificadas no site real. Ele lê o site como está agora e segue a especificação do Google, com uma receita para cada componente que seleciona na página, sinalizada com o motivo quando não passa. O Design Extractor acessa sites com restrição regional. Seu agente pode executá-lo via MCP.
Outros comparativos
getdesign.md vs Design Extractor
Uma coleção com curadoria de arquivos DESIGN.md prontos comparada a um DESIGN.md conforme a especificação, com receitas de componentes verificadas no site real, a partir de qualquer URL.
designmd.me vs Design Extractor
Dois geradores de DESIGN.md a partir de uma URL comparados em conformidade com a especificação, receitas de componentes, verificações no site real e preço.
TypeUI vs Design Extractor
A extensão do Chrome gratuita do TypeUI, que preenche o próprio template a partir dos estilos da sua aba, comparada a um DESIGN.md conforme a especificação, com receitas de componentes verificadas no site real.
FAQ
Refero Styles vs Design Extractor: perguntas
Respostas curtas sobre o Refero Styles e o Design Extractor, verificadas em 2026-10-20.
Sim. Em 2026-10-20, navegar e copiar estilos no styles.refero.design era grátis. Suas páginas têm links para o MCP da Refero em refero.design.
Não. O Refero Styles não oferece uma forma de enviar sua própria URL: você escolhe na biblioteca dele. O Design Extractor faz um DESIGN.md a partir de qualquer URL pública quando você executa a extração.
Não. O Design Extractor produz um único arquivo: um DESIGN.md que segue a especificação do Google, com tokens no front matter e cada componente que ele seleciona na página como uma receita de HTML e CSS enxutos. Seu agente de código lê o arquivo e escreve os estilos que o seu projeto usa.
Cada receita de componente é renderizada isoladamente e comparada com o site real: uma correspondência estrutural das suas partes com o que foi medido na página e uma comparação de pixels com uma captura nova do elemento real. Uma receita que não passa é sinalizada com o motivo, nunca entregue como verificada.
Seu sitemap de estilos listava 1.342 páginas de estilo em 2026-10-20.
O Design Extractor pode executar a extração a partir de outro país. Depois que uma extração falha por isso, a página de resultado oferece um seletor de país, com primeiro os países de onde a página carrega, e executa a mesma extração por um navegador nesse país. Uma extração a partir de outro país custa o preço do modo Pro mais uma taxa adicional de 6 em créditos (16 créditos no total). Se a extração falhar, devolvemos seus créditos.
Tenha um DESIGN.md do site de que você precisa
Cole qualquer URL pública. O modo Pro analisa uma amostra das páginas principais do site e entrega um DESIGN.md conforme a especificação, com receitas de componentes verificadas no site real.