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 um site de produto com várias páginas, com fundo aurora, cartões de vidro fosco e temas claro e escuro, para
[nome do produto de IA] no site
[nome do servidor] no meu servidor de hospedagem do Opus Growth. Produto:
[o que faz, para quem]. Como funciona:
[três etapas]. O que produz ou faz:
[4 a 6 recursos]. Dados e segurança: [onde os dados são armazenados, por quanto tempo, se são usados para treinar modelos]. Caminho de teste ou cadastro:
[duração do teste, URL de cadastro]. Contato:
[e-mail],
[telefone],
[número do WhatsApp],
[endereço]. Domínio:
[domínio]. Cores da marca:
[cores, ou "você escolhe"]. Capturas de tela ou fotos do produto:
[links, ou "nenhum"].
Páginas: início (/), recursos (/ozellikler/), segurança (/guvenlik/), contato (/iletisim/), privacidade (/gizlilik/) e 404.html. Seções da página inicial, em ordem: hero (h1, introdução de duas frases, dois botões e o cartão do produto, que é o elemento marcante), três passos, para quem é (com uma foto), perguntas frequentes e uma chamada final para ação. Em produtos de IA, a página de segurança é metade da decisão de compra; declare com clareza retenção, acesso e treinamento de modelos. Sem formulário na página de contato, porque o servidor serve apenas arquivos estáticos.
Estilo: aurora e vidro. Uma luz suave e multicolorida deslizando devagar ao fundo (a aurora), com o conteúdo sobre cartões de vidro fosco. Nada de paleta do roxo ao azul; escolha três tons suaves que combinem com a marca, como menta, damasco e azul gelo. Tipografia: uma fonte display serifada e suave da Fontshare (por exemplo Gambetta 500) com uma fonte de texto calma (por exemplo Synonym 400 e 600). Use o efeito de vidro apenas nas superfícies dos cartões; não afogue a página em vidro. Sem canvas, WebGL, vídeo, GSAP, Lenis ou Swiper. O único JavaScript é um pequeno alternador de tema inline. Elemento marcante: um cartão de vidro no hero com um exemplo real em HTML do que o produto faz (por exemplo, uma decisão e uma tarefa extraídas da transcrição de uma reunião).
Regras de aurora, vidro e tema (onde este estilo mais facilmente prejudica o desempenho e o contraste):
1. Faça a aurora em CSS puro: uma camada `position: fixed` com aria-hidden, dois pseudoelementos (::before e ::after) e três radial-gradients grandes dentro deles. Anime apenas com transform (translate3d, rotate, scale) em um loop `alternate` de 25 a 35 segundos e adicione `will-change: transform`. Não anime o gradiente em si, background-position nem filter: blur; eles repintam a cada quadro. Coloque a animação dentro de `@media (prefers-reduced-motion: no-preference)`; com movimento reduzido a aurora para, mas continua visível.
2. Defina as cores como variáveis CSS (--bg, --fg, --mute, --line, --card, --solid, --acc, --accfg e os tons da aurora) e aponte as cores do Tailwind para elas (por exemplo colors: {bg: "var(--bg)"}). Escreva os valores escuros tanto em `:root
[data-theme="dark"]` quanto em `@media (prefers-color-scheme: dark) { :root:not(
[data-theme="light"]) }`, para que o tema do sistema valha mesmo com JavaScript desativado.
3. Alternador de tema: um script de uma linha no `<head>`, depois da folha de estilo, lê a escolha salva no localStorage, grava data-theme em `<html>` e adiciona a classe `js`; como roda antes da primeira renderização, a página nunca pisca no tema errado. Envolva o acesso ao localStorage em try. Um pequeno script no fim da página troca o tema ao clicar, salva a escolha e atualiza o botão quando o tema do sistema muda. O botão é um `<button type="button">` de verdade com `aria-pressed` verdadeiro enquanto o escuro estiver ativo, e mantém seu nome acessível ("Tema escuro") mesmo quando só o ícone aparece no celular. Oculte o botão sem JavaScript (`html:not(.js) .theme-toggle { display: none }`). Adicione também `<meta name="color-scheme" content="light dark">`.
4. Mantenha o cartão de vidro em uma única classe `.glass`: primeiro um fundo sólido (--solid), depois, dentro de `@supports (backdrop-filter: blur(1px))`, um fundo translúcido com `backdrop-filter: blur(18px) saturate(140%)` (com o prefixo -webkit- para o Safari). Em `@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)` o cartão fica sólido e a aurora é ocultada. Não use o utilitário backdrop-blur no HTML; o design-check alerta sobre "glassmorphism em todo lugar" quando vê mais de cinco em uma página.
5. Meça o contraste nos DOIS temas. O Lighthouse audita só o tema claro; se você não verificar o escuro separadamente, textos fracos no modo escuro passam despercebidos. Deixe o fundo translúcido do cartão opaco o bastante para manter o texto acima de 4,5:1 mesmo sobre a cor mais brilhante da aurora (na demo, branco a 66 por cento no claro e verde-escuro a 58 por cento no escuro). Troque a cor do texto do botão de destaque por tema (branco sobre verde-pinheiro escuro no claro, verde-escuro sobre menta clara no escuro).
6. Dê ao cartão do hero sua animação de entrada apenas com transform e um atributo data-reveal (o design-check reconhece movimento por esse atributo); nunca oculte nem faça fade no h1, porque ele é o elemento do LCP.
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. Faça antes a prévia de scaffold_site com confirm=false e só chame confirm=true depois que eu aprovar. Depois leia site_design_guide e site_seo_guide. Antes de escrever código, escreva a direção de design (tipografia, cor, grade, elemento marcante, linguagem de movimento e as bibliotecas que NÃO serão carregadas) em um ART.md curto fora de assets e mostre-o para mim.
2. Compile o Tailwind, não o carregue pela 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, inclusive subpastas, os modelos `_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, chrome.js e motion.js, e vincule apenas `/assets/site.css`. Recompile após cada alteração no HTML. Como as cores do tema são variáveis, os atalhos de opacidade do Tailwind (como bg-fg/50) não funcionam; defina uma variável separada se precisar de uma cor translúcida.
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 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 sinal ₺, 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 modelos a extensão .html e use marcadores como `
[[NAV]]` em vez de `{{...}}`. Construa o menu móvel 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 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 real do LCP, e loading="lazy" decoding="async" ao restante.
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 logotipo 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ê type="button" a todo botão, não coloque aria-label em elementos sem role, como `<ul>` ou `<div>`, e use `<section aria-label="...">` em vez de role="region".
SEO, AEO e GEO:
1. Use URLs em estilo de diretório com barra final (/ozellikler/, /guvenlik/, /iletisim/, /gizlilik/ ou seus equivalentes no seu idioma). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Para uma empresa de software sem loja física, defina localBusiness:false em site.config.js. Schemas das páginas: início WebPage e FAQPage; recursos SoftwareApplication (applicationCategory, operatingSystem, featureList) e FAQPage; segurança WebPage e FAQPage; contato ContactPage; BreadcrumbList nas páginas internas. Não liste um certificado de segurança ou documento de conformidade que você não possua; se possuir, informe o número e a data de validade. Escreva cada schema específico da página em seu próprio bloco `<script type="application/ld+json">` e ligue-o ao grafo base com @id. Não aninhe BreadcrumbList dentro de @graph; mantenha-o em seu próprio bloco, 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 contato e privacidade ficaram com 84 e 116 palavras na primeira tentativa e foram completadas com informações reais, como "o que acontece durante o teste" e "com quem os dados são compartilhados".
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 do site em duas frases e uma lista das páginas importantes.
5. Sem invenção: não escreva avaliações, notas, prêmios, número de clientes, certificados, horários de funcionamento, coordenadas, preços ou números do produto sem me perguntar. Deixe de fora do schema qualquer campo que você não conheça.
Gates (em ordem; não diga "pronto" até todos passarem):
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 todas as páginas com site_preview, view="mobile" e view="desktop". O site_preview captura a página com o movimento desativado; 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. Verifique também o tema escuro: como o site_preview não consegue mudar o tema do sistema, execute uma auditoria de contraste no modo escuro (por exemplo, a regra color-contrast do axe-core com prefers-color-scheme: dark) ou deixe o escuro como padrão temporariamente e veja uma prévia uma vez.
3. Execute core_web_vitals em todas as páginas com strategy="mobile" e strategy="desktop". Critério de 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 de loja e de 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 consegue executar movimento nem trocar temas, diga-me o que observar no meu próprio navegador: a luz ao fundo desliza bem devagar; clicar no alternador troca o tema, a escolha sobrevive à mudança de página e a página nunca pisca no outro tema durante o carregamento; se o sistema operacional estiver no modo escuro, o site abre escuro; com movimento reduzido ativado, a aurora para; com transparência reduzida ativada, os cartões ficam sólidos; com JavaScript desativado, o alternador fica oculto, mas o tema do sistema continua valendo.
Depois de publicar: faça 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ção 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 aplicadas.
