--- title: "Criar site a partir de um site que você gosta | Briks" url: https://briks.dev/pt-br/docs/build-from-sites-you-like description: "Adicione um site e até seis prints de que você gosta. Briks lê layout, espaçamento, tipografia, movimento e menus e cria o seu nesse espírito, sem copiar." last_updated: 2026-10-08 --- # 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 leitura Conferido 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ê adiciona | O que o Briks faz | | --- | --- | | Um site e mais nada | Essa 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 tela | Eles 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 tela | Eles orientam o layout e o visual; a captura de tela de uma seção decide essa seção | | Configurações em **Your brand** | Elas valem mais que qualquer referência, então seu sotaque continua sendo seu, mesmo que o site de que você gosta seja verde | Aponte para a página exata O Briks lê a página do endereço que você informa, não o site inteiro. Se for uma página de preços de que você gosta, cole o endereço da página de preços, e não o da página inicial. ## 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](https://briks.dev/pt-br/docs/pick-a-look). - **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 diz | O 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. Onde 1. Projects 2. Your project 3. Settings 4. Preferences 5. Reference site ## Exemplos práticos Um site Um 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 tela Uma 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. ## Leia a seguir - [Construindo **Comece um novo projeto** Cada escolha na página Novo projeto, passo a passo: tipo de projeto, briefing, um site de que você gosta, marca, imagens, opções de criação e o custo inicial.](https://briks.dev/pt-br/docs/new-project) - [Construindo **Escolha um visual** Veja três visuais antes de criar seu site: cores, tipografia, cantos, botão e cartões com seu texto de destaque. Depois construa o que você escolher.](https://briks.dev/pt-br/docs/pick-a-look) - [Construindo **Como escrever um bom briefing** O que colocar em um briefing para a primeira versão acertar: negócio, público, páginas, ação principal, fatos e tom, com seis exemplos de antes e depois.](https://briks.dev/pt-br/docs/writing-a-brief) - [Construindo **Apps web e dashboards** O que os tipos App e Dashboard criam, onde ficam os registros, o que ainda não está disponível, com exemplos de reservas, estoque e pedidos de um café.](https://briks.dev/pt-br/docs/web-apps-and-dashboards) Ainda travado? Escreva para [hello@briks.dev](mailto:hello@briks.dev) com o nome do seu projeto e o que você esperava ver. Uma captura de tela ajuda.