Sesuaikan tampilan app Anda, lalu pratinjau hasilnya sebelum Anda memublikasikannya.

Design terbuka di samping pratinjau live 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, pendeskripsian perubahan dengan bahasa biasa, dan pemeriksaan hasil kerja Anda di berbagai perangkat sebelum ditayangkan.

Cara kerja Design

Saat AI Agen menyelesaikan tugas, Penampil App muncul di bagian atas halaman. Pilih Design untuk membuka panel desain di sisi kiri layar, dengan pratinjau live 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 Anda pilih. Berfungsi pada proyek apa pun, kapan pun.
• Library mengganti gambar atau menghasilkan yang 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 akan meminta Anda memilih sebuah elemen.

Sebelum Anda memulai

Sebelum Anda membuka Design, pastikan bahwa:

• Proyek Anda memiliki build yang sudah selesai. Design dibuka dari Penampil App, yang hanya muncul setelah agen menyelesaikan tugas.
• Anda tahu bahwa perubahan belum live sampai Anda memublikasikannya. URL publik Anda tidak terpengaruh sampai Anda memublikasikan versi yang diperbarui.
• Anda tahu bahwa theme hanya menjangkau gaya bersama. Elemen yang dibangun 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 sejak awal berarti semua yang dihasilkan agen akan mengikutinya sejak awal.

Pilih sebuah theme

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

• Current Theme — yang sedang digunakan proyek Anda sekarang. 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. Theme ini tidak dapat dihapus.
• My Theme — theme yang telah Anda buat atau sesuaikan. Theme ini dapat diubah namanya dan dihapus.

Setiap theme muncul 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 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 versi yang lebih baru dari theme yang Anda terapkan tersedia.

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 dibiarkan, proyek Anda akan tetap menjalankan versi yang Anda terapkan.

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

Bangun atau edit theme di Theme Manager

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

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 sebuah 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 membuangnya 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 sebuah theme ke file, lalu import ke proyek lain untuk menggunakan kembali arah desain yang sama, atau berikan kepada rekan tim agar proyek mereka sesuai dengan proyek Anda.

Jika theme tidak terlihat benar

Menerapkan theme bukanlah pemeriksaan kompatibilitas, jadi biasanya tidak gagal. Theme menggantikan 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 bisa dicapai elemen demi elemen.

Penting: Pilih theme lebih awal jika memungkinkan. Saat agen membangun dengan theme yang sudah diterapkan, mereka menggunakan gaya bersamanya 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 pada satu waktu. Saat Anda memilih beberapa elemen, ubahlah dengan mendeskripsikan apa yang Anda inginkan di chat — lihat Jelaskan perubahan alih-alih mengklik.

Lencana di atas pilihan Anda menamai 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 melalui Small, Medium, Large, XL, 2XL, 3XL, hingga 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 semula.

Hasil yang diharapkan: tombol-tombol tersebut menghilang setelah Anda menyimpan, dan perubahan Anda kini 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 yang 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 pada deretan kartu atau tombol, pilih semuanya dengan Ctrl-click atau Cmd-click dan jelaskan 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 tersebut harus 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 tersebut. Untuk gambar bawaan, arahkan kursor ke atasnya dan 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 dan 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 dan pilih Generate. Hasilnya 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.

Jelaskan 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 saat ini 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 sebuah 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.

Jelaskan hasilnya, bukan mekanismenya:

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

- "Samakan styling tombol ini dengan halaman harga."

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

Catatan: Mengklik properti di Editor Visual akan langsung mengubahnya. Mengirim prompt meminta agen melakukan pekerjaannya, yang memerlukan 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 kali rusak di mobile, jadi selalu periksa mobile sebelum memublikasikan.
• Page selector — berpindah antarhalaman 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 berlanjut.

Satu hal yang khusus untuk Design: jika edit Anda tampak hilang, 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.