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 moda ou lifestyle em estilo lookbook, com várias páginas e transições de imagem entre elas, para
[nome da marca] no site
[nome do servidor] do meu servidor de hospedagem Opus Growth. Marca:
[o que produz, onde, para quem]. Nome da estação ou coleção:
[nome]. Produtos: [para cada um, nome, categoria, cor, material, preço e link da foto]. Tabela de medidas:
[medidas, ou "nenhuma"]. Como as pessoas compram: [endereço da oficina ou loja, número de WhatsApp, link da loja, se houver]. Envio e trocas:
[se houver]. Contato:
[e-mail],
[telefone],
[endereço]. Domínio:
[domínio]. Fotos do lookbook:
[links].
Páginas: home do lookbook (/), coleção (/koleksiyon/), uma página separada por produto (/urun/
[nome-do-produto]/), ateliê ou sobre (/atolye/), contato (/iletisim/) e 404.html. Seções da home: hero (h1, breve apresentação da marca, dois botões e uma foto principal vertical e alta), um lookbook de três fotos logo abaixo, em que cada foto leva a um produto, a história do material ou da confecção e FAQ. Página da coleção: filtros por categoria e a grade de produtos. Página do produto: imagem grande, nome, preço, um primeiro parágrafo dizendo o que é o produto, uma lista com material, cor, tamanhos e cuidados, uma caixa "Como compro?", a tabela de medidas e dois produtos da mesma coleção. Sem carrinho e sem checkout; a compra acontece pelo WhatsApp, na loja ou no ateliê, e toda página de produto diz isso de forma clara.
Estilo: moda editorial, como um lookbook impresso. Fundo com tom de tecido, fotos em largura total com cantos retos, linhas finas de 1 pixel, rótulos pequenos em maiúsculas com espaçamento entre letras e bastante espaço em branco. Tipografia: uma serifa de moda de alto contraste da Fontshare (por exemplo Melodrama 400 e 600) com um corpo de texto em grotesca calma (por exemplo Archivo 400 e 500). Uma única cor de destaque (por exemplo argila) apenas para anéis de foco e hover. Distribua o trio do lookbook em 5, 4 e 3 colunas de uma grade de 12 colunas, com deslocamento vertical escalonado. Há dois elementos de assinatura: a transição de imagem entre páginas e a visualização rápida com Flip na grade da coleção. Lenis, Swiper, ScrollTrigger e SplitText não são carregados.
Regras da transição de página e do Flip (siga exatamente):
1. View Transitions entre documentos: escreva `@view-transition { navigation: auto; }` em `assets/app.css`. A imagem do card da coleção e a imagem principal da página do produto levam o MESMO view-transition-name; defina-o com uma classe de propriedade arbitrária do Tailwind (`
[view-transition-name:u-product-name]`), não com style="". Cada nome pode aparecer apenas uma vez por página, porque o navegador cancela a transição quando dois elementos compartilham um nome; os cards de "mesma coleção" em uma página de produto podem levar os nomes dos seus próprios produtos. Dê ao menu superior `view-transition-name: site-header` para que ele fique parado durante a transição. Duração do grupo de 0,5 segundo, cross-fade da raiz de 0,3 segundo. Dentro de `@media (prefers-reduced-motion: reduce)` escreva `@view-transition { navigation: none; }`. Navegadores sem suporte simplesmente navegam normalmente; não escreva fallback em JavaScript.
2. Carregue o GSAP e o Flip somente na página da coleção; nenhuma outra página tem script. Baixe o núcleo do GSAP 3.13 e o plugin Flip do jsdelivr para `assets/vendor/` com site_fetch e fixe a versão. Um script de uma linha no `<head>` adiciona a classe `js` ao `<html>`, e a classe `anim` a menos que prefers-reduced-motion seja "reduce". Um pequeno loader no fim da página espera o evento load, duas chamadas de requestAnimationFrame e requestIdleCallback, não baixa nada se `anim` estiver ausente e, caso contrário, adiciona gsap.min.js, Flip.min.js e um arquivo minúsculo contendo `gsap.registerPlugin(Flip)`, nessa ordem, com async=false.
3. Separe a interação do Flip: `assets/koleksiyon.js` (defer) executa o filtro e a visualização rápida TAMBÉM sem Flip. A cada mudança, se Flip e `anim` estiverem presentes, chame primeiro `Flip.getState(cards)`, altere o DOM e depois chame `Flip.from(state, {duration: 0.6, ease: "power3.inOut", nested: true})`; caso contrário, aplique a mudança instantaneamente. Assim, quem não quer movimento ainda consegue usar o filtro e a visualização rápida.
4. Filtro: os botões "Todos" e de categoria ficam em um contêiner com `role="group"` e um aria-label, cada um com `aria-pressed`. Os cards que não correspondem recebem `hidden`; no Flip use `absolute: true`, onEnter para os cards que entram (opacity e scale de 0,92 a 1) e onLeave para os que saem. Um elemento com `aria-live="polite"` anuncia o resultado, como "3 produtos exibidos".
5. Visualização rápida (a transformação da imagem da grade para o detalhe): todo card tem um botão "Ver rápido" com `aria-expanded` e `aria-controls` e um painel de detalhes com `hidden` (descrição, dica de estilo, link para a página do produto). Quando aberto, o card ocupa toda a largura com `grid-column: 1 / -1` e, no desktop, se divide em duas colunas, imagem à esquerda e detalhes à direita; o Flip anima a imagem crescendo do tile pequeno para a visualização grande. Atualize o `sizes` da imagem aberta para a visualização grande, de modo que um arquivo maior seja carregado. Apenas um card fica aberto por vez, o texto do botão passa a ser "Fechar" e o foco vai para o painel, que tem tabindex="-1".
6. Sem JavaScript, os botões de filtro e de visualização rápida ficam ocultos (`.js-only` aparece apenas sob `.js`), e todos os links de cards e páginas de produto continuam funcionando. O link principal do card sempre leva à página do produto; a visualização rápida é um botão separado.
Configuração e armadilhas conhecidas (cada uma custou pontos ou reprovou em uma verificação na medição da demo, não pule nenhuma):
1. Se já houver um site no ar no servidor, avise-me primeiro, porque a configuração sobrescreve o index.html e a pasta assets. Mostre a prévia de scaffold_site com confirm=false primeiro e só depois chame com 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-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, 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 de HTML. Adicione também `assets/koleksiyon.js` à lista de content, porque ele escreve classes como `is-open`.
3. Hospede as fontes localmente. 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 para `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, corpo 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 correspondentes à 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 favicon, o navegador registra um 404 para /favicon.ico e Boas Práticas 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. Baixe as imagens dos produtos com site_fetch em proporção retrato 4:5 com resize="400x", "640x" e "960x"; mantenha todas as fotos de produto na mesma proporção para que a grade fique uniforme e a transição do Flip não dê saltos. A imagem principal de uma página de produto é o elemento LCP dessa página e recebe fetchpriority="high".
9. Verifique os dígitos da fonte de exibição: na demo, o zero da Melodrama era cortado por uma barra e "2026" no h1 parecia "2Ø26" à distância. Mantenha números fora dos títulos na fonte de exibição, ou componha os dígitos na fonte do corpo.
SEO, AEO e GEO:
1. Use URLs em estilo de diretório com barra final (/koleksiyon/, /urun/
[nome-do-produto]/, /atolye/, /iletisim/ ou os equivalentes no seu idioma). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Se houver ateliê ou loja física, defina em site.config.js o businessType mais específico (por exemplo ClothingStore) e o endereço; adicione horário de funcionamento apenas se eu informar. Schemas por página: home WebPage e FAQPage; coleção CollectionPage e um ItemList com a url de cada produto; toda página de produto ItemPage e Product (name, description, image, sku, color, material, category, brand e uma Offer com price, priceCurrency TRY, availability, itemCondition, url e seller @id); ateliê AboutPage; contato ContactPage; BreadcrumbList nas páginas internas (Lookbook, Coleção, produto). Mesmo sem checkout, a Offer leva o preço correto e o status de estoque; se eu informar condições de envio e de troca, adicione shippingDetails e hasMerchantReturnPolicy à Offer. Não invente avaliações nem notas (aggregateRating). 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 seu próprio bloco, 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 demo, as páginas do ateliê e de contato saíram com 113 e 95 palavras na primeira tentativa e foram completadas com informações reais, como "o que fazemos no ateliê" e "o que incluir ao escrever para nós". Nas páginas de produto, escreva as frases compartilhadas (cuidados, tecido) como itens de lista curtos e escreva a descrição separadamente para cada produto; o seo-check alerta sobre conteúdo duplicado quando as páginas compartilham mais de 50 por cento das frases.
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 responsável pela publicação 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 indique 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úmeros de clientes, certificados, horários de funcionamento, coordenadas, preços ou números de produto sem me perguntar. Deixe totalmente fora do schema qualquer campo que você não conheça.
Verificações (em ordem; não diga "pronto" até todas passarem):
1. Com site_run_command, execute em ordem `node chrome-stamp.mjs`, a compilação 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 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 delas.
3. Execute core_web_vitals para cada página com strategy="mobile" e strategy="desktop". Critério de aceitação: no mobile, Performance de pelo menos 95 e Acessibilidade, Boas Práticas e SEO em 100; no desktop, as quatro de pelo menos 95, com meta de 100. Para uma página que não atingir, encontre o arquivo lento com resources=true, corrija e meça novamente. Depois execute seo_audit na home 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 larguras de 360, 390, 768 e 1440 pixels, 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: no Chrome ou no Edge, clicar em um produto na coleção faz a imagem crescer do card até o seu lugar na página do produto enquanto o menu fica parado; no Firefox a página simplesmente abre; ao pressionar um filtro, os cards deslizam para uma nova ordem; "Ver rápido" abre o card dentro da grade e a imagem cresce; com redução de movimento ativada, as mesmas ações acontecem instantaneamente; com o JavaScript desativado, todos os produtos ficam visíveis. Em uma verificação local, também vi `document.documentElement.matches(':active-view-transition')` retornar true na página do produto durante a transição; você pode executar a mesma verificação.
Depois de publicar: mostre 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 home 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 das verificações e a lista das correções aplicadas.
