Jualan online · 19 menit baca
Coba minta AI “buatkan portofolio online yang keren dan modern”. Hampir selalu hasilnya mirip: latar gelap, huruf serif miring yang elegan, aksen emas atau ungu, dan cahaya yang menyala di sudut. Terlihat rapi, tapi juga terlihat seperti buatan mesin. Perekrut yang sudah melihat puluhan halaman serupa langsung merasa pernah melihatnya.
Masalahnya bukan di kemampuan AI-nya. Masalahnya ada di prompt-nya. Kata seperti “keren”, “modern”, atau “profesional” tidak memberi AI keputusan apa pun, jadi AI memilih jalan yang paling aman dan paling sering muncul di data latihnya. Hasilnya generik, padahal portofolio justru tempat kamu ingin terlihat berbeda.
Artikel ini menjelaskan cara membalik keadaan itu: kamu yang memutuskan gaya, bagian halaman, dan nama tiap gerakan, sementara AI mengerjakan kodenya. Ada prompt lengkap yang bisa kamu salin dan sesuaikan, contoh halaman sungguhan yang bisa kamu buka dan scroll sendiri, cara merevisi kalau hasilnya belum pas, dan catatan tentang data pribadi di halaman CV. Semua nama, perusahaan, angka, dan testimoni di contoh adalah fiktif.
Contoh hasil
Sebelum membahas caranya, lihat dulu hasilnya. Ini halaman CV dan portofolio fiktif “Alya Prameswari”, seorang UI/UX designer, yang dibuat dengan pendekatan di artikel ini. Rekaman di bawah menunjukkan sebagian halamannya di-scroll di layar ponsel.
Beberapa hal yang bisa kamu perhatikan saat membukanya: huruf pada nama naik satu per satu dari balik garis, kalimat prinsip kerja terisi kata demi kata saat kamu menggulir, warna latar berganti dengan sapuan diagonal, kolom, dan lingkaran, studi kasus bergeser ke samping di dalam mockup ponsel, garis pengalaman tergambar sendiri, dan tombol ajakan di bagian akhir tertarik pelan ke arah kursor di desktop. Semuanya dibuat dari kode, tanpa foto dan tanpa library tambahan.
Dasar
AI menulis halaman dengan cara memilih kemungkinan yang paling umum. Kalau kamu hanya meminta “modern dan profesional”, kata itu paling sering berasosiasi dengan segelintir pilihan yang sama. Itu sebabnya banyak portofolio buatan AI terlihat sebagai variasi dari satu template.
Tanda halaman yang terasa seperti template AI dan penggantinya
| Yang sering muncul | Kenapa terasa generik | Gantinya |
|---|---|---|
| Latar gelap penuh dengan aksen emas atau ungu | Dipakai hampir semua “premium” versi AI | Palet terang yang kamu pilih sendiri, satu warna aksen kuat, dan satu warna gelap hanya untuk teks |
| Huruf serif miring yang elegan | Selalu muncul di judul | Huruf tebal dan sempit bergaya editorial, atau gaya lain yang cocok dengan profesimu |
| Cahaya menyala, gradasi, dan kartu kaca | Menutupi desain yang kurang kuat | Warna datar, garis tipis, dan sudut yang tegas |
| Tiga kolom ikon dengan judul pendek | Terlihat di hampir semua halaman buatan AI | Studi kasus nyata dengan mockup, angka hasil, dan peran yang jelas |
| Animasi hanya muncul perlahan (fade in) | Semua elemen bergerak dengan cara yang sama | Gerakan yang berbeda untuk tujuan yang berbeda: masuk, terisi, bergeser, tergambar |
Ini pengamatan umum, bukan aturan. Gaya gelap dan serif bisa bagus kalau memang cocok dengan merekmu dan kamu yang memilihnya dengan sengaja.
Pegangan utama
Jangan minta AI “membuat yang bagus”. Tulis keputusan desainnya sendiri: warna apa, huruf apa, bagian apa, gerakan apa. Semakin spesifik kamu, semakin kecil ruang AI untuk jatuh ke pilihan generik.
Kosakata
Animasi yang terasa mahal hampir selalu terdiri dari beberapa efek dasar yang dipadukan dengan rapi. Kalau kamu tahu namanya, kamu bisa memintanya satu per satu. Berikut daftar yang dipakai di halaman contoh.
Efek, istilahnya, dan kalimat yang bisa kamu pakai
| Efek | Istilah | Contoh kalimat di prompt |
|---|---|---|
| Huruf naik dari balik garis potong | Masked text reveal | Huruf pada nama naik satu per satu dari balik garis potong, lalu diam. |
| Teks terisi dari redup menjadi terang saat scroll | Scroll-driven animation | Kalimat prinsip kerja terisi kata demi kata mengikuti posisi scroll. |
| Bagian menempel di layar | Pinned section (sticky) | Bagian proyek menempel di layar sementara kartu bergeser ke samping. |
| Warna latar berganti dengan bentuk menyapu | Clip-path wipe | Perpindahan antar-bagian memakai sapuan diagonal, kolom bertahap, atau lingkaran yang membesar. |
| Kartu bergeser ke samping saat di-scroll | Horizontal scroll carousel | Kartu proyek bergeser ke samping, kartu aktif sedikit membesar. |
| Garis tergambar sendiri | SVG path drawing | Garis waktu pengalaman tergambar mengikuti scroll. |
| Angka berputar seperti odometer | Counter | Angka tahun, proyek, dan tim berputar naik saat bagiannya terlihat. |
| Bar atau lingkaran terisi | Progress fill | Bar keahlian dan lingkaran skor terisi dari nol. |
| Teks berjalan di pita | Marquee | Pita alat berjalan terus dan makin miring tipis saat scroll makin kencang. |
| Kartu bertumpuk bergeser keluar | Stacked cards | Kartu testimoni bertumpuk, kartu depan bergeser keluar ke kiri saat di-scroll. |
| Tombol tertarik ke kursor | Magnetic button | Tombol ajakan sedikit bergeser mengikuti kursor di desktop. |
| Bilah progres dan bar atas | Scroll progress & sticky bar | Bilah tipis di atas menunjukkan posisi, bar kecil menampilkan label bagian yang sedang dilihat. |
Gerakan yang berbasis kursor hanya terlihat di desktop. Di ponsel, efek itu tidak berpengaruh.
Jangan semua sekaligus
Pilih 6 sampai 8 efek dan tempatkan masing-masing di bagian yang cocok. Halaman yang semuanya bergerak justru terasa ramai dan murahan. Gerakan paling berkesan biasanya satu per bagian.
Cara kerja
Urutan menulis prompt
1Tahap 1
Konsep
profesi dan tujuan
2Tahap 2
Gaya
warna, huruf, ilustrasi
3Tahap 3
Bagian
urutan isi halaman
4Tahap 4
Gerakan
satu per satu
5Tahap 5
Aturan teknis
satu file, jarak aman
Tulis berurutan. Bagian gaya dan gerakan menentukan hasil paling besar.
Prompt yang efektif untuk halaman seperti ini punya lima bagian. Masing-masing dijelaskan singkat di bawah, lalu digabung menjadi satu prompt lengkap di bagian berikutnya.
- 1Konsep: profesimu apa, tujuan halamannya apa, dan bahasa apa. Contoh: UI/UX designer, tujuannya perekrut atau klien menghubungi lewat email, bahasa Indonesia yang ringkas.
- 2Gaya: palet warna (sebut warnanya), huruf (sebut jenisnya), cara menggambar ilustrasi, dan daftar hal yang dihindari. Daftar “hindari” sama pentingnya dengan daftar “pakai”.
- 3Bagian halaman: urutan section dari atas ke bawah, supaya AI tidak menebak struktur.
- 4Gerakan: satu baris per efek, dengan nama efek dan di bagian mana ia dipasang.
- 5Aturan teknis: satu file, mobile first, jarak aman di tepi layar, tidak boleh ada teks meluber, kontras jelas, dan cek ulang di akhir.
Simulasi: dari prompt ke halaman
Simulasi ini mengilustrasikan susunan yang dihasilkan. Tampilan sungguhan bisa dilihat di rekaman dan halaman contoh di atas.
Langkah 1
Ganti kata sifat dengan keputusan. “Modern dan profesional” bisa ditafsirkan seribu cara. “Latar putih tulang, teks tinta gelap kebiruan, satu aksen biru kobalt, tanpa gradasi” hanya bisa ditafsirkan satu cara.
Dari kata sifat ke keputusan
| Kata sifat (terlalu longgar) | Keputusan (jelas) |
|---|---|
| Warna yang elegan | Putih tulang, tinta gelap kebiruan, satu biru kobalt, dan satu hijau limau kecil untuk sorotan. |
| Huruf yang bagus | Judul huruf kapital, sangat besar, tebal, dan sempit. Label kecil memakai monospace dengan nomor indeks (01), (02). |
| Terlihat rapi | Garis tipis 1 px, tanda + di sudut, sudut tegas, dan jarak aman 28 px di kiri dan kanan. |
| Ilustrasi yang menarik | SVG buatan sendiri: avatar sederhana dan mockup layar aplikasi di dalam bingkai ponsel, tanpa foto stok. |
Blok GAYA (sesuaikan bagian dalam kurung)
GAYA - Rapi, dingin, dan presisi, ala editorial atau desain Swiss. Latar putih tulang, teks tinta gelap kebiruan, SATU warna aksen kuat [sebut warnanya], dan satu warna stabilo kecil [sebut warnanya] hanya untuk sorotan. - Judul: huruf kapital sangat besar, tebal, dan sempit. Font [nama font, misalnya Archivo dari Google Fonts]. Label kecil memakai font monospace dengan nomor indeks seperti (01), (02). - Garis tipis 1 px, tanda + pada sudut, sudut kotak tajam atau radius kecil yang konsisten. - Ilustrasi: gambar sendiri sebagai SVG, tanpa foto stok. - HINDARI: latar gelap penuh, gradasi, efek cahaya menyala, tekstur noise, huruf serif miring, kartu kaca, emoji sebagai ikon.
Daftar hindari itu penting
AI cenderung kembali ke gaya yang paling umum. Menulis apa yang tidak kamu mau menutup jalan kembali itu.
Langkah 2
Kalau kamu tidak menulis susunan bagian, AI akan menyusun sendiri, dan susunannya hampir selalu sama: profil, tiga keahlian dalam ikon, daftar proyek, kontak. Tulis urutanmu sendiri, termasuk bagian yang membuat halaman terasa hidup, misalnya pernyataan prinsip kerja yang besar atau garis waktu pengalaman.
Blok BAGIAN HALAMAN
BAGIAN HALAMAN (urut) 1. Hero: nama sangat besar, peran, status "Open to work", tombol Unduh CV dan Lihat karya. 2. Pita teks berjalan berisi alat yang dipakai (teks biasa, bukan logo). 3. Pernyataan prinsip kerja satu kalimat besar. 4. Proyek pilihan: 4 studi kasus berupa mockup ponsel, masing-masing dengan satu angka hasil. 5. Pengalaman: garis waktu vertikal. 6. Angka dan keahlian: jumlah tahun, proyek, tim; bar keahlian; satu skor dalam lingkaran. 7. Testimoni: 3 kutipan bergantian. 8. Kontak: ajakan besar, tombol bulat, email, lokasi, bahasa, lalu footer.
Langkah 3
Bagian ini yang paling menentukan kesan “mahal”. Tulis satu baris per gerakan: efek apa, di bagian mana, dan terjadi saat apa (saat halaman dibuka, saat di-scroll, atau terus-menerus). Pakai nama efek dari tabel kosakata di atas.
Blok GERAKAN
GERAKAN (kerjakan satu per satu) - Hero: huruf pada nama naik satu per satu dari balik garis potong (masking), lalu garis dan tanda + muncul, foto dan teks menyusul. Titik "Open to work" berdenyut pelan. - Pita alat berjalan terus dan makin miring tipis saat scroll makin kencang. - Perpindahan antar-bagian: warna latar berganti dengan bentuk yang menyapu (diagonal, kolom bertahap, lingkaran membesar), bukan sekadar memudar. - Pernyataan prinsip: bagian menempel di layar dan kata-katanya terisi dari redup menjadi terang mengikuti posisi scroll. Sorotan dan coretan muncul di akhir. - Proyek: bagian menempel di layar dan kartu bergeser ke samping saat di-scroll. Kartu aktif sedikit membesar, garis penanda ke bagian mockup tergambar, angka hasil menghitung naik. - Pengalaman: garis waktu tergambar mengikuti scroll, titik tiap peran muncul memantul kecil. - Angka berputar seperti odometer, bar keahlian terisi, lingkaran skor terisi. - Testimoni: kartu bertumpuk, kartu depan bergeser keluar ke kiri saat di-scroll. - Kontak: tombol bulat tertarik pelan ke arah kursor di desktop. Nama besar di footer naik huruf demi huruf. - Bilah progres tipis di atas dan bar atas kecil yang label bagiannya ikut berganti.
Gerakan dan scroll
Minta animasi yang “mengikuti posisi scroll”, bukan yang “muncul sekali lalu selesai”. Animasi yang terkait scroll terasa seperti bagian dari halaman, bukan hiasan yang ditempel.
Langkah 4
Animasi yang mewah bisa rusak kalau teksnya meluber atau menyentuh tepi layar. Beberapa aturan teknis sederhana mencegah itu. Aturan jarak aman terutama penting untuk judul raksasa: tanpa itu, huruf besar sering terpotong di ponsel.
- Minta satu file HTML dengan CSS dan JavaScript di dalamnya, supaya mudah dibuka dan dibagikan.
- Tulis “mobile first” dan sebut lebar acuan (misalnya 390 px). Banyak perekrut membuka dari ponsel.
- Tulis jarak aman, misalnya 28 px di kiri dan kanan, dan minta judul raksasa dikecilkan otomatis agar muat di dalamnya.
- Tulis larangan eksplisit: tidak boleh ada teks yang meluber, terpotong, atau saling menimpa.
- Minta kontras yang jelas, terutama saat latar berganti warna.
- Minta animasi memakai transform, clip-path, dan opacity supaya mulus, dan menghormati pengaturan “kurangi gerakan”.
- Untuk contoh atau latihan, minta tombol dan email mengarah ke # atau alamat contoh supaya tidak memakai data pribadi sungguhan.
- Akhiri dengan perintah memeriksa sendiri: teks menimpa, bagian kosong, dan gerakan yang tidak terlihat.
Blok ATURAN TEKNIS
ATURAN TEKNIS - Satu file HTML, CSS dan JavaScript di dalamnya. Tanpa library, tanpa gambar dari luar. - Mobile first (lebar 390 px) dengan jarak aman 28 px di kiri dan kanan. Judul raksasa harus diukur dan dikecilkan supaya muat di dalam jarak aman. - Tidak boleh ada teks yang meluber atau terpotong. Kontras teks harus jelas di semua latar. - Semua animasi lewat transform, clip-path, dan opacity supaya mulus. Hormati pengaturan "kurangi gerakan" di perangkat. - Tombol Unduh CV dan email contoh mengarah ke # (jangan memakai data pribadi sungguhan). Setelah selesai, cek sendiri: apakah ada teks yang saling menimpa atau menyentuh tepi layar, apakah ada bagian yang kosong, dan apakah tiap gerakan benar-benar terlihat.
Prompt lengkap
Ini gabungan kelima bagian. Ganti isi yang ada di dalam tanda kurung siku dengan profesi dan pilihan gayamu sendiri. Kalau ingin hasil yang mirip halaman contoh, biarkan seperti aslinya.
Prompt lengkap: CV dan portofolio dengan animasi (ganti isi di [ ])
Buatkan 1 file HTML halaman CV dan portofolio online untuk [profesi, misalnya: UI/UX designer bernama "Alya Prameswari" (fiktif)]. KONSEP - Tujuan halaman: [misalnya: perekrut atau klien tertarik lalu menghubungi lewat email]. - Bahasa: Indonesia yang ringkas dan percaya diri. Semua nama, perusahaan, angka, dan testimoni adalah contoh (fiktif). GAYA - Rapi, dingin, dan presisi, ala editorial atau desain Swiss. Latar putih tulang, teks tinta gelap kebiruan, SATU warna aksen kuat [biru kobalt], dan satu warna stabilo kecil [hijau limau] hanya untuk sorotan. - Judul: huruf kapital sangat besar, tebal, dan sempit (condensed). Font [Archivo dengan sumbu lebar dari Google Fonts, atau font tebal-sempit lain]. Label kecil memakai font monospace [IBM Plex Mono] dengan nomor indeks seperti (01), (02). - Garis tipis 1 px, tanda + pada sudut, sudut kotak tajam atau radius kecil yang konsisten. - Ilustrasi: gambar sendiri sebagai SVG (avatar sederhana, mockup layar aplikasi di dalam bingkai ponsel), tanpa foto stok. - HINDARI: latar gelap penuh, gradasi, efek cahaya menyala, tekstur noise, huruf serif miring, kartu kaca, emoji sebagai ikon, tiga kolom ikon yang berjejer. BAGIAN HALAMAN (urut) 1. Hero: nama sangat besar, peran, status "Open to work", tombol Unduh CV dan Lihat karya. 2. Pita teks berjalan berisi alat yang dipakai (teks biasa, bukan logo). 3. Pernyataan prinsip kerja satu kalimat besar, dengan satu kata disorot warna stabilo dan satu kata dicoret. 4. Proyek pilihan: 4 studi kasus berupa mockup ponsel, masing-masing dengan satu angka hasil. 5. Pengalaman: garis waktu vertikal. 6. Angka dan keahlian: jumlah tahun, proyek, tim; bar keahlian; satu skor dalam lingkaran. 7. Testimoni: 3 kutipan bergantian. 8. Kontak: ajakan besar, tombol bulat, email, lokasi, bahasa, lalu footer dengan nama besar. GERAKAN (kerjakan satu per satu) - Hero: huruf pada nama naik satu per satu dari balik garis potong (masking), lalu garis dan tanda + muncul, foto dan teks menyusul. Titik "Open to work" berdenyut pelan. - Pita alat berjalan terus dan makin miring tipis saat scroll makin kencang. - Perpindahan antar-bagian: warna latar berganti dengan bentuk yang menyapu (diagonal, kolom bertahap, lingkaran membesar), bukan sekadar memudar. - Pernyataan prinsip: bagian menempel di layar dan kata-katanya terisi dari redup menjadi terang mengikuti posisi scroll. Sorotan dan coretan muncul di akhir. - Proyek: bagian menempel di layar dan kartu bergeser ke samping saat di-scroll. Kartu aktif sedikit membesar, garis penanda ke bagian mockup tergambar, angka hasil menghitung naik. - Pengalaman: garis waktu tergambar mengikuti scroll, titik tiap peran muncul memantul kecil. - Angka berputar seperti odometer, bar keahlian terisi, lingkaran skor terisi. - Testimoni: kartu bertumpuk, kartu depan bergeser keluar ke kiri saat di-scroll. - Kontak: tombol bulat tertarik pelan ke arah kursor di desktop. Nama besar di footer naik huruf demi huruf. - Bilah progres tipis di atas dan bar atas kecil (nama dan tombol Hubungi) yang label bagiannya ikut berganti. ATURAN TEKNIS - Satu file HTML, CSS dan JavaScript di dalamnya. Tanpa library, tanpa gambar dari luar. - Mobile first (lebar 390 px) dengan jarak aman 28 px di kiri dan kanan. Judul raksasa harus diukur dan dikecilkan supaya muat di dalam jarak aman. - Tidak boleh ada teks yang meluber atau terpotong. Kontras teks harus jelas di semua latar. - Semua animasi lewat transform, clip-path, dan opacity supaya mulus. Hormati pengaturan "kurangi gerakan" di perangkat. - Tombol Unduh CV dan email contoh mengarah ke # (jangan memakai data pribadi sungguhan). Setelah selesai, cek sendiri: apakah ada teks yang saling menimpa atau menyentuh tepi layar, apakah ada bagian yang kosong, dan apakah tiap gerakan benar-benar terlihat.
Ganti konsepnya, pertahankan strukturnya
Struktur lima bagian ini bisa dipakai untuk profesi lain: fotografer, penulis, pengembang, konsultan, atau usaha jasa. Yang kamu ganti adalah profesi, palet, ilustrasi, dan isi bagian. Susunan gerakannya tetap bisa dipakai.
Menjalankan
Kamu butuh alat AI yang bisa menghasilkan file HTML. Caranya hampir sama di semua alat:
- 1Tempel prompt lengkap ke alat AI pilihanmu.
- 2Kalau alatnya menampilkan pratinjau langsung (misalnya panel hasil di samping percakapan), lihat hasilnya di sana. Kalau tidak, minta AI memberikan kodenya.
- 3Simpan kodenya sebagai file bernama index.html, lalu buka dengan klik dua kali di peramban.
- 4Scroll pelan dari atas sampai bawah di lebar ponsel dan perhatikan tiap bagian. Catat apa yang kurang pas.
- 5Gunakan prompt revisi di bawah untuk memperbaiki satu hal per putaran.
Kemampuan tiap alat berbeda. Beberapa alat menghasilkan halaman yang langsung rapi, sebagian membutuhkan beberapa putaran revisi. Itu normal. Kalau halaman belum rapi pada percobaan pertama, itu bukan tanda prompt-mu gagal.
Kalau hasilnya berat atau patah-patah
Minta AI mengurangi jumlah gerakan yang berjalan bersamaan, atau menonaktifkan efek yang bergantung pada kursor di ponsel. Halaman yang halus dengan lima efek lebih baik daripada halaman patah-patah dengan sepuluh.
Revisi
Revisi satu hal per putaran. Kalau kamu meminta lima perubahan sekaligus, hasilnya sering ada yang terlewat atau saling bertabrakan.
Teks meluber atau menyentuh tepi
Periksa seluruh halaman di lebar 390 px. Temukan semua teks yang meluber, terpotong, saling menimpa, atau menyentuh tepi layar (jarak aman 28 px), lalu perbaiki satu per satu. Jangan mengubah gaya atau gerakan. Sebutkan bagian mana yang kamu perbaiki.
Kontras kurang jelas
Periksa kontras teks di setiap latar, termasuk saat warna latar berpindah. Di mana teks sulit dibaca, ubah warna teks atau latarnya sampai jelas. Pertahankan palet yang ada.
Mockup kurang meyakinkan
Perbaiki mockup ponsel pada studi kasus [sebut proyek]. Buat tampilan layarnya lebih rinci dan rapi dengan gaya yang konsisten dengan mockup lain. Jangan mengubah bagian lain.
Terlalu ramai
Kurangi gerakan: pertahankan hanya animasi nama di hero, perpindahan warna antar-bagian, dan kartu proyek yang digeser. Hapus efek lain yang tidak perlu agar halaman terasa lebih tenang.
Gerakan kurang terlihat
Perjelas gerakan di bagian [sebutkan]. Perbesar jarak dan durasinya sedikit, dan pastikan efeknya mengikuti posisi scroll, bukan sekali jalan lalu berhenti.
Ganti profesi
Ganti konsep halaman ini menjadi [profesi baru] atas nama [nama fiktif]. Pertahankan struktur bagian dan gerakan. Ganti ilustrasi, palet, copy, studi kasus, dan angka contoh sesuai profesi baru.
Hati-hati
Halaman portofolio itu publik. Siapa pun yang mengetahui alamatnya bisa membukanya, dan mesin pencari bisa mengindeksnya. Karena itu, pikirkan dulu apa yang pantas ditampilkan.
- Jangan memasang nomor identitas, alamat rumah lengkap, tanggal lahir lengkap, atau nomor telepon pribadi kalau tidak perlu. Email khusus untuk pekerjaan biasanya cukup.
- Jangan menempelkan dokumen yang berisi data orang lain (misalnya laporan klien) ke alat AI tanpa izin.
- Isi angka hasil, jabatan, dan testimoni dengan yang benar-benar terjadi. Contoh di artikel ini fiktif dan tidak boleh disalin sebagai pengalamanmu.
- Minta izin sebelum menampilkan nama klien, logo perusahaan, atau kutipan seseorang.
- Kalau tidak ingin halamannya muncul di mesin pencari, tambahkan pengaturan noindex atau bagikan hanya lewat tautan.
Latih dulu dengan data contoh
Saat bereksperimen dengan prompt, pakai tokoh dan perusahaan fiktif seperti di contoh. Ganti dengan data aslimu hanya setelah tampilannya sesuai dan kamu sudah memeriksa isinya satu per satu.
Panduan
- Memakai kata sifat (“keren”, “profesional”) tanpa keputusan konkret, sehingga hasilnya generik.
- Tidak menulis daftar “hindari”, sehingga AI kembali ke gaya gelap dan serif yang paling umum.
- Menyebut terlalu banyak efek sekaligus, sehingga halaman terasa ramai dan berat.
- Tidak menyebut lebar ponsel dan jarak aman, sehingga judul besar terpotong di HP.
- Meminta banyak revisi dalam satu pesan, sehingga sebagian terlewat.
- Memakai data pribadi sungguhan saat sedang bereksperimen.
- Langsung dipakai untuk melamar kerja tanpa memeriksa teks, angka, dan tautan satu per satu.
Ringkasan
Lima bagian prompt dan tujuannya
| Bagian | Yang kamu tulis | Kenapa penting |
|---|---|---|
| 1. Konsep | Profesi, tujuan halaman, bahasa | AI tahu halaman ini untuk apa |
| 2. Gaya | Warna, huruf, ilustrasi, dan daftar hindari | Mencegah hasil yang generik |
| 3. Bagian | Urutan section | AI tidak menebak struktur |
| 4. Gerakan | Satu baris per efek, lengkap dengan bagian dan pemicunya | Inilah yang membuat halaman terasa mahal |
| 5. Aturan teknis | Satu file, mobile first, jarak aman, tanpa meluber, kontras jelas, cek ulang | Animasi tidak merusak keterbacaan |
Contoh di artikel ini fiktif dan disederhanakan.
Apakah saya perlu bisa coding?+
Tidak untuk membuat dan membuka halamannya. Kamu menulis prompt dalam bahasa biasa dan menyimpan hasilnya sebagai file index.html. Untuk menerbitkannya sebagai situs sungguhan, kamu butuh hosting, dan itu mungkin memerlukan bantuan orang yang paham teknis.
Alat AI mana yang paling bagus untuk ini?+
Tidak ada satu jawaban pasti. Pilih alat yang bisa menghasilkan file HTML dan menampilkan pratinjau. Hasilnya bisa berbeda tiap alat dan tiap percobaan, jadi coba beberapa kali dan revisi satu hal per putaran.
Kenapa halaman saya tidak seanimatif contoh?+
Biasanya karena bagian gerakannya kurang spesifik atau tidak ada kata “mengikuti posisi scroll”. Tambahkan nama efek dan di bagian mana ia dipasang, lalu minta AI memperbaiki satu efek per putaran.
Boleh dipakai untuk melamar kerja?+
Boleh, dengan syarat semua isinya benar-benar milikmu dan sudah kamu periksa: jabatan, angka hasil, tautan, dan kutipan. Ganti seluruh data contoh dengan data asli, dan pastikan kamu punya hak atas font serta ilustrasi yang dipakai.
Kenapa tidak memakai foto?+
Karena AI tidak punya fotomu dan foto stok membuat halaman terasa generik. Ilustrasi SVG buatan sendiri lebih konsisten dan ringan. Kalau kamu punya foto profesional sendiri, minta AI menaruhnya di tempat avatar.
Apakah halamannya ringan?+
Halaman contoh berupa satu file tanpa gambar dan tanpa library, sehingga ringan. Efek yang terlalu banyak tetap bisa membuatnya berat di ponsel lama. Kalau terasa patah-patah, kurangi jumlah gerakan.
Bisa dipakai untuk bisnis, bukan hanya CV?+
Bisa. Ganti konsep di bagian pertama, misalnya “halaman jasa fotografi” atau “halaman toko”, dan ganti bagian halamannya sesuai kebutuhan. Struktur gaya dan gerakan tetap bisa dipakai.
Halaman contoh “Alya Prameswari” adalah tokoh fiktif; semua perusahaan, angka, dan kutipan di dalamnya karangan. Hasil dari AI bisa berbeda tiap percobaan dan bisa mengandung kekeliruan, jadi selalu periksa halamanmu sebelum dipakai untuk melamar kerja atau mencari klien. Kemampuan tiap alat berbeda dan berubah dari waktu ke waktu.
Ivan Darmawan
Tutorial Claude AI buat kerjaan & bisnis