---
title: "Bangun dari situs yang Anda sukai | Briks"
url: https://briks.dev/id/docs/build-from-sites-you-like
description: "Tambah satu situs dan hingga enam screenshot pilihan. Briks membaca tata letak, spasi, huruf, gerak, dan menu, lalu membuat situs Anda searah tanpa menyalin."
last_updated: 2026-10-08
---

# Bangun dari situs yang Anda sukai

Jika Anda pernah melihat situs yang tata letak atau nuansanya Anda sukai, arahkan Briks ke situs itu. Briks mempelajari cara halaman itu disusun dan membangun situs Anda dengan semangat yang sama, dengan kata-kata dan gambar Anda sendiri. Halaman ini membahas cara menambahkan situs dan screenshot, apa yang dibaca Briks dan apa yang tidak pernah diambilnya, serta apa yang harus dilakukan jika situs tidak bisa dibaca.

Baca 7 menit Dicocokkan dengan studio pada 8 Oktober 2026

## Menambahkan situs dan tangkapan layar

1. Buka langkah

   Di mana: Show what you like

   Ini langkah ketiga dari New project, bertanda **Optional**. Panelnya menjelaskan gunanya: "Tunjukkan situs atau tangkapan layar yang Anda kagumi. Ini menjadi aturan untuk pembangunan; sisanya dirancang untuk bisnis Anda."

2. Tambah situs

   Di mana: A site to learn from

   Ketik atau tempel alamat lalu tekan **Add** atau Enter. Anda boleh tidak menulis https. Setiap proyek hanya satu situs; situs kedua akan menampilkan "One site per project. Remove it to add another." Situs tampil sebagai tag dengan tanda silang untuk menghapusnya.

3. Tambahkan tangkapan layar

   Di mana: Screenshots

   Tekan **Add screenshots** dan pilih file JPEG, PNG, atau WebP yang masing-masing berukuran di bawah 12 MB. Penghitung menunjukkan jumlah yang Anda miliki, hingga **6 of 6**.

4. Jelaskan apa yang ditampilkan setiap tangkapan layar

   Di mana: Screenshots

   Pilih **Whole page** dan, jika Anda tahu, layar tempat gambar diambil: **Desktop**, **Tablet** atau **Phone** (**Screen size: detect** akan menentukannya). Atau pilih **One section** dan tentukan bagian yang ditampilkan, seperti hero, harga, testimoni, atau footer.

5. Lanjutkan

   Di mana: Show what you like

   Tekan **Next**. Ringkasan menampilkan alamat situs dan menghitung tangkapan layar Anda.

Anda juga dapat membawa satu situs dari kotak di briks.dev sebelum mendaftar: buka menu **+**, pilih **Add a site you like**, dan situs itu akan muncul di langkah ini setelah Anda mendaftar.

## Yang dibaca Briks

Sebuah situs dibaca pada lebar desktop, tablet, dan ponsel, setelah Briks menjawab banner cookie dan menutup pop-up. Yang diperiksa:

- **Tata letak:** bagian-bagian dari atas ke bawah, selebar apa konten ditampilkan, kolom-kolomnya, dan apa yang berubah di ponsel.
- **Spacing:** irama jarak antar bagian dan di dalam bagian.
- **Type:** ukuran dan ketebalan judul serta teks, dan karakter jenis huruf.
- **Colour:** warna latar, warna teks, dan warna aksen.
- **Motion:** apa yang muncul perlahan atau bergeser masuk saat Anda menggulir, apa yang tetap terpasang, baris yang bergerak sendiri, dan apa yang dilakukan tautan dan tombol saat Anda mengarahkan penunjuk ke atasnya.
- **Header dan menunya:** deretan tautan biasa, dropdown, atau panel besar. Setiap panel dibuka dan diperiksa.
- **Illustrations:** jika halaman memakai gambar ilustrasi, bukan foto, gambar Anda dibuat dengan gaya gambar tangan yang serupa.

Tangkapan layar memberi tahu Briks lebih sedikit: tata letak dan perataan, jarak antarelemen, ukuran judul, warna, serta apakah tampilannya terang atau gelap. Tangkapan layar yang ditandai **One section** hanya mewakili bagian itu saja.

## Apa yang tidak pernah diambil

Panel itu menyatakannya dengan jelas: "Satu situs per proyek. Kami mengukur struktur, ritme, dan hurufnya. Tidak ada yang disalin." Dalam praktiknya:

- **Kata-kata.** Sebelum memublikasikan, Briks memeriksa situs Anda untuk mencari kalimat yang diambil dari situs yang Anda sukai dan menulis ulang kalimat tersebut dengan gaya bahasa bisnis Anda sendiri. Kalimat dari brief Anda sendiri dibiarkan.
- **Logo dan nama.** Header Anda menampilkan nama Anda, logo yang Anda unggah, atau tanda yang digambar.
- **Gambar.** Gambar Anda berasal dari pustaka studio, dibuat baru untuk Anda, atau yang Anda tambahkan.
- **Perusahaan lain.** Deretan logo klien atau mitra hanya menampilkan nama yang Anda berikan.

Pertanyaan sebelum membangun disusun hanya dari brief dan alamat Anda, tidak pernah dari teks situs lain.

## Situs, screenshot, atau keduanya

Seberapa dekat Briks mengikuti sebuah situs bergantung pada apa lagi yang Anda berikan.

| Apa yang Anda tambahkan | Apa yang dilakukan Briks |
| --- | --- |
| Satu situs dan tidak ada yang lain | Halaman itu menentukan urutan bagian di beranda Anda, disesuaikan dengan bisnis Anda |
| Sebuah situs beserta tangkapan layarnya | Keduanya memandu pembuatan bersama-sama, jadi situs tidak lagi menentukan urutannya; screenshot satu bagian menentukan bagian itu |
| Hanya tangkapan layar | Semuanya memandu tata letak dan tampilan; tangkapan layar sebuah bagian menentukan bagiannya |
| Pengaturan di **Your brand** | Semuanya menang atas setiap referensi, sehingga aksen Anda tetap milik Anda meskipun situs yang Anda sukai berwarna hijau |

Tunjuk halaman yang tepat

Briks membaca halaman pada alamat yang Anda berikan, bukan seluruh situs. Jika itu halaman harga yang Anda suka, tempel alamat halaman harganya, bukan alamat halaman utama.

## Mengukur hasil build terhadap situsnya

Setelah sebuah situs ditambahkan, langkah ini juga menampilkan **Measure the build against the reference**, yang secara bawaan nonaktif. Jika diaktifkan, Briks membandingkan halaman yang dibuat dengan situs yang Anda sukai sebelum publikasi dan memperbaiki perbedaan yang terukur. Ini hanya berlaku jika situs tersebut satu-satunya referensi Anda, tanpa screenshot, karena saat itulah halaman Anda mengikuti tata letaknya. Ini menambah kredit dan waktu pembuatan, jadi biarkan nonaktif kecuali kemiripan yang dekat penting bagi Anda. Nanti pengaturannya bisa diubah di **Preferences** sebagai **Measure builds against the reference**.

## Bagaimana sebuah situs mengubah pengaturan lainnya

- **Tidak ada tampilan atau hero untuk dipilih.** Langkah **How it is built** menyebutkan "Your reference site decides the look and the hero, so there is none to choose." Di briks.dev, **Pick a look first** nonaktif dengan keterangan "The site you like sets the look." Lihat [Pilih tampilan](https://briks.dev/id/docs/pick-a-look).
- **Lebih sedikit pertanyaan.** Briks tidak bertanya tentang tata letak, tampilan, atau apa yang menjadi sorotan halaman, karena situs sudah menjawabnya.
- **Dashboard** juga bisa memakai referensi. Briks membaca layar untuk navigasinya (sidebar atau bilah atas) dan berapa banyak panel, tabel, dan grafik yang ada. Kebanyakan dashboard berada di balik halaman masuk, jadi tangkapan layar biasanya cara untuk menunjukkannya.

Selama proses pembangunan berjalan, percakapan menampilkan kotak bernama **What your references decided**, yang mencantumkan apa yang ditentukan oleh setiap referensi: lebar konten, ritme, menu header, dan cara elemen bergerak.

## Saat sebuah situs tidak dapat dibaca

Sebagian besar halaman publik terbaca dengan baik. Berikut alasan umum mengapa sebuah halaman tidak:

- **Halaman ini ada di balik login.** Briks hanya melihat apa yang dilihat pengunjung yang belum masuk. Gunakan tangkapan layar untuk apa pun yang ada di balik login.
- **Situs menolak pengunjung otomatis.** Beberapa situs menjawab dengan pemeriksaan robot, bukan halamannya. Briks mencoba jalur masuk kedua, dan jika itu juga diblokir, situs tersebut dilewati.
- **Banner cookie dan pop-up** jarang menjadi masalah, karena Briks menjawab banner dan menutup pop-up sebelum memeriksa.

Jika situs tidak bisa dibaca tetapi tangkapan layar Anda bisa, pembuatan tetap berlanjut tanpanya dan kotak berbunyi "1 reference could not be read and was skipped." Jika tidak ada yang Anda tambahkan yang bisa dibaca, pembuatan berhenti daripada merancang situs yang tidak Anda minta. Pembuatan yang berhenti seperti ini tidak ditagih, dan kredit yang ditahan dikembalikan. Pesan studio bergantung pada penyebabnya:

| Yang dikatakan studio | Yang perlu dilakukan |
| --- | --- |
| "The reference address couldn't be opened." dan "Nothing was charged." | Tekan **Build without it** untuk membangun permintaan yang sama dengan kata-kata dan jawaban Anda apa adanya, dengan kredit proyek baru kembali ditahan. Atau tekan **Remove it**, yang membuka **Reference site** di **Preferences**, tempat **Remove** menghapus alamatnya. |
| "Situs referensi menolak browser studio, sehingga tidak dapat dibaca. Silakan coba referensi lain." | Mulai proyek baru dengan tangkapan layar halaman di bawah **Screenshots**, atau dengan situs lain. |
| "Referensi Anda tidak dapat dibaca karena kesalahan sistem. Silakan coba lagi nanti." | Tekan **Try again** nanti. Kata-kata dan jawaban Anda tersimpan, jadi pertanyaannya tidak diajukan dua kali. Atau ketik di kotak untuk memulai ulang dengan kata-kata baru Anda ditambahkan. |

Grup **Reference site** di **Preferences** menampilkan alamat itu sampai situs pertama kali dipublikasikan, sehingga Anda dapat memeriksa bahwa alamat tersimpan sesuai maksud Anda.

Di mana

1. Projects
2. Your project
3. Settings
4. Preferences
5. Reference site

## Contoh kasus

Satu situs Praktik dokter gigi yang menyukai ketenangan sebuah hotel

> Brief: praktik dokter gigi keluarga di Harrogate dengan empat dokter gigi, buka Sabtu pagi, dan formulir permintaan. Situs yang ditambahkan: beranda sebuah hotel kecil yang menurut pemiliknya tenang dan lapang. Tidak ada yang lain.

Beranda klinik mengikuti urutan dan jarak lega halaman hotel, dengan kata-kata, perawatan, dan gambar milik klinik sendiri. Nama, foto, dan teks hotel tidak muncul di mana pun.

Sebuah situs dan satu tangkapan layar Pemanggang kopi dengan sebuah situs dan sebuah screenshot

> Situs: sebuah tempat sangrai kopi yang menunya terbuka menjadi panel-panel besar. Screenshot: grid produk sebuah toko, ditandai **One section** dengan produk yang dipilih. **Your brand**: warna aksen `#B4542D`.

Dengan tangkapan layar yang ditambahkan, halaman roastery tidak lagi menentukan urutan bagian. Menu panelnya terbawa, bagian produk mengikuti tangkapan layar, dan warna aksen milik roaster sendiri menang atas warna acuan.

## Pertanyaan umum

### Bisakah saya menambahkan referensi setelah situs selesai dibuat?

Bisa, sebagai gambar. Di kotak studio, lampirkan tangkapan layar, biarkan tetap bertanda **Reference**, lalu sebutkan apa yang diambil darinya: `Make the pricing section feel like this, three columns with the middle one raised.`

### Bisakah saya membuat situs yang memerlukan kata sandi?

Tidak berguna. Briks hanya melihat halaman publik. Ambil tangkapan layar saja dan tambahkan di bawah **Screenshots**.

### Mengapa saya tidak bisa memilih tampilan lagi?

Situs yang Anda sukai menentukan tampilannya. Hapus di **Show what you like** jika Anda lebih suka memilih dari tiga papan gaya.

## Baca selanjutnya

- [Sedang dibuat **Mulai proyek baru** Setiap pilihan di halaman New project, langkah demi langkah: jenis proyek, brief, situs yang Anda suka, merek, gambar, pengaturan build, dan biaya memulai.](https://briks.dev/id/docs/new-project)
- [Sedang dibuat **Pilih tampilan** Lihat tiga tampilan sebelum situs dibangun: tiap papan warna, huruf, sudut, tombol, dan kartu dengan kata hero Anda, lalu bangun yang dipilih.](https://briks.dev/id/docs/pick-a-look)
- [Sedang dibuat **Menulis brief yang baik** Apa yang ditulis di brief agar build pertama tepat sasaran: bisnis, audiens, halaman, aksi utama, fakta, dan nada, dengan enam contoh sebelum dan sesudah.](https://briks.dev/id/docs/writing-a-brief)
- [Sedang dibuat **Aplikasi web dan dasbor** Yang dibangun jenis App dan Dashboard, tempat penyimpanan datanya, apa yang belum tersedia, dengan contoh untuk reservasi, stok, dan pesanan kafe.](https://briks.dev/id/docs/web-apps-and-dashboards)

Masih buntu?

Tulis ke [hello@briks.dev](mailto:hello@briks.dev) dengan nama proyek Anda dan apa yang Anda harapkan terlihat. Tangkapan layar akan membantu.