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 neo-brutalista, com várias páginas e sem JavaScript, para
[nome do produto ou startup] no site
[nome do servidor] no meu servidor de hospedagem da Opus Growth. Produto:
[o que faz, para quem]. Como funciona:
[três passos]. Principais recursos:
[4 a 6 recursos]. Preços: [nomes e preços dos planos, ou "sem página de preços"]. Links de download ou cadastro:
[App Store, Google Play ou URL de cadastro]. Contato:
[e-mail],
[telefone],
[número de WhatsApp],
[endereço]. Domínio:
[domínio]. Cores da marca:
[cores, ou "você escolhe"]. Fotos ou capturas de tela reais:
[links, ou "nenhuma"].
Páginas: início (/), como funciona (/nasil-calisir/ ou /how-it-works/), preços (/fiyat/), sobre (/hakkimizda/), 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, selos em formato de adesivo e o elemento de assinatura), faixa de categorias, três passos, para quem é (com uma foto), recursos, FAQ e uma chamada final para ação. Sem formulário na página de contato; em vez disso, e-mail, telefone, um link de WhatsApp com mensagem pré-preenchida e os links de download, porque o servidor só serve arquivos estáticos.
Estilo: neo-brutalista, mas com cara de produto, não de brinquedo. Bordas pretas grossas (3 pixels), sombras duras sem desfoque (somente pretas, deslocamento de 4, 6 e 10 pixels), blocos de cor chapada e vibrante (no máximo cinco cores chapadas, como tomate, limão, menta, azul-céu e lilás sobre um fundo creme), selos levemente inclinados que parecem adesivos. Tipografia: uma fonte de exibição robusta e com personalidade da Fontshare (por exemplo, Chubbo) com uma grotesca calma para o texto (por exemplo, Supreme 400 e 700). Sem gradientes, sem efeito de vidro, sem sombras suaves e sem degradês de roxo para azul. O site não tem nenhum JavaScript; GSAP, Lenis e Swiper não são carregados. Elemento de assinatura: à direita do hero, um card de borda grossa que desenha a tela principal do produto em HTML real, em vez de uma imagem (por exemplo, as despesas do mês de uma casa e o acerto de contas do fim do mês), com adesivos colados ao redor.
Regras de cor, contraste e movimento (onde esse estilo perde pontos com mais facilidade):
1. Escreva o texto em preto sobre qualquer fundo colorido e nunca use texto branco. Calcule a taxa de contraste de cada cor contra o preto e coloque em ART.md como uma tabela; escureça qualquer cor abaixo de 4,5. Na demonstração, a menor taxa foi 6,7 no laranja tomate, e a acessibilidade ficou em 100 em todas as páginas.
2. Faça o anel de foco com 3 pixels de preto e 3 pixels de deslocamento, mudando para amarelo-limão em um rodapé preto. Use outline-offset para que o anel de foco não se misture com a borda grossa.
3. Faça o deslocamento divertido de botões e cards apenas com transform e box-shadow: ao passar o mouse, translate(-2px, -2px) e uma sombra maior; ao pressionar, translate(4px, 4px) e sem sombra. Os botões têm pelo menos 48 pixels de altura, os botões pequenos pelo menos 44.
4. Coloque a inclinação dos adesivos na propriedade separada `rotate`, não em transform, e defina o ângulo com uma classe de propriedade arbitrária do Tailwind, como `
[--r:-4deg]`. Assim, os adesivos continuam inclinados mesmo quando a regra de reduced-motion zera o transform, e nenhum atributo style="" é necessário.
5. Faça a entrada "slap on" dos adesivos apenas com `scale` e `translate`, dentro de `@media (prefers-reduced-motion: no-preference)` e com um atributo data-reveal="slap" (o design-check reconhece movimento por esse atributo). Sem esconder com opacity, e o h1 nunca se move. Com prefers-reduced-motion: reduce, toda animação e transição ficam desligadas.
6. Marque os adesivos decorativos com aria-hidden="true"; selos que carregam informação (por exemplo, "grátis para até 6 pessoas") continuam como itens de lista comuns. No mobile, esconda um adesivo decorativo abaixo de 640 pixels se ele se sobrepuser a outro selo no canto do card; na demonstração, o adesivo "recibo adicionado" cobria o selo "3 pessoas" em 390 pixels.
Configuração e armadilhas conhecidas (cada uma custou pontos ou reprovou em uma verificação na medição da demonstração, 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. Mostre uma 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, grade, 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 para mim.
2. Compile o Tailwind, nã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, chrome.js e motion.js, e vincule apenas `/assets/site.css`. Recompile após cada alteração no HTML. Este site não tem arquivos JavaScript, então a lista de content não precisa de entradas de JS.
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 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 com 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 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 um 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 ` ` para os espaços no 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. Se o rodapé tiver fundo preto, faça seus links creme com hover em amarelo-limão, e mantenha cada um com pelo menos 44 pixels de altura.
SEO, AEO e GEO:
1. Use URLs em estilo de diretório com barra final (/nasil-calisir/, /fiyat/, /hakkimizda/, /iletisim/, /gizlilik/ ou seus equivalentes no seu idioma). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Para uma startup sem loja física, defina localBusiness:false em site.config.js. Schemas das páginas: início WebPage e FAQPage; como funciona WebPage e FAQPage; preços SoftwareApplication (applicationCategory, operatingSystem e uma Offer por plano) e FAQPage; sobre AboutPage; contato ContactPage; BreadcrumbList nas páginas internas. Como você não vai adicionar avaliações nem notas de usuários ao SoftwareApplication, o Google pode não mostrar um rich result de app; tudo bem, não invente uma nota. 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 essa é 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 demonstração, as páginas sobre, contato e privacidade ficaram com 113 a 148 palavras na primeira tentativa; adicione informações reais a elas, como "o que incluir em um pedido de suporte" ou "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 qualquer campo que você não conheça totalmente fora do schema.
Verificações (em ordem; não diga "pronto" até que todas 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 todas as páginas 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 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 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 consegue mostrar movimento, diga-me o que observar no meu próprio navegador: um botão sobe e vai para a esquerda ao passar o mouse e afunda na sombra ao ser pressionado; os adesivos "grudam" suavemente quando a página carrega; ao navegar com Tab, um anel de foco preto grosso aparece em todos os links; com reduzir movimento ativado no sistema operacional, nada se move, mas os adesivos continuam inclinados; com o JavaScript desligado, o menu mobile ainda abre.
Depois de publicar: mostre uma 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 notas por página (página, quatro notas no mobile, quatro notas no desktop, LCP, CLS), os resultados das verificações e a lista de correções que você aplicou.
