Design

Design confere se as telas do projeto seguem um padrão e funcionam para todo mundo: no celular, com teclado, com leitor de tela, com pouca luz. A régua é o design.md do projeto, o guia com as cores, as fontes e os componentes, mais um piso de qualidade que vale para qualquer tela (contraste, tamanho de toque, estados, foco e movimento).

O design.md

O design.md é o guia de design do projeto, um arquivo de texto na pasta do código. Ele diz quais cores, fontes e componentes usar e o que evitar. Com ele, o agente para de inventar um estilo diferente a cada tela.

Para criar, rode /faundr:design num projeto sem design.md. O agente:

1. levanta as cores, fontes e componentes que o código já usa;
2. faz até 4 perguntas: qual tela é a referência, as cores, a tipografia e a personalidade do produto, e depois o escopo (celular, tipo de produto, tema, movimento);
3. escreve o design.md só com o seu OK.

Depois disso, o Faundr orienta o agente a seguir o guia em toda tela nova, e as checagens passam a comparar as telas com ele.

Como as telas são conferidas

Um achado da checagem automática fecha sozinho quando ela não o encontra mais. Pastas listadas no .faundrignore (código de terceiros, arquivos gerados) ficam fora da checagem.

Em que linguagens

A checagem automática funciona sem instalar nada nas telas feitas com JavaScript e TypeScript (React, Next.js, Vue, Angular, Svelte, Astro e React Native), Flutter, PHP, HTML, CSS (com Sass e Less) e Tailwind. Em telas Android feitas em Kotlin, só a auditoria com IA confere, lendo as telas. Em linguagens sem telas (um servidor em Go, por exemplo), o design não se aplica. A tabela completa está em Linguagens suportadas.

Abas

Problemas

Os achados D-n. No topo, um card diz se o projeto tem design.md, quantos arquivos de tela foram checados e quando.

Filtre por tipo (só aparecem os tipos que têm achado):

Em apps com tema claro e escuro, a checagem automática também aponta: cor da paleta escrita fixa no código (fica igual nos dois temas), a cor da barra do navegador (theme-color) igual nos dois temas e o app que não começa pelo tema do aparelho.

E por situação: Abertos, Resolvidos ou Arquivados.

O detalhe de um achado mostra o que está errado, o arquivo e a linha (ou a tela, a largura e o tema, quando foi medido no navegador), a origem (checagem automática, auditoria da IA ou reportado por você) e a regra. Os botões:

• Corrigir com a IA: copia /faundr:design-fix D-n. O agente corrige seguindo o design.md, confere e marca como resolvido.
• Marcar como resolvido, quando você mesmo corrigiu.
• Arquivar, quando o problema não vale para este projeto. Veja abaixo.

Reportar problema registra algo que você viu na tela: o que está errado, onde, o tipo e a gravidade. Vira um D-n como os outros. Pelo agente: /faundr:design-report o menu da lista abre escondido.

Arquivar e desligar regras

Nem toda regra serve para todo projeto. Ao arquivar um achado, escolha o motivo (Não se aplica a este projeto, Falso alarme ou Decisão de design) e o alcance:

• Só este problema;
• Não verificar mais esta regra no projeto, que arquiva junto os outros achados abertos da mesma regra;
• Não verificar mais nada deste tipo no projeto.

Regras desligadas aparecem em Guia → Escopo do design, com o botão Religar.

Quando o agente arquiva um achado, o motivo fica registrado como "Arquivado pelo agente", e você pode reabrir.

Para pular um trecho específico do código, há um comentário próprio, na linha de cima do trecho: // faundr-ignore <regra>: <motivo>.

Cobertura

O que a última auditoria completa verificou, tema por tema: responsivo, acessibilidade, conteúdo e estados, bugs visuais, consistência com o design.md, movimento e identidade. Cada tema tem:

• o resultado: Passou, Falhou, Parcial, Não verificado, Nunca verificado ou Desligado;
• uma nota de 0 a 4;
• como foi verificado: pelo código, medido no navegador ou num aparelho.

As barras mostram a tendência das notas entre auditorias. Abaixo, a matriz Responsividade medida cruza as telas com as 4 larguras. Cada célula diz "Ok" ou quantos problemas tem; clique para ver quais. Quando o app tem os dois temas, o botão Tema escuro / Tema claro em cima troca a grade, e cada achado medido diz em qual tema apareceu.

Guia (design.md)

Começa pelo card Escopo do design, que diz ao Faundr o que conferir (o mesmo card fica em Configurações → Design):

Abaixo ficam as exceções decididas (uma técnica e o motivo, como "botões redondos — são da marca") e as regras desligadas. Depois, o texto do design.md do projeto. Para mudar o guia, edite o arquivo no projeto, ou peça ao agente.

Vitrine

Uma tela com zoom e arrastar onde ficam:

• os tokens do design: cores, tipografia, raios e sombras;
• réplicas dos componentes do projeto (botões, campos, cards, menus, etiquetas…), com as variantes lado a lado.

As réplicas são desenhadas pelo agente com /faundr:design-showcase, a partir do design.md e do código de cada componente. Quando o arquivo de um componente muda, a réplica ganha a etiqueta Desatualizada. Rode o comando de novo para refazer só as desatualizadas.

Clique num elemento de uma réplica para abrir o inspetor: as classes, o tamanho, o espaço interno, as cores com o nome do token, a borda, o canto e a fonte. Serve para conversar com um designer ou conferir se um componente segue o guia.

Ordem de correção

Com muitos achados abertos, /faundr:design-fix sem número corrige na ordem que mais importa, parando ao fim de cada etapa:

1. o que quebra o uso ou a acessibilidade;
2. estados e conteúdo;
3. responsivo e fluxo;
4. desvios do design.md;
5. polimento.

Para resolver todos de uma vez, sem parar entre as etapas, use /faundr:design-fix --all. O agente corrige um por um, mostra o progresso (D-15 resolvido (3/30)) e não para para perguntar: o que precisaria do seu OK (uma tela inteira para refazer, mudar a navegação ou um formulário) ele pula e lista no fim, em "Esperam você". O mesmo --all funciona em /faundr:quality-fix, /faundr:security-fix, /faundr:error-fix e /faundr:tests-fix.

Comandos