Site

Crie um site de restaurante ou café rico em fotos, mas rápido, com cardápio em HTML, caminho de reserva e localização

Cria um site de várias páginas, com estilo natural e acolhedor, para um restaurante ou café no seu servidor de hospedagem. Publica o cardápio em HTML com schema Menu em vez de PDF, liga a reserva ao telefone e ao WhatsApp e passa no teste de velocidade mobile mesmo com muitas fotos.

Quando usar

Seu cardápio está em um PDF ou em uma foto, as pessoas têm dificuldade para encontrar seus horários e como reservar, ou seu site cheio de fotos carrega devagar no celular.

O que você recebe

Um site no ar com páginas de início, cardápio em HTML, reservas, história e localização, com schema Menu e Restaurant, que passa nas verificações do Lighthouse, além de um relatório de medição página por página.

Ele altera algo na minha conta?

Somente com sua aprovação. O assistente mostra primeiro uma prévia de cada alteração e aguarda o seu aval.

Funciona com

SEO Intelligence, Search Console

Preencha antes de enviar

[nome do servidor][nome do negócio][restaurante / café / casa de café da manhã][culinária][cardápio e preços][informações alimentares][horários][telefone / WhatsApp / ambos][telefone][WhatsApp][endereço][estacionamento e transporte]
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 do zero um novo site para o meu restaurante no meu servidor de hospedagem [nome do servidor]. Detalhes: 1. Nome: [nome do negócio], tipo: [restaurante / café / casa de café da manhã], culinária: [culinária] 2. Cardápio com seções, descrições e preços: [cardápio e preços] 3. Informações sobre opções vegetarianas, veganas, sem glúten e alérgenos: [informações alimentares] 4. Horário de funcionamento (separado para café da manhã e jantar, se forem diferentes): [horários] 5. Como as reservas são feitas: [telefone / WhatsApp / ambos], telefone: [telefone], WhatsApp: [WhatsApp] 6. Endereço e orientações de acesso: [endereço], [estacionamento e transporte] 7. De onde vêm os ingredientes e a nossa história: [produtores e história] 8. Domínio: [domínio], fotos reais: [onde estão as fotos, ou "use banco de imagens"] Primeiro confirme o servidor com list_servers e execute scaffold_site com style="restaurant", primeiro com confirm=false e depois com confirm=true após a minha aprovação. Leia site_design_guide e site_seo_guide. Escreva uma decisão de design natural e orgânica em _kaynak/ART.md e mostre para mim: uma fonte de exibição serifada e acolhedora da Fontshare (por exemplo Gambarino) com uma fonte de texto suave (por exemplo Supreme), fundo cor de areia, texto em tons terrosos, dois tons quentes em verde-oliva e terracota, e o mesmo canto arredondado em todos os cartões. O elemento de assinatura é uma caixa de "quadro do dia" na página do cardápio. Se a fonte escolhida não tiver o glifo ₺, escreva os preços com "TL". Páginas e schema: 1. Início: a primeira tela diz o que você serve e onde, com os botões "Reservar uma mesa" e "Ver o cardápio" e uma foto grande. Depois, três pratos do cardápio, de onde vêm os ingredientes, um resumo de horários e localização e 4 perguntas frequentes. Schema: WebPage, FAQPage, e adicione servesCuisine, acceptsReservations (a URL da página de reservas) e hasMenu ao nó #business. 2. Cardápio: em HTML, não em PDF. Cada seção tem um título e um link âncora, cada prato tem nome, descrição, preço e etiquetas de dieta, e o topo da página mostra a data da última atualização e um aviso sobre alérgenos. Use preços apenas da lista que forneci; nunca invente um preço que esteja faltando. Schema: Menu com MenuSection em hasMenuSection, MenuItem em hasMenuItem, Offer em offers (price, priceCurrency TRY) e suitableForDiet quando se aplicar. 3. Reservas: como as reservas funcionam, telefone e WhatsApp, um formulário de WhatsApp com mensagem pré-preenchida (data, horário, número de pessoas, jardim ou salão) e 3 perguntas frequentes (atraso, grupos grandes, cancelamento). Schema: WebPage, FAQPage. 4. Nossa história e produtores: quem está à frente do lugar, de quem vêm os ingredientes e uma tabela sazonal mostrando qual ingrediente está no cardápio em quais meses. Schema: AboutPage. 5. Localização e horários: endereço, tabela de horários, um link "Como chegar", como chegar de carro, do centro da cidade e de transporte público, e uma observação sobre acessibilidade. Schema: ContactPage. 6. Uma página 404. Para continuar rápido apesar das fotos: uma imagem grande na primeira tela e todas as outras com carregamento lazy; WebP com qualidade de 60 a 65 e no máximo oito imagens por página; não carregue uma biblioteca de slider para a galeria. Sem invenções: não escreva avaliações, notas, prêmios, certificados, números de clientes nem afirmações como "o melhor" que não sejam reais. Não adicione ao schema nem ao texto horários de funcionamento, coordenadas, preços ou e-mail que eu não tenha fornecido; deixe o campo de fora e liste-o como ausente no relatório. Não use travessões longos nem slogans genéricos, e faça o primeiro parágrafo de cada página responder diretamente à pergunta daquela página. Trabalho de SEO compartilhado: cada página recebe um title único de 48 a 60 caracteres, uma description de 145 a 158 caracteres, um único H1 e um canonical terminando em barra. Adicione o nó WebPage próprio de cada página e um BreadcrumbList, ligados ao grafo base por @id. No robots.txt escreva Allow: / para Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended e CCBot, explique a decisão em um comentário e indique o que mudar se eu quiser bloquear os rastreadores de treinamento. O sitemap.xml traz datas lastmod reais. O llms.txt descreve o negócio com precisão em duas frases e lista o NAP e as páginas importantes com links. Configuração técnica (o caminho padrão do kit não é usado neste site, pelos motivos abaixo): 1. Compile o Tailwind e elimine o CDN. O kit carrega o Tailwind pelo Play CDN, que compila no navegador, mostra um aviso no console e reduz o desempenho no mobile. Escreva _kaynak/package.json com site_write_file, instale com site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) e aguarde com site_command_status. Em _kaynak/tailwind.config.js defina content como "./*.html", "./**/*.html", "!./_kaynak/**" e "./_kaynak/chrome.mjs". Mova as regras @font-face, as linhas @tailwind e o anel de foco, o skip link e a proteção contra overflow do app.css do kit para _kaynak/site.css. Gere a saída em assets/app.css, porque o design-check.mjs procura as fontes nesse arquivo, e adicione ?v=<hash do conteúdo> ao link em todas as páginas para que o cache de borda nunca sirva o arquivo antigo. 2. Hospede as fontes você mesmo. Leia a URL de CSS das famílias da Fontshare que você escolheu (api.fontshare.com/v2/css?f[]=...) com site_read_url, baixe os arquivos woff2 com site_fetch para assets/fonts/ e declare-os com @font-face e font-display: swap. Faça preload de cada peso usado acima da dobra com <link rel="preload" as="font" type="font/woff2" crossorigin>, no máximo três arquivos. Se pular isso, a troca de fontes desloca o layout; na demonstração, o CLS no desktop foi 0,078 por esse motivo e caiu para 0 com o preload. 3. Transforme o menu e o rodapé em HTML estático. Os componentes <site-nav> e <site-footer> do kit funcionam com JavaScript, e a maioria dos rastreadores de IA nunca vê o menu, o endereço nem o telefone. Remova os scripts chrome.js e motion.js de todas as páginas. Em _kaynak/chrome.mjs escreva duas funções que montem o HTML do cabeçalho e do rodapé a partir de assets/site.config.js; construa o menu mobile sem JavaScript usando <details> e <summary>, e marque a página atual com aria-current="page". Escreva build.mjs na raiz do site que, em ordem, execute node seo-stamp.mjs, reaplique tudo entre <!-- chrome:header:start --> e <!-- chrome:header:end --> (e o mesmo para o rodapé) em todas as páginas, compile o Tailwind e atualize o hash no link do CSS. Após cada alteração, execute apenas site_run_command("node build.mjs"). 4. Movimento apenas com CSS, e de forma sutil. Coloque data-reveal nos cartões de imagem e construa o efeito de revelação com uma animação CSS orientada por rolagem (animation-timeline: view()) usando apenas transform; não anime a opacidade, porque o texto que começa com opacidade zero desaparece em navegadores sem JavaScript e falha na verificação de contraste das auditorias de acessibilidade. Envolva a regra em @media (prefers-reduced-motion: no-preference) e @supports (animation-timeline: view()). Não carregue GSAP, Lenis nem Swiper. 5. Reduza as imagens. Baixe cada foto com site_fetch em arquivos separados usando resize="480x", "800x", "1200x", "1600x", image_format="webp" e qualidade entre 60 e 68. Dê a cada <img> srcset, sizes, e width e height compatíveis com a proporção real; se você recortar, adicione uma classe de proporção como aspect-[4/3] com object-cover, caso contrário o layout se desloca quando a imagem carrega. A imagem da primeira tela recebe fetchpriority="high" e não é lazy; todas as outras recebem loading="lazy". Baixe a imagem de compartilhamento como JPG 1200x630 com site_fetch. 6. Pequenos detalhes que custam pontos: adicione um favicon SVG com <link rel="icon"> (caso contrário o navegador solicita /favicon.ico, o 404 aparece como erro no console e a pontuação de Boas Práticas cai). Escreva DOCTYPE em maiúsculas, não use atributos style e não deixe espaços em branco no final das linhas. Use &nbsp; em vez de espaços no texto visível dos links de telefone (a regra tel-non-breaking do html-validate). Os links no menu, no rodapé, no breadcrumb e nos títulos devem ter pelo menos 44 pixels de altura e largura. Não incorpore um iframe do Google Maps; o site não deve fazer requisições externas, então mostre o endereço e um link "Como chegar". 7. Nenhuma requisição pode sair do site: fontes, scripts, estilos e imagens ficam todos no seu próprio servidor. Não há um processador de formulários, então o formulário de contato é um formulário method="get" apontando para https://wa.me/[número do WhatsApp] com um textarea pré-preenchido chamado "text"; não é preciso JavaScript. Verificações (nesta ordem; só considere concluído quando todas passarem): 1. Execute node build.mjs com site_run_command e depois node seo-check.mjs: 0 erros, 0 avisos. Um aviso de conteúdo duplicado significa que duas páginas não são diferentes o suficiente; reescreva-as. 2. node design-check.mjs: 0 erros. Se você escolheu um estilo sem movimento, relate o aviso de "sem movimento" como uma decisão deliberada, com o motivo. 3. _kaynak/node_modules/.bin/html-validate em todos os arquivos HTML: 0 erros. Coloque uma linha _kaynak/ em um arquivo .htmlvalidateignore na raiz do site para que as dependências não sejam analisadas. 4. Veja todas as páginas com site_preview em view="mobile", view="desktop" e também em larguras de 360 e 768. Corrija rolagem horizontal, títulos que transbordam, botões apertados ou texto ilegível e veja novamente. 5. Meça todas as páginas com core_web_vitals em strategy="mobile" e strategy="desktop", e obtenha as pontuações de acessibilidade, boas práticas e SEO com seo_audit. A meta no mobile é 100 em acessibilidade, boas práticas e SEO e pelo menos 95 em desempenho; no desktop, pelo menos 95 nas quatro. Em uma página que não atingir a meta, execute core_web_vitals com resources=true, encontre o elemento LCP e qualquer imagem grande demais, corrija e repita seo_audit com runs=2, porque uma única execução de laboratório pode oscilar. 6. As requisições de rede não devem conter nenhum endereço fora do domínio do próprio site. Após publicar: envie o sitemap.xml com gsc_submit_sitemap e verifique a página inicial e as três páginas mais importantes com gsc_inspect_urls. Nenhuma ferramenta consegue clicar em "Solicitar indexação"; liste o que preciso solicitar manualmente no Search Console. Termine com este relatório: a lista de páginas com as pontuações de mobile e desktop por página em uma tabela (desempenho, acessibilidade, boas práticas, SEO, LCP, CLS), o resultado de cada verificação, as correções que você fez e as informações que ainda precisa de mim. Se alguma meta não foi atingida, diga isso claramente em vez de considerar concluído.

Exemplo de resultado

Um exemplo do resultado que este prompt gera. A estrutura vem da saída real das ferramentas; os números e nomes são fictícios.

Exemplo de resultado (um site de demonstração criado para um negócio fictício, sem dados reais de clientes; as notas são medições locais do Lighthouse 12 feitas neste demo)

Estilo: Natural/orgânico, fotografia acolhedora, revelação com transform apenas em CSS, sem JavaScript. Páginas: 5.

PáginaMobile P/A/BP/SEOLCP no mobileDesktop P/A/BP/SEO
/98/100/100/1002.5 s100/100/100/100
/hikayemiz/100/100/100/1001.8 s100/100/100/100
/konum-ve-saatler/100/100/100/1001.4 s100/100/100/100
/menu/100/100/100/1001.4 s100/100/100/100
/rezervasyon/100/100/100/1001.4 s100/100/100/100

Verificações: seo-check com 0 erros e 0 avisos, design-check com 0 erros, html-validate com 0 erros, sem overflow em 360/390/768/1440, sem erros no console, sem requisições fora do site.

Antes e depois: não medido.

Cardápio: 5 seções e 20 pratos em HTML com o schema Menu > MenuSection > MenuItem > Offer; pratos veganos, vegetarianos e sem glúten marcados com suitableForDiet.

Correções feitas:
1. Removemos o Tailwind Play CDN e compilamos em _kaynak; o resultado se chama assets/app.css porque o design-check.mjs procura as fontes apenas nesse arquivo (com outro nome, ele acusava o erro 'no distinctive typography').
2. Pré-carregamos todos os pesos de fonte usados acima da dobra; com apenas dois pesos pré-carregados, o CLS no desktop era 0.078, e com os três foi 0.
3. Imagens cujos width/height não correspondiam à proporção real causavam CLS; adicionamos uma classe de proporção (aspect-[..]) com object-cover.
4. html-validate: DOCTYPE em maiúsculas, &nbsp; no texto do link de telefone (tel-non-breaking), espaços no final das linhas (o build.mjs agora remove os espaços do resultado do template).
5. Os links do rodapé, do breadcrumb e dos títulos tinham menos de 44 pixels; adicionamos inline-flex min-h-[44px] e uma regra CSS para parágrafos que contêm um único link.
6. As páginas sinalizadas como 'body too short' pelo seo-check receberam parágrafos com informações reais.
7. A maioria das fontes da Fontshare não tem o glifo ₺, por isso os preços usam 'TL'.
8. O link curto 'Menü' no rodapé tinha 39 pixels de largura; adicionamos min-w-[44px].

Um site de exemplo criado com este prompt

Natural/orgânico, fotografia acolhedora, revelação baseada em transform usando apenas CSS, sem JavaScript

Criado para uma marca fictícia seguindo este prompt à risca. As pontuações foram medidas com o Lighthouse em todas as páginas.

Crie um site de restaurante ou café rico em fotos, mas rápido, com cardápio em HTML, caminho de reserva e localização
Pontuações do Lighthouse (página mais fraca)
CelularComputador
Desempenho98100
Acessibilidade100100
Boas práticas100100
SEO100100

Verificações aprovadas

  • seo check: 0 hata 0 uyarı
  • design check: 0 hata, 0 uyarı
  • html validate: 0 hata
  • overflow: 360/390/768/1440 taşma yok
  • touch targets: 360/390'da 44px altı hedef yok
  • console: konsol hatası yok
  • external requests: Lighthouse ağ listesinde dış istek yok
  • tailwind before after: ölçülmedi
Capturas de tela
Crie um site de restaurante ou café rico em fotos, mas rápido, com cardápio em HTML, caminho de reserva e localização: Celular
Celular
Crie um site de restaurante ou café rico em fotos, mas rápido, com cardápio em HTML, caminho de reserva e localização: Computador
Computador

Medido em: 2026-10-11

Buscas relacionadas

Estes prompts funcionam melhor quando seu assistente de IA está conectado às suas contas com o Opus Growth.

Conecte suas contas grátis

Mais prompts

SiteAltera após sua aprovaçãoDemonstração ao vivo

Crie um site editorial de especialista com seção de guias e schema de autor

Peça ao seu assistente para criar o site de um especialista com página inicial em estilo capa de revista, guias longos e um perfil de autor. Tipografia serifada, schema Article e Person e artigos datados e com fontes resultam em uma publicação que as pessoas leem e que as respostas de IA podem citar.

Quando usarQuando você é consultor, especialista ou tem um negócio de conhecimento de uma pessoa só e quer que seu site pareça uma publicação que mostra sua expertise por meio da escrita, e não um folheto.

SEO Intelligence, Search Console
SiteAltera após sua aprovaçãoDemonstração ao vivo

Crie um site de negócio familiar tradicional com visual clássico e padrões modernos

Peça ao seu assistente para criar um site no espírito de um rótulo antigo e de uma placa de loja para um produtor de terceira geração, com moldura e textura de papel. O visual é antigo, mas a construção é nova: mobile first, sem JavaScript, fontes hospedadas por você, WebP, schema Product e HowTo.

Quando usarQuando você vende um ofício passado de geração em geração, como lokum, azeite, queijo ou utensílios de cobre, e quer um visual clássico que carregue essa história sem abrir mão de velocidade e acessibilidade.

SEO Intelligence, Search Console
SiteAltera após sua aprovaçãoDemonstração ao vivo

Crie o site de um escritório de advocacia ou contabilidade em estilo minimalista suíço, com fortes sinais de confiança

Faz seu assistente criar um site estático para o escritório, em uma grade rigorosa, com a hierarquia sustentada por uma única família tipográfica. Coloca na página os sinais de confiança que um segmento YMYL exige: perfis dos profissionais, uma nota de orientação datada e com fontes, textos que respeitam as regras de publicidade profissional e schema Person.

Quando usarQuando um escritório de advocacia, de contabilidade ou outra prática profissional semelhante precisa de um site com aparência séria e sóbria, que respeite as regras de publicidade profissional e comprove sua expertise.

SEO Intelligence, Search Console
SiteAltera após sua aprovaçãoDemonstração ao vivo

Crie um site institucional de várias páginas sem JavaScript e entregue com nota 100

Peça ao seu assistente para criar um site estático, rápido e acessível para trabalhos corporativos como arquitetura, engenharia ou consultoria. Menu e rodapé são HTML estático, fontes e CSS são hospedados por você e cada página é medida antes da entrega.

Quando usarQuando uma empresa corporativa precisa de um site com várias páginas em que velocidade e acessibilidade importam mais que decoração, sem animação e sem JavaScript.

SEO Intelligence, Search Console