TypeUI vs Design Extractor
O DESIGN.md Style Extractor, do TypeUI, é uma extensão do Chrome gratuita que lê os estilos da página na sua aba e preenche o template DESIGN.md próprio do TypeUI. 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 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.
Ainda não conhece o formato? Leia primeiro o que é um DESIGN.md.
Verificado em com base em o README e o código-fonte da extensão, sua página na Chrome Web Store e o README do TypeUI. 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
| TypeUI | 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 | Os componentes aparecem como uma contagem por tipo (botões, links, campos de entrada, cards, navegação, listas, tabelas) sob orientações gerais de componentes. | 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 é | DESIGN.md Style Extractor, uma extensão do Chrome gratuita da Bergside SRL, criadora do TypeUI. Versão 0.4.0, cerca de 40.000 usuários na Chrome Web Store, de código aberto sob a licença MIT. | Um gerador: informe uma URL pública no site, via MCP ou pela extensão do Chrome, e receba o DESIGN.md desse site. |
| O que o resultado segue | O template DESIGN.md próprio do TypeUI: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules e mais, sem front matter YAML. Também pode gerar um SKILL.md. | A especificação DESIGN.md do Google: tokens no front matter YAML e as seções canônicas na ordem da especificação. |
| Como lê o site | Lê os estilos computados de até 280 elementos visíveis da página na sua aba, dentro do seu navegador, sem requisições de rede. | Nossos servidores abrem a URL em um navegador e analisam a página renderizada. O modo Pro também analisa uma amostra das páginas principais do site. |
| Páginas que consegue ler | A página aberta na sua aba, incluindo páginas em que você está logado. | Apenas páginas públicas. Páginas que exigem login, em localhost ou em uma rede privada ainda não são suportadas. |
| Para onde vai o resultado | Exibido no popup, onde você o copia ou baixa. Um botão Quick install grava o SKILL.md na pasta de skills do Claude Code, Codex ou Cursor de um projeto que você escolher. | Salvo em Minhas extrações na sua conta, onde você o edita, copia ou baixa. Seu agente pode lê-lo via MCP. |
| Preço | Grátis. Sem conta nem pagamento. | 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. A galeria e as ferramentas gratuitas não custam nada. |
| Acesso para agentes | A extensão funciona a partir do seu popup. A CLI e o servidor MCP hospedado do TypeUI, que são separados, oferecem suas skills de design com curadoria e seus prompts de UI. | 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. |
O que o TypeUI oferece
- Uma extensão do Chrome gratuita e de código aberto (MIT), com cerca de 40.000 usuários na Chrome Web Store, sem conta nem pagamento.
- Roda inteiramente no seu navegador, na página da sua aba, incluindo páginas em que você está logado.
- Valores de tipografia, cores, espaçamento, raio, sombras e movimento em um DESIGN.md no formato próprio do TypeUI, ou um SKILL.md.
- Copie ou baixe o arquivo pelo popup, ou use o Quick install para colocar o SKILL.md em um projeto do Claude Code, Codex ou Cursor.
- Além da extensão, o TypeUI oferece skills de design com curadoria, prompts de UI, uma CLI de código aberto e um servidor MCP hospedado, além de uma versão Pro com arquivos de skills de design aprimorados, prompts de UI para layouts e uma comunidade privada no Discord.
Onde eles diferem
A extensão do TypeUI resume os valores de estilo que encontra em uma página e acrescenta orientações gerais do seu template. O Design Extractor renderiza o site, seleciona seus componentes e escreve uma receita para cada um, depois verifica cada receita 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.
Prefere começar pela aba em que você está? A extensão do Chrome do Design Extractor envia a aba para a mesma extração, com a mesma conta e os mesmos créditos. Seu agente também pode iniciar uma extração e ler o resultado pelo servidor MCP. Veja mais arquivos prontos na galeria.
Como migrar do TypeUI
- Cole a URL do site na página inicial do Design Extractor, ou clique em Extract this page na extensão do Chrome, 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.
- Se você usou o Quick install, apague a pasta da skill design-system que o TypeUI criou e mantenha a referência ao seu DESIGN.md.
- Para que seu agente execute extrações sozinho, conecte o servidor MCP.
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, salvo na sua conta. O Design Extractor acessa sites com restrição regional. Seu agente pode executá-lo via MCP. A extensão do TypeUI é gratuita e lê páginas em que você está logado, 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.
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.
FAQ
TypeUI vs Design Extractor: perguntas
Respostas curtas sobre o TypeUI e o Design Extractor, verificadas em 2026-10-20.
Sim. Em 2026-10-20, a extensão era gratuita e de código aberto sob a licença MIT, sem conta nem pagamento. O Design Extractor não é gratuito: as extrações gastam créditos pré-pagos, com pacotes a partir de US$ 5 por 50 créditos e 10 créditos por extração Pro. A galeria e as ferramentas gratuitas não custam nada.
Não. O arquivo segue o formato DESIGN.md de código aberto do TypeUI, com seções como Mission, Brand, Style Foundations e Rules, e a versão 0.4.0 não gera front matter YAML, então não segue a especificação DESIGN.md do Google. O Design Extractor segue a especificação do Google, e o Validador de DESIGN.md gratuito verifica qualquer arquivo em relação a ela.
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.
Sim. Ela lê a página na sua aba dentro do seu navegador, então funciona em páginas em que você está logado. O Design Extractor lê apenas páginas públicas: páginas que exigem login, em localhost ou em uma rede privada ainda não são suportadas.
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, no site ou com a extensão do Chrome dele, e substitua o arquivo. Se você usou o Quick install, apague a pasta da skill design-system que o TypeUI criou e mantenha a referência ao seu DESIGN.md.
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.