Ferramentas de Desenvolvimento: Pior Desempenho que Sites de Design
Na semana passada, nós avaliamos 30 sites reais contra um contrato de design de 40 checagens. 60% obtiveram nota D ou F. Nenhum obteve nota B.
Pessoas perguntaram: e quanto às ferramentas de desenvolvimento? Os frameworks, as bibliotecas de sistemas de design, os construtores de sites com IA — as ferramentas que os desenvolvedores usam para construir os sites que já avaliamos. Certamente eles têm uma pontuação melhor do que Pentagram e FWA?
Não. Eles pontuam pior.
O lote
Nós avaliamos 16 sites de ferramentas de desenvolvimento e frameworks contra o mesmo contrato determinístico de 40 checagens — tokens, movimento, acessibilidade, cadência, takt, poise, interação, desempenho. Cada checagem é reproduzível. Sem LLM, sem heurísticas.
| Classificação | Pontuação | Nota | Site | O que eles fazem |
|---|---|---|---|---|
| 1 | 64.6 | D | netlify.com | Plataforma de hospedagem |
| 2 | 64.0 | D | ui.shadcn.com | Biblioteca de componentes |
| 3 | 63.0 | D | sanity.io | CMS |
| 4 | 63.0 | D | clerk.com | Plataforma de autenticação |
| 5 | 63.0 | D | v0.dev | Construtor de sites com IA (Vercel) |
| 6 | 62.0 | D | cursor.com | Editor de código com IA |
| 7 | 60.0 | D | supabase.com | Plataforma de backend |
| 8 | 59.1 | F | resend.com | Email API |
| 9 | 58.0 | F | astro.build | Framework web |
| 10 | 56.5 | F | tailwindcss.com | Framework CSS |
| 11 | 56.5 | F | framer.com | Ferramenta de movimento/design |
| 12 | 54.0 | F | svelte.dev | Framework web |
| 13 | 52.0 | F | webflow.com | Construtor de sites sem código |
| 14 | 52.0 | F | react.dev | Documentação da biblioteca UI |
| 15 | 42.0 | F | bun.sh | Documentação do runtime JS |
| 16 | 39.1 | F | tokens.studio | Ferramenta de tokens de design |
A maior pontuação neste lote é 64.6 (D). A maior pontuação no lote original foi 100 (A, autoavaliado) e 77.7 (C, Apple). Nenhum site de ferramenta de desenvolvimento alcançou C.
O novo lote é pior que o original
| Nota | Original 30 | Novo 16 |
|---|---|---|
| A | 1 (3%) | 0 (0%) |
| B | 0 (0%) | 0 (0%) |
| C | 6 (20%) | 0 (0%) |
| D | 11 (37%) | 7 (44%) |
| F | 12 (40%) | 9 (56%) |
56% dos sites de ferramentas de desenvolvimento pontuaram F — em comparação com 40% da amostra original. Nenhum novo site alcançou C. As ferramentas de desenvolvimento são piores que os prêmios de design.
Para referência: FWA pontuou 41.1, Pentagram pontuou 41.1, e os Prêmios de Design CSS pontuaram 37.9. bun.sh (42.0) e tokens.studio (39.1) pontuaram na mesma faixa que os sites de prêmios de design que mencionamos na semana passada. A ironia não se limita mais às galerias de design — ela se estende às ferramentas que os desenvolvedores usam todos os dias.
Descoberta 1: tokens.studio (39.1/F) — a ferramenta de tokens de design com 3 tokens
tokens.studio é um produto cujo único propósito é gerenciar tokens de design. Seu site de marketing pontuou 39.1 — a menor pontuação neste lote e pior do que qualquer site na amostra original, exceto os Prêmios de Design CSS.
O contrato encontrou 3 propriedades CSS customizadas extraíveis na página. Para comparação: Supabase tinha 581, Netlify tinha 515, GitHub Primer tinha 518. Uma ferramenta de gerenciamento de tokens com menos tokens em seu próprio site do que a maioria dos sites tem por acidente.
Ela também apresenta overflow horizontal em 1080px, zero regras de :focus-visible, nenhuma consulta de mídia prefers-reduced-motion, e nenhum token de duração. O produto é sobre tokens. O site não os utiliza.
Descoberta 2: v0.dev (63.0/D) — a única falha real nos Core Web Vitals em 46 sites
v0.dev é o gerador de sites com IA da Vercel. Ele pontuou 63.0 (D) — mas a descoberta mais notável é seu LCP de 4216ms, bem acima do limite de 2500ms. Em todos os 46 sites que avaliamos (30 originais + 16 novos), esta é a única falha real nos Core Web Vitals. Todos os outros sites ou passaram no LCP ou tiveram isso PULAR (não medido).
A ferramenta que gera sites não consegue passar em seu próprio teste de desempenho. O site que ela constrói para si mesma carrega mais devagar do que qualquer site que testamos, incluindo os Prêmios de Design CSS (que pontuaram 37.9 no geral, mas ainda assim tiveram LCP=296ms).
Este é um produto da Vercel. O site de marketing da Vercel (vercel.com) pontuou 73.6 no lote original — a 5ª maior pontuação geral. A diferença entre a equipe de marketing da Vercel e a equipe do v0 da Vercel é de 10.6 pontos e uma falha nos CWV.
Descoberta 3: framer.com (56.5/F) — a ferramenta de movimento com zero acessibilidade de movimento
framer.com é uma ferramenta de design e movimento. Você a usa para construir animações, transições e protótipos interativos. Seu site de marketing não possui nenhuma consulta de mídia prefers-reduced-motion — nem mesmo um interruptor que desative toda a animação.
Isso é pior do que ter uma implementação ruim de movimento reduzido. Significa que o site não tem um caminho de acessibilidade de movimento. Usuários que configuram prefers-reduced-motion: reduce em seu sistema operacional têm a mesma experiência de animação que todos os outros. A checagem v05 do contrato é uma falha total: "nenhuma consulta de mídia prefers-reduced-motion encontrada."
Uma empresa que vende capacidades de movimento não limita o movimento para acessibilidade em seu próprio site. A ironia é estrutural, não acidental.
Descoberta 4: bun.sh (42.0/F) — o runtime mais rápido com a documentação mais lenta
bun.sh é um runtime JavaScript que se promove pela velocidade. Seu site de documentação pontuou 42.0 — a segunda menor pontuação do lote.
Duas falhas específicas se destacam:
Overflow horizontal em 720px e 860px —
scrollWidth=725 > innerWidth=720escrollWidth=871 > innerWidth=860. O site não se ajusta ao seu próprio viewport alvo. Para um do
Esse artigo destaca a baixa qualidade das ferramentas de desenvolvimento, o que pode impactar negativamente a experiência do usuário em sites brasileiros. Empresas devem considerar a qualidade das ferramentas que utilizam para garantir um bom desempenho e acessibilidade.
