O que Design Scout faz?
Sites projetados de memória saem como a média de todos os sites: herói centralizado, gradiente borrado, três cards de funcionalidades, uma fonte que ninguém escolheu. Designers bons evitam isso olhando para trabalhos reais antes de desenhar qualquer coisa. Esta skill torna isso o padrão: olhe primeiro, decida com propósito, depois construa.
O fluxo tem cinco etapas. Não pule a pesquisa para economizar tempo. A pesquisa é o que economiza tempo, porque elimina rodadas de "isto parece genérico, tente de novo".
- Levantamento: conheça o negócio
- Pesquisa: colete referências reais
- Resumo: transforme referências em decisões
- Checkpoint: usuário aprova a direção
- Construa e verifique conforme o resumo
1. Levantamento
Você precisa de três coisas antes de qualquer pesquisa. Pergunte pelo que estiver faltando, em uma única mensagem:
- Nicho: que tipo de site (clínica odontológica, B2B SaaS para faturamento, loja de streetwear)
- Nome: o nome do negócio ou produto
- Sobre: o que faz ou vende, para quem, o que o diferencia
Se o usuário já forneceu estes, não pergunte novamente.
Na mesma mensagem, ofereça estas perguntas opcionais e deixe claro que podem ser puladas. Cada uma melhora bastante a pesquisa, mas nenhuma deve te bloquear:
- Quem é o público, e qual é a única ação que o site deve levá-lo a realizar?
- Três palavras para como deve soar (calmo, alto, premium, divertido, técnico...)
- Algum site que amam ou odeiam, em qualquer indústria?
- Ativos de marca existentes: logotipo, cores, fontes, fotos?
- Quais páginas ou seções são necessárias, e em qual stack construir?
Para qualquer coisa pulada, escolha um padrão sensato e declare-o no resumo como uma suposição, para que o usuário possa corrigi-lo.
2. Pesquisa
Leia references/sources.md agora. Ele lista cada fonte, para que serve, como pesquisá-la e quais bloqueiam a obtenção simples.
Planeje as consultas primeiro. Escreva de 4 a 6 frases de busca antes de abrir qualquer coisa: o próprio nicho ("site de clínica odontológica"), o tipo de página ("landing page de agendamento"), as palavras de humor ("editorial calmo") e um nicho adjacente cuja cultura de design seja mais forte que a deste (um dentista pode aprender com marcas de skincare; uma ferramenta de contabilidade com ferramentas dev estilo Linear). A consulta adjacente é importante: se você olhar apenas dentro do nicho, reproduz os clichês do nicho.
Cubra quatro lentes, não dezoito sites. O arquivo de fontes agrupa os sites por lente. Use pelo menos uma fonte de cada, mais onde a primeira aparecer escassa:
| Lente | Pergunta que responde |
|---|---|
| Sites ao vivo | Como sites reais e publicados neste espaço organizam uma página? |
| Padrões de UI | Como bons produtos resolvem esta seção específica (preços, navegação, formulário de agendamento)? |
| Humor visual | Como poderia parecer: imagens, textura, cor, direção de arte? |
| Tipo e cor | Quais fontes e paleta específicas? |
Também veja 2 ou 3 concorrentes diretos do negócio (pesquisa web simples). Não para imitar, mas para aprender o que os visitantes neste nicho esperam e ver o que todos fazem, para que o design possa se destacar disso.
Vá ao site real. As miniaturas das galerias são pequenas e muitas vezes desatualizadas. Quando uma entrada de galeria parecer promissora, abra o site ao vivo para o qual ela aponta e veja isso. Faça uma captura de tela se tiver uma ferramenta de navegador; ler o HTML sozinho diz a estrutura, mas não como se sente.
Registre cada guardado conforme avança. Mire em 6 a 10 entre as lentes. Para cada um:
- Nome e URL (a URL real que você realmente abriu)
- O que especificamente funciona: seja concreto ("título serifado enorme alinhado à esquerda contra uma foto de produto estreita", não "limpo e moderno")
- A única coisa a pegar emprestado dele
- O que deixar para trás
Notas vagas produzem designs vagos. Se você não puder dizer o que é especificamente bom em uma referência, descarte-a.
Regra da honestidade. Cite apenas referências que você realmente carregou nesta sessão. Nunca invente um site, uma URL ou uma descrição de uma página que você não viu: uma referência fabricada é pior que nenhuma, porque o usuário confiará nela. Se uma fonte estiver bloqueada, atrás de login ou vazia, diga isso e use outra. Se você não tiver acesso à web, diga claramente ao usuário que a etapa de pesquisa não pode ser executada e pergunte se ele quer colar links ou capturas de tela, ou prosseguir a partir do conhecimento geral com essa ressalva declarada.
Escala para o trabalho. Um site completo recebe a passagem completa. Para uma única seção ou um pedido "rápido", faça uma passagem curta: 2 consultas, 3 ou 4 referências, um resumo de algumas linhas. Não caia para zero.
3. Resumo
Transforme as referências em decisões. Use o modelo em references/brief-template.md e salve-o como design-brief.md no projeto, para que a direção sobreviva à conversa e o trabalho posterior possa ser verificado em relação a ele.
O resumo deve ser comprometido. Cada item é uma escolha específica com uma razão traçada a uma referência ou ao negócio:
- Conceito em uma frase: a ideia que faz deste site o deste negócio e de ninguém mais
- Layout: seção por seção, com a ideia estrutural para cada uma
- Tipo: fontes nomeadas, onde cada uma é usada e onde obtê-las (verifique a licença; prefira fontes gratuitas para uso comercial, como Google Fonts ou Fontshare, a menos que o usuário tenha uma licença)
- Cor: valores hexadecimais com funções (fundo, texto, destaque, etc.), verificados quanto a contraste legível
- Elemento marcante: a única coisa que um visitante lembraria e descreveria para outra pessoa
- Imagens e movimento: que tipo, e quão contido
- Não será feito: os clichês do nicho e padrões genéricos que este design evita deliberadamente
Pegue princípios emprestados, não propriedade. Pegue a ideia (uma grade assimétrica, uma combinação de tipos, uma forma de ritmar seções) e nunca o logotipo, imagens, ilustrações, texto ou um clone no nível de pixel do layout da referência. Misture ideias de várias referências para que o resultado não seja cópia de ninguém.
4. Checkpoint
Mostre ao usuário a direção antes de construir: a linha de conceito, as 3 ou 4 referências mais fortes com links, paleta, fontes, esboço de seções, elemento marcante. Mantenha curto o suficiente para ler em um minuto.
Onde as referências puxaram em duas direções claramente diferentes, ofereça ambas como A e B com uma recomendação, em vez de mediá-las em algo sem graça.
Aguarde um sim ou mudanças. Construir um site inteiro em uma direção não aprovada é o erro caro que esta etapa existe para evitar. A única exceção: se o usuário disse de antemão para apenas construir sem verificar, prossiga e mostre o resumo junto com o resultado.
5. Construir e verificar
Construa conforme o resumo no stack do usuário. Se outra skill para frontend ou implementação de design estiver disponível, use-a para a construção e trate o resumo como sua entrada.
Ao construir:
- Escreva texto real para este negócio, em sua voz. Nada de lorem ipsum e nenhum preenchimento como "Eleve seu fluxo de trabalho".
- Nunca invente depoimentos, logotipos de clientes, estatísticas, prêmios ou avaliações. Se uma seção precisar deles, coloque um espaço reservado claramente marcado e diga ao usuário o que fornecer.
- Projete para mobile de propósito, não como um desktop comprimido.
- Mantenha o contraste do texto legível e os elementos interativos alcançáveis por teclado.
Quando a construção estiver pronta, leia references/slop-check.md e execute-o contra o resultado. Depois, olhe para ele: abra a página, tire capturas de tela em larguras de desktop e celular se puder, e compare com o resumo e as referências. Pergunte de cada seção: isso passaria nas galerias que você acabou de pesquisar? Corrija o que ficar aquém antes de apresentar.
Apresente o resultado com uma breve nota: o que foi construído, quais referências moldaram quais decisões, quais espaços reservados o usuário precisa preencher e o que você não pôde verificar.