Pengeditan visual dan pratinjau

Pengeditan visual bekerja langsung di Penampil App. Gunakan toolbar di bawah pratinjau untuk memilih elemen, mengedit teks, mengganti gambar, menerapkan tema, dan mempratinjau perubahan Anda sebelum menerbitkan.

Gunakan Select element untuk perubahan dengan bantuan AI, Edit Text untuk perubahan teks langsung, dan Theme untuk gaya global seperti warna, font, dan efek.

Cara kerja pengeditan visual

Saat agen AI menyelesaikan tugas, Penampil App muncul di bagian atas proyek. Toolbar pengeditan visual berada di bawah pratinjau.

• Select element memungkinkan Anda memilih satu atau beberapa elemen dan meminta agen untuk memodifikasinya.
• Edit Text memungkinkan Anda mengedit teks langsung di pratinjau.
• Theme membuka kontrol tema untuk gaya global.

Toolbar dapat diciutkan saat Anda tidak membutuhkannya.

Sebelum Anda memulai

Sebelum mulai mengedit, pastikan bahwa:

• Proyek Anda memiliki build yang sudah selesai. Alat pengeditan visual tersedia dari Penampil App setelah agen menyelesaikan tugas.
• Anda mengetahui bahwa perubahan belum live sampai Anda menerbitkannya. URL publik Anda tidak terpengaruh sampai Anda menerbitkan versi yang diperbarui.
• Anda mengetahui bahwa tema hanya menjangkau gaya bersama. Elemen yang dibuat dengan nilai tetap akan mempertahankan tampilan lamanya setelah perubahan tema. Lihat Jika tema tidak terlihat benar di bawah.

Atur gaya global dengan Theme

Tema adalah sistem desain proyek Anda. Tema 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 tema

Pilih Theme dari toolbar di bawah Penampil App. Panel Theme mencakup kolom Search Themes dan mengelompokkan tema ke dalam beberapa bagian:

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

Setiap tema muncul sebagai pratinjau halaman yang dibangun dengannya, dengan namanya dan deretan swatch yang menunjukkan paletnya, sehingga Anda dapat menilai arahnya sebelum menerapkannya.

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

Untuk menerapkannya:

1. Pilih tema 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 tema yang Anda pilih, dan sekarang tema tersebut muncul di bawah Current Theme.

Catatan: Jika Anda memiliki perubahan teks atau gambar yang belum disimpan, Atoms akan meminta Anda menyimpan atau membuangnya sebelum menerapkan tema baru.

Perbarui tema yang diterapkan

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

Untuk menggunakannya, pilih Update pada tema Anda saat ini dan konfirmasikan Do you want to re-apply theme name? Setelah itu proyek Anda menggunakan versi yang lebih baru.

Anda tidak harus memperbarui. Jika dibiarkan, proyek Anda akan tetap menjalankan versi yang Anda terapkan.

Catatan: Catatan: Jika app Anda tidak terlihat seperti tema yang Anda pilih, elemen individual mungkin memiliki gaya yang menimpa tema. Penimpaan tersebut menargetkan konten tertentu dan tetap bertahan setelah perubahan tema.

Bangun atau edit tema di Theme Manager

Pilih + di samping Current Theme untuk membuat tema dari awal, atau buka tema yang sudah ada untuk mengubahnya. Keduanya akan membuka Theme Manager, tempat Anda menyempurnakan tema 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 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 bekerja baik 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 tema ke kondisi awalnya.

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

Simpan tema

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

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

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

Gunakan kembali tema di berbagai proyek

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

Jika tema tidak terlihat benar

Menerapkan tema bukanlah pemeriksaan kompatibilitas, jadi biasanya tidak gagal. Tema menggantikan nilai gaya bersama yang menjadi dasar app Anda, yang berarti tema apa pun di pemilih biasanya dapat diterapkan ke proyek mana pun.

Yang mungkin Anda lihat justru tema 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 diatur langsung padanya, alih-alih salah satu gaya bersama app Anda — tidak dapat dijangkau oleh perubahan tema, sehingga mempertahankan tampilan sebelumnya dan dapat berbenturan dengan semua yang ada di sekitarnya. Pilih elemen yang terpengaruh dan jelaskan perubahan tersebut di chat proyek.

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

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

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

Edit elemen dengan Editor Visual

1. Arahkan kursor ke toolbar pengeditan visual dan pilih Select element.
2. Toolbar menampilkan Click to select, Ctrl/Cmd + Click for multiple.
3. Pilih elemen di pratinjau. Untuk memilih beberapa elemen, tahan Ctrl di Windows atau Cmd di Mac saat memilih.
4. Pilihan Anda dilampirkan ke chat proyek. Toolbar menampilkan jumlah yang dipilih, seperti Edit 1 selection in chat window.
5. Jelaskan perubahan yang Anda inginkan di chat proyek dan kirim pesan Anda.
6. Pilih Select element lagi untuk keluar dari mode pemilihan.

Gunakan chat proyek untuk perubahan seperti tata letak, warna, spasi, styling, atau perubahan yang memengaruhi beberapa elemen yang dipilih.

Edit teks secara langsung

1. Pilih Edit Text dari toolbar di bawah Penampil App.
2. Saat Click text content to edit muncul, pilih teks yang ingin Anda ubah.
3. Edit teks langsung di pratinjau.
4. Anda dapat mengedit beberapa elemen teks sebelum menyimpan. Toolbar menampilkan jumlah edit yang tertunda, seperti 1 text change atau 2 text changes.
5. Pilih Save untuk menyimpan semua perubahan teks yang tertunda, atau Discard untuk menghapusnya.

Anda juga dapat mengeklik ganda teks saat menggunakan Select element untuk mulai mengeditnya secara langsung.

Simpan atau buang perubahan Anda

Perubahan teks dan gambar langsung tidak diterapkan sampai Anda menyimpannya. Saat ada perubahan yang tertunda, toolbar menampilkan jumlah perubahan bersama Discard dan Save.

• Save menerapkan semua edit langsung yang tertunda.
• Discard menghapus edit yang tertunda dan mengembalikan elemen yang terpengaruh ke keadaan sebelumnya.

Jika Anda mencoba keluar dari mode edit saat ada perubahan yang tertunda, Atoms menampilkan:

Perubahan belum disimpan

Anda memiliki perubahan yang belum disimpan. Harap simpan atau buang perubahan sebelum keluar dari mode edit.

Pilih Cancel untuk melanjutkan pengeditan atau Discard untuk keluar tanpa menyimpan perubahan.

Menyimpan akan memperbarui proyek kerja. Ini tidak memperbarui situs live sampai Anda menerbitkannya.

Ganti gambar

1. Masuk ke mode Select element.
2. Pilih gambar yang ingin Anda ganti.
3. Pilih gambar dari pustaka gambar, atau gunakan kontrol upload pada gambar yang dipilih.
4. Periksa penggantinya di pratinjau.
5. Pilih Save untuk menerapkan perubahan gambar, atau Discard untuk menghapusnya.

Jika Anda juga memasukkan instruksi di chat proyek, penggantian gambar dan instruksi chat dapat dikirim bersama.

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. 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 di-upload muncul di bawah area drop — pilih satu untuk menerapkannya.

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

Jelaskan perubahan di chat

Setelah memilih satu atau beberapa elemen dengan Select element, jelaskan hasil yang Anda inginkan di chat proyek.

Sebagai contoh:

• "Buat bagian ini lebih tenang, dengan lebih banyak ruang kosong dan heading yang lebih kecil."
• "Samakan tombol-tombol ini dengan styling di halaman harga."

Jelaskan secara spesifik hasil yang dimaksud. Instruksi seperti "buat terlihat lebih baik" dapat menghasilkan hasil yang tidak dapat diprediksi

Pratinjau perubahan Anda

Gunakan toolbar di atas pratinjau:

• Device view — beralih antar ukuran layar untuk menguji responsivitas. Perubahan tema dan tipografi yang terlihat benar di desktop sering kali rusak di mobile, jadi selalu periksa mobile sebelum menerbitkan.
• Page selector — berpindah antar halaman app Anda.
• Refresh — muat ulang pratinjau jika terlihat tidak mutakhir.
• Open in a new tab — lihat app dalam 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 mungkin ada pada Penampil App, bukan pada edit visual Anda. Lihat Pemecahan masalah build dan pratinjau untuk langkah-langkah pemecahan masalah — Refresh, panel Console, Resolve, dan cara melaporkan kesalahan yang tetap berlanjut.

Jika edit teks atau gambar langsung Anda tampak hilang, periksa apakah Anda sudah menyimpannya. Perubahan yang belum disimpan dapat dibuang saat Anda keluar dari mode edit — lihat Simpan atau buang perubahan Anda.

Terbitkan perubahan Anda

Edit visual tetap berada di proyek kerja Anda sampai Anda menerbitkannya. 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 ke versi yang Anda pilih, dan perubahan desain Anda tidak akan muncul secara publik sampai Anda menerbitkan versi baru.

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