Use minha conexão com o Opus Growth para isso. Se você não encontrar a ferramenta de que precisa, procure entre as ferramentas do Opus Growth (com search_tools, se estiver na sua lista); se não conseguir acessar as ferramentas de forma alguma, não adivinhe, me avise.
Crie uma página de produto direto ao consumidor e algumas páginas de apoio para
[nome da marca], minha marca de produto único, no site
[nome do servidor] no meu servidor de hospedagem Opus Growth. Produto:
[nome do produto, o que faz, para quem]. Preço:
[preço]. Cores ou variantes: [para cada uma, um nome, um código de cor e um link de foto tirada do MESMO ângulo no MESMO canvas]. Especificações: [dimensões, material, peso e números de desempenho com suas condições de teste]. Modelos para comparar:
[seus outros modelos e seus números]. Link de compra:
[URL da loja e parâmetro da variante]. Frete, devoluções e garantia:
[prazos e condições]. Contato:
[e-mail],
[telefone],
[número do WhatsApp],
[endereço]. Domínio:
[domínio].
Páginas: home do produto (/), garantia e devoluções (/garanti-ve-iade/), contato (/iletisim/), privacidade (/gizlilik/) e 404.html. Seções da home em ordem: hero (vitrine 3D à esquerda; rótulo, h1, introdução de duas frases, preço, seletor de cores, botão de compra e um resumo de frete, devoluções e garantia à direita), três seções curtas sobre como o produto funciona, uma tabela de especificações (#ozellikler), uma tabela de comparação de tamanhos ou modelos (#karsilastir), FAQ (#sss). O menu leva a essas seções na própria página, além das páginas de garantia e contato. Este site não tem carrinho nem checkout; o botão de compra leva à página da loja com a variante selecionada, e a página diz isso claramente.
Estilo: uma página de produto direto ao consumidor, limpa e moderna. Um fundo off-white quente, uma cor de marca que combine com o produto, um botão de compra preto e arredondado e tabelas limpas. Tipografia: uma grotesca de exibição compacta da Fontshare (por exemplo Familjen Grotesk 500 e 700) com uma fonte de texto legível (por exemplo Ranade 400 e 500). A foto do produto é a estrela; guarde a ousadia para a vitrine 3D. GSAP, Lenis e Swiper não são carregados; o único JavaScript é um script inline de menos de 1 KB que inclina a vitrine.
Regras da vitrine 3D, do seletor de cores e da barra de compra (siga exatamente):
1. Construa a vitrine 3D com CSS: `perspective: 1100px` no contêiner, `transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -7deg))` e `transform-style: preserve-3d` no cartão interno, e uma transição de transform de 0,3 segundo. Sem JavaScript e em telas touch, o cartão fica nesta pose levemente inclinada. Dois selos pequenos (por exemplo capacidade e um número de desempenho) flutuam na frente do cartão com `translateZ(60px)` e são aria-hidden; a mesma informação também está no texto. Coloque um destaque suave que acompanha o ponteiro sobre a imagem (um radial-gradient controlado por --gx e --gy).
2. O script de inclinação fica inline no final da página e só roda quando `matchMedia("(pointer: fine) and (prefers-reduced-motion: no-preference)")` corresponde. Em pointermove, ele mapeia a posição do ponteiro dentro do cartão para -0,5 a 0,5, define --ry em no máximo 8 e --rx em no máximo 6 graus, e limita as escritas com requestAnimationFrame; em pointerleave, remove as variáveis e volta à pose padrão. Só o transform muda, o layout nunca se desloca. Adicione um atributo data-reveal="tilt" ao contêiner da vitrine para que o design-check reconheça o movimento.
3. Construa o seletor de cores sem JavaScript: dentro de um `<fieldset>` e `<legend>`, um `<input type="radio" name="colour">` de verdade por variante, envolvido por um `<label>` de 44x44 pixels; o radio fica visualmente oculto (sr-only), a bolinha de cor recebe um anel duplo via `input:checked + .dot` e um anel de foco via `input:focus-visible + .dot`; as teclas de seta trocam a cor. Todas as imagens das variantes ficam sobrepostas na mesma caixa com `aspect-ratio`, com `position: absolute; inset: 0`, e só a `opacity` muda, então o layout nunca se desloca quando a cor muda (CLS 0 na demo). Reflita a escolha com `.product:has(#r-colour:checked)` na imagem, no nome da cor na legend e no link de compra. Se o navegador não suportar :has, a imagem, o nome e o link da variante padrão continuam visíveis.
4. A imagem da variante padrão é o elemento LCP: fetchpriority="high", sem lazy. As outras imagens de variante recebem loading="lazy" decoding="async". As fotos das variantes devem ser tiradas do mesmo ângulo, no mesmo canvas e com o mesmo recorte; caso contrário, o produto dá um salto quando a cor muda. Pergunte-me sobre isso em vez de tentar igualar fotos de ângulos diferentes por recorte.
5. Não deixe o valor de `display` de uma classe de botão, como `.btn-buy`, sobrescrever a visibilidade dos links de compra das variantes. Na demo, a regra `.vb { display: none }` foi sobrescrita por `.btn-buy { display: inline-flex }` mais abaixo, e os quatro botões de compra apareceram ao mesmo tempo; escreva a regra com um seletor mais específico, como `.product :is(.vb)`, e confira no navegador que só um botão aparece.
6. Barra de compra fixa no mobile: abaixo de 768 pixels, uma barra com `position: fixed; bottom: 0` com o nome e o preço do produto, o nome da cor selecionada e um único botão "Comprar" (de pelo menos 48 pixels). Mantenha o texto do botão curto e em uma linha (`whitespace-nowrap`); coloque o nome da cor dentro do botão como texto sr-only para leitores de tela. Dê ao body um padding inferior igual à altura da barra para que ela nunca cubra o conteúdo ou o rodapé, e confira que o último link no final da página fica acima da barra. A barra fica oculta no desktop.
7. Tabelas: a tabela de especificações tem cabeçalhos de linha `<th scope="row">`, um `<caption>` visualmente oculto e uma frase indicando as condições de teste (por exemplo temperatura ambiente, tampa fechada). Na tabela de comparação, compare apenas seus próprios modelos, sem nomes de concorrentes nem alegações sobre concorrentes; destaque o modelo à venda com uma cor de fundo, mas não dependa só da cor. Envolva a tabela em `<section aria-label="..." tabindex="0" class="overflow-x-auto">` para que nunca estoure em telas estreitas; não escreva role="region", pois o html-validate o sinaliza como prefer-native-element.
Configuração e armadilhas conhecidas (cada uma custou pontos ou reprovou em um gate na medição da demo, não pule):
1. Se já houver um site no ar no servidor, avise-me primeiro, porque a configuração sobrescreve index.html e a pasta assets. Veja a prévia de scaffold_site com confirm=false primeiro e depois chame confirm=true quando eu aprovar. Em seguida, leia site_design_guide e site_seo_guide. Antes de escrever código, escreva a direção de design (tipografia, cor, grid, elemento de assinatura, linguagem de movimento e as bibliotecas que NÃO serão carregadas) em um ART.md curto fora de assets e mostre-me.
2. Compile o Tailwind, não o carregue pelo CDN. Instale `npm i -D tailwindcss@3` com site_run_command e background=true, e acompanhe com site_command_status. Os caminhos de content em `tailwind.config.js` devem cobrir todos os arquivos HTML, incluindo subpastas, os templates `_src/*.tpl` e qualquer arquivo JS que escreva classes. `_src/tw.css` contém a linha `@import "../assets/app.css";` e as três linhas `@tailwind`; compile-o em um único arquivo com `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Remova das páginas o script cdn.tailwindcss.com, o tailwind.config inline, o chrome.js e o motion.js, e vincule apenas `/assets/site.css`. Recompile após cada alteração de HTML. Se você definir as bolinhas de cor com classes de valor arbitrário como `bg-
[#28385C]`, elas são compiladas porque aparecem no HTML.
3. Hospede as fontes você mesmo. Leia o CSS da Fontshare com uma requisição por família e peso (`https://api.fontshare.com/v2/css?f[]=family@weight`), baixe cada arquivo woff2 em `assets/fonts/` com site_fetch e escreva as regras @font-face com `font-display: swap` em `assets/app.css`; o design-check procura a fonte personalizada ali. Faça o preload de TODOS os pesos usados acima da dobra (título, texto e botões) em todas as páginas com `<link rel="preload" as="font" type="font/woff2" crossorigin>` e coloque essas linhas antes do link da folha de estilo. A maioria das fontes da Fontshare não tem o símbolo ₺, então escreva os preços com "TL".
4. Faça o menu e o rodapé em HTML estático. Escreva um pequeno `chrome-stamp.mjs` que leia a lista de navegação de site.config.js e carimbe `_src/header.tpl` e `_src/footer.tpl` entre os marcadores `<!-- nav:start --><!-- nav:end -->` e `<!-- footer:start --><!-- footer:end -->` em todas as páginas, adicionando aria-current="page" ao link ativo. Não dê aos templates a extensão .html e use marcadores como `
[[NAV]]` em vez de `{{...}}`. Construa o menu mobile com `<details>` e sem JS. Mantenha o nome da empresa, o endereço e o telefone no rodapé como texto simples, e faça os links do rodapé e do breadcrumb terem pelo menos 44 pixels de altura.
5. Converta as imagens ao baixá-las com site_fetch: grave a mesma foto em arquivos separados com resize="480x", "800x" e "1120x" (ou as larguras de que a página precisar), image_format="webp" e quality=65. Dê a cada `<img>` srcset, sizes e width e height que correspondam à proporção real. A imagem principal acima da dobra recebe fetchpriority="high" e não é lazy; dê fetchpriority apenas ao elemento LCP real, e loading="lazy" decoding="async" ao resto. Baixe as imagens das variantes em 4:5 com resize="480x", "720x" e "960x".
6. Escreva um pequeno `favicon.svg` na raiz do site e adicione `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` a todas as páginas; se houver um logo em PNG, crie um apple-touch-icon com site_fetch, resize="180x180" e image_format="png". Sem favicon, o navegador registra um 404 para /favicon.ico e Best Practices cai para 96.
7. Regras do validador de HTML: comece todo documento com `<!DOCTYPE html>` em maiúsculas, coloque os atributos entre aspas duplas, use ` ` nos espaços do texto visível dos links tel:, nunca use o atributo style="" (se precisar de uma variável CSS, use uma classe de propriedade arbitrária do Tailwind como `
[--r:-4deg]`), dê a todo botão type="button", não coloque aria-label em elementos sem role, como `<ul>` ou `<div>`, e use `<section aria-label="...">` em vez de role="region".
8. Uma auditoria de alvos de toque pode sinalizar o radio visualmente oculto como 1 pixel; o alvo de toque real é o label ao redor dele. Meça que o label tem pelo menos 44x44 pixels e registre o motivo no relatório.
SEO, AEO e GEO:
1. Use URLs em estilo de diretório com barra final (/garanti-ve-iade/, /iletisim/, /gizlilik/ ou seus equivalentes no seu idioma). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Para uma marca sem loja física, defina localBusiness:false em site.config.js. Página inicial: ItemPage (mainEntity o produto), o schema de produto e FAQPage. Schema de produto: com uma única variante, Product e Offer; com variantes de cor, um ProductGroup (productGroupID, variesBy https://schema.org/color, brand, description, material) e, dentro de hasVariant, um Product por cor (sku, color, image) com uma Offer (price, priceCurrency TRY, availability, itemCondition, a URL da loja da variante como url, seller @id, shippingDetails com OfferShippingDetails e hasMerchantReturnPolicy com MerchantReturnPolicy). Publique o mesmo MerchantReturnPolicy com seu @id em um bloco próprio na página de garantia e devoluções. Adicione GTIN, avaliações ou reviews apenas se eu tiver valores reais. Escreva cada schema específico de página em seu próprio bloco `<script type="application/ld+json">` e vincule-o ao grafo base com @id. Não aninhe BreadcrumbList dentro de @graph; mantenha-o em um bloco próprio, porque é a única forma de o seo-check enxergá-lo.
2. Títulos de 48 a 60 caracteres (o seo-check trata mais de 65 como erro), descrições de 145 a 158 caracteres, um h1 por página. O conteúdo principal de cada página tem pelo menos 150 palavras. Na demo, as páginas de garantia e devoluções, privacidade e contato ficaram com 141, 124 e 106 palavras na primeira tentativa e foram completadas com informações reais, como "etapas da devolução", "com quem os dados são compartilhados" e "o que um pedido de garantia exige".
3. O primeiro parágrafo de cada página responde diretamente à pergunta da página, e o h1 é formulado como essa pergunta. Escreva o FAQ próprio da página com `<details>` e marque-o como FAQPage. Mostre a organização que publica e uma data de "Última atualização" com `<time datetime>`.
4. No robots.txt, escreva sua decisão com o motivo para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot e CCBot, e aponte para o sitemap. O sitemap.xml tem um lastmod real. O llms.txt tem um resumo preciso de duas frases do site e uma lista das páginas importantes.
5. Sem invenção: não escreva avaliações, notas, prêmios, números de clientes, certificados, horários de funcionamento, coordenadas, preços ou números do produto sem me perguntar. Deixe totalmente fora do schema qualquer campo que você não conheça.
Gates (em ordem; não diga "pronto" até que todos passem):
1. Com site_run_command, execute em ordem `node chrome-stamp.mjs`, o build do Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 erros, 0 avisos), `node design-check.mjs` (0 erros; justifique qualquer aviso restante) e `npx html-validate "**/*.html"` (0 erros).
2. Veja cada página com site_preview, view="mobile" e view="desktop". O site_preview captura a página com o movimento desligado; se o conteúdo não estiver completo nessa captura, o estado sem movimento está quebrado. Imagens lazy mais abaixo podem aparecer em branco em uma captura de página inteira; não conte isso como erro, mas confira os caminhos.
3. Execute core_web_vitals para cada página com strategy="mobile" e strategy="desktop". Aceitação: no mobile, Performance de pelo menos 95 e Accessibility, Best Practices e SEO em 100; no desktop, as quatro de pelo menos 95, meta 100. Para uma página que não atingir, encontre o arquivo lento com resources=true, corrija e meça de novo. Depois execute seo_audit na página inicial com strategy="mobile" e runs=2. A lista de requisições de rede não deve conter nenhum endereço fora do seu próprio domínio (links da loja e do WhatsApp são links, não requisições).
4. Sem rolagem horizontal em 360, 390, 768 e 1440 pixels de largura, alvos de toque de pelo menos 44 pixels, sem erros no console.
Verificação de interação: como o site_preview não mostra movimento nem cliques, diga-me o que observar no meu próprio navegador: no desktop, ao mover o mouse sobre o produto, o cartão se inclina na direção do ponteiro com os selos flutuando na frente e volta à pose inclinada quando o mouse sai; clicar em uma bolinha de cor ou pressionar uma tecla de seta muda a imagem, o nome da cor e o link de compra sem que nada na página se desloque; com o JavaScript desligado, o seletor de cores continua funcionando; no celular, a barra inferior está sempre visível e não cobre os links do final da página; com reduzir movimento ativado, o cartão não se inclina.
Depois de publicar: veja a prévia da regra `/assets/* Cache-Control: public, max-age=31536000, immutable` com site_headers e aplique-a quando eu aprovar; a partir daí, versione o nome do arquivo sempre que o CSS ou o JS mudar (site-v2.css e assim por diante). Envie o sitemap.xml com gsc_submit_sitemap e verifique a página inicial com gsc_url_inspect. No final, entregue-me: uma tabela de pontuações por página (página, quatro pontuações mobile, quatro pontuações desktop, LCP, CLS), os resultados dos gates e a lista das correções que você aplicou.
