Rancang dan pratinjau

Design terbuka di samping pratinjau langsung Anda dan memungkinkan Anda mengubah tampilan proyek Anda tanpa menulis kode.

Panduan ini membahas pengaturan gaya global dengan Theme, pengeditan elemen tunggal dengan Editor Visual, penggantian gambar dari Library, mendeskripsikan perubahan dengan bahasa biasa, dan memeriksa hasil kerja Anda di berbagai perangkat sebelum ditayangkan.

Cara kerja Design

Saat Agen AI menyelesaikan tugas, Penampil App muncul di bagian atas halaman. Pilih Design untuk membuka panel desain di sisi kiri layar, dengan pratinjau langsung Anda di sampingnya. Panel ini memiliki tiga tab:

• Theme menetapkan aturan global untuk seluruh app — warna, font, dan efek. Paling baik digunakan sebelum Anda membangun.
• Editor Visual menyesuaikan elemen yang telah Anda pilih. Berfungsi pada proyek apa pun, kapan pun.
• Library mengganti gambar atau menghasilkan gambar baru.

Theme menetapkan aturannya, dan Editor Visual menyempurnakan detailnya. Pilih Exit untuk menutup panel.

Panel Design terbuka di sebelah kiri. Sampai Anda memilih sesuatu, Editor Visual meminta Anda memilih sebuah elemen.

Sebelum memulai

Sebelum Anda membuka Design, pastikan bahwa:

• Proyek Anda memiliki build yang selesai. Design terbuka dari Penampil App, yang hanya muncul setelah agen menyelesaikan sebuah tugas.
• Anda memahami bahwa perubahan tidak akan live sampai Anda memublikasikannya. URL publik Anda tidak terpengaruh sampai Anda memublikasikan versi yang diperbarui.
• Anda memahami bahwa theme hanya menjangkau gaya bersama. Elemen yang dibuat dengan nilai tetap akan mempertahankan tampilan lamanya setelah perubahan theme. Lihat Jika theme tidak terlihat benar di bawah.

Tetapkan gaya global dengan Theme

Theme adalah sistem desain proyek Anda. Theme mendefinisikan variabel global — palet, tipografi, dan spasi — yang berlaku di seluruh app Anda, bukan pengaturan pada satu elemen.

Theme paling baik digunakan selama tahap persiapan, sebelum Anda mulai membangun. Menerapkannya lebih awal berarti semua yang dihasilkan agen akan mengikutinya sejak awal.

Pilih theme

Tab Theme terbuka dengan kolom Search Themes dan mengelompokkan theme ke dalam beberapa bagian:

• Current Theme — yang saat ini digunakan proyek Anda. Sebelum Anda menerapkan apa pun, bagian ini menampilkan No theme applied yet, dan tombol + di sampingnya membuat theme baru.
• Default Theme — 14 preset pilihan desainer. Masing-masing ditampilkan sebagai pratinjau halaman yang dibangun dengannya, beserta namanya dan deretan swatch yang menunjukkan paletnya. Ini tidak dapat dihapus.
• My Theme — theme yang telah Anda buat atau sesuaikan. Ini dapat diganti nama dan dihapus.

Setiap theme ditampilkan sebagai pratinjau halaman yang dibangun dengannya, beserta namanya dan deretan swatch yang menunjukkan paletnya, sehingga Anda dapat menilai arahnya sebelum menerapkannya.

Tab Theme, dengan theme yang diterapkan di bagian atas dan theme tersimpan Anda di bawahnya.

Untuk menerapkannya:

1. Pilih theme yang Anda inginkan.
2. Atoms menanyakan "Do you want to apply theme name?"
3. Pilih Apply untuk mengonfirmasi, atau Cancel untuk kembali.
4. Periksa pratinjau.

Hasil yang diharapkan: pratinjau diperbarui ke theme yang Anda pilih, dan sekarang theme tersebut muncul di bawah Current Theme.

Catatan: Jika Anda memiliki perubahan yang belum disimpan di Editor Visual, Atoms menampilkan Unsaved Changes dan meminta Anda menyimpan atau membuangnya sebelum menerapkan theme baru.

Perbarui theme yang diterapkan

Titik pada tab Theme berarti tersedia versi yang lebih baru dari theme yang sedang Anda terapkan.

Untuk menggunakannya, pilih Update pada theme Anda saat ini dan konfirmasikan Do you want to re-apply theme name? Proyek Anda kemudian akan menggunakan versi yang lebih baru.

Anda tidak harus memperbaruinya. Jika Anda membiarkannya, proyek Anda akan tetap berjalan menggunakan versi yang Anda terapkan.

Catatan: Jika app Anda tidak terlihat seperti theme yang Anda pilih, elemen individual mungkin telah ditimpa di Editor Visual. Penimpaan tersebut menargetkan konten tertentu dan tetap bertahan setelah perubahan theme.

Membuat atau mengedit theme di Theme Manager

Pilih + di samping Current Theme untuk membuatnya dari awal, atau buka theme yang sudah ada untuk mengubahnya. Keduanya akan membuka Theme Manager, tempat Anda menyempurnakan theme terhadap pratinjau langsung.

Pengaturannya berada pada tiga tab:

• Color — peran warna yang digunakan app Anda, dikelompokkan berdasarkan tujuan: Base Colors, Card, Popover, Primary, Secondary, dan lainnya. Setiap peran memiliki nilainya sendiri, jadi mengubah Primary akan menjangkau setiap elemen yang menggunakannya.
• Fonts — jenis huruf Serif, Sans-serif, dan Mono Anda.
• Effects — Radius sudut, dan Shadow yang Anda kontrol berdasarkan warna, opasitas, blur, spread, dan offset.

Pratinjau di sampingnya dibangun dari komponen nyata — formulir masuk, tombol, input, teks isi, dan teks monospace — sehingga Anda dapat langsung menilai perubahan alih-alih menebak. Gunakan toggle terang dan gelap di bawahnya untuk memeriksa keduanya, karena palet yang berfungsi pada permukaan terang dapat kehilangan kontras pada permukaan gelap.

Di bawah pratinjau Anda juga mendapatkan Undo dan Redo untuk menelusuri perubahan Anda, serta Reset untuk mengembalikan theme ke kondisi awalnya.

Theme Manager. Pratinjau diperbarui saat Anda mengubah nilai, dan kontrol di bawahnya mencakup undo, redo, export, import, dan reset.

Simpan theme

1. Pilih Save.
2. Beri Theme Name, atau pertahankan yang disarankan.
3. Pilih Save untuk mengonfirmasi.

Hasil yang diharapkan: theme Anda muncul di bawah My Theme pada tab Theme, dengan paletnya ditampilkan sebagai swatch. Terapkan dengan cara yang sama seperti theme lainnya.

Catatan: Edit tidak akan disimpan sampai Anda menyimpannya. Atoms akan menghentikan Anda dan menawarkan untuk menyimpan atau membuang jika Anda mencoba menerapkan theme lain saat masih ada perubahan yang belum disimpan.

Gunakan kembali theme di berbagai proyek

Theme Manager memiliki Export dan Import di bawah pratinjau. Export theme ke file, lalu import ke proyek lain untuk menggunakan kembali arah desain yang sama, atau berikan kepada rekan tim agar proyek mereka cocok dengan milik Anda.

Jika theme tidak terlihat benar

Menerapkan theme bukanlah pemeriksaan kompatibilitas, jadi biasanya tidak gagal. Theme mengganti nilai gaya bersama yang menjadi dasar app Anda, yang berarti theme apa pun di pemilih biasanya dapat diterapkan ke proyek apa pun.

Yang mungkin Anda lihat justru theme yang berhasil diterapkan tetapi tidak menjangkau semuanya. Tidak ada pesan kesalahan untuk ini — tampilannya hanya terlihat salah.

Sebagian app Anda mempertahankan tampilan lamanya. Ini adalah masalah yang paling umum. Elemen yang diberi nilai tetap, warna atau font tertentu yang ditetapkan langsung padanya, alih-alih salah satu gaya bersama app Anda — tidak dapat dijangkau oleh perubahan theme, sehingga mempertahankan tampilan sebelumnya dan dapat bertabrakan dengan semua yang ada di sekitarnya. Perbaiki di Editor Visual, atau minta agen di chat untuk mengganti nilai tetap tersebut dengan gaya dari theme Anda.

Teks menjadi sulit dibaca. Theme gelap yang diterapkan pada tata letak yang dirancang untuk permukaan terang dapat membuat teks memiliki kontras yang terlalu rendah. Sesuaikan elemen yang terdampak di Editor Visual, atau pilih theme yang lebih dekat dengan desain Anda saat ini.

Atoms memberi tahu Anda bahwa theme tidak dapat diterapkan. Ini jarang terjadi, dan berarti antarmuka proyek Anda tidak dibangun di atas sistem theming Atoms. Gunakan Editor Visual sebagai gantinya — semuanya tetap dapat dicapai elemen demi elemen.

Penting: Pilih theme lebih awal jika memungkinkan. Saat agen membangun dengan theme yang sudah diterapkan, mereka menggunakan gaya bersama dari theme tersebut sejak awal, sehingga lebih sedikit elemen yang berakhir dengan nilai tetap yang tidak dapat dijangkau oleh perubahan theme di kemudian hari.

Edit elemen tunggal dengan Editor Visual

Pilih elemen di pratinjau untuk mengeditnya. Untuk mengerjakan beberapa elemen sekaligus, tahan Ctrl lalu klik di Windows, atau Cmd lalu klik di Mac.

Penting: Kontrol properti yang dijelaskan di bawah ini bekerja pada satu elemen dalam satu waktu. Saat Anda memilih beberapa elemen, ubahlah dengan mendeskripsikan apa yang Anda inginkan di chat — lihat Deskripsikan perubahan alih-alih mengklik.

Lencana di atas pilihan Anda menampilkan nama elemen dan ukurannya — ukuran font untuk teks, atau dimensi untuk kontainer — sehingga Anda dapat memastikan bahwa Anda memilih elemen yang dimaksud, bukan kontainernya.

Tab Editor Visual kemudian menampilkan properti yang tersedia untuk elemen tersebut, dikelompokkan ke dalam beberapa bagian:

• Layout — margin dan padding.
• Appearance — warna latar belakang, opasitas, dan radius sudut. Radius berjalan dari None hingga Small, Medium, Large, XL, 2XL, 3XL, sampai Full.
• Content — teks elemen.
• Style — keluarga font, ketebalan, ukuran, perataan teks, dan dekorasi.
• Class — class styling yang diterapkan pada elemen, diciutkan secara default.

Bagian yang muncul bergantung pada apa yang Anda pilih: elemen teks menawarkan Content dan Style, sedangkan kontainer mungkin hanya menampilkan Layout, Appearance, dan Class.

Toolbar mengambang juga muncul di atas pilihan Anda dengan kontrol yang paling umum siap digunakan — font, ketebalan, perataan, dan warna untuk teks — bersama kontrol hapus dan kolom prompt yang dijelaskan di bawah.

Perubahan muncul di pratinjau saat Anda membuatnya. Untuk membatalkannya, gunakan Discard di bagian bawah pratinjau.

Simpan perubahan Anda

Edit tidak akan disimpan sampai Anda menyimpannya. Setelah Anda membuat perubahan, Discard dan Save muncul di bagian bawah pratinjau.

• Save menyimpan perubahan Anda.
• Discard membuangnya dan mengembalikan elemen ke kondisi sebelumnya.

Hasil yang diharapkan: tombol-tombol tersebut menghilang setelah Anda menyimpan, dan perubahan Anda sekarang menjadi bagian dari proyek.

Catatan: Jika Anda mencoba meninggalkan Design, menerapkan theme lain, atau menggunakan Pilih untuk Chat saat masih ada pekerjaan yang belum disimpan, Atoms menampilkan Unsaved Changes dan meminta Anda menyimpan atau membuangnya sebelum melanjutkan.

Menyimpan akan mempertahankan perubahan di proyek Anda. Ini tidak menampilkannya di situs live Anda — lihat Publikasikan perubahan Anda.

Dengan elemen dipilih, Editor Visual menampilkan propertinya. Toolbar mengambang di atas pilihan beralih antara mendeskripsikan perubahan dan mengeditnya secara langsung.

Tips:

1. Gunakan Editor Visual untuk perubahan kosmetik dan chat untuk perubahan struktural seperti halaman baru, fitur baru, atau logika backend.
2. Untuk membuat perubahan yang sama di seluruh deretan kartu atau tombol, pilih semuanya dengan Ctrl-click atau Cmd-click lalu deskripsikan perubahannya sekali di chat. Mengedit masing-masing melalui kontrol properti berarti Anda harus mengulanginya.

Ganti gambar dengan Library

Library menerapkan gambar ke elemen yang Anda pilih, jadi mulailah dengan memilih tempat gambar akan ditempatkan.

1. Pilih elemen yang ingin Anda ubah di pratinjau. Sampai Anda melakukannya, Library menampilkan Select an element to start visual editing.
2. Buka tab Library dan pilih sumber — Image, Generate, atau Upload.
3. Terapkan gambar Anda. Cara melakukannya bergantung pada asal gambar. Untuk gambar bawaan, arahkan kursor ke atasnya lalu pilih Use asset. Untuk gambar yang Anda hasilkan atau unggah, pilih thumbnail yang sudah selesai.
4. Periksa pratinjau. Gambar langsung diterapkan ke elemen yang Anda pilih.
5. Pilih Save di bagian bawah pratinjau, atau Discard untuk membatalkannya.

Hasil yang diharapkan: elemen yang Anda pilih menampilkan gambar baru, dan tombol Save serta Discard menghilang setelah Anda menyimpan.

Tab Library dengan kategori gambar dan Popular Images.

Dari mana gambar berasal

Image adalah koleksi bawaan. Gunakan Search assets untuk sesuatu yang spesifik, atau telusuri kategori — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings, dan People, dengan More tags untuk sisanya. Memilih kategori akan membukanya; gunakan panah kembali untuk kembali. Popular Images di bawah menampilkan pilihan umum. Arahkan kursor ke gambar mana pun lalu pilih Use asset untuk menerapkannya.

Generate membuat gambar baru dari deskripsi, dan memerlukan paket Pro atau Max. Ketik apa yang Anda inginkan di bawah Describe the image you want to generate lalu pilih Generate. Hasil muncul di bawah kolom tersebut. Pilih thumbnail yang sudah selesai untuk menerapkannya ke elemen Anda.

Upload menambahkan file Anda sendiri dengan drag-and-drop, tempel, atau klik. Gambar dapat berformat JPEG, PNG, GIF, BMP, TIFF, atau WEBP, hingga 4MB. Gambar yang diunggah muncul di bawah area drop — pilih salah satunya untuk menerapkannya.

Catatan: Use asset hanya muncul pada gambar bawaan. Gambar yang Anda hasilkan atau unggah diterapkan dengan memilih thumbnail-nya.

Deskripsikan perubahan alih-alih mengklik

Saat perubahan lebih mudah dijelaskan daripada diklik satu per satu, Anda dapat meminta agen melakukannya. Ada dua tempat untuk melakukannya, dan keduanya bekerja pada apa pun yang sedang Anda pilih.

• Toolbar mengambang pada pilihan Anda. Toolbar kecil muncul di atas elemen yang Anda pilih. Dua ikonnya beralih antara mendeskripsikan perubahan dan mengedit properti secara langsung. Ketik ke dalam Ask the Atoms to change… lalu kirim.
• Input chat di bawah panel Design. Saat elemen dipilih, input menampilkan label Design dan prompt Ask the Atoms team to modify the selected element…, sehingga agen menerapkan instruksi Anda ke elemen tersebut, bukan ke seluruh proyek.

Toolbar mengambang berada di atas pilihan Anda. Chip di sebelah kiri menunjukkan elemen mana yang akan menerima instruksi tersebut.

Deskripsikan hasilnya, bukan mekanismenya:

- "Buat ini lebih tenang — lebih banyak ruang kosong, heading lebih kecil."

- "Samakan styling tombol ini dengan halaman pricing."

Instruksi yang samar seperti "buat tampilannya lebih baik" memberikan hasil yang tidak dapat diprediksi.

Catatan: Mengklik properti di Editor Visual langsung mengubahnya. Mengirim prompt meminta agen melakukan pekerjaannya, yang membutuhkan waktu lebih lama. Untuk perubahan warna atau spasi yang sederhana, edit propertinya secara langsung.

Pratinjau perubahan Anda

Gunakan toolbar di atas pratinjau:

• Device view — beralih antarukuran layar untuk menguji responsivitas. Perubahan theme dan tipografi yang terlihat benar di desktop sering rusak di mobile, jadi selalu periksa mobile sebelum memublikasikan.
• Page selector — berpindah di antara halaman-halaman app Anda.
• Refresh — muat ulang pratinjau jika terlihat tidak mutakhir.
• Open in a new tab — lihat app dengan lebar penuh di tab browser terpisah.
• Console — buka panel log saat ada sesuatu yang terlihat salah.

Hasil yang diharapkan: perubahan Anda terlihat di setiap halaman dan pada setiap lebar perangkat yang ingin Anda dukung.

Pulihkan dari masalah pratinjau

Jika pratinjau terlihat tidak mutakhir, terus memuat, atau menampilkan kesalahan merah, masalahnya ada pada pratinjau, bukan pada Design. Lihat Pemecahan masalah build dan pratinjau untuk langkah-langkah pemecahan masalah — Refresh, panel Console, Resolve, dan cara melaporkan kesalahan yang tetap muncul.

Satu hal yang khusus untuk Design: jika edit Anda tampak menghilang, periksa apakah Anda sudah menyimpannya. Perubahan yang belum disimpan akan dibuang saat Anda meninggalkan Design — lihat Simpan perubahan Anda.

Publikasikan perubahan Anda

Perubahan Design tetap berada di proyek kerja Anda sampai Anda memublikasikannya. Pilih Publish di sudut kanan atas, atau Update jika proyek sudah live.

Catatan: Jika proyek Anda menggunakan Specify Version alih-alih Always Latest, situs live akan tetap terkunci pada versi yang Anda pilih, dan perubahan desain Anda tidak akan muncul secara publik sampai Anda memublikasikan versi baru.

Untuk kesalahan yang dilaporkan agen selama build, lihat Laporan Masalah.