Ferramentas de DESIGN.md comparadas

O Design Extractor gera um DESIGN.md a partir de qualquer URL pública. 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.

Outras ferramentas seguem caminhos diferentes. Coleções como getdesign.md e Refero Styles oferecem arquivos prontos de sites que já analisaram; o designmd.me gera um a partir de uma URL; a extensão do Chrome do TypeUI preenche o próprio template a partir dos estilos da sua aba. Cada comparativo lista o que verificamos e quando. Ainda não conhece o formato? Leia o que é um DESIGN.md.

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.

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.

  • Refero Styles vs Design Extractor

    Uma grande biblioteca gratuita de estilos de sites comparada a um DESIGN.md conforme a especificação, com receitas de componentes verificadas no site real, a partir de qualquer URL.

  • 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.