Cara Cepat Membuat Komponen UI Menggunakan ChatGPT

Daftar Isi

  • Kenapa Perlu menggunakan ChatGPT?
  • Contoh Kasus: Komponen Tombol Tailwind
  • Hasil yang Bisa Kita Dapatkan:
  • Struktur Dasar Dokumen HTML:
  • Bagian <head> :
  • Bagian <body>:
  • Komponen Tombol:
  • Tips Prompting Buat Komponen
  • Reusable dan Modular
  • Review Manual Tetap Penting
  • Kesimpulan
Source : https://unsplash.com/photos/a-computer-chip-with-the-letter-a-on-top-of-it-eGGFZ5X2LnA

Sebagai seorang UI Engineer, kita sering kali dihadapkan pada kebutuhan untuk membuat berbagai komponen dengan tampilan dan logika yang serupa. Proses ini dapat memakan waktu, terutama jika setiap kali harus dimulai dari awal. Dalam konteks inilah ChatGPT dapat berperan sebagai asisten coding yang efisien dan membantu mempercepat alur kerja.

Kenapa Perlu menggunakan ChatGPT?

Meskipun kita sudah jago membuat komponen, tetap saja mengetik manual dari awal itu memakan waktu. Dengan ChatGPT, kita bisa malakukan beberapa yaitu :

  • Dapatkan draft awal kode komponen dalam hitungan detik
  • Fokus ke bagian logika atau desain yang lebih kompleks
  • Hemat waktu untuk pekerjaan berulang

Contoh Kasus: Komponen Tombol Tailwind

Misalnya kita ingin membuat tombol sederhana dengan Tailwind CSS. Cukup memberi perintah seperti ini ke ChatGPT :

Prompt:

Buatkan komponen tombol HTML dengan Tailwind CSS. Harus ada versi primary dan secondary, dengan hover effect dan disabled state.

Hasil yang Bisa Kita Dapatkan:

My First Search ChatGPT
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:bg-gray-400">
  Primary Button
</button>

<button class="bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 disabled:opacity-50">
  Secondary Button
</button>

Kita bisa langsung menggunakan, atau modifikasi agar lebih sesuai dengan guideline desain tim kita.

Selain itu kita juga bisa meletakkan kode tersebut di dalam kode yang telah ada seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CDN Tailwind -->
    <script src="<https://cdn.tailwindcss.com>"></script>
    <title>Sidebar Scroll Independent</title>
  </head>
  <body class="flex justify-center gap-4 py-32">

    <!-- dari sini -->
    <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:bg-gray-400">
      Primary Button
    </button>
    
    <button class="bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 disabled:opacity-50">
      Secondary Button
    </button>
    <!-- sampai sini -->

  </body>
</html>

Struktur Dasar Dokumen HTML:

  • <!DOCTYPE html>

Mendefinisikan bahwa dokumen ini adalah dokumen HTML5.

  • <html lang="en">

Elemen root HTML dengan atribut lang="en" yang menandakan bahasa utama adalah Inggris (baik untuk SEO dan screen reader).

Bagian <head>:

  • <meta charset="UTF-8" />

Menetapkan karakter encoding ke UTF-8 agar teks ditampilkan dengan benar, termasuk karakter internasional.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Mengatur tampilan agar responsive di perangkat mobile. width=device-width memastikan lebar sesuai perangkat, initial-scale=1.0 mengatur zoom awal.

  • <script src="https://cdn.tailwindcss.com"></script>

Memuat Tailwind CSS dari CDN. Ini memungkinkan kamu menggunakan class Tailwind langsung tanpa build proses.

  • <title>Sidebar Scroll Independent</title>

Judul halaman yang muncul di tab browser.

Bagian <body>:

  • <body class="flex justify-center gap-4 py-32">

flex: Mengatur layout menjadi flex container (horizontal secara default).
justify-center: Memposisikan isi secara horizontal di tengah.
gap-4: Memberi jarak antar elemen sebesar 1rem.
py-32: Padding atas dan bawah sebesar 8rem.

Komponen Tombol:

  • Tombol Primary
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:bg-gray-400">Primary Button</button>
  • bg-blue-600: Latar biru.
    text-white: Teks putih.
    px-4 py-2: Padding horizontal 1rem, vertikal 0.5rem.
    rounded: Sudut membulat.
    hover:bg-blue-700: Ubah warna saat di-hover.
    disabled:bg-gray-400: Jika tombol disabled, warnanya abu-abu.
  • Tombol Secondary 
<button class="bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 disabled:opacity-50">Secondary Button</button>
  • bg-white: Latar putih.
    border border-blue-600: Garis tepi biru.
    text-blue-600: Teks biru.
    hover:bg-blue-50: Hover menjadi biru muda.
    disabled:opacity-50: Jika disabled, tampilannya transparan 50%.

Akan menghasilkan :

My VSCode Result

Tips Prompting Buat Komponen

Supaya hasil dari ChatGPT makin relevan, maka kita perlu :

  • Jelaskan framework yang kita pakai: HTML, React, Vue, dsb.
  • Sebutkan library styling: Tailwind, Bootstrap, CSS Modules, dll.
  • Minta variasi (primary/secondary), ukuran, dan kondisi (hover, focus, disabled)
  • Sertakan spesifikasi desain jika ada

Contoh prompt yang lebih kompleks:

My Second Search ChatGPT

Buat komponen tombol React menggunakan Tailwind, dengan props variant (primary, secondary), dan event onClick.

Reusable dan Modular

Kalau kita menggunakan React atau Vue, minta ChatGPT buatkan komponen yang sudah siap menerima props, seperti kode dibawah ini :

const Button = ({ variant = 'primary', children, ...props }) => {
  const baseStyle = 'px-4 py-2 rounded';
  const styles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-white border border-blue-600 text-blue-600 hover:bg-blue-50',
  };
  return (
    <button className={`${baseStyle} ${styles[variant]}`} {...props}>
      {children}
    </button>
  );
};

Review Manual Tetap Penting

Walau sangat membantu, hasil dari ChatGPT tetap perlu kita review:

  • Pastikan aksesibilitas (contoh: penggunaan aria-label)
  • Periksa konsistensi dengan design system tim
  • Jangan langsung copy-paste ke production

Kesimpulan

ChatGPT bukan pengganti kita sebagai UI Engineer, tapi bisa jadi partner yang mempercepat workflow. Dengan prompt yang tepat, kita bisa menghemat banyak waktu dalam membuat komponen UI dari tombol sederhana sampai layout kompleks.

Apabila kalian ingin mempelajari AI lebih lanjut, di BuildWithAngga telah menyediakan kelas yang membahas tentang tentang AI, dimuali dari A hingga Z, sehingga membantu menambah pemahaman kalian di era zaman AI ini.

Terimakasih!