Criar site a partir de um site que você gosta

Se você viu um site cujo layout ou estilo lhe agrada, aponte o Briks para ele. O Briks estuda como a página é montada e cria a sua nesse espírito, com as suas próprias palavras e imagens. Esta página explica como adicionar um site e capturas de tela, o que o Briks lê e nunca leva, e o que fazer quando um site não pode ser lido.

7 min de leituraConferido com o estúdio em 8 de outubro de 2026

Adicionar sites e capturas de tela

  1. Abrir a etapa

    Onde: Show what you like

    É o terceiro passo de New project, marcado como Optional. O painel diz para que serve: "Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business."

  2. Adicionar um site

    Onde: A site to learn from

    Digite ou cole um endereço e pressione Add ou Enter. Você pode omitir o https. Cada projeto aceita um site; ao tentar um segundo, aparece 'One site per project. Remove it to add another.' O site aparece como uma etiqueta com um X para removê-lo.

  3. Adicionar capturas de tela

    Onde: Screenshots

    Pressione Add screenshots e escolha arquivos JPEG, PNG ou WebP de até 12 MB cada. O contador mostra quantos você tem, até 6 of 6.

  4. Diga o que cada captura de tela mostra

    Onde: Screenshots

    Escolha Whole page e, se souber, a tela em que a imagem foi capturada: Desktop, Tablet ou Phone (Screen size: detect descobre sozinho). Ou escolha One section e indique a parte que ela mostra, como hero, preços, depoimentos ou rodapé.

  5. Siga em frente

    Onde: Show what you like

    Clique em Next. A revisão mostra o endereço do site e conta as suas capturas de tela.

Você também pode trazer um site pela caixa em briks.dev antes de se cadastrar: abra o menu +, escolha Add a site you like, e ele aparece nesta etapa após o cadastro.

O que o Briks lê

Um site é lido em larguras de computador, tablet e celular, depois que a Briks responde a qualquer aviso de cookies e fecha pop-ups. Ela observa:

  • Layout: as seções de cima para baixo, a largura do conteúdo, as colunas e o que muda no celular.
  • Espaçamento: o ritmo entre as seções e dentro delas.
  • Type: os tamanhos e pesos de títulos e textos, e o caráter das fontes.
  • Cor: o fundo, a cor do texto e o destaque.
  • Movimento: o que aparece suavemente ou desliza ao rolar a página, o que fica fixo, as faixas que se movem sozinhas e o que links e botões fazem quando você passa o mouse.
  • O cabeçalho e o menu: uma linha simples de links, menus suspensos ou painéis grandes. Cada painel é aberto e examinado.
  • Ilustrações: se a página usa desenhos em vez de fotografias, suas imagens são desenhadas em um traço parecido.

Uma captura de tela diz menos ao Briks: o layout e o alinhamento, o espaçamento, o tamanho do título, as cores e se é claro ou escuro. Uma captura marcada como One section vale só para aquela seção.

O que ele nunca cobra

O painel diz com clareza: "Um site por projeto. Medimos a estrutura, o ritmo e a tipografia. Nada é copiado." Na prática:

  • Textos. Antes de publicar, o Briks verifica se o seu site tem frases tiradas do site de que você gosta e reescreve qualquer uma delas na voz do seu próprio negócio. Frases do seu próprio briefing são mantidas.
  • Logotipos e nomes. Seu cabeçalho traz o seu nome, o logotipo que você enviou ou uma marca desenhada.
  • Imagens. As suas vêm da biblioteca do estúdio, são desenhadas novas para você, ou são as que você adiciona.
  • Outras empresas. Uma fileira de logos de clientes ou parceiros mostra apenas os nomes que você informar.

As perguntas antes da construção são escritas só a partir do seu briefing e do endereço, nunca a partir do texto do outro site.

Um site, capturas de tela, ou os dois

Quanto Briks segue um site de perto depende do que mais você fornece.

O que você adicionaO que o Briks faz
Um site e mais nadaEssa página define a ordem das seções da sua página inicial, feita sob medida para o seu negócio
Um site mais capturas de telaEles guiam a criação juntos, então o site deixa de definir a ordem; uma captura de tela de uma seção decide essa seção
Só capturas de telaEles orientam o layout e o visual; a captura de tela de uma seção decide essa seção
Configurações em Your brandElas valem mais que qualquer referência, então seu sotaque continua sendo seu, mesmo que o site de que você gosta seja verde

Medindo o que foi construído em relação ao site

Depois que um site é adicionado, a etapa também mostra Measure the build against the reference, desativada por padrão. Quando ativada, o Briks compara a página criada com o site de que você gosta antes de publicar e corrige as diferenças que medir. Isso só vale quando o site é a sua única referência, sem capturas de tela, pois é nesse caso que a sua página segue o layout dele. Isso aumenta os créditos e o tempo da criação, então deixe desativada, a menos que uma correspondência próxima seja importante para você. Depois, dá para mudar em Preferences como Measure builds against the reference.

Como um site muda o resto da configuração

  • Sem visual nem hero para escolher. A etapa How it is built diz "Your reference site decides the look and the hero, so there is none to choose." No briks.dev, Pick a look first fica desativado com "The site you like sets the look." Veja Escolha um visual.
  • Menos perguntas. O Briks não pergunta sobre o layout, o visual ou o que abre a página, porque o site já responde a isso.
  • Os dashboards também aceitam uma referência. A Briks lê a tela para identificar a navegação (uma barra lateral ou uma barra superior) e quantos painéis, tabelas e gráficos ela tem. A maioria dos dashboards fica atrás de um login, então uma captura de tela costuma ser a forma de mostrar um.

Enquanto a criação acontece, a conversa ganha uma caixa chamada What your references decided, listando o que cada referência definiu: a largura do conteúdo, o ritmo, o menu do cabeçalho, como as coisas se movem.

Quando um site não pode ser lido

A maioria das páginas públicas é lida sem problemas. Estes são os motivos mais comuns para uma não ser:

  • Está atrás de um login. O Briks vê o que vê um visitante que não entrou. Use capturas de tela para qualquer coisa atrás de um login.
  • Ele recusa visitantes automatizados. Alguns sites respondem com uma verificação de robô em vez da página. A Briks tenta uma segunda forma de entrar e, se ela também for bloqueada, o site é ignorado.
  • Banners de cookies e pop-ups raramente são o problema, pois o Briks responde ao banner e fecha os pop-ups antes de olhar.

Se o site não puder ser lido, mas as suas capturas de tela puderem, a criação segue sem ele e a caixa diz "1 reference could not be read and was skipped." Se nada do que você adicionou puder ser lido, a criação para em vez de projetar um site que você não pediu. Uma criação que para assim não é cobrada, e a reserva volta. O que o estúdio diz depende do motivo:

O que o estúdio dizO que fazer
"O endereço de referência não pôde ser aberto." e "Nada foi cobrado."Clique em Build without it para criar o mesmo pedido com suas palavras e respostas como estavam, reservando de novo os créditos de um projeto novo. Ou clique em Remove it, que abre Reference site em Preferences, onde Remove tira o endereço.
“O site de referência recusou o navegador do estúdio, então não foi possível lê-lo. Tente outra referência.”Comece um novo projeto com capturas de tela da página em Screenshots, ou com um site diferente.
"Não foi possível ler a sua referência por causa de um erro do sistema. Tente novamente mais tarde."Pressione Try again mais tarde. Suas palavras e respostas são mantidas, então as perguntas não são feitas duas vezes. Ou digite na caixa para reiniciar com suas novas palavras acrescentadas.

O grupo Reference site em Preferences mostra o endereço até o site ser publicado pela primeira vez, para você conferir se ele foi salvo como pretendia.

Exemplos práticos

Um siteUm consultório odontológico que gosta da calma de um hotel

Briefing: um consultório odontológico familiar em Harrogate com quatro dentistas, sábados de manhã e um formulário de solicitação. Site adicionado: a página inicial de um pequeno hotel que o dono achou tranquilo e espaçoso. Nada mais.

A página inicial da clínica segue a ordem e o espaçamento generoso da página do hotel, com as palavras, os tratamentos e as imagens da própria clínica. O nome, as fotos e o texto do hotel não aparecem em lugar nenhum.

Um site e uma captura de telaUma torrefadora de café com um site e uma captura de tela

Site: uma torrefação cujo menu se abre em painéis grandes. Captura de tela: a grade de produtos de uma loja, marcada como One section, com produtos escolhidos. Your brand: cor de destaque #B4542D.

Com uma captura de tela adicionada, a página da torrefação deixa de definir a ordem das seções. O menu em painel é mantido, a seção de produtos segue a captura de tela, e o destaque de cor do próprio torrefador vence as cores da referência.

Perguntas frequentes

Posso adicionar uma referência depois que o site estiver pronto?

Sim, como imagem. Na caixa do estúdio, anexe uma captura de tela, deixe marcada como Reference e diga o que aproveitar dela: Deixe a seção de preços com este visual, três colunas com a do meio em destaque.

Posso criar um site que precisa de senha?

Não de forma útil. O Briks só vê a página pública. Tire capturas de tela e adicione-as em Screenshots.

Por que não consigo mais escolher um visual?

Um site de que você gosta define o visual. Remova-o em Show what you like se preferir escolher entre três painéis.