Eksperimen: Bisakah AI (ChatGPT/Claude) Membuat Kode HTML/CSS Rapi dari Desain Figma Saya?

Ini adalah "cawan suci" yang diimpikan setiap desainer: mendesain layout cantik di Figma, menekan satu tombol, dan mendapatkan kode HTML/CSS yang bersih, responsif, dan siap-produksi.

Selama bertahun-tahun, plugin "design-to-code" selalu gagal. Mereka menghasilkan kode yang "bengkak", kaku, dan penuh dengan position: absolute;— mimpi buruk untuk di-maintain.

Tapi sekarang, kita punya LLM (Large Language Models) seperti ChatGPT (GPT-4o) dan Claude. Mereka mengerti konteks. Apakah mereka bisa melakukan apa yang gagal dilakukan oleh plugin?

Saya skeptis. Jadi, saya melakukan eksperimen. Saya membuat desain sederhana di Figma, meminta AI untuk membuat kodenya, dan kemudian saya (sebagai desainer dan developer) akan me-review kode itu secara brutal.

Apakah AI ini benar-benar membantu, atau hanya "mainan" yang terlihat keren?

Langkah 1: Desain (Subjek Tes)

Untuk tes yang adil, saya tidak akan membuat homepage 5-halaman. Saya akan membuat satu komponen yang umum: sebuah "Kartu Fitur" (Feature Card).

Desain ini memiliki elemen-elemen kunci yang harus dipahami oleh AI:

Layout vertikal (Flexbox atau Grid).
Sebuah ikon.
Sebuah Judul (Headline).
Teks paragraf.
Sebuah tombol (CTA).

Inilah desain yang saya buat di Figma:

Desainnya sengaja dibuat bersih dan modern. Saya ingin melihat apakah AI bisa memahami padding, border-radius, dan font-weight.

Langkah 2: Prompt (Perintah ke AI)

Saya mengunggah screenshot desain Figma saya ke Claude 3.5 Sonnet (Anda bisa pakai GPT-4o juga) dan memberikan prompt yang sangat spesifik ini:

"Halo AI, tolong ubah screenshot desain kartu fitur dari Figma ini menjadi satu file HTML dan CSS.

Persyaratan Wajib:

Gunakan HTML semantik (misal: <h2> untuk judul, <p> untuk teks).

Gunakan Flexbox untuk layout internal.

Gunakan unit rem untuk font-size dan padding agar aksesibel.

Buat agar responsif di mobile (misal: kartu melebar 100% di layar kecil).

Tulis semua CSS di dalam tag <style> di file HTML yang sama agar mudah dites."

Memberi persyaratan adalah kunci. Saya tidak membiarkan AI menebak-nebak.

Langkah 3: Hasil Kode dari AI (Dalam 30 Detik)

AI menghasilkan kode berikut:

(Catatan: Ini adalah contoh hasil AI, hasil Anda mungkin sedikit berbeda)


<!-- HASIL KODE DARI AI -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kartu Fitur AI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }
        .feature-card {
            background-color: #ffffff;
            border-radius: 10px; /* AI menebak 10px */
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 2rem; /* Bagus! AI pakai 'rem' */
            width: 300px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .icon {
            font-size: 3rem; /* AI pakai 'rem' */
            color: #007bff;
            margin-bottom: 1rem;
        }
        .card-title {
            font-size: 1.5rem; /* AI pakai 'rem' */
            font-weight: bold;
            color: #333;
            margin-bottom: 0.5rem;
        }
        .card-text {
            font-size: 1rem;
            color: #666;
            margin-bottom: 1.5rem;
        }
        .cta-button {
            background-color: #007bff;
            color: white;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        .cta-button:hover {
            background-color: #0056b3;
        }
        
        /* Cek Responsif */
        @media (max-width: 600px) {
            .feature-card {
                width: 90%; /* Bagus! AI membuatnya responsif! */
            }
        }
    </style>
</head>
<body>
    <div class="feature-card">
        <!-- AI menggunakan <i> untuk ikon, ini bisa diganti SVG -->
        <i class="icon">🚀</i> 
        <div class="card-title">Fitur Cepat</div> <!-- Uh oh, ini harusnya <h2> -->
        <p class="card-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Proin vel leo vel.
        </p>
        <a href="#" class="cta-button">Pelajari Lebih Lanjut</a>
    </div>
</body>
</html>

Langkah 4: Review "Sintaks Logis" (Vonis dari Ahli)

Oke, sekarang mari kita bedah kode AI ini. Apakah rapi?

1. Akurasi Visual & CSS (Nilai: B+)

Yang Bagus: AI berhasil! Dia menggunakan display: flex dan flex-direction: column. Dia menggunakan rem untuk padding dan font-size seperti yang saya minta (dia mendengarkan!). Dia bahkan menambahkan efek transition pada tombol. Kualitas CSS-nya sangat baik.
Yang Kurang: Dia "menebak" lebar 300px. Desain saya mungkin 320px. Ini wajar, karena AI membaca screenshot.

2. HTML Semantik (Nilai: C)

Ini adalah kegagalan terbesarnya.
Masalah: AI membungkus judul ("Fitur Cepat") di dalam <div> dengan class .card-title. Ini buruk untuk SEO. Crawler Google tidak tahu bahwa ini adalah judul.
Perbaikan (Kode Saya): Ini seharusnya menggunakan tag <h2> (atau <h3>).
Kode AI: <div class="card-title">Fitur Cepat</div>

Kode Pro: <h2 class="card-title">Fitur Cepat</h2>
Ini adalah bukti bahwa AI fokus pada "tampilan" (visual), bukan "makna" (semantik).

3. Responsif (Nilai: A)

Saya sangat terkesan. AI mendengarkan perintah saya dan secara proaktif menambahkan media query @media (max-width: 600px) untuk membuat kartu itu width: 90% di layar kecil. Ini sempurna.

Langkah 5: Kode Final (AI + Perbaikan Manusia)

Berikut adalah kode AI yang telah saya perbaiki ("disentuh" oleh manusia) agar 100% siap produksi:


<!-- KODE FINAL SETELAH REVISI MANUSIA -->
<div class="feature-card">
    <div class="icon-wrapper">
        <!-- 
          Pakar Manusia: Mengganti <i> dengan SVG 
          agar lebih tajam dan terkontrol 
        -->
        <svg xmlns="..." ...> ... </svg>
    </div>
    
    <!-- 
      Pakar Manusia: Mengganti <div> dengan <h2> 
      untuk SEO dan Aksesibilitas 
    -->
    <h2 class="card-title">Fitur Cepat</h2>
    
    <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Proin vel leo vel.
    </p>
    <a href="#" class="cta-button">Pelajari Lebih Lanjut</a>
</div>

Kesimpulan: Jadi, Apa Vonisnya?

Bisakah AI (ChatGPT/Claude) Membuat Kode HTML/CSS Rapi?

Jawaban Mengejutkan: Ya, bisa. Jauh lebih baik dari yang saya kira.

TAPI...

AI saat ini berperan sebagai Junior Developer Magang (Intern) yang sangat cepat, tapi naif.

Ia akan melakukan apa yang Anda perintahkan dengan sangat baik (jika prompt Anda spesifik).
Ia akan menghemat 70% waktu coding "membosankan" Anda.
TAPI, ia tidak mengerti "MENGAPA". Ia tidak mengerti mengapa <h2> lebih baik dari <div> untuk SEO. Ia tidak mengerti mengapa SVG lebih baik dari ikon font untuk performa.

AI bukanlah pengganti Anda. AI adalah alat bantu (leverage).

AI akan membuat developer yang buruk menjadi lumayan. Tapi, ia akan membuat developer yang hebat (seperti Anda) menjadi 10x lebih cepat.

Apa pengalaman Anda mengubah desain ke kode pakai AI? Apakah hasilnya bagus atau berantakan? Bagikan di kolom komentar!

Sintaks Logis

Cari Blog Ini