cubxxw/deepen-design

Aprofundar Design

Crie um design mais próprio, não meramente mais decorado.

Leia references/recursive-tree.md antes de trabalhar. Se o usuário estiver reagindo a um resultado anterior insatisfatório, leia também references/failure-patterns.md.

Distinção central

A granularidade tem níveis:

1. verdade do produto e crença desejada;
2. teorema da marca e metáfora narrativa;
3. arquitetura da página e ritmo;
4. composição de seção e interação;
5. linguagem de componentes;
6. tipografia, cor, espaçamento, bordas, sombras e polimento de movimento.

Sempre desça nesta ordem. Um conjunto maior de tokens, mais sombras ou mais microinterações não é um design mais profundo quando os níveis 1-4 permanecem inalterados.

Comece pela evidência renderizada

Para uma interface existente:

1. Preserve a implementação atual e as alterações do usuário.
2. Capture a viewport atual inicial para desktop e mobile.
3. Inspecione pelo menos duas seções posteriores e uma interação significativa.
4. Declare o que está objetivamente funcionando.
5. Declare por que a página é esquecível em cinco segundos.
6. Separe gargalos funcionais de julgamentos de gosto.

Trate "ainda medíocre" como uma falha no teste de design. Não defenda uma pontuação anterior ou continue a mesma direção por padrão.

Construa uma árvore binária limitada

Em cada nó de mudança de direção, crie exatamente dois ramos materialmente diferentes. Um ramo válido altera o argumento visual, a estrutura da informação ou a interação característica. Uma troca de paleta não é um ramo.

Use busca em feixe:

• expanda dois ramos;
• torne ambos visíveis na fidelidade útil mais barata;
• compare-os em pares;
• mantenha o ramo mais forte e um desafiante crível;
• desça um nível;
• retroceda quando ambos os filhos herdarem a mesma fraqueza.

Não construa todas as folhas possíveis. Gaste profundidade em decisões consequentes, não em volume combinatório.

Portões de profundidade obrigatórios

Profundidade 0: invariante do produto

Escreva:

• o visitante;
• o momento de tensão;
• o que eles devem entender, sentir e fazer;
• a verdade do produto que os concorrentes não podem reivindicar honestamente da mesma forma.

Não implemente até que isso seja específico.

Profundidade 1: dois teoremas de marca

Crie duas posições de uma frase com implicações diferentes. Cada uma deve gerar:

• uma metáfora narrativa;
• uma gramática espacial;
• uma prioridade de conteúdo;
• um mecanismo característico;
• uma antirreferência explícita: o que essa direção não deve se assemelhar.

Pesquise três a cinco referências atuais e relevantes quando a pesquisa externa estiver disponível. Extraia mecanismos, não uma colagem de estilos. Nenhum candidato pode copiar a identidade visual completa de uma referência.

Profundidade 2: duas arquiteturas

Para o teorema principal, bifurque a página em duas jornadas diferentes. Defina o trabalho, a família de layout, o ritmo, o evento de contraste, a prova e a ação de saída para cada seção.

Rejeite uma arquitetura quando:

• a maioria das seções repete "título grande + parágrafo + imagem/card";
• a prova do produto é intercambiável com uma captura de tela genérica de SaaS;
• remover o logotipo torna a categoria ou marca irreconhecível;
• a única distinção visível é paleta ou tipografia.

Profundidade 3: protótipos visuais

Renderize ambas as direções sobreviventes antes da implementação completa. Prefira:

• dois protótipos da primeira viewport;
• uma seção representativa do meio da página para cada;
• desktop primeiro, depois uma verificação de colapso para mobile.

Compare capturas de tela lado a lado. Não selecione apenas com base em prosa.

Se o usuário estiver disponível e as direções codificarem gostos genuinamente diferentes, faça uma pergunta de bifurcação concisa. Se o usuário solicitou autonomia, escolha a partir da evidência e preserve o desafiante.

Profundidade 4: sistema e implementação

Agora defina:

• papéis e escala tipográfica;
• paleta e contraste;
• linguagem de ativos;
• regras de grade, espaçamento e forma;
• semântica de movimento;
• primitivas de componentes.

Use ui-ux-pro-max para dados relevantes do sistema de design quando disponível. Use design-taste-frontend após a seleção da direção como um linter de pré-verificação. Suas regras podem rejeitar clichês, mas não podem escolher o conceito.

Profundidade 5: microdetalhe

Ajuste bordas, sombras, material, hover, espaçamento óptico e desempenho apenas após a direção e os portões de arquitetura passarem.

Cada micro mudança deve nomear a decisão pai que reforça. Remova-a quando não alterar hierarquia, significado, feedback ou coerência do material.

Avalie a coisa certa

Mantenha dois registros separados.

Portão funcional

• verdade do produto;
• comportamento responsivo;
• acessibilidade;
• desempenho;
• saúde do código e dos testes.

Estas são restrições de passar/falhar. Elas não provam gosto.

Julgamento de design

• compreensão em cinco segundos;
• propriedade com logotipo desligado;
• recordação visual após um atraso;
• distância do template da categoria;
• visibilidade do mecanismo do produto;
• contraste e ritmo em toda a página;
• preferência do usuário.

Use evidência em pares do fluxo de trabalho de referência. Não atribua uma pontuação absoluta 95/100 ou 98/100 a partir de uma rubrica autoelaborada. Se o usuário disser que o resultado é genérico, a alegação de distinção falhou, independentemente do Lighthouse.

Termine com evidências

Retorne:

1. a árvore explorada e onde houve retrocesso;
2. a direção vencedora e o desafiante sobrevivente;
3. capturas de tela antes/A/B ou evidência visual equivalente;
4. as três maiores mudanças visíveis, ordenadas por profundidade;
5. resultados do portão funcional;
6. decisões de gosto ou produto não resolvidas.

Não descreva o volume de microdetalhes como o resultado principal. O resultado é um argumento de design reconhecível que sobrevive sem o logotipo.