badmuriss/sites-incrivelmente-bonitos

Sites Incrivelmente Bonitos

Uma fonte única de verdade para as decisões visuais e técnicas por trás de um site que parece ter sido criado por um time de produto real, e não por um modelo de linguagem que chutou 'moderno e limpo'.

Coordenação com $refero-design

Quando $refero-design estiver disponível, carregue-o primeiro e deixe que ele lidere a pesquisa visual, o roteamento da ferramenta Refero, a síntese, o bloqueio de referência e o registro de decisões. Use este skill após esse bloqueio para assumir as restrições de implementação: escopo do sistema atual, modo de superfície, escolhas de framework, artefato espacial e de interação, comportamento responsivo, verificações anti-slop e validação renderizada.

A sequência é fixa:

1. $refero-design pesquisa estilos, telas e fluxos na proporção da tarefa.
2. $refero-design escolhe uma direção primária e registra influências secundárias delimitadas.
3. Este skill traduz o bloqueio aprovado em um contrato de direção e UI de produção.
4. Este skill valida o resultado renderizado contra o bloqueio e as plataformas suportadas.

Não execute ambos os skills como autoridades de gosto concorrentes. O Refero fornece evidências de produto e visuais. Este skill fornece a disciplina de execução de front-end. Se o MCP do Refero não estiver disponível, $refero-design usa seu fallback integrado, então este skill continua a partir do bloqueio resultante.

O framework padrão é React (Vite/Next/vite-react-ssg). Astro, Vue e CSS/JS vanilla também são suportados como cidadãos de primeira classe; expressões idiomáticas específicas de framework estão em framework-adapters.md. Se nada for especificado, assuma React. Quando o sistema atual for Astro ou o briefing exigir EmDash, preserve a renderização no servidor e use componentes Astro por padrão, adicionando ilhas de framework apenas onde a interação realmente precisar delas.

Como usar

0. Leia direction-workflow.md. Resolva a verdade do sistema atual e defina CHANGE_SCOPE e SURFACE_MODE.
1. Pesquise na proporção do escopo. A pesquisa completa é obrigatória para world; local herda a superfície ao redor.
2. Use o preset de tipo de projeto (Seção 1) para calibrar a restrição de domínio e o custo técnico, nunca para escolher a estética.
3. Derive a direção a partir das evidências. Use arquétipos de vibe e layout como vocabulário e desafiantes, nunca como um menu obrigatório.
4. Registre o contrato de direção antes do código e construa cada seção do zero.
5. Aplique as referências técnicas para espaçamento, movimento, estados, responsividade e acessibilidade.
6. Faça uma autoauditoria contra a Seção 14 e os Marcadores de IA na Seção 13, depois complete as passagens visuais delimitadas.

Arquivos de referência:

• direction-workflow.md — contexto alvo, CHANGE_SCOPE, SURFACE_MODE, contrato de direção, portão de composições, finalização delimitada
• foundations.md — limites autoritativos para tipo de herói, altura da janela de visualização, propriedades de movimento, sobrancelhas e prioridade do sistema atual
• spatial-design.md — escala de 4pt, hierarquia, consultas de contêiner
• motion-design.md — easing, durações, movimento reduzido, um catálogo de padrões de transição
• interaction-design.md — os 8 estados, foco-visível, popovers, modais
• laws-of-ux.md — heurísticas de composição com pesquisa nomeada: Hick, Miller, Fitts, Von Restorff, Peak-End, Jakob, carga cognitiva
• form-validation.md — temporização de validação, a máquina de estados de entrada, :user-invalid, resumos de erro, esquema como o contrato entre pilhas
• responsive-design.md — mobile-first, consultas de ponteiro, área segura, srcset
• framework-adapters.md — equivalentes React/Vue/vanilla para movimento, estado, hidratação
• component-libs.md — (somente React) componentes animados copiados: Magic UI, React Bits, ícones Lucide animados via registro shadcn
• scroll-motion.md — (Nível 3) GSAP ScrollTrigger + Lenis scroll suave, com proteções de desempenho/acessibilidade
• design-references.md — (pesquisa, gratuita) a camada de pesquisa sem Refero: leitura de tokens reais de um site ao vivo, pacotes DESIGN.md, galerias gratuitas, sistemas de design públicos e um banco de referências segmento → referências
• media-pipeline.md — fotografia gratuita (Pexels/Unsplash/Pixabay/domínio público, com as regras de hospedagem por fonte) + catálogo licenciado da Magnific via REST + imagens geradas via duas faixas pares ($image-gen / MCP da Magnific), rotas de recorte alfa, + (Nível 3, com custo) imagem→vídeo via Magnific, com uma receita de <video>
• style-interview.md — (modo entrevista) quando perguntar ao usuário pela direção, o roteiro da rodada, como construir candidatos a partir da pesquisa em vez de oferecer a lista de arquétipos como um menu
• redesign.md : (modo redesign) Escanear, Diagnosticar, Corrigir; detecção de modo (Greenfield / Preservar / Reforma geral); o que nunca muda silenciosamente
• conversion-diagnosis.md — (páginas de destino) o portão de entrega antes do texto mais o diagnóstico de aquisição e conversão em dez camadas

SEO, pontuações de acessibilidade e Core Web Vitals não são auditados aqui. Este skill constrói; a verificação de uma URL ao vivo pertence ao skill site-audit, que detém as regras de SEO na página (título, meta, canônico, OG, esquema, robots, sitemap), a camada AEO/GEO, a execução axe-core e o orçamento CWV. Construa até a verificação pré-voo da §14 e, em seguida, aponte o site-audit para a URL implantada.

Uma landing page ao vivo é diagnosticada antes de seu texto ser reescrito. Leia conversion-diagnosis.md, abra a página implantada em um perfil de navegador de usuário real e em um perfil renderizado do Googlebot e estabeleça se ambos recebem uma página funcional. Um script quebrado, uma primeira tela lenta, um rastreador bloqueado, um CTA morto ou um formulário inutilizável superam o polimento do texto. O SEO conquista a visita; a experiência entregue precisa transformá-la em um lead.

---

Dois modos: autônomo (padrão) vs entrevista

Autônomo (padrão): trabalhe a partir do contexto que você já tem, mais suposições sensatas do preset. Não pergunte nada ao usuário. Perdeu um detalhe? Assuma o valor mais provável, anote a suposição em uma linha e continue. Este é o único modo seguro quando não há um humano no loop.

Entrevista: acionado quando a invocação solicita explicitamente (--interview, "modo entrevista", "me pergunte qual estilo"), ou quando CHANGE_SCOPE=world, a sessão é acompanhada e o usuário não fixou nenhuma referência ou marca. Ele é executado em duas batidas: reúna o briefing (segmento/produto, público, objetivo, tom, objeção, restrições, sites que eles já gostam), depois pesquise primeiro e volte com duas ou três direções concretas para escolher — tela, tipo, função de acento, estratégia de mídia, movimento característico e o produto real de onde cada uma vem. O objetivo é um site com o rosto do usuário, em vez de um padrão competente.

Ambos os modos fazem a pesquisa na Seção 0 e ambos terminam no mesmo bloqueio de referência e contrato de direção. A única diferença é quem faz a escolha de gosto. Protocolo completo, script de perguntas, regra anti-menu e limites de rodada: style-interview.md.

Redesenhando um site existente em vez de construir do zero? Veja redesign.md para o modo redesign (Escanear, Diagnosticar, Corrigir) e as regras Preservar vs Reforma geral. Ambos os modos acima ainda se aplicam; um redesign apenas também protege o que o site ao vivo já conquista.

---

0. PESQUISE PRIMEIRO — proporcional ao escopo da mudança

Inegociável para CHANGE_SCOPE=world. Uma marca totalmente definida não desculpa pular a pesquisa estrutural para um mundo novo ou de substituição. Para surface, pesquise estruturas e fluxos comparáveis preservando o sistema atual. Para local, a superfície ao redor é a evidência principal; pesquise apenas o que ela não pode responder. Veja direction-workflow.md.

Cada decisão visual começa a partir de evidências do que produtos reais realmente lançaram, e não da memória do modelo sobre 'bom gosto'. Modelos são fortes em código e lógica e fracos em gosto de produto, portanto, ancore o gosto em referências reais.

Onde pesquisar

Premium recomendado — Refero (refero.design). Se as ferramentas mcp__refero__* estiverem disponíveis, use-as primeiro. Três camadas:

• Estilos (direção visual, comece aqui): refero_search_styles(query) → refero_get_style(...).
• Telas (UI concreta): refero_search_screens(query, platform:"web"|"ios") → refero_get_screen(...), refero_get_similar_screens(...), refero_get_screen_image(...).
• Fluxos (jornadas de várias etapas — integração/checkout): refero_search_flows(...) → refero_get_flow(...).
• Telas usam UUIDs, fluxos usam IDs numéricos. Pagine com page apenas. get_screen_image custa uma chamada de visão — use-a apenas quando precisar inspecionar pixels.

Caminho gratuito (sem Refero) — design-references.md. O Refero torna esta etapa rápida; não é o que a torna possível. O caminho gratuito produz o mesmo bloqueio de referência a partir da mesma classe de evidências, e o arquivo carrega toda a agenda de endereços: como ler tokens reais de um site ao vivo com curl/WebFetch (a evidência mais forte que existe, melhor do que qualquer captura de tela), os pacotes DESIGN.md de código aberto (oficiais em VoltAgent/official-design-md, mais de 70 marcas com engenharia reversa em VoltAgent/awesome-design-md), as galerias verificadas como gratuitas (siteinspire, httpster, minimal.gallery, onepagelove seções, dark.design, navbar.gallery, footer.design), os sistemas de design públicos e um banco de segmento → produtos reais para estudar para que você nunca comece de uma consulta em branco.

Versão curta se você não ler mais nada: escolha dois ou três produtos reais no segmento, abra-os, extraia sua pilha de tipos e propriedades CSS personalizadas, nomeie o que torna cada um bom e registre. Nunca bloqueie uma característica que você não olhou de fato.

O fluxo de trabalho

1. Contexto + breve briefing: resolva a verdade do sistema atual, CHANGE_SCOPE, SURFACE_MODE, o quê / para quem / plataforma / objetivo / tom / objeção / restrição. (Autônomo: infira. Entrevista: pergunte.)
2. Estilos primeiro: duas ou três pesquisas de ângulos diferentes — um estético, um de domínio/segmento, uma marca de referência forte. Abra uma a três direções fortes.
3. Telas/fluxos quando você precisar de estrutura de tela concreta ou lógica de jornada. Para SURFACE_MODE=persuade, o alvo de pixel deve ser ele próprio uma superfície de marketing persuasiva com um meio focal visível. Páginas legais/de termos, documentação, diretórios, changelogs, índices de arquivo, painéis e páginas editoriais apenas com texto são contraexemplos, nunca o bloqueio de tela primário. Nomeie o meio focal do alvo e um momento visual de suporte antes de codificar. Se a tela inspecionada funciona por causa de fotografia, ilustração, imagens de produto ou movimento, preserve essa função de mídia. Substituí-la por tipografia, regras, metadados ou cartões vazios é desvio de referência.
4. Sintetize — não faça média. Escolha uma direção primária dominante e preserve suas características distintivas. Referências secundárias emprestam um detalhe cada. Nunca a média morna de tudo: se uma referência é escura, uma é serifada, uma é ácida, a resposta não é creme educado + serifa educada.
5. Bloqueio de referência + registro de decisões + contrato de direção antes de codificar:
   • Bloqueio de referência: a direção primária + três a cinco características a preservar (tela, tipo, acento, layout, densidade, mídia) + o que emprestar das secundárias + regras de função (somente CTA, somente código, somente decorativo) + estratégia de mídia (real / gerada / banco de imagens / placeholder).
   • Registro de decisões: uma tabela decisão | fonte | função/regra | porquê. Cada grande escolha visual remonta a uma referência, uma restrição do cliente, verdade visual do sistema atual ou uma regra de ofício neste skill. Nenhuma fonte significa que não vai ao ar.
   • Contrato de direção: os cinco blocos curtos em direction-workflow.md. A passagem final verifica a renderização contra eles.
6. Implemente usando os presets (Seção 1), níveis (PREMIUM_TECH_TIER) e regras anti-slop (Seção 13).

O que substitui o quê (pesquisa vs este skill)

DURO — verdade do produto, acessibilidade e o sistema atual vencem:

• No escopo local e surface, tokens de marca estabelecidos e convenções de componentes superam os padrões de gosto deste skill. Não substitua uma fonte existente, cor de marca roxa, sistema Lucide, raio ou linguagem de componente, a menos que o usuário autorize o redesign ou peça para remover esse marcador. Veja foundations.md.
• Acessibilidade, correção semântica, comportamento funcional, ativos reais e restrições explícitas do usuário sempre vencem. Corrija uma falha de contraste sem usá-la como permissão para reformular o produto.
• No escopo world, as regras de conteúdo e gosto se aplicam a cada nova escolha: uso excessivo de travessão, pílulas flutuantes decorativas, roxo de IA por reflexo, fontes padrão sem motivo, pessoas falsas de IA em depoimentos e ícones dentro de caixas decorativas.
• Não clone um estilo diretamente; mantenha as funções dos tokens intactas (um acento somente para CTA permanece somente para CTA).

SUAVE — uma referência real vence (estrutura e layout):

• Estrutura da página, ordem e número de seções, formato do rodapé, formato do herói, variação de layout, densidade: liderado pela pesquisa, não por um modelo fixo. As regras estruturais neste skill são padrões sensatos, não lei — se as referências mostrarem uma estrutura diferente e boa para o caso, siga as referências.
• A estrutura só é "errada" se quebrar usabilidade, conversão ou responsividade — não porque diverge do padrão deste skill.

0.1 — Visu

…

[truncado para tradução]