Revamp Solecode Academy: Seni 'Menjinakkan' AI untuk Workflow yang Waras
Membangun kembali web kantor diawali dengan eksperimen menjinakkan AI. Lewat tiga tahapan strategis, saya mengubah kekacauan kode menjadi workflow yang rapi dan hasil yang konsisten.
Beberapa waktu lalu, saya dapat tugas untuk me-revamp website Solecode Academy. Desain di Figma sudah matang, tinggal pindah dari Framer ke hosting sendiri. Karena ingin cepat, saya coba pakai cara modern: pakai AI. Awalnya saya pakai Claude Code, tapi jujur, hasilnya sempat hancur dan gak sesuai sama ekspektasi.
Dari situ saya belajar: kita gak bisa menyuruh AI langsung jadi. Kita harus membuat AI-nya paham dulu apa yang ingin dicapai secara bertahap. Berbekal diskusi dengan ChatGPT, saya akhirnya menemukan workflow yang pas dengan membaginya menjadi tiga stage:
Stage 1: Key Mockup & Template HTML
Tahap awal adalah membuat template HTML untuk semua halaman. Saya kasih referensi figma dan live URL biar si Claude analyze dulu konteksnya. Di sini saya suruh dia bikin Claude.md dan DesignGuideline.md sebagai aturan baku biar visualnya konsisten dan gak berubah-ubah di tengah jalan.
Stage 2: Pemilihan Framework & CMS
Setelah template HTML beres, saya minta rekomendasi framework dan CMS yang paling cocok buat project ini. Di tahap ini juga saya mulai menentukan reusable component dan memastikan tampilan mobile-nya aman. Begitu semua kebentuk, langsung saya push ke GitLab sebagai checkpoint.
Stage 3: Fixing & Interaksi
Bagian akhir lebih ke fixing bug, refaktor kode, dan implementasi interaksi serta animasi dikit-dikit supaya webnya lebih hidup. Apapun perubahannya, saya selalu suruh AI untuk update document biar konsistensinya terjaga kalau nanti mau nambah halaman baru.
Figma yang Rapi adalah Kunci
Satu rahasia penting: rapikan Figma sebelum "disuapkan" ke AI. Pastikan pakai Auto Layout dan penamaan layer yang jelas. Saya juga ekspor variabel warna serta tipografi ke file JSON.
Kuncinya adalah kata "Implement" dan "Compare". Saya minta AI mengimplementasikan desain, lalu membandingkannya dengan URL live lama. Kalau ada yang kurang, minta dia nambahin satu-satu. Jangan sekaligus, biar dia gak bingung atau malah berimajinasi liar (AI drift).
Pelajaran Berharga
Sebagai orang yang punya background frontend, saya jadi paham kalau AI itu asisten, bukan pengganti sepenuhnya. Kita tetap harus memegang kendali arsitektur kodenya. Kalau dia mulai muter-muter gak jelas, di situlah peran kita untuk meluruskan sendiri.
Sekarang, webnya sudah aman dan siap dikembangkan lebih jauh. Ternyata, kolaborasi dengan AI itu memang soal sabar dan teliti melihat detail.
Selamat mencoba workflow gerilya ini!