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.
No meu servidor de hospedagem Opus Growth
[nome do servidor], crie um site de portfólio estático e rápido para
[nome do estúdio], com a sensação dos sites de agência interativos feitos no Webflow, sem usar Webflow. Estúdio:
[o que faz, para quem], cidade e bairro:
[cidade, bairro]. Serviços:
[3 serviços]. Projetos: [para cada um: nome, tipo de trabalho, ano, uma frase sobre o problema, uma sobre a solução, link da imagem]. Contato:
[e-mail],
[telefone],
[número do WhatsApp],
[endereço]. Domínio:
[domínio].
Páginas: home (hero, índice de trabalhos selecionados, o que fazemos, processo, FAQ, chamada para ação final), trabalhos (/isler/: galeria mais problema, trabalho realizado e nota de entrega de cada projeto), estúdio (/hakkimizda/), contato (/iletisim/, sem formulário; e-mail, WhatsApp com mensagem pré-preenchida e telefone), privacidade (/gizlilik/) e 404.html. Sem dados aprovados pelo cliente, não escreva porcentagens nem números de crescimento para os resultados dos projetos; descreva o resultado em palavras.
Estilo: brutalista moderno. Cantos retos, linhas de grade visíveis de 1 px, uma fonte display grotesca em caixa alta e em negrito (por exemplo Clash Grotesk) e uma fonte de texto calma (por exemplo Supreme), um único destaque fluorescente usado apenas como fundo com texto preto sobre ele. Os estados de hover mudam cor e fundo; o anel de foco é grosso e visível em qualquer fundo.
Regras de interação (a sensação do Webflow IX2, sem biblioteca):
1. NÃO carregue GSAP nem Lenis. Escreva as interações em um único arquivo JS puro e pequeno (IntersectionObserver e requestAnimationFrame) e carregue-o com defer apenas nas páginas home e trabalhos. Nenhum script nas outras páginas.
2. Elemento marcante, o índice "Trabalhos selecionados": cada linha é um link real para o projeto e traz o caminho da imagem de prévia em um atributo data-img. Por padrão (sem JS ou em dispositivo de toque), cada linha mostra uma imagem pequena no fluxo. Somente em dispositivos que correspondem a `(hover: hover) and (pointer: fine)` e que não pedem movimento reduzido, o JS adiciona uma classe cursor-fx ao `<html>`, oculta as imagens inline e mostra uma única caixa de prévia que segue o ponteiro. Mova a caixa com variáveis CSS e transform: translate3d em vez de left e top, e interrompa o loop de requestAnimationFrame quando o ponteiro parar. No foco do teclado, a mesma prévia abre fixa ao lado da linha e fecha quando o foco sai.
3. Adicione o anel de cursor personalizado somente sob a mesma condição; nunca oculte o cursor nativo, marque o anel com aria-hidden e faça-o crescer sobre os links.
4. Transições de seção: os títulos das seções se abrem da esquerda para a direita com clip-path ao rolar. O JS aplica o estado inicial oculto apenas aos títulos que estão abaixo da tela quando a página abre; o conteúdo da primeira tela nunca é ocultado. Dê ao atributo o nome data-reveal; o design-check reconhece movimento por esse nome e, caso contrário, avisa "no motion".
5. Galeria Swiper somente na página de trabalhos. Sem JS, o HTML da galeria é uma faixa horizontal de CSS scroll-snap, e os botões anterior e próximo ficam ocultos até o Swiper iniciar. Baixe o bundle js e css do Swiper 14 em `assets/vendor/` com site_fetch. Carregue-o quando o ponteiro entrar na galeria, ao toque, ao foco ou na primeira rolagem da página. Na demo, carregá-lo quando a galeria se aproximava da viewport levou o LCP mobile a 3 s por causa do bundle de 150 KB (Performance 94); carregar na primeira interação deu 99. Ative os módulos Navigation, Keyboard e A11y com mensagens em turco, e defina a velocidade de transição como 0 quando houver movimento reduzido.
6. Monte os slides com div em vez de ul e li. O Swiper dá role="group" aos slides; em li, esse role causou erros de aria-allowed-role e de lista e derrubou a Acessibilidade para 96.
Configuração e armadilhas conhecidas (cada uma baixou uma nota nas medições da demo, não pule nenhuma):
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 a prévia de scaffold_site com confirm=false e chame com confirm=true depois da minha aprovação. Em seguida, leia site_design_guide e site_seo_guide. Antes de escrever código, coloque 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 em vez de carregá-lo pelo CDN. Instale com site_run_command e background=true: `npm i -D tailwindcss@3`, e acompanhe com site_command_status. Os caminhos de content em `tailwind.config.js` devem cobrir todos os arquivos HTML, os templates e qualquer arquivo JS que escreva nomes de 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 o script cdn.tailwindcss.com e o tailwind.config inline de todas as páginas e vincule apenas `/assets/site.css`. Recompile após cada alteração no HTML.
3. Hospede as fontes você mesmo. Leia o CSS das famílias do Fontshare que escolheu, baixe o arquivo woff2 de cada peso em `assets/fonts/` com site_fetch e escreva as regras @font-face com `font-display: swap` em `assets/app.css`; o design-check procura uma fonte personalizada ali. Confira o nome da font-family no CSS que você baixou, pois o Fontshare pode retornar outra família quando um peso não existe. Faça preload da fonte do título da primeira tela e da fonte do texto em todas as páginas com `<link rel="preload" as="font" type="font/woff2" crossorigin>`; na demo, isso eliminou o deslocamento de layout causado pela troca de fonte (CLS de 0,024 para 0). A maioria das fontes do Fontshare não tem o glifo ₺, então escreva "TL" nos preços.
4. Faça o menu e o rodapé em HTML estático. Não carregue chrome.js nem site.config.js nas páginas. Escreva um pequeno `chrome-stamp.mjs` que leia a lista de navegação em site.config.js e carimbe `_src/header.tpl` e `_src/footer.tpl` entre os marcadores `<!-- nav:start --><!-- nav:end -->` e `<!-- footer:start --><!-- footer:end -->` de cada página, adicionando aria-current="page" ao link atual. Não dê aos templates a extensão .html e use marcadores como `
[[NAV]]` em vez de `{{...}}`, senão o design-check e o seo-check os leem como páginas inacabadas. Construa o menu mobile sem JS usando `<details>`. Mantenha o nome da empresa, o endereço e o telefone no rodapé como texto simples.
5. Converta as imagens ao baixá-las com site_fetch: grave a mesma foto em arquivos separados com resize="480x", "800x" e "1200x", image_format="webp", quality=65. Dê a cada `<img>` srcset, sizes, width e height. A imagem principal da primeira tela recebe fetchpriority="high" e nunca é lazy; as demais recebem loading="lazy" decoding="async". Se a imagem principal preencher a tela do celular, sirva um recorte mais largo e menor no mobile com `<picture>` (na demo, o hero mobile passou de 89 KB para 43 KB).
6. Crie um favicon PNG de 48 px a partir do logo com site_fetch e adicione `<link rel="icon">` em todas as páginas. Sem ele, o navegador registra um 404 e as Práticas recomendadas caem para 96.
7. Regras do validador HTML: comece todo documento com `<!DOCTYPE html>` em maiúsculas (os arquivos iniciais do kit usam minúsculas), use ` ` nos espaços do texto visível dos links tel:, nunca use o atributo style="" e dê type="button" a todo botão.
SEO, AEO e GEO:
1. Use URLs de diretório com barra final (/isler/, /hakkimizda/, /iletisim/, /gizlilik/). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Escreva o schema específico de cada página (home WebPage e FAQPage; trabalhos CollectionPage com um CreativeWork por projeto em hasPart; estúdio AboutPage; contato ContactPage; BreadcrumbList nas páginas internas. Para um estúdio com escritório físico, use businessType ProfessionalService) em blocos `<script type="application/ld+json">` separados e vincule-o ao grafo base com @id. Não esconda o BreadcrumbList dentro de um @graph; dê a ele seu próprio bloco, pois é a única forma de o seo-check enxergá-lo.
2. Títulos de 48 a 60 caracteres (o seo-check sinaliza como erro qualquer um acima de 65), descrições de 145 a 158 caracteres, um h1 por página. Toda página precisa de pelo menos 150 palavras de conteúdo principal; as páginas de contato e privacidade costumam ficar abaixo disso.
3. O primeiro parágrafo de cada página responde diretamente à pergunta da página. Escreva um FAQ específico 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>`.
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 traz datas lastmod reais. O llms.txt contém um resumo preciso do site em duas frases e a lista das páginas principais.
5. Não invente nada: nenhuma avaliação, nota, prêmio, número de clientes, certificado, horário de funcionamento, coordenada ou preço, a menos que eu informe. Deixe os campos desconhecidos fora do schema.
Portões de verificação (em ordem; não diga que terminou até todos passarem):
1. Com site_run_command, execute `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 (reduced-motion); portanto, se faltar conteúdo nessa imagem, o estado sem movimento está quebrado. Nas capturas de página inteira, imagens lazy mais abaixo podem aparecer vazias; isso não é erro, mas confira os caminhos delas.
3. Execute core_web_vitals para todas as páginas com strategy="mobile" e strategy="desktop". Critério: no mobile, Performance de pelo menos 95 e Acessibilidade, Práticas recomendadas e SEO 100; no desktop, as quatro de pelo menos 95. Em uma página que falhar, use resources=true para achar o arquivo que a atrasa, corrija e meça de novo. Depois, execute seo_audit na home com strategy="mobile" e runs=2. A lista de requisições de rede não pode conter nenhum host além do seu próprio domínio.
4. Sem rolagem horizontal nas larguras de 360, 390, 768 e 1440 px, alvos de toque de pelo menos 44 px, sem erros no console.
Verificação das interações: o site_preview não consegue mostrar hover nem efeitos de cursor. Diga-me como conferir em um navegador desktop que a prévia segue o ponteiro sobre as linhas do índice, que ela abre ao lado da linha ao navegar com Tab, que o celular mostra as imagens inline e que a galeria desliza com o dedo.
Depois de publicar: mostre a prévia da regra `/assets/* Cache-Control: public, max-age=31536000, immutable` com site_headers e aplique-a depois da minha aprovação; a partir daí, renomeie os arquivos CSS ou JS quando mudarem (site-v2.css e assim por diante). Envie o sitemap.xml com gsc_submit_sitemap e verifique a home com gsc_url_inspect. Termine com uma tabela de notas por página (página, quatro notas mobile, quatro notas desktop, LCP, CLS), os resultados dos portões e a lista das correções que você aplicou.
