Artikel ini bukan tutorial teori. Bukan juga artikel yang ngajarin “cara paling benar menurut buku”. Ini catatan eksekusi nyata waktu ngebangun template HTML dashboard POS dari nol, pakai pendekatan yang sekarang sering kejadian di dunia nyata: vibe coding.
Vibe coding di sini simpel. Kita punya tujuan, punya gambaran kasar, terus langsung gas. Pakai AI buat bantu ngerjain bagian yang ribet dan makan waktu, bukan buat mikir semua dari nol. Salah dikit? Benerin. Nggak cocok? Ulang. Jalan terus.
Studi kasus yang dipakai namanya Savoria POS. POS buat restoran dan bisnis F&B. Tapi penting diluruskan dari awal: di artikel ini kita nggak bikin aplikasi POS lengkap. Kita nggak bahas backend, nggak bahas flow kasir detail, dan nggak ngejar production system.
Fokusnya satu: template HTML dashboard.
Kenapa template? Karena di dunia nyata, dashboard admin yang rapi, masuk akal, dan gampang dipakai ulang itu jauh lebih kepake daripada aplikasi full yang super spesifik. Template bisa dipakai buat banyak project, bisa dikembangkan lagi, bahkan bisa dijual.
Di artikel ini, kita mau nunjukin alur kerja modern yang realistis.
- Pertama, gimana AI dipakai buat ngebut UI.
Bukan sekadar “prompt → jadi → beres”, tapi gimana kita ngajak AI kerja bareng. Kita yang nentuin halaman apa yang dibutuhkan, AI yang bantu ngehasilin struktur dan tampilan awalnya.
- Kedua, gimana template HTML-nya disusun rapi.
Hasil dari AI nggak kita biarin berantakan. Kita pecah per halaman, satu file satu fungsi, penamaan jelas, folder masuk akal. Targetnya bukan cuma bisa dibuka di browser, tapi enak dipakai ulang sama diri sendiri — atau orang lain.
- Ketiga, gimana hasil akhirnya bisa jadi produk digital.
Template ini bukan buat dipajang doang. Dengan sedikit sentuhan, dia bisa jadi template siap jual, starter kit, atau produk digital yang bisa dipasarkan. Dari sini mulai kelihatan: ngoding bukan cuma soal teknis, tapi juga soal nilai.
Jadi artikel ini bukan tentang “paling jago”, tapi tentang paling kejadian.
Cara kerja yang mungkin sering kamu lakuin juga: buka laptop, mikir sebentar, ngetik, lihat hasil, lanjut lagi. Pelan, tapi jalan.
Kalau kamu tipikal developer yang lebih suka praktik daripada baca teori panjang, artikel ini harusnya langsung nyambung.
1. Arah Project & Kenapa Fokus ke Template HTML
Konteks Project
Dia cuma dipakai sebagai konteks supaya jelas: dashboard seperti apa yang lagi dibangun.
Alasannya simpel. Kalau dari awal cuma bilang “bikin dashboard admin”, hasilnya sering ngambang. Bisa jadi dashboard apa aja, buat siapa aja, dan akhirnya terlalu generic.
Dengan ngunci ke konteks POS restoran dan bisnis F&B, arah desain dan struktur halaman jadi lebih masuk akal. Kita tahu siapa yang pakai, alur kerjanya seperti apa, dan halaman apa yang benar-benar dibutuhkan.
Target Sebenarnya
Target akhirnya sebenarnya sederhana: kita pengin punya sekumpulan template HTML dashboard admin yang terasa realistis.
Bukan template pajangan. Tapi template yang masih relevan kalau dipakai di project beneran.
Strukturnya ngikutin alur kerja admin atau owner. Layout‑nya siap pakai, bukan sekadar cantik tapi ribet dipakai. Dan halaman yang dibuat memang halaman yang kepakai di bisnis nyata — seperti produk, kategori, stok, transaksi, laporan, user, dan setting.
Kenapa Mulai dari Template HTML
Dari situ kelihatan kenapa kita fokus ke template HTML dulu.
Template seperti ini punya umur panjang. Bisa dipakai ulang di banyak project, gampang dikembangkan ke React, Vue, atau framework lain, dan bahkan bisa dijadikan produk digital yang dijual.
Jadi template ini bukan hasil akhir, tapi fondasi.
Peran Shaynaa di Project Ini
Di titik inilah Shaynaa mulai masuk.
Kita nggak pakai dia sebagai “mesin sulap”. Tapi sebagai AI co‑pilot buat UI.
Dia bantu ngebut di bagian visual dan struktur halaman. Sementara arah tetap kita yang pegang: halaman apa yang dibuat, isinya apa, dan kenapa halaman itu perlu ada.
Mindset dari Awal
Dari awal, mindset‑nya sudah jelas.
Bukan bikin POS.
Bukan ngejar fitur kompleks.
Tapi ngebangun fondasi template dashboard HTML yang rapi, masuk akal, dan punya nilai kalau suatu hari mau dipakai ulang atau dijual.
Kalau mau lanjut, next kita bisa bahas workflow awal: nyiapin prompt + mindset sebelum masuk ke Shaynaa, biar hasilnya nggak asal generate.
2. Perkenalan Singkat Shaynaa & Cara Kita Memakainya
Kalau ngomongin UI dashboard, sering banget kita ngetik hal-hal yang itu-itu terus: struktur layout, sidebar, tabel, header, button, dan seterusnya. Ngetik manual itu bukan salah, tapi kalau bisa dipercepat tanpa kehilangan kualitas, kenapa nggak?
Nah, di sinilah kita ngenalin Shaynaa — sebuah tool AI-powered web builder yang bisa dibilang asisten UI modern kamu. Cek aja langsung di https://shaynaaa.com.
Shaynaa bukan sekadar generik “bikin UI”. Dia dirancang khusus buat bantu developer, designer, dan creator menghasilkan template HTML dengan cepat hanya dari deskripsi teks (prompt). Kamu cukup jelasin kebutuhan halamannya: posisi elemen, jenis data yang tampil, fitur yang dibutuhin, dan gaya visualnya. Dari situ, Shaynaa akan ngeluarin HTML + Tailwind CSS yang siap dipakai di proyek nyata.
Sekarang bayangin ini:
- Kamu lagi buka VS Code,
- udah pegang outline halaman yang mau dibuat,
- tinggal tulis prompt pendek tapi jelas ke Shaynaa,
- klik generate,
- dan dalam hitungan detik halaman dashboard muncul.
Ini bukan magic. Ini kerja sama antara konteks yang kamu tahu sebagai developer sama kecepatan AI untuk ngejawab deskripsi kamu.
Tapi penting dibedain: artikel ini nggak pakai Shaynaa untuk sekali klik langsung beres semua halaman sekaligus. Kita pakai pendekatan yang lebih sehat dan bisa dipakai lagi di project lain:
- Satu halaman = satu prompt.
- Satu prompt = satu file HTML.
- Setiap hasil langsung kita simpan dan rapikan sejak awal.
Cara kerja ini bikin template yang kita bikin bukan sekadar demo UI, tapi aset digital yang bisa dipakai ulang, dikustom, atau bahkan dijual. Struktur filenya jadi masuk akal, mudah dibaca orang lain, dan scalable kalau nanti mau dikembangin jadi React, Next.js, atau integrasi backend.
Dan ini yang bikin Shaynaa menarik:
hasilnya bukan cuma prototype, tapi HTML yang bersih dan layak dikembangkan lebih lanjut.
Dengan pendekatan ini, kamu tetap pegang kendali. AI membantu eksekusi UI, kamu yang mengarahkan konteks dan logikanya.
3. Menentukan Struktur Halaman Sejak Awal
Sebelum buka Shaynaa dan mulai nulis prompt, ada satu hal yang nggak boleh dilewatin: kita harus tahu dulu halaman apa saja yang mau dibangun.
Bukan buat ribet, tapi justru biar nanti pas generate UI, kita nggak asal “bikin dashboard yang penting keliatan keren”. Kita mau dashboard yang masuk akal dipakai admin beneran.
Di tahap ini, kita posisikan diri sebagai admin POS. Orang yang tiap hari buka dashboard buat cek penjualan, ngatur produk, mantau stok, dan beresin transaksi. Dari sudut pandang itu, struktur halaman yang dipakai di Savoria POS jadi cukup jelas.
Halaman yang kita siapkan dari awal adalah:
- Dashboard Admin → ringkasan penjualan, transaksi hari ini, dan insight cepat.
- Halaman Produk → list produk, harga, status aktif, dan aksi edit.
- Halaman Kategori → pengelompokan produk biar rapi.
- Halaman Stok → pantau jumlah stok dan pergerakannya.
- Halaman Transaksi → riwayat transaksi dan detail penjualan.
- Halaman Laporan → rekap penjualan dalam periode tertentu.
- Halaman Customer / Pelanggan → data pelanggan yang pernah transaksi.
- Halaman Pengguna → manajemen admin dan kasir.
- Halaman Setting → konfigurasi dasar aplikasi.
Setiap halaman ini tidak digabung. Satu halaman, satu file HTML. Kenapa? Karena sejak awal target kita bukan demo satu halaman panjang, tapi kumpulan template dashboard yang rapi dan reusable.
Dengan struktur seperti ini, nanti saat masuk ke Shaynaa:
- kita tahu prompt-nya mau ngarah ke mana,
- layout yang dihasilkan lebih fokus,
- dan file HTML yang keluar langsung siap disusun sebagai produk.
Setelah struktur ini beres, barulah kita masuk ke bagian yang seru:
mulai generate halaman satu per satu pakai prompt ke Shaynaa — dimulai dari dashboard admin.
4. Setup Workspace & Folder Project
Setelah arah project dan struktur halaman sudah jelas, kita nggak nunda-nunda lagi. Langsung masuk ke praktik.
Buka VS Code. Nggak perlu mikir stack dulu, nggak perlu install macam-macam. Di tahap ini kita bahkan belum nyentuh React, belum backend, belum npm. Fokusnya satu: rapiin template HTML dari awal.
Langkah pertama, bikin satu folder khusus buat project template ini. Namanya bebas, tapi jelas. Misalnya:
savoria-pos-html-template
Folder ini isinya murni template, bukan aplikasi. Jadi mindset-nya bukan “nanti jalan pakai server apa”, tapi “file HTML ini enak nggak kalau dipakai ulang atau dijual”.
Di dalam folder utama, kita mulai susun struktur halaman. Setiap halaman punya folder sendiri. Contohnya:
/dashboard/products/categories/stock/transactions/reports/customers/users/settings
Masuk ke tiap folder itu, lalu buat satu file HTML kosong. Misalnya:
index.htmluntuk dashboardproducts.htmluntuk halaman produk- dan seterusnya
Isinya belum apa-apa, nggak masalah. Bahkan boleh cuma:
<!DOCTYP html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
</head>
<body>
<div>
<h1>Dashboard</h1>
</div>
</body>
</html>
Tujuan tahap ini bukan bikin UI, tapi menyiapkan panggungnya dulu. Supaya nanti setiap kali kita generate HTML dari Shaynaa, kita tahu:
- file-nya mau ditempel di mana
- halaman ini berdiri sendiri
- dan strukturnya konsisten dari awal
Dengan workspace seperti ini, workflow jadi enak. Generate satu halaman → paste HTML → simpan → lanjut halaman berikutnya. Nggak numpuk, nggak berantakan.
Kalau folder dan file dasar sudah siap, baru kita masuk ke bagian paling inti dari vibe coding-nya:
5. Generate Halaman Dashboard Admin dengan Shaynaa (Step by Step)
Oke, sekarang kita masuk ke praktik nyatanya. Di bagian ini, kita berhenti ngomong konsep dan langsung eksekusi.
Anggap aja kita lagi duduk bareng: laptop kebuka, browser kebuka, dan kita ngerjain satu halaman dashboard pertama yang bakal jadi pondasi halaman lain.
Step 1: Buka Shaynaa dan buat project baru
Pertama, buka https://shaynaaa.com lewat browser.
Di halaman utama, klik “Create New Project”. Project ini bakal jadi tempat semua halaman template kita nanti dikumpulin — mulai dari dashboard, produk, transaksi, sampai laporan.
Penting untuk bikin project dari awal, karena dari sini Shaynaa akan ngejaga konsistensi style dan struktur antar halaman. Anggap aja ini kayak satu folder besar yang rapi, bukan file lepas-lepas.
Step 2: Buat prompt untuk halaman dashboard
Nah, ini bagian yang paling krusial.
Prompt di Shaynaa itu ibarat briefing ke desainer. Bukan cuma nyuruh "bikin dashboard", tapi ngasih konteks lengkap: dashboard ini buat siapa, dipakai buat apa, dan informasi apa yang paling penting kelihatan.
Shaynaa juga nyediain beberapa tema profesional seperti Bandung, Jakarta, dan Jakarta Lite. Untuk project ini, kita pilih Bandung karena tampilannya clean, fleksibel, dan aman buat dashboard admin POS.
Contoh prompt untuk halaman dashboard admin POS:
Buat halaman dashboard admin untuk sistem POS restoran.
Ada sidebar kiri dengan menu: Dashboard, Produk, Kategori, Stok, Transaksi, Laporan, Customer, Pengguna, Setting.
Top bar sederhana dengan search dan notifikasi.
Bagian utama menampilkan beberapa card ringkasan: total transaksi hari ini, omzet, jumlah produk, stok rendah.
Di bawah card ada tabel transaksi terbaru dengan kolom: invoice, customer, total, status, tanggal.
UI clean, profesional, responsive, menggunakan warna netral.
Nggak perlu takut prompt-nya belum rapi atau bahasanya campur. Yang penting jelas konteksnya POS, jelas elemen utamanya, dan jelas gaya UI yang kita mau.
Tips penting: jangan cuma nulis "buat dashboard modern". Semakin spesifik konteks bisnisnya, biasanya hasilnya makin masuk akal.
Step 3: Generate halaman
Setelah prompt siap dan tema dipilih, klik tombol Generate.
Tunggu beberapa saat sampai AI selesai ngerjain halaman. Anggap hasil pertama ini sebagai draft awal. Wajar kalau ada bagian yang kepanjangan, kurang pas, atau terasa aneh.
Di tahap ini, tugas kita bukan nyari yang sempurna, tapi nyari struktur dasar yang sudah oke.
Step 4: Review hasil di Shaynaa
Begitu preview halaman muncul, sekarang waktunya ngecek secara cepat dan logis:
- Sidebar muncul dan menunya sesuai kebutuhan
- Card ringkasan kebaca dengan jelas
- Tabel transaksi ada dan kolomnya lengkap
- Layout keseluruhan terasa rapi dan profesional
Di tahap ini, jangan cuma lihat versi desktop. Manfaatkan fitur preview responsive di Shaynaa untuk ngecek tampilan di tablet (iPad) dan mobile. Pastikan sidebar masih usable, card tidak kepotong, dan tabel tetap terbaca meskipun layar lebih kecil.
Kalau ada yang kurang cocok, langsung pakai fitur Edit di Shaynaa. Kamu bisa ngubah teks, susunan elemen, atau komponen tertentu tanpa harus generate ulang dari awal.
Step 5 : Cek Layers & Project Files
Selain preview tampilan, Shaynaa juga kasih kamu akses ke Layers dan Project Files dari halaman yang baru saja di-generate.
Di panel Layers, kamu bisa lihat struktur UI secara hierarki: section, card, tabel, sampai komponen kecil di dalamnya. Ini ngebantu banget buat cepat paham halaman ini tersusun dari apa saja, tanpa harus baca kode dulu.
Sementara di Project Files, kamu bisa melihat daftar file yang sudah dibuat oleh Shaynaa untuk project ini. Setiap halaman yang kamu generate akan tercatat rapi, jadi kelihatan jelas mana dashboard, mana transaksi, mana halaman lain yang sudah atau belum dibuat.
Bagian ini penting buat:
- memastikan struktur halaman masuk akal
- ngecek konsistensi antar halaman
- dan ngejaga mindset “satu halaman, satu fungsi”
Dengan lihat Layers dan Project Files, kamu nggak cuma lihat UI-nya cantik atau tidak, tapi juga siap atau tidak untuk dijadikan template beneran.
Kalau strukturnya sudah oke, barulah lanjut ke edit visual atau ambil kodenya.
Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa
Setelah halaman muncul dan kamu sudah review, anggap hasil generate ini masih draft awal. Wajar kalau ada bagian yang kurang pas: teks kepanjangan, susunan card aneh, atau tabel terasa terlalu penuh.
Di titik ini, langsung masuk ke UI Edit Mode di Shaynaa.
Lewat mode edit ini, kamu bisa:
- ngubah teks dan label
- nyusun ulang elemen layout
- adjust card, tabel, button, dan spacing
- ngerapiin tampilan biar lebih masuk akal untuk POS
Semua perubahan langsung kelihatan di preview, jadi kamu bisa utak-atik sampai UI-nya terasa “hidup”, bukan sekadar hasil AI mentah.
Yang penting, kamu nggak perlu generate ulang dari awal. Edit saja yang kurang cocok, beresin di situ, baru lanjut.
Hasil edit ini tetap menghasilkan HTML + Tailwind CSS yang rapi, siap dipakai atau dikembangkan lebih lanjut di project kamu.
Kalau tampilan sudah oke dan konsisten, baru lanjut ke step berikutnya: ambil kodenya dan pindahkan ke VS Code.
Step 7: Salin HTML ke VS Code
Kalau hasilnya sudah cukup oke, copy seluruh HTML yang dihasilkan Shaynaa. Caranya kamu bisa klik button code di kanan atas layar, nanti akan menampilkan seluruh hasil codingan template untuk dashboard, kemudian bisa langsung copy code nya.
Buka VS Code, masuk ke folder project — misalnya /dashboard. Di dalam folder itu, buat file baru bernama dashboard.html, lalu paste seluruh HTML tadi.
Simpan file.
Langkah ini penting supaya dari awal setiap halaman punya file sendiri dan struktur project tetap konsisten saat nanti jumlah halamannya makin banyak.
Step 8: Jalankan di browser
Terakhir, buka file dashboard.html langsung di browser.
Cek lagi hasilnya:
- Sidebar tampil sesuai prompt
- Card summary kelihatan rapi
- Tabel transaksi kebaca dan nggak berantakan
- Layout tetap aman saat layar diperkecil
Kalau semua sudah oke, berarti satu milestone sudah kelar.
Dashboard admin pertama kita sudah jadi dalam bentuk template HTML.
Dari sini, halaman ini bisa dipakai ulang, dikembangkan ke halaman lain, atau dijadikan fondasi buat produk digital yang siap dijual.
6. Generate Halaman Produk
Setelah halaman dashboard beres, sekarang kita lanjut ke halaman data pertama yang beneran sering dipakai: halaman Produk.
Di titik ini, polanya sebenarnya sudah kebentuk. Kita nggak mulai dari nol lagi. Tinggal ngulang flow yang sama, tapi dengan konteks halaman yang berbeda.
Flow-nya simpel:
- satu prompt untuk satu halaman
- satu file HTML untuk satu fungsi
Nggak serakah, nggak digabung-gabung.
Justru di sini konsistensi mulai kelihatan.
Step 1: Buat halaman baru di project yang sama
Masuk lagi ke project Shaynaa yang sebelumnya sudah kita buat.
Pastikan masih pakai project yang sama dengan halaman dashboard. Tujuannya biar style, warna, dan komponen dasarnya tetap konsisten.
Di dalam project itu, buat halaman baru untuk Produk. Anggap aja ini lanjutan alami dari dashboard, bukan project terpisah.
Step 2: Siapin prompt khusus halaman Produk
Sekarang kita fokus ke konteks halaman Produk.
Ingat, di tahap ini kita nggak bikin semua halaman sekaligus. Kita cuma mikirin satu hal: kalau aku admin restoran, data produk apa aja yang perlu aku lihat?
Prompt di Shaynaa tetap kita perlakukan sebagai briefing.
Contoh prompt untuk halaman Produk:
Buat halaman admin untuk manajemen produk POS restoran.
Ada sidebar kiri dengan menu yang sama seperti dashboard.
Bagian utama menampilkan tabel daftar produk dengan kolom: nama produk, kategori, harga, stok, status.
Sediakan tombol tambah produk di bagian atas.
Tiap baris produk punya aksi edit dan hapus.
UI clean, konsisten dengan halaman dashboard, responsive, warna netral.
Nggak perlu mikirin backend atau validasi. Fokusnya cuma ke tampilan dan struktur data yang masuk akal.
Catatan penting: jangan kebanyakan request di satu prompt. Kalau mulai kepikiran kategori, diskon, atau varian, tahan dulu. Itu bisa jadi halaman atau step berikutnya.
Step 3: Generate halaman Produk
Setelah prompt siap, klik Generate.
Sama seperti dashboard, hasil pertama biasanya belum sempurna. Dan itu nggak masalah.
Yang kita cari di sini adalah:
- struktur tabel yang realistis
- penamaan kolom yang masuk akal
- layout yang konsisten dengan dashboard
Selama tiga hal itu aman, sisanya bisa dirapihin belakangan.
Step 4: Review hasil di Shaynaa
Begitu halaman Produk muncul di preview, lakukan quick check:
- Tabel produk tampil rapi
- Kolom sesuai kebutuhan bisnis
- Tombol tambah produk kelihatan jelas
- Aksi edit dan hapus ada dan kebaca
Di tahap ini, jangan cuma lihat versi desktop. Manfaatkan fitur preview responsive di Shaynaa untuk ngecek tampilan di tablet (iPad) dan mobile. Pastikan sidebar masih usable, card tidak kepotong, dan tabel tetap terbaca meskipun layar lebih kecil.
Kalau ada yang kurang pas, langsung pakai fitur Edit di Shaynaa. Di tahap ini, ngedit jauh lebih efisien daripada generate ulang dari nol.
Step 5 : Cek Layers & Project Files
Selain preview tampilan, Shaynaa juga kasih kamu akses ke Layers dan Project Files dari halaman yang baru saja di-generate.
Di panel Layers, kamu bisa lihat struktur UI secara hierarki: section, card, tabel, sampai komponen kecil di dalamnya. Ini ngebantu banget buat cepat paham halaman ini tersusun dari apa saja, tanpa harus baca kode dulu.
Sementara di Project Files, kamu bisa melihat daftar file yang sudah dibuat oleh Shaynaa untuk project ini. Setiap halaman yang kamu generate akan tercatat rapi, jadi kelihatan jelas mana dashboard, mana transaksi, mana halaman lain yang sudah atau belum dibuat.
Bagian ini penting buat:
- memastikan struktur halaman masuk akal
- ngecek konsistensi antar halaman
- dan ngejaga mindset “satu halaman, satu fungsi”
Dengan lihat Layers dan Project Files, kamu nggak cuma lihat UI-nya cantik atau tidak, tapi juga siap atau tidak untuk dijadikan template beneran.
Kalau strukturnya sudah oke, barulah lanjut ke edit visual atau ambil kodenya.
Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa
Setelah halaman muncul dan kamu sudah review, anggap hasil generate ini masih draft awal. Wajar kalau ada bagian yang kurang pas: teks kepanjangan, susunan card aneh, atau tabel terasa terlalu penuh.
Di titik ini, langsung masuk ke UI Edit Mode di Shaynaa.
Lewat mode edit ini, kamu bisa:
- ngubah teks dan label
- nyusun ulang elemen layout
- adjust card, tabel, button, dan spacing
- ngerapiin tampilan biar lebih masuk akal untuk POS
Semua perubahan langsung kelihatan di preview, jadi kamu bisa utak-atik sampai UI-nya terasa “hidup”, bukan sekadar hasil AI mentah.
Yang penting, kamu nggak perlu generate ulang dari awal. Edit saja yang kurang cocok, beresin di situ, baru lanjut.
Hasil edit ini tetap menghasilkan HTML + Tailwind CSS yang rapi, siap dipakai atau dikembangkan lebih lanjut di project kamu.
Kalau tampilan sudah oke dan konsisten, baru lanjut ke step berikutnya: ambil kodenya dan pindahkan ke VS Code.
Step 7: Salin HTML ke file produk
Kalau hasilnya sudah cukup oke, copy seluruh HTML yang dihasilkan Shaynaa. Caranya kamu bisa klik button code di kanan atas layar, nanti akan menampilkan seluruh hasil codingan template untuk dashboard, kemudian bisa langsung copy code nya.
Masuk ke VS Code, buka folder project, lalu buat file baru bernama products.html.
Paste HTML-nya, lalu simpan.
Dengan pola satu file satu halaman seperti ini, project bakal tetap rapi meskipun nanti jumlah halamannya nambah banyak.
Step 8: Jalankan dan cek di browser
Buka products.html di browser.
Cek beberapa hal dasar:
- Layout konsisten dengan dashboard
- Tabel produk kebaca dengan jelas
- Tombol dan aksi kelihatan logis
- Tampilan tetap aman di berbagai ukuran layar
Kalau semua sudah oke, berarti satu halaman data berhasil kita tambahin ke template.
Halaman Produk ini nantinya bisa jadi blueprint buat halaman lain yang mirip — kategori, customer, atau stok.
Polanya sama. Konteksnya yang beda.
Dan di titik ini biasanya mulai kerasa: ngebangun template dashboard itu bukan soal cepat-cepat jadi, tapi soal rapi dan konsisten dari awal.
7. Generate Halaman Transaksi
Setelah dashboard dan halaman produk beres, sekarang kita masuk ke halaman yang biasanya paling "ramai": halaman Transaksi.
Di sistem POS, halaman ini hampir selalu jadi pusat aktivitas. Datanya banyak, statusnya macam-macam, dan biasanya dipakai buat ngecek hal-hal penting: transaksi berhasil atau tidak, sudah dibayar atau belum, sampai order mana yang perlu ditindaklanjuti.
Makanya, waktu bikin template halaman Transaksi, kita perlu sedikit lebih mikir. Bukan soal estetik doang, tapi soal logika dan kenyamanan dipakai.
Step 1: Tentukan peran halaman Transaksi
Sebelum nulis prompt, tahan dulu sebentar.
Tanya satu hal sederhana: halaman Transaksi ini dipakai buat apa?
Di konteks POS restoran, biasanya halaman ini dipakai untuk:
- melihat daftar transaksi yang sudah terjadi
- ngecek status pembayaran
- nyari transaksi tertentu (berdasarkan tanggal atau invoice)
- melakukan aksi ringan seperti lihat detail atau ubah status
Kita nggak lagi mikirin flow kasir real-time. Fokusnya tetap ke admin dashboard.
Dengan konteks ini, prompt yang kita tulis nanti jadi lebih terarah dan nggak kebanyakan permintaan.
Step 2: Siapin prompt halaman Transaksi
Sekarang baru kita masuk ke prompt.
Seperti halaman sebelumnya, prinsipnya tetap sama:
- satu prompt untuk satu halaman
- deskripsikan struktur, bukan logika backend
Contoh prompt untuk halaman Transaksi:
Buat halaman admin untuk daftar transaksi POS restoran.
Gunakan sidebar yang sama seperti halaman dashboard.
Bagian utama menampilkan tabel transaksi dengan kolom: invoice, tanggal, customer, metode pembayaran, total, status.
Sediakan filter sederhana berdasarkan tanggal dan status transaksi.
Setiap baris transaksi punya aksi lihat detail.
UI clean, profesional, konsisten dengan halaman lain, responsive, warna netral.
Di sini kita mulai mendeskripsikan hal-hal yang bikin halaman ini terasa "hidup":
- ada filter
- ada status
- ada aksi
Bukan cuma tabel kosong.
Step 3: Generate halaman Transaksi
Setelah prompt siap, klik Generate.
Seperti biasa, jangan kaget kalau hasil pertama belum rapi sempurna. Halaman Transaksi memang cenderung lebih padat, jadi kadang spacing atau urutannya perlu dirapihin.
Yang penting, struktur besarnya sudah ada:
- tabel transaksi
- kolom-kolom masuk akal
- filter tampil di area yang logis
Kalau itu sudah kebentuk, sisanya tinggal dirapihin.
Step 4: Review UI dan logika tampilan
Begitu preview muncul, sekarang waktunya ngecek sambil mikir sebagai admin:
- Apakah tabelnya kebaca?
- Status transaksi kelihatan jelas atau membingungkan?
- Filter gampang dipakai atau malah ganggu?
- Aksi transaksi kebaca tanpa harus mikir lama?
Tujuan kita bukan bikin UI paling canggih, tapi UI yang masuk akal dan terasa dipakai setiap hari.
Kalau ada bagian yang terasa terlalu kosong, jangan ragu tambahin elemen kecil seperti badge status atau label tanggal lewat fitur Edit di Shaynaa.
Step 5: Pastikan halaman terasa "hidup"
Satu kesalahan umum di template admin adalah tampilannya terlalu statis.
Semua tabel kosong, nggak ada variasi status, nggak ada penanda apa-apa. Hasilnya kelihatan seperti mockup, bukan dashboard beneran.
Di halaman Transaksi, justru sebaliknya.
Pastikan:
- status transaksi punya variasi (berhasil, pending, gagal)
- nominal terlihat realistis
- tanggal dan invoice nggak semuanya sama
Detail kecil ini bikin template terasa jauh lebih nyata, walaupun isinya masih dummy.
Step 6: Salin HTML ke file transaksi
Kalau hasilnya sudah cukup oke, copy seluruh HTML dari Shaynaa.
Buka VS Code, masuk ke folder project, lalu buat file baru bernama transactions.html.
Paste HTML-nya dan simpan.
Dengan pola satu halaman satu file, halaman Transaksi ini tetap berdiri sendiri tapi konsisten dengan halaman lain.
Step 7: Cek di browser
Buka transactions.html di browser.
Cek ulang dari sudut pandang pengguna:
- tabel transaksi kebaca dengan nyaman
- filter dan status terlihat jelas
- layout tetap rapi di layar kecil
Kalau semua aman, berarti halaman Transaksi sudah siap jadi bagian dari template.
Hasil akhirnya tetap sama seperti halaman lain:
HTML + Tailwind hasil generate Shaynaa, tapi dengan struktur dan UI yang masuk akal untuk sistem POS.
Dan di titik ini biasanya mulai kerasa kenapa kita bangun template pelan-pelan per halaman.
Karena halaman seperti Transaksi nggak bisa asal generate. Dia butuh konteks, logika tampilan, dan sedikit empati ke user yang bakal pakai tiap hari.
8. Melengkapi Halaman Lain dengan Pola yang Sama
Di titik ini, sebenarnya kita sudah punya pola kerja yang jelas.
Kita sudah mempraktikkan langsung generate tiga halaman penting menggunakan Shaynaa:
- Dashboard → buat overview dan arah utama
- Produk → halaman data yang rapi dan operasional
- Transaksi → halaman paling kompleks dan paling "hidup"
Tiga halaman ini bukan dipilih sembarangan. Justru karena dari sini, pola desain dan struktur dashboard sudah kebentuk dengan cukup solid.
Halaman yang Sudah dan Akan Dibangun
Secara struktur, project kita kurang lebih akan punya halaman-halaman seperti ini:
/dashboard/products/categories/stock/transactions
Dan biasanya masih ditambah lagi dengan halaman seperti laporan, customer, user, dan setting.
Kabar baiknya: kita nggak perlu nemuin cara baru lagi.
Polanya Tetap Sama
Untuk halaman-halaman sisanya, pendekatan yang dipakai persis sama seperti sebelumnya.
Satu halaman, satu prompt.
Satu halaman, satu file HTML.
Yang berubah cuma konteks datanya.
Misalnya:
- Halaman Kategori → fokus ke tabel kategori dan relasinya ke produk
- Halaman Stok → fokus ke angka, status, dan peringatan stok rendah
- Halaman Laporan → fokus ke ringkasan, periode waktu, dan tabel summary
- Halaman Customer / User → fokus ke data user dan aksi dasar
- Halaman Setting → fokus ke form dan pengaturan
Struktur kerjanya tetap sama seperti dashboard, produk, dan transaksi.
Yang Harus Dijaga: Konsistensi
Di tahap ini, tantangan utamanya bukan lagi "gimana cara generate", tapi gimana caranya konsisten.
Beberapa hal yang perlu dijaga di semua halaman:
- Sidebar tetap sama, urutan menu konsisten
- Header / top bar nggak berubah-ubah
- Spacing dan typography terasa satu gaya
- Komponen UI terasa satu keluarga
Tujuannya sederhana.
Supaya semua halaman ini terasa sebagai satu produk utuh, bukan kumpulan halaman acak hasil generate AI.
Kapan Perlu Generate, Kapan Cukup Edit
Di titik ini juga, kamu nggak harus selalu klik Generate dari nol.
Untuk halaman yang strukturnya mirip:
- kadang cukup copy prompt halaman sebelumnya
- ubah konteksnya sedikit
- lalu edit hasilnya langsung di Shaynaa
Pendekatan ini jauh lebih cepat dan lebih konsisten dibanding bikin semuanya dari awal.
10. Dari Template HTML ke Produk Digital
Sebelum ngomongin langkah selanjutnya, ada satu tahap penting yang nggak boleh dilewatin: finishing.
Di titik ini, semua halaman utama sudah ada. Dashboard, produk, transaksi, dan halaman pendukung lainnya sudah terbentuk sebagai template HTML. Tapi pekerjaan kita belum benar-benar selesai.
Sekarang waktunya ngerapihin.
Rapikan Struktur dan Detail Kecil
Pertama, pastikan semua file sudah ada di tempat yang benar.
- satu halaman, satu file HTML
- penamaan file konsisten
- struktur folder jelas
Hal-hal kecil seperti ini kelihatannya sepele, tapi bakal kerasa banget manfaatnya kalau template ini dipakai ulang atau dikembangkan lebih jauh.
Setelah itu, cek detail UI:
- jarak antar elemen konsisten
- ukuran font nggak loncat-loncat
- warna dan komponen terasa satu gaya
Targetnya bukan sempurna, tapi rapi dan masuk akal.
Cek Satu per Satu di Browser
Langkah berikutnya: buka semua halaman di browser, satu per satu.
Jangan cuma percaya preview di Shaynaa atau editor.
Cek langsung:
- apakah sidebar konsisten di semua halaman
- apakah link menu masuk ke halaman yang benar
- apakah layout tetap aman di ukuran layar berbeda
Di tahap ini biasanya kelihatan hal-hal kecil yang terlewat. Spacing agak aneh, tabel terlalu padat, atau komponen yang terasa nggak sejajar.
Itu normal.
Justru di sinilah finishing beneran terjadi.
Anggap Seperti Produk, Bukan Project
Coba ubah mindset sedikit.
Anggap template ini bukan project latihan, tapi produk yang mau dipakai orang lain.
Dengan mindset itu, kamu bakal lebih peka ke:
- pengalaman baca data
- kenyamanan navigasi
- konsistensi tampilan
Finishing bukan soal nambah fitur. Tapi soal bikin semuanya terasa pantas buat dipakai.
Setelah Finishing, Baru Lanjut ke Tahap Berikutnya
Kalau semua halaman sudah rapi dan lolos pengecekan di browser, barulah kita bisa lanjut ke langkah berikutnya.
Di titik itu, template ini sudah:
- stabil secara struktur
- konsisten secara visual
- siap dikembangkan lebih jauh
Entah mau dikonversi ke framework lain, ditambah dokumentasi, atau langsung dikemas sebagai produk digital.
Finishing ini memang kelihatan sunyi. Nggak sekeren generate halaman baru.
Tapi justru di sinilah perbedaan antara template yang asal jadi dan template yang beneran siap dipakai.
11. Tempat Menjual Template HTML
Setelah template selesai dan sudah rapi, pertanyaan berikutnya biasanya sederhana:
template ini mau dijual di mana?
Jawabannya: ada cukup banyak opsi. Dan semuanya realistis.
Yang penting dipahami dari awal, template HTML itu punya market nyata. Bukan cuma buat dipajang di GitHub atau jadi portfolio doang.
Marketplace Template
Marketplace template adalah jalur paling umum dan paling gampang dijangkau kalau tujuan kamu memang menjual template web. Audience di sini sudah jelas: developer, designer, agency, dan product builder yang memang datang untuk cari template siap pakai.
Di bawah ini beberapa marketplace yang paling relevan untuk template HTML dashboard, lengkap dengan gambaran cara kerja, jenis produk, serta plus-minusnya.
1. ThemeForest (Envato Market)
Website: https://themeforest.net
ThemeForest adalah salah satu marketplace template terbesar di dunia. Fokus utamanya ada di template web: HTML template, admin dashboard, landing page, hingga theme CMS.
Cara pakainya cukup standar: kamu daftar sebagai author, upload template, lengkapi dokumentasi dan demo, lalu submit untuk direview. Setelah lolos review, template kamu akan tayang dan bisa dibeli oleh user di seluruh dunia.
Yang bisa dijual di sini:
- HTML admin dashboard
- dashboard POS, SaaS, internal tools
- UI template berbasis web
Kelebihan:
- traffic besar dan stabil
- pembeli sudah terbiasa bayar template
- cocok untuk produk yang serius dan rapi
Kekurangan:
- proses review cukup ketat
- ada potongan platform
- persaingan tinggi, terutama di kategori populer
3. Creative Market
Website: https://creativemarket.com
Creative Market lebih dekat ke dunia produk digital kreatif. Audience-nya banyak datang dari kalangan designer dan indie creator.
Template HTML dashboard bisa masuk kategori UI Templates. Di sini visual, konsistensi UI, dan presentasi produk jadi faktor penting.
Cara pakainya mirip marketplace pada umumnya: upload produk, buat halaman showcase, dan atur harga. Review-nya ada, tapi biasanya tidak seketat ThemeForest.
Yang bisa dijual:
- UI dashboard template
- HTML template dengan fokus desain
- bundle UI (HTML + aset visual)
Kelebihan:
- branding produk lebih fleksibel
- cocok untuk template dengan visual kuat
- audience kreatif
Kekurangan:
- market developer tidak sebesar ThemeForest
- pembeli kadang lebih fokus ke desain daripada struktur kode
3. Envato Elements
Website: https://elements.envato.com
Envato Elements masih satu ekosistem dengan ThemeForest, tapi modelnya berbeda. Di sini pengguna berlangganan, bukan beli satuan.
Artinya, produk kamu akan di-download berkali-kali oleh subscriber, dan kamu dibayar berdasarkan sistem revenue share.
Yang bisa dijual:
- HTML template
- admin dashboard
- aset pendukung (komponen, UI block)
Kelebihan:
- potensi exposure tinggi
- cocok untuk template yang reusable
- tidak perlu mikir harga satuan
Kekurangan:
- kontrol pricing terbatas
- pendapatan tergantung sistem pembagian
Platform Produk Digital
Kalau kamu nggak mau ribet dengan proses kurasi dan review ala marketplace template, platform produk digital adalah jalur yang jauh lebih fleksibel.
Di sini kamu jual langsung ke pembeli. Kamu yang pegang kendali penuh: harga, isi produk, cara packaging, sampai bagaimana produk itu dipresentasikan. Cocok banget buat kamu yang mau pelan-pelan bangun produk dan personal brand.
Berikut beberapa platform produk digital yang paling sering dipakai untuk jual template HTML.
1. Gumroad
Website: https://gumroad.com
Gumroad adalah salah satu platform produk digital paling populer dan paling gampang dipakai.
Cara kerjanya simpel: upload file (misalnya ZIP template HTML), buat halaman produk, tentukan harga, lalu share link-nya. Semua urusan pembayaran, file delivery, dan email ke pembeli sudah diurus.
Yang bisa dijual:
- template HTML dashboard
- bundle (HTML + dokumentasi)
- starter kit frontend
Kelebihan:
- setup cepat
- nggak ada review ketat
- cocok buat validasi market
Kekurangan:
- traffic tergantung promosi sendiri
- tampilan halaman produk terbatas
2. Paddle
Website: https://www.paddle.com
Paddle lebih dikenal sebagai platform billing dan payment untuk software, tapi tetap bisa dipakai untuk jual produk digital.
Biasanya dipakai kalau produk sudah lebih serius dan siap scale. Paddle mengurus pembayaran, pajak, dan compliance.
Yang bisa dijual:
- template HTML
- starter kit
- produk digital untuk bisnis
Kelebihan:
- urusan payment dan pajak rapi
- cocok untuk produk jangka panjang
Kekurangan:
- setup cukup berat
- kurang ramah untuk pemula
3. Lynk.id
Website: https://link.id
Link.id cukup populer di Indonesia sebagai platform link-in-bio yang sudah terintegrasi dengan pembayaran.
Pendekatannya simpel: satu halaman berisi link produk, dan pembeli bisa langsung checkout. Cocok kalau audience kamu banyak datang dari Instagram, TikTok, atau Twitter.
Yang bisa dijual:
- template HTML
- produk digital sederhana
- bundle file
Kelebihan:
- gampang dipakai
- cocok untuk market lokal
- setup cepat
Kekurangan:
- fitur terbatas untuk produk kompleks
- kurang cocok untuk scale besar
Website Pribadi
Opsi lain yang sering diremehkan tapi sebenarnya sangat kuat adalah menjual template langsung dari website pribadi.
Di pendekatan ini, website kamu berfungsi bukan cuma sebagai tempat transaksi, tapi juga sebagai:
- halaman landing produk
- demo interaktif template
- showcase untuk nunjukin kualitas UI dan struktur kode
Biasanya alurnya cukup simpel. Kamu bikin satu halaman khusus yang menjelaskan template: ini template apa, cocok dipakai untuk apa, dan apa saja halaman yang tersedia. Dari situ, pengunjung bisa langsung melihat demo dan memahami value-nya.
Untuk pembelian, kamu bebas memilih jalur:
- diarahkan ke payment gateway
- dihubungkan ke platform produk digital (Gumroad, Lemon Squeezy, dll)
- atau pakai sistem checkout sederhana buatan sendiri
Kelebihan terbesar dari pendekatan ini bukan cuma soal jualan. Dengan website sendiri, kamu punya kontrol penuh atas branding, storytelling, dan positioning produk. Template nggak cuma terlihat sebagai "file HTML", tapi sebagai produk yang serius dan punya identitas.
Pendekatan ini cocok kalau kamu ingin membangun produk jangka panjang dan nggak bergantung sepenuhnya pada platform pihak ketiga.
12. Strategi Promosi yang Masuk Akal
Setelah template selesai dan sudah di-upload ke platform penjualan, satu hal yang tidak bisa dihindari adalah ini: tanpa promosi, produk hampir pasti sepi. Bukan karena templatenya jelek, tapi karena memang tidak ada yang tahu.
Di bagian ini kita tidak bahas teori marketing ribet atau istilah growth yang njelimet. Fokusnya ke pendekatan yang realistis, bisa dikerjakan oleh developer atau designer sendirian, dan relevan untuk jualan template HTML.
Intinya: kita bikin produk sambil dipamerin prosesnya, bukan nunggu produk sempurna dulu baru promosi.
Mulai dari Niche yang Masuk Akal
Sebelum mikirin platform promosi, langkah paling penting justru menentukan niche. Niche ini bukan soal gaya desain, tapi soal siapa yang paling mungkin butuh template kamu.
Misalnya:
- template dashboard POS → targetnya owner bisnis kecil, developer POS, atau agency
- admin dashboard SaaS → targetnya indie hacker dan startup
- dashboard internal → targetnya developer dan tech team
Cara paling simpel cari niche:
- lihat template yang kamu buat, itu dipakai buat siapa
- lihat marketplace, template apa yang sering laku
- lihat komentar atau review produk serupa
Kalau niche sudah jelas, konten promosi jadi jauh lebih fokus dan tidak terasa random.
TikTok: Build in Public, Bukan Jualan
TikTok adalah platform paling cepat buat dapet exposure, bahkan kalau akun masih nol. Tapi kuncinya bukan hard selling.
Cara kerja TikTok itu sederhana: video pendek, hook cepat, dan ada proses yang bisa diikuti.
Pendekatan yang masuk akal:
- rekam proses bikin template (sidebar, tabel, card, dll)
- tunjukkan before–after layout
- ceritakan problem kecil saat ngoding atau ngerapihin UI
Contoh konten yang bisa konsisten FYP:
- "Bikin dashboard POS dari nol – part 1"
- "Kenapa tabel transaksi ini kelihatan lebih realistis"
- "3 kesalahan UI dashboard yang sering kejadian"
Fokus ke proses, bukan hasil akhir. Justru proses itu yang bikin orang betah nonton dan follow.
Instagram: Showcase yang Rapi dan Konsisten
Instagram lebih cocok untuk menunjukkan hasil akhir, bukan proses panjang.
Di sini orang datang buat lihat visual. Jadi pastikan tampilan template kamu memang enak dilihat.
Pendekatan yang bisa dipakai:
- post screenshot dashboard yang sudah rapi
- carousel yang jelasin bagian-bagian UI
- short reel demo klik-klik halaman
Konten Instagram sebaiknya konsisten secara visual:
- warna seragam
- font konsisten
- tone profesional
Instagram ini kuat untuk membangun trust dan branding, bukan traffic instan.
LinkedIn: Cerita di Balik Produk
LinkedIn sering diremehkan, padahal untuk produk seperti template dashboard, ini platform yang relevan banget.
Audience di LinkedIn:
- developer
- product builder
- founder
- agency
Pendekatan kontennya bukan pamer, tapi cerita:
- kenapa kamu bikin template ini
- problem apa yang sering kamu lihat di dashboard klien
- pelajaran teknis dari ngerjain template
Post yang perform biasanya:
- cerita jujur
- ada insight praktis
- tidak terlalu jualan
Di akhir post, baru sisipkan: "templatenya aku jual, link di bio / comment".
Video Demo Singkat: Senjata Universal
Selain konten platform, kamu juga perlu video demo singkat.
Video ini bisa dipakai di:
- halaman marketplace
- Gumroad / Lemon Squeezy
- website pribadi
- media sosial
Isinya simpel:
- buka dashboard
- scroll halaman
- klik menu
- tunjukkan tabel dan card
Durasi 30–60 detik sudah cukup. Yang penting, orang bisa kebayang templatenya dipakai buat apa.
Kuncinya: Konsisten, Bukan Viral Sekali
Tujuan strategi ini bukan viral satu kali, tapi:
- orang kenal kamu sebagai pembuat template
- orang percaya sama kualitas kerja kamu
- orang pelan-pelan tertarik beli
Kalau template bagus dan konten jujur, promosi akan terasa natural.
Template bagus + promosi masuk akal = produk beneran, bukan sekadar file HTML.
13. Penutup
Lewat studi kasus Savoria POS, kita sebenarnya belajar hal yang lebih besar daripada sekadar bikin dashboard admin.
Kita lihat sendiri bahwa:
- AI bisa jadi partner kerja yang bikin eksekusi UI jauh lebih cepat
- template HTML masih sangat relevan dan punya nilai nyata
- dan vibe coding itu bukan asal gas, tapi cara kerja yang adaptif dan realistis
Artikel ini memang pakai Shaynaa sebagai alat bantu, tapi poin utamanya bukan di tools. Poin utamanya ada di cara berpikir developer modern: mulai dari yang ada, bangun pelan-pelan, rapiin struktur, lalu mikir “ini bisa jadi apa ke depannya?”
Kalau kamu tipe developer yang lebih suka praktik daripada teori, lebih peduli ke hasil daripada debat, dan pengin ngoding yang ada lanjutannya — pendekatan ini sangat mungkin buat kamu.
Pada akhirnya, ngoding itu bukan cuma soal bikin sesuatu jalan, tapi bikin sesuatu berguna, dipakai, dan kalau bisa… dibayar.
Dan semua itu bisa dimulai dari satu template HTML yang kamu bangun hari ini.
