Todas as telas do seu app com cara de profissional.
A IA faz cada tela de um jeito: uma cor aqui, um botão diferente ali, um menu que some no celular. O Faundr cria com você o guia de design do app e confere cada tela no celular e no computador. Depois, a IA arruma o que estiver fora.
Todos os erros de design do app, numa lista. Corrija todos com um comando.
Texto que quase ninguém lê, campo que dá zoom no iPhone, um cinza diferente numa tela: são erros que passam despercebidos. O Faundr encontra cada um. Com /faundr:design-fix, a IA corrige um por um até resolver todos, e o Faundr continua procurando a cada conversa, enquanto o app é construído. O que sumiu na checagem seguinte fecha sozinho.
- D-31O menu sai da tela no celular resolvidoAlta
Checkout · 375 px
- D-28Texto cinza que quase ninguém lê (2,1 : 1) resolvidoAlta
src/components/Preco.tsx:14
- D-27Campo de busca faz o iPhone dar zoom resolvidoAlta
src/components/Busca.tsx:9
- D-24Botão só com ícone, sem nome para o leitor de tela resolvidoMédia
src/components/Carrinho.tsx:52
- D-22Um cinza que não está no guia resolvidoMédia
src/routes/conta.tsx:31
- D-19O mesmo botão montado de novo em 4 arquivos resolvidoMédia
src/routes/
O que faz um app parecer amador. E quase nunca dá para ver sozinho.
Cada tela de um jeito.
A IA faz cada tela num dia: um botão redondo aqui, quadrado ali, um cinza diferente em cada página. O usuário não sabe dizer o quê, mas sente que é amador.
O Faundr confere
- Cor fora da paleta do guia
- Cinzas e ícones misturados
- O mesmo botão montado de novo em vários arquivos
Quebra no celular.
No computador está perfeito. No celular, o menu sai da tela, a página rola para o lado e o botão é pequeno demais para o dedo.
O Faundr confere
- A tela medida em 375, 768, 1024 e 1440 px
- Botão com menos de 44 px para o dedo
- Campo que faz o iPhone dar zoom
Tem gente que não consegue usar.
Texto cinza claro que ninguém lê no sol, botão sem nome para quem usa leitor de tela, foco que some para quem navega pelo teclado.
O Faundr confere
- Contraste de texto de pelo menos 4,5 para 1
- Botão só com ícone e sem nome
- Contorno do foco removido
Primeiro, o Faundr aprende o visual do seu app. Depois, escreve o guia com você.
O /faundr:design lê as cores, as fontes e os componentes que o app já usa e faz algumas perguntas. Com as suas respostas, escreve o guia de design. Daí em diante, toda tela é conferida contra ele, e a IA o segue ao criar telas novas.
Pergunta 2 de 4 · Cores
O app usa preto #151515, branco e cinzas neutros. A paleta é essa?
- Preto #151515 e brancorecomendado
- Preto e branco com uma cor de destaquevocê escolhe a cor
- Outra paletavocê descreve
A primeira opção sempre vem do que o seu app já usa. O guia só é escrito com o seu OK.
Cada tela no celular, no tablet e no computador. Com um número de verdade para cada problema.
Na auditoria completa, o agente abre cada tela do app em quatro larguras e mede o que só aparece na tela de verdade. Tem tema claro e escuro? Ele mede os dois: o principal em todas as larguras e o outro no celular e no computador. Arraste para ver o que muda.
Nenhum problema nesta largura.
O que é medido em cada largura
- Rola para o ladoe o que passa da borda
- Pequeno para o dedomenos de 44 px no celular
- Texto cortadosem as reticências
- Contraste de verdadecom a cor de fundo real
- Letra pequena demaismenos de 12 px
- Animação lentamais de 300 ms num clique
- Texto colado na bordano celular
- Os dois temaslogo ou borda que some no tema escuro
- Menus e tecladomenu aberto cortado, foco que some
0
regras automáticas, em nove grupos. Mais 7 medidas no navegador, nos dois temas, e a revisão da IA em cada tela.
- Celular11zoom desligado, grade sem versão de celular, 100vh
- Acessibilidade13foco removido, botão sem nome, imagem sem descrição
- Movimento10animação lenta, efeito de quique, transition-all
- Identidade do app9sem ícone na aba, título "Vite + React", sem descrição
- Fora do guia13cor fora da paleta, cinzas misturados, cor que ignora o tema escuro
- Conteúdo4"Lorem ipsum", "John Doe", "Clique aqui"
- Boa prática3link que não leva a lugar nenhum, botão sem componente
- Repetição1o mesmo estilo copiado em vários lugares
- Bug visual1menu que pode abrir cortado
Um piso de qualidade.Os números que toda tela respeita: contraste, tamanho para o dedo, letra, animação.
Web, React Native e Flutter.React, Vue, Angular, Svelte, Astro, PHP e HTML puro, com Tailwind, CSS ou Sass. Algumas regras são só para apps de celular.
Decisão sua vale mais.Se o guia decidiu diferente, a regra não cobra. Você também pode desligar uma regra.
Veja cada componente do seu app, desenhado. Todos juntos, num lugar só.
A vitrine desenha, lado a lado, os botões, campos, filtros e cards que o seu app usa, com o estilo de verdade. Num olhar você vê o que está igual e o que saiu diferente. Abaixo, a vitrine do próprio Faundr: clique num componente para ver as medidas dele.
Cores do guia
- ink
- ink-raised
- ink-line
- ink-line-strong
- neutral-400
- white
Componentes
Botão principal
.f-btn
- altura
- 32 px · 44 no celular
- fundo
- white
- texto
- ink · 14 px · peso 500
- canto
- cortado 8 px, como a logo
As cores aparecem com o nome que têm no guia. Mudou o arquivo do componente? A vitrine marca como desatualizada.
A IA faz telas bonitas, uma de cada vez. O Faundr deixa todas iguais.
Numa conversa, a IA capricha na tela que você pediu. Ela não lembra como fez as outras, não abre o app no celular e não mede o contraste. O Faundr entrega o guia e confere o resultado.
Linguagens suportadas
As regras leem as telas em cada uma delas, sem instalar nada. Linguagens só de servidor, como Go ou Rust, não têm tela para conferir.
- JavaScript e TypeScript
- React Native
- Vue
- Angular
- Svelte e Astro
- Flutter e Dart
- PHP
- Kotlin (só a IA)
- HTML
- CSS
- Tailwind
- Kotlin · só a IA (a IA audita lendo as telas (/faundr:design))
Quatro camadas. Da regra automática à auditoria no navegador.
As regras rodam no seu computador, sem IA. O agente entra nas telas que mexeu e quando você pede a auditoria completa.
Início da conversa
Checagem sem IA.
As 65 regras rodam no seu computador, em segundos, sem gastar tokens.
Fim de cada resposta
As telas que mudaram.
A IA confere só as telas que mexeu, contra o guia e o piso de qualidade.
Quando você pede
Auditoria completa.
Todas as telas, medidas no navegador em quatro larguras, com menus abertos e teclado.
Para corrigir
/faundr:design-fix.
Do que impede o uso ao polimento. Só dá como resolvido quando o app compila.
Perguntas
Eu não sei nada de design. Serve para mim?
Serve. O Faundr pergunta em linguagem clara, com a primeira opção sempre tirada do que o seu app já usa. Você só escolhe.
Vai mudar o visual do meu app sozinho?
Não. A checagem só aponta. A correção acontece quando você pede, e a IA nunca muda endereços, navegação, campos de formulário, a logo ou textos legais sem perguntar.
Gasta os meus tokens?
As 65 regras rodam no seu computador, sem IA. A conferência das telas mexidas, a auditoria completa, a vitrine e as correções usam o seu próprio plano de IA.
E se o meu app for assim de propósito?
Arquive o problema como decisão de design, falso alarme ou "não se aplica", só aquele ou a regra inteira. Ou marque no código com faundr-ignore e o motivo. Para pular pastas inteiras, como código de terceiros, liste-as no .faundrignore.
Funciona com o meu projeto?
Telas em React, Vue, Angular, Svelte, Astro, React Native, Flutter, PHP ou HTML puro, com Tailwind, CSS ou Sass, sem instalar nada. Telas Android em Kotlin passam pela revisão da IA, sem as regras automáticas. A medição no navegador é para apps web e precisa do app rodando no seu computador.