Ubah Teks Menjadi Kode Berkualitas
Ini bukan sekadar laporan, ini adalah simulator. Jelajahi prinsip-prinsip inti dalam membuat prompt AI untuk pengembangan web. Klik, geser, dan lihat bagaimana setiap aturan membentuk hasil akhir sebuah halaman web yang responsif dan modern.
Fondasi Perintah: Prinsip Inti
Setiap prompt yang hebat dimulai dengan aturan dasar yang jelas. Ini adalah pilar yang tidak dapat ditawar untuk memastikan AI bekerja sebagai spesialis, bukan generalis.
Aktivasi Persona
Perintahkan AI untuk menjadi "Pengembang Front-End Senior". Ini mengalihkan model ke mode spesialis domain, memprioritaskan praktik terbaik pengembangan web modern.
Doktrin Mobile-First
Filosofi utama: desain untuk layar terkecil terlebih dahulu. Gaya untuk layar besar adalah 'peningkatan'. Ini menghasilkan performa lebih baik dan fokus pada konten inti.
Trilogi Desain Responsif
Terjemahkan teori ke praktik Tailwind: Grid Cair (`w-full`), Gambar Fleksibel (`h-auto`), dan Media Queries hanya melalui prefiks breakpoint (`md:`, `lg:`).
Visualisasi Kontrak Breakpoint
Tabel itu bagus, visualisasi lebih baik. Grafik ini menunjukkan aturan `min-width` dari setiap breakpoint Tailwind. Semakin besar layarnya, semakin banyak aturan yang bisa berlaku.
Simulator Gaya & Tipografi
Lihat langsung efek skala tipografi responsif. Geser slider di bawah untuk mensimulasikan perubahan lebar layar dan perhatikan bagaimana ukuran teks beradaptasi secara otomatis.
Ini adalah Judul Utama (h1)
Ini adalah Sub-Judul (h2)
Ini adalah teks paragraf standar. Perhatikan bagaimana ukuran font dan kenyamanan membacanya berubah pada layar yang lebih besar untuk meningkatkan pengalaman pengguna.
Konstruktor Komponen Interaktif
Pilih komponen dan lihat bagaimana aturan mobile-first diterapkan. Beralih antara tampilan 'Seluler' dan 'Desktop' untuk melihat perubahan tata letak secara langsung.
Logika Responsif: Hero
Pada layar kecil, konten ditumpuk untuk keterbacaan. Pada layar lebih besar, tata letak menjadi dua kolom untuk pemanfaatan ruang yang lebih baik.
Judul Menarik
Deskripsi singkat yang memikat.
Logika Responsif: Fitur
Pola grid responsif adalah teknik fundamental. Lihat bagaimana jumlah kolom berubah secara progresif dari 1, ke 2, hingga 3 berdasarkan lebar layar.
Fitur A
Deskripsi singkat.
Fitur B
Deskripsi singkat.
Fitur C
Deskripsi singkat.
Jaminan Kualitas Output
Terakhir, setiap prompt harus diakhiri dengan persyaratan output yang ketat untuk memastikan kode yang dihasilkan bersih, dapat dipelihara, dan sesuai standar.
Berkas HTML Tunggal
Tidak ada CSS atau JS eksternal. Semua harus mandiri dalam satu file.
Komentar Kode Wajib
Jelaskan logika responsif sebagai bukti pemahaman AI.
Kemurnian Kode
Dilarang keras menggunakan CSS kustom atau style sebaris.