--- title: "Build from a site you like | Briks" url: https://briks.dev/docs/build-from-sites-you-like description: "Add one site and up to six screenshots you like. Briks reads its layout, spacing, type, motion and menus, then builds yours in that spirit without copying." last_updated: 2026-10-08 --- # Build from a site you like If you have seen a site whose layout or feel you like, point Briks at it. Briks studies how the page is put together and builds yours in that spirit, with your own words and pictures. This page covers adding a site and screenshots, what Briks reads and never takes, and what to do when a site can't be read. 7 minute read Checked against the studio on 8 October 2026 ## Adding sites and screenshots 1. Open the step Where: Show what you like It is the third step of New project, marked **Optional**. The panel says what it is for: "Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business." 2. Add a site Where: A site to learn from Type or paste an address and press **Add** or Enter. You can leave off the https. Each project takes one site; a second gets "One site per project. Remove it to add another." The site shows as a tag with a cross to remove it. 3. Add screenshots Where: Screenshots Press **Add screenshots** and choose JPEG, PNG or WebP files under 12 MB each. The counter shows how many you have, up to **6 of 6**. 4. Say what each screenshot shows Where: Screenshots Choose **Whole page** and, if you know it, the screen it was taken on: **Desktop**, **Tablet** or **Phone** (**Screen size: detect** works it out). Or choose **One section** and pick the part it shows, such as hero, pricing, testimonials or footer. 5. Move on Where: Show what you like Press **Next**. The review shows the site's address and counts your screenshots. You can also bring one site from the box on briks.dev before you sign up: open the **+** menu, choose **Add a site you like**, and it lands on this step after sign-up. ## What Briks reads A site is read at desktop, tablet and phone widths, after Briks has answered any cookie banner and closed pop-ups. It looks at: - **Layout:** the sections from top to bottom, how wide the content runs, the columns, and what changes on a phone. - **Spacing:** the rhythm between sections and inside them. - **Type:** the sizes and weights of headings and text, and the character of the typefaces. - **Colour:** the background, the colour of the text and the accent. - **Motion:** what fades or slides in as you scroll, what stays pinned, rows that move on their own, and what links and buttons do when you point at them. - **The header and its menu:** a plain row of links, dropdowns or large panels. Each panel is opened and looked at. - **Illustrations:** if the page uses drawings rather than photographs, your pictures are drawn in a similar hand. A screenshot tells Briks less: the layout and alignment, the spacing, how big the headline is, the colours and whether it is light or dark. A screenshot marked **One section** speaks for that section only. ## What it never takes The panel puts it plainly: "One site per project. We measure its structure, rhythm and type. Nothing is copied." In practice: - **Words.** Before publishing, Briks checks your site for lines taken from the site you like and rewrites any in your own business's voice. Lines from your own brief are left alone. - **Logos and names.** Your header carries your name, your uploaded logo or a drawn mark. - **Pictures.** Yours come from the studio's library, are drawn new for you, or are ones you add. - **Other companies.** A row of client logos or partners only shows names you give. The questions before building are written from your brief and the address alone, never from the other site's text. ## A site, screenshots, or both How closely Briks follows a site depends on what else you give it. | What you add | What Briks does | | --- | --- | | One site and nothing else | That page sets the order of your home page's sections, built for your business | | A site plus screenshots | They guide the build together, so the site no longer sets the order; a screenshot of one section decides that section | | Screenshots only | They guide the layout and look; a section screenshot decides its section | | Settings on **Your brand** | They win over every reference, so your accent stays yours even if the site you like is green | Point at the exact page Briks reads the page at the address you give, not the whole site. If it is a pricing page you like, paste the pricing page's address rather than the home page's. ## Measuring the build against the site Once a site is added, the step also shows **Measure the build against the reference**, off by default. With it on, Briks compares the built page with the site you like before publishing and corrects the differences it measures. It only applies when the site is your only reference, with no screenshots, because that is when your page follows its layout. It adds credits and time to the build, so leave it off unless a close match matters to you. Later it can be changed in **Preferences** as **Measure builds against the reference**. ## How a site changes the rest of the setup - **No look or hero to choose.** The **How it is built** step says "Your reference site decides the look and the hero, so there is none to choose." On briks.dev, **Pick a look first** turns off with "The site you like sets the look." See [Pick a look](https://briks.dev/docs/pick-a-look). - **Fewer questions.** Briks doesn't ask about the layout, the look or what leads the page, because the site answers those. - **Dashboards** can take a reference too. Briks reads the screen for its navigation (a sidebar or a top bar) and how many panels, tables and charts it holds. Most dashboards sit behind a sign-in, so a screenshot is usually the way to show one. While the build runs, the conversation gains a box called **What your references decided**, listing what each one settled: the content width, the rhythm, the header's menu, how things move. ## When a site can't be read Most public pages read fine. These are the usual reasons one doesn't: - **It is behind a sign-in.** Briks sees what a visitor who isn't signed in sees. Use screenshots for anything behind a login. - **It turns automated visitors away.** Some sites answer with a robot check instead of the page. Briks tries a second way in, and if that is blocked too, the site is skipped. - **Cookie banners and pop-ups** are rarely the problem, since Briks answers the banner and closes pop-ups before it looks. If the site can't be read but your screenshots can, the build carries on without it and the box says "1 reference could not be read and was skipped." If nothing you added can be read, the build stops rather than design a site you didn't ask for. A build that stops like this isn't charged, and the hold comes back. What the studio says depends on why: | What the studio says | What to do | | --- | --- | | "The reference address couldn't be opened." and "Nothing was charged." | Press **Build without it** to build the same request with your words and answers as they were, holding a new project's credits again. Or press **Remove it**, which opens **Reference site** in **Preferences**, where **Remove** takes the address off. | | "The reference site turned the studio's browser away, so it could not be read. Please try a different reference." | Start a new project with screenshots of the page under **Screenshots**, or with a different site. | | "Your reference couldn't be read because of a system error. Please try again later." | Press **Try again** later. Your words and answers are kept, so the questions aren't asked twice. Or type in the box to start it again with your new words added. | The **Reference site** group in **Preferences** shows the address until the site is first published, so you can check it was saved as you meant. Where 1. Projects 2. Your project 3. Settings 4. Preferences 5. Reference site ## Worked examples One site A dental practice that likes a hotel's calm > Brief: a family dental practice in Harrogate with four dentists, Saturday mornings and a request form. Site added: the home page of a small hotel the owner found calm and spacious. Nothing else. The practice's home page follows the hotel page's order and generous spacing, with the practice's own words, treatments and pictures. The hotel's name, photos and wording appear nowhere. A site and a screenshot A coffee roaster with a site and a screenshot > Site: a roastery whose menu opens into large panels. Screenshot: the product grid of a shop, marked **One section** with products chosen. **Your brand**: accent `#B4542D`. With a screenshot added, the roastery's page no longer sets the order of the sections. Its panel menu carries over, the product section follows the screenshot, and the roaster's own accent wins over the reference's colours. ## Common questions ### Can I add a reference after the site is built? Yes, as a picture. In the studio's box, attach a screenshot, leave it marked **Reference**, and say what to take from it: `Make the pricing section feel like this, three columns with the middle one raised.` ### Can I give a site that needs a password? Not usefully. Briks only sees the public page. Take screenshots instead and add them under **Screenshots**. ### Why can't I pick a look any more? A site you like decides the look. Remove it on **Show what you like** if you would rather choose from three boards. ## Read next - [Building **Start a new project** Every choice on the New project page, step by step: the kind of project, your brief, a site you like, brand, pictures, build switches and what starting costs.](https://briks.dev/docs/new-project) - [Building **Pick a look** See three looks before your site is built, each a board of colours, type, corners, a button and cards set with your own hero words, then build the one you pick.](https://briks.dev/docs/pick-a-look) - [Building **Writing a good brief** What to put in a brief so the first build lands: the business, its audience, the pages, the main action, facts and tone, with six before and after examples.](https://briks.dev/docs/writing-a-brief) - [Building **Web apps and dashboards** What the App and Dashboard kinds build, where their records live, what is not available yet, with worked examples for bookings, stock and a café's orders.](https://briks.dev/docs/web-apps-and-dashboards) Still stuck? Write to [hello@briks.dev](mailto:hello@briks.dev) with your project's name and what you expected to see. A screenshot helps.