/AI · VERSI 1.1 · SEPTEMBER 2026
Referensi desain dan copywriting LamanDesain untuk website, PDF, dan output AI agen
AI slop adalah desain atau tulisan yang tampak rapi tetapi generik: bisa dipindah ke merek mana pun tanpa diubah dan tidak menunjukkan keputusan yang disengaja.
KONTRAK UNTUK AGEN
Berhenti sebelum coding. Konfirmasi keluaran, data, viewport, dan kombinasi font-warna terlebih dahulu.
If data is missing, ask questions. Use this URL as the working reference and pick the visual style from the brief. Never invent brands, .ai names, products, prices, metrics, testimonials, logos, or photos. For every brief, suggest different font and color pairings.
Skills, templates, and tools run the implementation. The brief plus Laman Desain rules remain the source of truth. After using them, re-audit the output before shipping.
Every visual design request produces a viewable HTML artifact. Carousels render as 1080×1080 slides, posters as artboards, PDFs as print pages. Text outlines only when the user asks for a content plan.
01 · ALUR AGEN
Tanya dulu, baru rancang. Jangan mengisi kekosongan dengan teks generik.
01Klarifikasi keluaran
Jika pengguna belum menyebut apa yang dibuat, tanya dulu. Jangan mengasumsikan landing page. Keluaran bisa website, PDF, undangan, poster, pitch deck, cheatsheet, gambar, atau format lain.
02Kumpulkan data
Jika fakta konten belum ada, tanya. Undangan butuh nama, tanggal, jam, tempat, RSVP. Website butuh merek, tujuan, audiens, aksi. Jangan mengisi kekosongan dengan teks generik.
03Ambil referensi
Baca /llms.txt, lalu /llms-full.txt, lalu /ai. Kunci aturan copy, 12 larangan, dan uji enam sumbu sebelum merancang.
04Tawarkan kombinasi
Selalu tawarkan maksimal tiga kombinasi font dan warna yang berbeda berdasarkan konteks. Jangan memiliki atau memilih kombinasi default. Gunakan tiga peran warna dan maksimal tiga font; hindari Inter, Roboto, Open Sans.
05Tentukan viewport
Tanya format jika belum jelas: website, cetak, atau media sosial. Ukuran menentukan layout, tipografi, dan apakah hover boleh dipakai.
06Hasilkan sesuai panduan
Tulis copy spesifik dan hasilkan artefak HTML mandiri yang merender output visual sesuai format brief. Rancang mengikuti kombinasi yang sudah dipilih. Ikon dari Lucide, Feather, atau Hugeicons via CDN. SVG siap pakai dari SVGRepo. Generate gambar hanya jika agen mampu dan pengguna ingin atau konten membutuhkannya.
07Uji enam sumbu
Filosofi, hierarki, eksekusi, spesifisitas, pengendalian, variasi. Skor 1 sampai 5. Nilai di bawah 3 direvisi sebelum dikirim.
DATA YANG DITANYAKAN PER KELUARAN
Website / landing page
website
- Nama merek
- Tujuan halaman
- Audiens
- Satu aksi utama
- Nama, angka, tempat, atau mekanisme yang spesifik
Company profile
website · cetak
- Nama perusahaan
- Lokasi
- Layanan atau produk
- Tahun berdiri atau angka bukti
- Kontak
Portofolio
website
- Nama kreator
- Bidang
- Jumlah karya
- Rentang tahun
- Cara menghubungi
Katalog / toko
website · cetak
- Nama toko
- Daftar produk
- Harga
- Asal atau bahan
- Cara pesan
Pitch deck / presentasi
cetak · website
- Nama perusahaan
- Masalah
- Solusi
- Angka atau bukti
- Tawaran atau aksi
Cheatsheet / lembar kerja / ebook
cetak · website
- Judul
- Audiens
- Daftar poin yang harus ada
- Urutan baca
- Sumber bila perlu
Undangan
website · cetak · media sosial
- Nama tuan rumah atau pasangan
- Tanggal
- Jam
- Tempat dan alamat
- Cara konfirmasi atau RSVP
Poster / infografik / carousel
media sosial · cetak
- Judul
- Satu pesan utama
- Tanggal atau angka
- Sumber atau penyelenggara
- Ukuran unggahan
02 · KOMBINASI
Tidak ada warna atau font default
Setiap brief mendapat kombinasi baru berdasarkan merek, audiens, medium, dan tujuan. Tawarkan maksimal tiga opsi, jelaskan alasan tiap opsi, lalu tunggu pengguna memilih.
- Warna: background, surface, text, dan satu accent yang diuji kontrasnya.
- Font: display, body, dan paling banyak satu mono atau pelengkap.
- Setelah dipilih, kombinasi dikunci sampai output selesai; brief baru mendapat saran berbeda.
- Radius 6px, garis 1px, warna ink dengan opasitas 16%, spasi 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
03 · PILIHAN KOMBINASI
Tawarkan kombinasi berdasarkan brief
- Tawarkan maksimal tiga kombinasi warna dan font yang berbeda. Jangan memilih diam-diam dan jangan menetapkan kombinasi default.
- Satu output memakai satu kombinasi warna dan font yang dipilih pengguna.
- Kustom tetap tiga peran warna: paper untuk latar, ink untuk teks, brick untuk satu aksen maksimal 3%.
- Kustom tetap maksimal tiga font: display, body, paling banyak satu mono atau pelengkap.
- Hindari Inter, Roboto, dan Open Sans kecuali ada alasan yang disengaja.
- Setelah pengguna memilih, kunci kombinasi itu sampai output selesai. Untuk brief baru, sarankan kombinasi berbeda.
PRESET WARNA
Kertas Hangat
Undangan, editorial, company profile
#F4EFE6 · #1C1714 · #B7410E
Arsip Malam
Pitch deck, portofolio, studio
#F3F1EC · #141414 · #C45C26
Kapur Laut
Laporan, cheatsheet, situs jasa
#E7EEF2 · #1A2330 · #2F6F7E
Tinta Hijau
Ebook, identitas F&B, katalog
#F2F0E9 · #1B241C · #3F6B4A
Batu Kapur
Arsitektur, furniture, undangan formal
#EFECE6 · #2A2622 · #8A5A44
PRESET FONT
Editorial Klasik
Undangan, majalah, company profile
- display Playfair Display
- body Manrope
- mono JetBrains Mono
Modern Tajam
SaaS, pitch deck, landing page
- display Fraunces
- body Source Sans 3
- mono IBM Plex Mono
Surat Kabar
Editorial, cheatsheet, laporan
- display Newsreader
- body Figtree
- mono Space Mono
Studio
Portofolio, identitas, arsitektur
- display Cormorant Garamond
- body Outfit
- mono IBM Plex Mono
Catatan Kerja
Lembar kerja, ebook, proposal
- display Literata
- body Source Serif 4
- mono IBM Plex Mono
04 · FONT PAIRING
Pilih peran font, lalu pilih kombinasinya
Referensi pairing ini dirangkum dari Fontpair. Gunakan untuk menawarkan pilihan kepada pengguna, lalu uji dengan copy nyata dari brief.
Buka koleksi font pairing →Epilogue + Baskervville
Sans modern + serif editorial. Cocok untuk website, company profile.
Work Sans + Bitter
Sans humanis + slab serif. Cocok untuk website, pitch deck.
Montserrat + DM Serif Display
Geometris + display serif. Cocok untuk landing page, poster.
Archivo + IBM Plex Mono
Sans utilitarian + mono. Cocok untuk dashboard, cheatsheet.
EB Garamond + DM Mono
Serif klasik + mono. Cocok untuk undangan, editorial.
Newsreader + Figtree
Serif berita + sans hangat. Cocok untuk laporan, ebook.
Fraunces + Source Sans 3
Serif ekspresif + sans netral. Cocok untuk brand, presentasi.
Cormorant Garamond + Outfit
Serif elegan + sans geometris. Cocok untuk portofolio, arsitektur.
Zain + Nunito
Display lembut + sans ramah. Cocok untuk undangan, edukasi.
Unbounded + Albert Sans
Display eksperimental + sans. Cocok untuk teknologi, acara.
Special Gothic Condensed One + Special Gothic
Condensed display + sans. Cocok untuk poster, media sosial.
SUSE Mono + SUSE
Mono + sans satu keluarga. Cocok untuk produk digital, dokumentasi.
Young Serif + Manrope
Serif kontemporer + sans. Cocok untuk katalog, company profile.
Metal + EB Garamond
Display karakter + serif. Cocok untuk poster, editorial.
05 · COLOR PAIRING
Pilih warna berdasarkan peran, kontras, dan konteks
Referensi palet ini dirangkum dari Color Hunt. Tawarkan pilihan kepada pengguna, cek kontras, lalu kunci palet setelah dikonfirmasi.
Buka koleksi color pairing →Navy Paper
tenang, editorial, terpercaya. Cocok untuk company profile, laporan.
#F9F7F7 · #DBE2EF · #3F72AF · #112D4E
Warm Studio
hangat, material, berkelas. Cocok untuk arsitektur, furniture.
#F8F0E5 · #EADBC8 · #9F8772 · #0F2C59
Soft Orchard
lembut, personal, ringan. Cocok untuk undangan, lifestyle.
#F9F7F7 · #F2D7D9 · #D3CEDF · #9BABB8
Forest Field
natural, tenang, organik. Cocok untuk wellness, makanan, edukasi.
#F5F5F0 · #DDE6D5 · #8FA889 · #344E41
Ink and Lemon
tegas, optimis, kontras. Cocok untuk poster, pitch deck.
#FFFDF2 · #F7E987 · #F2C14E · #1B1B1B
Clay Archive
arsip, tactile, nostalgik. Cocok untuk editorial, katalog.
#F4EFE6 · #E6C9A8 · #C77B58 · #3D2B1F
Ocean Signal
segar, jelas, digital. Cocok untuk produk digital, dashboard.
#F6FBFC · #B9E3E8 · #4BA3A8 · #155E63
Night Bloom
malam, ekspresif, dramatis. Cocok untuk acara, musik, fashion.
#1E1E2F · #3B3B58 · #6D597A · #EAAC8B
Peach Concrete
ramah, aktif, kontemporer. Cocok untuk produk, media sosial.
#FFF4E6 · #FFD8BE · #FF9B71 · #3D405B
Redacted
langsung, editorial, berani. Cocok untuk kampanye, informasi publik.
#F5F5F5 · #D9D9D9 · #6B6B6B · #C1121F
Lilac Signal
imajinatif, modern, terarah. Cocok untuk teknologi, ilustrasi.
#F7F2FA · #E3D7F1 · #9B72CF · #352F44
Citrus Cream
ceria, hangat, familiar. Cocok untuk kafe, undangan, event.
#FFFBEA · #F9E79F · #F4B942 · #4A3F35
06 · TIPOGRAFI
Sepuluh aturan huruf
01Maksimal tiga keluarga font: satu display, satu body, paling banyak satu font pelengkap.
02Display tetap roman. Italic hanya untuk penekanan di teks isi.
03Bobot judul dan isi harus terlihat berbeda.
04Skala tipe 1,25. Maksimal lima ukuran per halaman.
05Display tidak lebih dari 5,5rem.
06Judul lebih dari 90 karakter dipendekkan. Judul lebih dari 50 karakter diperkecil.
07Teks isi minimal 16px dengan tinggi baris 1,5 sampai 1,65.
08Panjang baris teks 45 sampai 75 karakter.
09Hindari Inter, Roboto, dan Open Sans kecuali ada alasan yang disengaja.
10Tidak ada paragraf huruf kapital semua dan tidak ada teks gradien.
07 · LAYOUT
Satu sumbu utama, asimetri yang disengaja
01Pilih satu sumbu utama: kiri, kanan, atas, atau bawah.
02Asimetri adalah keputusan desain yang disengaja, bukan kecelakaan.
03Patahkan grid paling sedikit sekali bila konteks mengizinkan.
04Campur nilai spasi kecil, sedang, dan besar.
05CSS Grid untuk struktur halaman. Flexbox untuk bagian dalam komponen.
06Cegah overflow horizontal dengan overflow-x: clip.
07Responsif diuji pada lebar 320, 375, 414, dan 768 piksel.
09 · VIEWPORT DAN ASET
Tentukan ukuran dulu, lalu pilih ikon, SVG, dan gambar
website
Uji 1440, 768, dan 375 piksel. Overflow-x: clip. Hover boleh, tetapi informasi penting tetap terlihat tanpa hover.
cetak
A4 210×297 mm, A5 148×210 mm, atau Letter 8,5×11 in. Margin 12 sampai 16 mm. Tanpa hover. Pertimbangkan page break.
media sosial
1080×1080 umpan, 1080×1350 potret, 1080×1920 cerita, 1200×630 tautan. Satu pesan per bingkai. Teks besar, zona aman 80 piksel.
- Tanyakan format jika belum jelas. Jangan mengasumsikan website.
- Satu output, satu format utama. Jangan mencampur aturan hover website ke cetak.
- Teks harus tetap terbaca tanpa hover, tanpa animasi, dan tanpa zoom berlebih.
IKON DARI CDN
Lucide
Garis tipis, cocok UI dan website.
https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/{nama}.svg
Feather
Set klasik 24px, cocok cetak sederhana.
https://cdn.jsdelivr.net/npm/feather-icons/dist/icons/{nama}.svg
Hugeicons
Set luas, cocok jika butuh ikon yang lebih spesifik.
https://api.iconify.design/hugeicons/{nama}.svg
SVG SIAP PAKAI
- Sumber utama: https://www.svgrepo.com
- Unduh SVG, sematkan inline, ganti fill atau stroke ke token ink atau brick.
- Pakai SVG untuk marka, pola, atau ilustrasi yang sudah jadi. Bukan sebagai dekorasi acak.
GAMBAR DAN ILUSTRASI
- Tanya dulu jika kebutuhan gambar belum jelas.
- Generate hanya bila agen punya kemampuan gambar dan output membutuhkannya: hero, ilustrasi, mockup, atau visual yang tidak bisa diwakili ikon.
- Subjek harus spesifik pada brief, bukan stok generik.
- Teks alternatif menyebut isi gambar, bukan 'gambar AI'.
- Satu keluarga ikon per output. Jangan campur Lucide, Feather, dan Hugeicons.
- Ikon dari CDN, disematkan sebagai SVG inline, diwarnai dengan currentColor token ink atau brick.
- Emoji bukan ikon. Ubin ikon generik tetap dilarang.
- SVG siap pakai diambil dari SVGRepo, lalu diwarnai ulang ke token. Hindari clipart kartun, blob 3D, dan aurora.
- Generate gambar atau ilustrasi hanya jika agen mampu DAN pengguna ingin atau konten membutuhkannya. Jika ragu, tanya.
- Jangan mengarang foto orang, logo merek, metrik, atau testimoni.
10 · LARANGAN
Dua belas pola yang ditolak dan penggantinya
01Latar hero gradien ungu-biru
Ganti: Warna solid dan tipografi.
02Judul dengan teks gradien
Ganti: Satu bobot, satu warna, kontras nyata.
03Blob aurora atau bola 3D melayang
Ganti: Komposisi kuat dan ruang kosong yang disengaja.
04Glassmorphism dekoratif
Ganti: Garis tipis, bobot, dan skala.
05Tiga kartu fitur identik
Ganti: Asimetri. Patahkan grid paling sedikit sekali.
06Ubin ikon generik atau emoji sebagai ikon
Ganti: Kata, angka, atau tidak ada ikon.
07Layout serba tengah dengan hero satu baris selayar penuh
Ganti: Satu sumbu utama: kiri, kanan, atas, atau bawah.
08Navigasi AI generik: wordmark, lima tautan, satu CTA
Ganti: Masthead editorial, slab brutalis, navigasi khas genre.
09Footer empat kolom dengan baris ikon sosial
Ganti: Kolofon pendek.
10Bingkai browser, ponsel, atau jendela kode palsu
Ganti: Tangkapan layar asli dalam figure sederhana.
11Metrik, testimoni, atau logo karangan
Ganti: Bukti nyata, placeholder yang jujur, atau tanpa bagian bukti.
12transition-all, hover-scale di semua kartu, fade-up di semua bagian
Ganti: Satu animasi masuk yang disengaja.
11 · COPYWRITING
Ganti abstraksi dengan fakta, mekanisme, nama, tanggal, dan angka.
HINDARI
Revolutionize your wedding with our seamless experience.
PAKAI
Akad 08.00, resepsi 11.00 sampai 13.00. 200 kursi, parkir dalam gedung.
TUJUH PRINSIP
- Satu tombol, satu kata kerja
- "Simpan perubahan", bukan "OK" atau "Submit".
- Error menjelaskan tiga hal
- Apa yang gagal, kenapa gagal, cara memperbaikinya. Bukan "Oops!".
- Empty state punya satu aksi
- Apa yang kosong, kenapa penting, satu tindakan yang tersedia.
- Tautan menyebut tujuannya
- "Lihat paket harga", bukan "Klik di sini".
- Kalimat aktif, kata diulang
- Pakai kata yang jelas dua kali daripada memaksa sinonim.
- Uji portabilitas
- Kalimat yang bisa dipindah ke produk lain tanpa diubah adalah pengisi. Ganti dengan nama, angka, tanggal, tempat, atau mekanisme.
- Tunjukkan, jangan beri label
- Hapus "penting", "mengejutkan", "jelas". Biarkan fakta yang membuktikan.
POLA YANG DIHAPUS
- Kontras biner
- Sampaikan poin utama secara langsung tanpa pola kontras X dan Y.
- Berdeham
- Hapus pembuka seperti "Begini," "jujur saja," dan "yang perlu Anda tahu." Mulai dari informasi utama.
- Wawasan palsu
- Hapus klaim seperti "yang sering dilewatkan" dan "yang tidak diceritakan orang." Sebut fakta atau mekanismenya.
- Titik dua dramatis
- Tulis hubungan sebab-akibat sebagai kalimat biasa, tanpa reveal setelah titik dua.
- Klaim -ing menggantung
- "highlighting," "showcasing." Ganti dengan akibat yang nyata.
- Puffery
- "momen penting," "bukti komitmen." Sebutkan faktanya saja.
- Atribusi kabur
- "para ahli sepakat," "studi menunjukkan." Sebut sumber atau hapus.
- Daftar negatif
- Sebutkan pilihan atau tindakan yang dipakai tanpa rangkaian penolakan.
- Kalimat penutup puitis
- Hapus. Akhiri pada kalimat konkret terakhir.
- Format berlebih
- Emoji di judul, bold acak, bullet untuk prosa biasa.
24 KATA TERLARANG
delvefosterleverageutilizefacilitateempowerstreamlinerobustcutting-edgeparadigm shiftgame changertapestryrealmbeaconmultifacetedmeticulousintricateparamounttransformativeelevateembarksuperchargeharnessever-evolving
PEMBUKA TERLARANG
- “Built for the modern team”
- “Unleash your X”
- “Where X meets Y”
- “Reimagine the way you...”
- “Supercharge your workflow”
- “Innovative solutions”
- “Seamless integration”
- “In today's digital landscape”
- “Next-generation”
- “Revolutionize Your Workflow with AI”
- “Solusi inovatif untuk bisnis Anda”
- “Wujudkan impian Anda bersama kami”
ISI YANG MEMBUAT COPY SPESIFIK
Nama merek, Nama orang, Tanggal, Jam, Lokasi, Jumlah, Harga, Mekanisme produk, Detail audiens, Satu aksi utama.
BERLAKU UNTUK
Judul, Tombol, Label, Pesan error, Empty state, Teks bantuan, Tautan navigasi, Aksi formulir, Pesan status, Pesan konfirmasi.
12 · UJI DIRI
Enam sumbu, skor 1 sampai 5, nilai di bawah 3 direvisi
1 / 6
Filosofi
Ada ide yang bisa dikenali? Halaman masih dikenali tanpa nama merek?
2 / 6
Hierarki
Tipografi dan spasi menuntun mata tanpa dekorasi?
3 / 6
Eksekusi
Token terkunci? Kontras cukup? Layout bekerja di ponsel dan desktop?
4 / 6
Spesifisitas
Copy memakai nama, angka, tempat, dan mekanisme?
5 / 6
Pengendalian
Aksen di bawah 3%? Maksimal tiga font? Maksimal tiga micro-interaction?
6 / 6
Variasi
Struktur menghindari pola hero, tiga fitur, CTA, footer?
Skor 1 sampai 5 per sumbu. Nilai di bawah 3 pada sumbu mana pun berarti revisi sebelum dikirim.
13 · GLOSARIUM
Istilah yang dipakai di referensi ini
- AI slop
- Desain atau tulisan rapi tetapi generik, bisa dipindah ke merek lain tanpa diubah.
- Token
- Nilai desain bernama: warna, font, radius, spasi.
- Masthead
- Kepala halaman gaya media cetak: baris meta, wordmark, indeks.
- Kolofon
- Catatan pendek di akhir halaman: nama, kontak, font yang dipakai.
- Hairline
- Garis setebal 1px dengan opasitas rendah.
- Uji portabilitas
- Cek apakah kalimat bisa dipindah ke produk lain tanpa diubah. Jika bisa, kalimat itu pengisi.
- Skala 1,25
- Tiap ukuran huruf 1,25 kali ukuran sebelumnya: 16, 20, 25, 31, 39.
- Keluaran
- Bentuk yang diminta pengguna: website, PDF, undangan, poster, dan sejenisnya. Jangan ditebak jika belum disebut.
- Pilihan kombinasi
- Kombinasi warna dan font yang ditawarkan sesuai konteks. Tidak ada kombinasi default; pengguna memilih satu dari maksimal tiga opsi.
- Viewport
- Ukuran dan konteks output: website, cetak, atau media sosial.
- Aset
- Ikon CDN, SVG siap pakai, dan gambar yang digenerate hanya jika dibutuhkan.
14 · CONTOH DARI SHOWCASE
Aura Architecture Studio
DATA SHOWCASE
- JENIS
- company profile
- TOPIK
- studio arsitektur
- AGEN
- Google Gemini · Gemini 3.6 Flash
PROMPT ASAL
Buat website mengenai website company profile tentang studio arsitektur, dengan panduan visual, copywriting, dan HTML/CSS desain untuk AI Agen berdasarkan lamandesain.com/ai
Buka halaman ini di /showcase15 · CONTOH KATALOG
Katalog tidak dimulai dari hero generik
BRIEF
“Buat katalog website untuk Toko Batik Laras, batik tulis dan cap dari Pekalongan dan Solo. Tampilkan 24 motif, harga Rp185.000 sampai Rp2.400.000, pengiriman ke seluruh Indonesia, dan pesan lewat WhatsApp.”
KEPUTUSAN WAJIB
- Kombinasi warna dan font dipilih setelah konteks katalog dikonfirmasi; tidak ada kombinasi default.
- Masthead memakai nama toko, kota asal, dan indeks Koleksi; bukan navigasi Beranda, Cerita Kami, Ulasan.
- Setiap produk menampilkan nama motif, teknik, asal, dan harga.
- Satu aksi utama: Pesan lewat WhatsApp. Tidak ada checkout, cart, atau testimoni karangan.
- Grid produk asimetris dengan harga rata kanan dalam JetBrains Mono; tanpa hero promosi generik.
POLA YANG DITOLAK
Katalog fashion generik dengan headline Elegansi Alami, badge musim, tiga kartu fitur, search/cart, dan CTA Jelajahi Koleksi.