designmd.me vs Design Extractor
Tanto o designmd.me quanto o Design Extractor transformam a URL de um site em um DESIGN.md para o seu agente de código com IA. O arquivo do Design Extractor 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 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.
Ainda não conhece o formato? Leia primeiro o que é um DESIGN.md.
Verificado em com base em designmd.me, sua página de preços, sua referência da CLI, sua página sobre o Figma e um arquivo da sua seção Discover. 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
| designmd.me | Design Extractor | |
|---|---|---|
| Conformidade com a especificação | Gera front matter YAML com os tokens da especificação, além de chaves de nível superior que a especificação não define, como source, themes e breakpoints. As seções são próprias, numeradas de Visual Theme & Atmosphere a Known Gaps. | 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 é uma lista de valores de estilo, como fundo, fonte, padding, borda e raio, 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 é | Um gerador: cole uma URL e receba um DESIGN.md. Criado pela Crowdlinker. | Um gerador: cole uma URL pública e receba o DESIGN.md desse site. |
| Páginas lidas | Página única (a landing page) ou multipágina (as páginas principais do site), à sua escolha em cada extração. | O modo Pro analisa uma amostra das páginas principais do site. |
| Preço por extração | 4 créditos em página única, 8 créditos em multipágina, cobrados só em caso de sucesso. | 10 créditos por uma extração Pro. Extrações que falham do nosso lado são reembolsadas. |
| Pacotes de créditos | US$ 5 por 50, US$ 15 por 175, US$ 30 por 375 ou uma recarga personalizada. Os créditos nunca expiram. | US$ 5 por 50, US$ 10 por 110, US$ 25 por 300. Os créditos nunca expiram. Sem assinatura. |
| Início gratuito | 4 créditos grátis na primeira visita e mais 20 ao criar conta. Sem cartão para começar. | Sem créditos grátis ao criar conta. A galeria e as ferramentas gratuitas não custam nada. |
| Extras | Um arquivo de prévia em HTML (mais 8 créditos), uma importação para o Figma de variáveis, estilos e um board (12 créditos, uma vez por geração) e comparações lado a lado de dois sites. | As visualizações Código e Prévia do arquivo e um painel Sistema visual na página de resultado, além de ferramentas gratuitas: um validador de DESIGN.md, um identificador de fontes e um extrator de paleta de cores. |
| Exemplos prontos | Uma seção Discover com sites gerados, categorias e um ranking. | Uma galeria de marcas já extraídas, gratuita para ler e copiar. |
| Acesso para agentes | Uma CLI (@crowdlinker/designmdme) e uma skill de agente para Claude Code, Cursor e outros agentes compatíveis com skills. Sem servidor MCP. | Um servidor MCP remoto para Claude Code, claude.ai, ChatGPT, Codex, Cursor e outros clientes, e um plugin para Claude Code e Codex. |
| Extensão de navegador | Não oferecido | Uma extensão do Chrome que extrai a aba em que você está. |
O que o designmd.me oferece
- Créditos grátis na primeira visita e ao criar conta, sem cartão para começar.
- Extrações de página única por 4 créditos e multipágina por 8, cobradas só em caso de sucesso.
- Uma página de amostra em HTML e uma importação para o Figma de variáveis e estilos, cada uma por créditos extras.
- Comparações lado a lado dos sistemas de design de dois sites.
- Uma CLI e uma skill de agente para Claude Code, Cursor e outros agentes compatíveis com skills.
Onde eles diferem
As duas ferramentas entregam um DESIGN.md a partir de uma URL. O Design Extractor entrega cada componente que seleciona na página como uma receita e a verifica no site real, para que seu agente saiba quais componentes pode reconstruir como estão escritos e quais foram sinalizados, com o motivo. Veja no Stripe, na galeria.
O Design Extractor também vai até onde você trabalha. Seu agente pode iniciar uma extração e ler o resultado pelo servidor MCP, e a extensão do Chrome extrai a aba em que você está. Veja mais arquivos prontos na galeria.
Como migrar do designmd.me
- 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, substituindo o arquivo antigo. Sua referência no AGENTS.md ou CLAUDE.md continua funcionando.
- Para que seu agente execute extrações sozinho, conecte o servidor MCP no lugar da CLI do designmd.me.
Veredito
Escolha o Design Extractor se você precisa de um DESIGN.md que siga a especificação do Google, com uma receita para cada componente que ele seleciona na página, cada uma verificada no site real ou sinalizada com o motivo. O Design Extractor acessa sites com restrição regional. Seu agente pode executá-lo via MCP. O designmd.me custa menos créditos por extração, como mostra a tabela.
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.
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.
FAQ
designmd.me vs Design Extractor: perguntas
Respostas curtas sobre o designmd.me e o Design Extractor, verificadas em 2026-10-20.
Ele começa grátis: em 2026-10-20, novos visitantes recebiam 4 créditos grátis e mais 20 ao criar conta, sem cartão. Depois disso, os pacotes de créditos começam em US$ 5 por 50 créditos. Uma extração de página única custa 4 créditos e uma multipágina, 8.
O designmd.me. Os pacotes dele começam em US$ 5 por 50 créditos e os nossos em US$ 5 por 50 créditos. Uma extração multipágina do designmd.me custa 8 créditos e uma de página única, 4; uma extração Pro do Design Extractor custa 10. A prévia em HTML e a importação para o Figma do designmd.me custam créditos extras.
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 o cabeçalho, o rodapé, os botões, os campos de entrada e os cards, como uma receita de HTML e CSS enxutos. Cada receita é verificada no site real com uma correspondência estrutural e uma comparação de pixels, e uma receita que não passa é sinalizada com o motivo.
Não. O designmd.me oferece uma CLI e uma skill de agente, mas nenhum servidor MCP. O Design Extractor é um servidor MCP remoto: claude.ai, Claude Desktop, ChatGPT e Claude Code se conectam quando você entra na sua conta, e Codex, Cursor e scripts usam uma chave de API.
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.
Sim. Os dois produzem um DESIGN.md que fica no seu repositório, então a configuração do seu agente continua a mesma. Passe o site pelo Design Extractor e substitua o arquivo.
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.