Ferramentas de Desenvolvimento: Desempenho Abaixo do Esperado
Na semana passada, nós avaliamos 30 sites reais contra um contrato de design de 40 checagens. 60% obtiveram notas D ou F. Nenhum obteve um B.
Pessoas perguntaram: e as 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 têm uma pontuação 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 obtiveram F — em comparação com 40% da amostra original. Nenhum site novo alcançou C. As ferramentas de desenvolvimento são piores do que os prêmios de design.
Para referência: FWA obteve 41.1, Pentagram obteve 41.1, e os Prêmios de Design CSS obtiveram 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 obteve 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 a 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 obteve 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 passaram no LCP ou tiveram essa métrica SKIP (não medida).
A ferramenta que gera sites não consegue passar em sua própria checagem 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 obteve 37.9 no geral, mas ainda teve LCP=296ms).
Este é um produto da Vercel. O site de marketing da Vercel (vercel.com) obteve 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 todas as animações.
Isso é pior do que ter uma implementação ruim de movimento reduzido. Significa que o site não tem um caminho de acessibilidade para 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 grave: "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 obteve 42.0 — a segunda menor pontuação do lote.
Duas falhas específicas se destacam:
Overflow horizontal a 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
O desempenho insatisfatório das ferramentas de desenvolvimento pode impactar a qualidade dos sites criados no Brasil. Empresas devem considerar a avaliação dessas ferramentas para garantir que seus produtos atendam aos padrões de acessibilidade e performance exigidos.
