decoy-frontend

Construtor de Estilo para Demo

Transforme qualquer produto em uma bela landing page de demonstração que empresta o estilo visual de um site de referência — sua paleta, tipografia, padrões de layout e movimento — enquanto conta a história do produto do usuário.

Regra de ouro: clone o estilo, nunca o conteúdo. O site de referência fornece a aparência; o site/produto do usuário fornece o texto. A saída não deve reproduzir o texto da referência, e também não deve apenas re-vestir o layout existente do usuário — deve ser uma página nova no estilo emprestado.

Este é o erro nº 1. Copiar a paleta da referência mas manter o esqueleto de seções do site do usuário (seus blocos numerados de recursos, seus motivos de cartões, sua ordenação) produz uma página que ainda parece o site original do usuário em novas cores. Recolorir não é reestilizar. Você deve pegar emprestado o esqueleto de layout e componentes característicos da referência, não apenas seus valores hexadecimais. Sempre pesquise também a estrutura do site do PRÓPRIO usuário (Passo 2) para saber do que divergir.

Padrões de layout suportados (escolha por solicitação):

• Estilo único emprestado — a página inteira no visual de uma referência.
• Tour de estilo seção por seção — cada seção empresta a identidade de um site diferente (ex.: hero → projectdiscovery, preços → linear, CTA → superhuman). Dê a cada <section> seu próprio bloco de tema com escopo: fundo, cor de destaque, tipo, raio, e um componente característico. Ótimo quando o usuário diz "cada seção com seu próprio tema". Mantenha-os coerentes (ex.: todos escuros) a menos que ele queira contraste.

Kit de ferramentas (acompanha esta skill — use-o, não o derive novamente)

Os caminhos são relativos ao diretório desta skill. Prefira-os em vez de escrever do zero; eles codificam as armadilhas abaixo para que você não as encontre novamente.

• template/ — um scaffold compilável Next 14 + GSAP + Lenis com a camada de movimento já configurada (SmoothScroll, ScrollProgress, Reveal, globals.css tokenizado, um page.tsx inicial). Toda construção começa aqui.
• template-html/index.html — os mesmos tokens + camada de movimento em UM único arquivo autocontido (GSAP/Lenis via CDN). Use quando o usuário escolher saída em HTML de arquivo único; nenhum scaffold/instalação necessária.
• scripts/new-demo.sh <dest> — copia o template para <dest> e executa npm install.
• scripts/verify.sh <dir> — Passo 5 como um script: recusa construir enquanto o next dev estiver rodando, verifica tipos, compila a exportação estática, grepa out/index.html.
• scripts/extract-style.js — execute em uma página de referência aberta via javascript_tool do Chrome para extrair fontes/cores/raios/escala reais em um rascunho de especificação (Passo 2).
• scripts/shoot.mjs <url> — captura de tela headless com Playwright, apenas para sandboxes/CI sem display. Localmente, faça captura de tela com as ferramentas do Chrome.
• scripts/deploy.sh [dir] [--prod] — envia o diretório estático compilado (out/, ou a pasta do HTML de arquivo único) para uma URL ao vivo. Vercel por padrão; como são apenas arquivos estáticos, qualquer host funciona. Voltado para o exterior — compile primeiro e confirme com o usuário antes do --prod.
• scripts/audit.sh <url> — Pontuações Lighthouse (perf/acessibilidade/melhores práticas/SEO) contra um servidor de desenvolvimento ou um deploy.
• references/patterns.md — receitas de animação + blueprints de componentes característicos, escolhidos pela energia da referência.

Passo 1 — Entreviste o usuário (faça isso primeiro)

Use a ferramenta AskUserQuestion. Faça estas perguntas juntas. As duas primeiras são de texto livre (diga ao usuário para digitá-las através do campo "Outro" ou responder no chat); o restante é de múltipla escolha com opções sensatas. Sempre inclua um caminho "adicione o seu".

1. Seu site / produto — uma URL (ex.: www.acme.com) ou uma breve descrição. Esta é a fonte do conteúdo.
2. Site(s) de referência — uma ou mais URLs cujo estilo será emprestado (ex.: granola.ai, linear.app, stripe.com). Esta é a fonte da aparência.
3. Estilo de fonte (seleção múltipla) — ex.: Serifa editorial · Sem serifa limpa · Monoespaçada/técnica · Arredondada/amigável · Corresponder à referência.
4. Tema (opcional, seleção múltipla) — ex.: Claro / papel · Escuro / cinematográfico · Bloco de cor ousado · Minimalista / muito espaço em branco · Corresponder à referência.

Adicione estas perguntas extras (elas alteram materialmente o resultado):

5. Vibração / tom — Calmo e editorial · Cinemático e dramático · Brincalhão e otimista · Corporativo e confiável.
6. Nível de movimento — Sutil (revelações suaves) · Animação rica ao rolar (parallax, seções vinculadas à rolagem) · Interativo (demo clicável que o visitante conduz). Padrão: Animação rica ao rolar.
7. Cor de destaque — Corresponder à referência · uma cor específica · deixe eu escolher.
8. Profundidade — Hero + algumas seções · História completa (conte tudo: como funciona, recursos, prova, CTA). Padrão: História completa.
9. Saída — Projeto Next.js executável (recomendado) · Arquivo HTML único autocontido.

Se o usuário já forneceu algumas respostas em sua mensagem, não as pergunte novamente.

Passo 2 — Pesquise o(s) site(s) de referência

Você deve realmente olhar para a referência, não adivinhar.

1. Tente mcp__workspace__web_fetch primeiro. Sites de marketing geralmente são renderizados no cliente, então frequentemente retorna vazio — isso é esperado.
2. Mude para as ferramentas do navegador Chrome (carregue via ToolSearch se adiado): navigate → get_page_text para cópia/estrutura, depois computer capturas de tela (role para baixo e capture 3–5 quadros) para ler a linguagem visual real. Dispense banners de cookies com a opção mais respeitosa à privacidade.
3. Obtenha um rascunho de evidências barato: cole scripts/extract-style.js no javascript_tool das ferramentas do Chrome na página de referência aberta — ele retorna fontes reais, frequências de cores, a escala tipográfica e raios. Em seguida, escreva a especificação de estilo curta (preencha o esquema em references/style-extraction.md): fundo, paleta + destaque, par de tipos, padrões de seção/layout, componentes característicos (ex.: maquetes flutuantes de produtos) e caráter de movimento. O script captura valores que o olho julga mal; suas capturas de tela capturam o layout e os "indícios" característicos. Use ambos.
4. Também leia o site do usuário da mesma forma — para o conteúdo real do produto e para anotar seu próprio esqueleto de layout/seção, fontes e rodapé. Você precisa disso para deliberadamente divergir dele (emprestar a estrutura da referência, não a do produto) e para poder reutilizar o rodapé/texto legal real do produto textualmente em vez de inventar um.
5. Conteúdo não latino: se o texto do produto incluir Devanagari, CJK, Árabe, Cirílico, etc. (ex.: uma demo de alternância de código Hindi + Inglês), anote agora — você deve carregar uma fonte que cubra esse script (veja Armadilhas do guia de construção).

Se um domínio não puder ser buscado ou estiver bloqueado, informe o usuário e continue a partir de capturas de tela / sua descrição — nunca tente contornar a restrição de busca.

Passo 3 — Planeje

Mapeie o conteúdo do produto do usuário nos padrões estruturais da referência. Faça um breve esboço de seções. Escolha fontes (as Google Fonts gratuitas mais próximas da referência), a paleta e o plano de movimento. Confirme qualquer coisa genuinamente ambígua, depois construa.

Passo 4 — Construa

Stack padrão: Next.js 14 (App Router, exportação estática) + GSAP ScrollTrigger + Lenis, CSS escrito à mão com tokens de design no topo de globals.css.

Scaffold a partir do template — não escreva o stack manualmente. Execute scripts/new-demo.sh <dest>; ele copia template/ (camada de movimento já configurada e conhecida por compilar) e instala dependências. Então:

1. Defina os tokens de design em app/globals.css :root a partir da sua especificação de estilo, e troque as fontes em app/layout.tsx pelas Google Fonts correspondentes.
2. Substitua app/page.tsx pelas seções reais — o conteúdo do usuário mapeado no esqueleto de layout da referência (não no site do próprio usuário).
3. Construa o componente característico e escolha 2–4 receitas de movimento de references/patterns.md; references/build-guide.md tem os starters para abas fixas e maquetes. Reutilize .rise, [data-speed], e <Reveal> para o resto.

Se o usuário escolheu HTML de arquivo único, comece de template-html/index.html (mesmos tokens + camada de movimento, GSAP/Lenis via CDN, sem instalação) e substitua seu conteúdo. Veja as notas do guia de construção sobre tour seção por seção para uma variante multitema.

Sempre honre prefers-reduced-motion. Mantenha a sensação da referência, mas escreva marcação e texto originais.

Passo 5 — Verifique

Execute scripts/verify.sh <dir> — ele verifica tipos, compila a exportação estática, e grepa out/index.html. Adicione seus próprios greps para o texto real do produto, o hex da cor de destaque e o nome da fonte (o script o lembra). Corrija qualquer coisa até que esteja verde.

Olhe para o resultado. Em uma sessão local você pode vê-lo renderizado: inicie npm run dev, aponte as ferramentas do Chrome para http://localhost:3000, e faça computer captura de tela (role através). Esta é a verificação de qualidade real — faça isso, não confie apenas no grep. Em uma sandbox sem exibição onde localhost não seja acessível, use scripts/shoot.mjs http://localhost:3000 (ou contra um deploy) para capturas de tela headless, e diga se mesmo isso não estiver disponível.

NUNCA execute npm run build enquanto npm run dev estiver rodando. Ambos escrevem em .next; o build sobrescreve os chunks do servidor de desenvolvimento em pleno voo e a página morre com Error: Cannot find module './31.js' (ou similar). Isso nos pegou e parece um bug de código, mas não é. Enquanto um servidor de desenvolvimento estiver ativo:

• verifique tipos com npx tsc --noEmit (não toca em .next);
• para fazer um npm run build real, pare o dev primeiro;
• se o servidor de desenvolvimento já estiver corrompido: pkill -f "next dev", rm -rf .next, depois reinicie npm run dev.

Ao editar um servidor de desenvolvimento em execução, prefira tsc --noEmit + um curl localhost:3000 | grep para seu conteúdo para confirmar que compilou, em vez de compilar.

Passo 6 — Empacote e entregue

Remova node_modules, .next, out, zip o projeto e compartilhe com mcp__cowork__present_files. Forneça os comandos de execução (npm install && npm run dev) e um resumo de um parágrafo de como o estilo da referência foi aplicado.

Passo 7 — Publique e audite (opcional)

Se o usuário quiser uma URL compartilhável ou um número de qualidade:

• Auditoria: scripts/audit.sh http://localhost:3000 (servidor de desenvolvimento rodando) imprime pontuações Lighthouse perf/acessibilidade/melhores práticas/SEO. Mire em 90+; acessibilidade e SEO são as vitórias baratas para corrigir antes de enviar.
• Deploy: compile primeiro (scripts/verify.sh <dir> produz out/), depois scripts/deploy.sh out para uma URL de pré-visualização. Deploy é voltado para o exterior — confirme com o usuário antes de scripts/deploy.sh out --prod, e não faça deploy de um out/ desatualizado. São arquivos estáticos, então Vercel/Netlify/qualquer host funciona.
• Re-execute audit.sh <deploy-url> contra a URL ao vivo para uma pontuação em rede real.

Diretrizes

• Originalidade: nunca copie o texto da referência, e não incorpore seus logotipos ou ativos de imagem com marca registrada — use texturas/formas geradas por CSS. Nomes de empresas em um contexto de comparação/palavra são aceitáveis.
• Domínios sensíveis: se o produto for de saúde, finanças, jurídico ou similar, mantenha o tom responsável e preciso, rotule dados de demonstração como ilustrativos, evite garantias e inclua avisos apropriados (ex.: uma linha de recursos de crise para sites de saúde mental). Mantenha a linguagem de carregamento/marketing não alarmante.
• Dados ilustrativos: observe que quaisquer nomes, números, citações ou disponibilidade mostrados são conteúdo de demonstração placeholder — mas mantenha-o pequeno e discreto (uma linha curta), nunca um bloco gigante de isenção de responsabilidade, e nunca enfiado no rodapé como se fosse o rodapé do site. Se o usuário quiser o rodapé real do produto, replique-o (veja abaixo) e coloque a nota ilustrativa em outro lugar ou a remova se ele substituir explicitamente — então informe que nada marca os dados de demonstração como ilustrativos.
• Rodapé: prefira o rodapé real do produto alvo — busque-o e reutilize seu slogan, links e direitos autorais textualmente — em vez de inventar um ou deixar uma nota de construção lá.
• Movimento: toda animação deve degradar-se graciosamente sob movimento reduzido.

Armadilhas aprendidas (NÃO repita)

Difíceis de runs reais. Detalhes técnicos completos em references/build-guide.md.

1. Recolorir ≠ reestilizar. Não mantenha o esqueleto de seções do próprio site do usuário e apenas troque as cores — ainda parece o original dele. Peça emprestada a estrutura e os componentes característicos da referência. (Veja a Regra de ouro.)
2. display:flex em um item de lista de texto / parágrafo que contém marcação inline (<b>, <span>) divide cada trecho inline em sua própria coluna flex — o texto se despedaça em colunas quebradas. Use um ::before posicionado para marcadores; mantenha os contêineres de texto display:block. Apenas flexione o invólucro, nunca a linha da prosa em si.
3. Nunca npm run build enquanto npm run dev estiver rodando (corrompe .next). Use npx tsc --noEmit para verificar enquanto o dev estiver ativo. (Veja Passo 5.)
4. Scripts não latinos precisam de sua própria webfont. Devanagari/CJK/Árabe não renderizarão em Inter/JetBrains Mono; carregue o next/font correspondente com os subsets corretos (ex.: Noto_Sans_Devanagari, subsets:["devanagari"]) e aplique uma classe .hi{font-family:var(--f-deva)}. Não confie em fontes de fallback do SO.
5. Reutilize o rodapé real do produto, não invente um nem despeje uma nota de construção lá (veja diretriz Rodapé).

Barra de qualidade

Mire em algo que poderia passar por uma página de lançamento real: escala tipográfica confiante, paleta contida, um elemento visual característico da referência, e movimento que revela o conteúdo à medida que você rola, em vez de decorá-lo. Não reutilize o mesmo layout para diferentes referências — o ponto principal é que cada resultado se pareça com o site do qual emprestou.