buatkan prompt:
pembuatan web site,
desain bagus,
iht pembuatan website / web apps menggunakan AI, prompt yang digunakan, dan cara melakukan preview secara online menggunakan tools netlify, vertex dll, serta penyimpanan hasil codingnya di github atau gitlab,
Berikut adalah kumpulan prompt yang bisa Anda gunakan. Saya membaginya menjadi dua kategori:
1. **Prompt untuk Trainer/Penyusun Materi:** Digunakan untuk meminta AI menyusun silabus atau modul ajar IHT (In-House Training).
2. **Prompt untuk Peserta (Live Demo):** Rangkaian prompt yang akan dipraktekkan langsung untuk membuat web, upload ke Git, dan deploy.
---
### Opsi 1: Prompt untuk Menyusun Materi/Silabus IHT (Untuk Trainer)
Copy dan paste prompt ini ke ChatGPT/Claude untuk membuatkan materi ajar lengkap.
> **Prompt:**
> "Bertindaklah sebagai Senior Full Stack Developer dan Instruktur Coding yang ahli. Saya ingin mengadakan In-House Training (IHT) tentang 'Cara Membuat Website Modern Menggunakan AI'.
>
> Tolong buatkan **Rencana Pembelajaran (Lesson Plan)** dan **Modul Singkat** dengan durasi 4 jam.
>
> **Fokus materi mencakup:**
> 1. **Konsep:** Cara kerja AI untuk coding (ChatGPT/Claude).
> 2. **Praktek Coding:** Prompt engineering untuk menghasilkan kode HTML, CSS (Tailwind), dan JS yang memiliki **desain UI/UX yang bagus, modern, dan responsif**.
> 3. **Manajemen Kode:** Cara menyimpan hasil coding ke GitHub/GitLab (termasuk perintah dasar git init, add, commit, push).
> 4. **Deployment:** Cara melakukan preview online/hosting gratis menggunakan Netlify atau Vercel.
>
> **Output yang diminta:**
> - Outline materi per sesi.
> - Daftar 'Prompt Ajaib' yang akan diberikan kepada peserta untuk copy-paste agar hasil websitenya langsung bagus.
> - Panduan langkah-demi-langkah (step-by-step guide) teknis untuk sesi GitHub dan Netlify yang mudah diikuti oleh pemula."
---
### Opsi 2: Rangkaian Prompt Praktek (Untuk Peserta)
Ini adalah prompt yang **digunakan langsung saat praktek** pembuatan website. Anda bisa memberikannya kepada peserta secara bertahap.
#### Tahap 1: Membuat Desain & Coding Website (Generate Code)
> **Prompt:**
> "Berperanlah sebagai UI/UX Designer dan Frontend Developer ahli.
>
> Buatkan saya kode lengkap (satu file index.html) untuk sebuah **Landing Page Portofolio Pribadi**.
>
> **Spesifikasi Desain:**
> - Gunakan **Tailwind CSS** via CDN untuk styling.
> - Desain harus **modern, minimalis, dan bersih**.
> - Gunakan skema warna gradasi yang elegan (contoh: biru ke ungu) dan tipografi modern (Google Fonts: Inter atau Poppins).
> - Harus **Mobile Responsive** sepenuhnya.
>
> **Struktur Konten:**
> 1. **Hero Section:** Foto profil (placeholder), Nama Besar, Tagline animasi ketik (typing effect), dan tombol Call to Action (CTA) yang menyala saat di-hover.
> 2. **About Section:** Card kaca (glassmorphism effect) berisi deskripsi diri.
> 3. **Skills Section:** Bar atau icon grid untuk skill (HTML, AI, Design).
> 4. **Contact Section:** Form sederhana dan link sosial media.
>
> Tolong berikan hanya satu blok kode HTML gabungan (HTML+CSS+JS) agar mudah saya copy-paste dan preview."
#### Tahap 2: Panduan Upload ke GitHub (Version Control)
Setelah peserta punya kodenya, minta mereka menggunakan prompt ini jika mereka lupa perintah Git:
> **Prompt:**
> "Saya sudah memiliki file `index.html` di komputer saya dalam folder bernama 'mysite'. Saya ingin menguploadnya ke repository **GitHub**.
>
> Tolong berikan panduan langkah demi langkah menggunakan terminal/command prompt untuk:
> 1. Inisialisasi git.
> 2. Menghubungkan ke repository baru (asumsikan URL repo: `https://github.com/username/repo-baru.git`).
> 3. Melakukan commit dan push pertama.
>
> Jelaskan setiap perintah (seperti `git init`, `git add .`, `git commit`) dengan bahasa yang sangat sederhana untuk pemula."
#### Tahap 3: Panduan Deploy ke Netlify/Vercel (Online Preview)
> **Prompt:**
> "Kode saya sekarang sudah ada di GitHub. Sekarang saya ingin website ini bisa diakses online oleh semua orang.
>
> Tolong jelaskan cara mendeploy repository GitHub tersebut menggunakan **Netlify** (atau **Vercel**).
>
> Jelaskan langkah-langkahnya:
> 1. Cara login/signup menggunakan akun GitHub.
> 2. Cara 'Import Project' dari Git.
> 3. Pengaturan dasar yang perlu diklik.
> 4. Bagaimana cara mendapatkan URL domainnya."
---
### Tips Tambahan untuk IHT Anda:
1. **Visualisasi:** Saat menggunakan prompt Tahap 1, sarankan peserta untuk meminta revisi ke AI jika hasilnya kurang bagus.
* *Contoh Prompt Revisi:* "Desainnya sudah oke, tapi tolong buat bagian 'Hero Section' lebih dramatis dengan background gelap dan partikel animasi."
2. **Tools:** Pastikan peserta sudah menginstall **VS Code** dan **Git SCM** sebelum acara dimulai.
3. **Vercel vs Netlify:** Untuk pemula, keduanya sangat mirip. Namun, **Vercel** sering dianggap sedikit lebih cepat integrasinya dengan GitHub, sedangkan **Netlify** memiliki fitur "Drag and Drop folder" yang sangat mudah jika peserta gagal menggunakan Git (sebagai opsi cadangan).
Apakah Anda ingin saya detailkan salah satu bagian di atas (misalnya spesifik ke kurikulum materinya)?
{
"meta": {
"language": "id",
"version": "1.0",
"description": "Kumpulan template prompt untuk IHT 'Cara Membuat Website Modern Menggunakan AI' dan template generik untuk mengubah materi menjadi presentasi. Seluruh prompt bisa diedit sesuai kebutuhan."
},
"prompts": {
"iht_trainer_silabus": {
"title": "Menyusun Silabus & Modul Singkat IHT",
"use_case": "Trainer meminta AI menyusun rencana pembelajaran, modul singkat, dan materi praktik untuk sebuah IHT.",
"placeholders": {
"{{topik_iht}}": "Judul/topik IHT, misalnya: Cara Membuat Website Modern Menggunakan AI",
"{{durasi_jam}}": "Durasi total pelatihan dalam jam, misalnya: 4",
"{{profil_peserta}}": "Profil dan level peserta, misalnya: Staf kantor non-IT, pemula dalam coding",
"{{tujuan_pelajaran}}": "Tujuan belajar utama yang ingin dicapai peserta",
"{{fokus_materi}}": "Daftar poin fokus materi. Contoh: Konsep AI untuk coding; Praktik coding HTML/CSS/JS dengan AI; Git dasar dan upload ke GitHub/GitLab; Deployment ke Netlify/Vercel."
},
"prompt_template": "Bertindaklah sebagai Senior Full Stack Developer sekaligus Instruktur Coding berpengalaman.\n\nSaya ingin mengadakan In-House Training (IHT) dengan topik: \"{{topik_iht}}\".\n\nDetail acaranya:\n- Durasi total: {{durasi_jam}} jam\n- Profil peserta: {{profil_peserta}}\n- Tujuan utama pelatihan: {{tujuan_pelajaran}}\n\nJika saya tidak menuliskan tujuan secara rinci, silakan usulkan tujuan belajar yang realistis berdasarkan topik di atas.\n\nFokus materi yang diinginkan (boleh Anda sempurnakan):\n{{fokus_materi}}\n\nTolong buatkan untuk saya:\n1) Rencana Pembelajaran (Lesson Plan) lengkap untuk {{durasi_jam}} jam, dibagi per sesi. Untuk tiap sesi, sertakan:\n - Judul sesi\n - Durasi (perkiraan menit)\n - Tujuan sesi\n - Ringkasan materi\n - Aktivitas/praktik yang dilakukan peserta\n\n2) Modul singkat per sesi yang berisi:\n - Penjelasan konsep kunci dengan bahasa sederhana\n - Contoh praktis (terutama kode jika relevan)\n - Latihan singkat atau tugas kecil untuk peserta\n\n3) Daftar \"prompt ajaib\" yang bisa diberikan ke peserta untuk di-copy-paste ke AI (ChatGPT/Claude) sehingga:\n - Peserta bisa langsung mendapatkan contoh kode yang rapi\n - Desain tampilan web terlihat modern dan responsif\n - Ada variasi prompt: untuk membuat halaman utama, menambah section, memperbaiki UI/UX, dan melakukan revisi desain\n\n4) Panduan teknis langkah demi langkah (step-by-step guide) yang sangat mudah diikuti pemula untuk:\n - Menggunakan AI (ChatGPT/Claude) untuk membantu menulis dan merevisi kode\n - Menyimpan kode ke GitHub atau GitLab (perintah dasar: git init, git status, git add, git commit, git branch, git remote, git push)\n - Melakukan deployment/preview online menggunakan Netlify atau Vercel.\n\n5) Outline presentasi/slide untuk trainer berdasarkan materi di atas, berisi:\n - Urutan slide dari awal sampai penutup\n - Judul setiap slide\n - 3–6 bullet point isi tiap slide\n - Penanda di slide mana saja dilakukan demo/praktik langsung.\n\nGunakan bahasa Indonesia yang jelas, runtut, dan ramah untuk pemula. Susun jawaban dengan struktur heading dan subheading agar mudah dipindahkan ke dokumen atau slide."
},
"iht_presentation_from_material": {
"title": "Mengubah Materi Menjadi Outline Presentasi Slide",
"use_case": "Trainer memasukkan materi mentah (teks) lalu AI menyusunnya menjadi struktur presentasi yang siap dipindahkan ke PowerPoint/Google Slides.",
"placeholders": {
"{{profil_peserta}}": "Profil dan level peserta, misalnya: Karyawan non-teknis, pemula total",
"{{jumlah_slide}}": "Perkiraan jumlah slide yang diinginkan, misalnya: 15",
"{{gaya_penyampaian}}": "Gaya penyampaian, misalnya: santai, formal, inspiratif",
"{{teks_materi}}": "Teks materi mentah yang ingin diubah menjadi presentasi"
},
"prompt_template": "Anda adalah Instructional Designer dan ahli membuat slide presentasi pelatihan.\n\nSaya akan memberikan materi pelatihan berupa teks mentah. Tugas Anda adalah mengubahnya menjadi outline presentasi yang siap dipindahkan ke PowerPoint atau Google Slides.\n\nParameter presentasi:\n- Profil peserta: {{profil_peserta}}\n- Perkiraan jumlah slide: {{jumlah_slide}} (boleh sedikit berbeda jika diperlukan agar alurnya tetap logis)\n- Gaya penyampaian: {{gaya_penyampaian}}\n\nTugas Anda:\n1. Ringkas materi menjadi poin-poin inti tanpa menghilangkan hal penting.\n2. Susun struktur presentasi dengan alur yang jelas: pembuka, isi utama (dibagi beberapa bagian), rangkuman, dan penutup.\n3. Untuk setiap slide, berikan:\n - Nomor slide\n - Judul slide\n - 3–6 bullet point isi slide\n - (Opsional) Catatan visual singkat: ide ilustrasi/ikon/diagram yang cocok.\n\nFormat output yang saya inginkan:\nSlide 1:\nJudul: ...\nIsi:\n- ...\n- ...\nCatatan visual: ...\n\nSlide 2:\nJudul: ...\nIsi:\n- ...\n- ...\nCatatan visual: ...\n\n... dan seterusnya sampai slide terakhir.\n\nBerikut teks materi mentahnya:\n---MATERI---\n{{teks_materi}}\n---MATERI SELESAI---"
},
"participant_generate_website": {
"title": "Prompt Praktik – Generate Kode Website dengan AI",
"use_case": "Peserta IHT menggunakan AI untuk membuat file index.html lengkap dengan Tailwind CSS dan JavaScript.",
"placeholders": {
"{{jenis_website}}": "Jenis/tujuan website, misalnya: Landing Page Portofolio Pribadi",
"{{tema_visual}}": "Deskripsi singkat tema visual, misalnya: modern, minimalis, bersih",
"{{skema_warna}}": "Skema warna yang diinginkan, misalnya: gradasi biru ke ungu",
"{{font_utama}}": "Nama font Google Fonts, misalnya: Inter atau Poppins"
},
"prompt_template": "Berperanlah sebagai UI/UX Designer dan Frontend Developer ahli.\n\nBuatkan saya kode lengkap satu file `index.html` untuk sebuah website dengan spesifikasi berikut:\n\n- Jenis website: {{jenis_website}} (contoh: Landing Page Portofolio Pribadi)\n- Gunakan Tailwind CSS via CDN untuk styling.\n- Desain harus modern, {{tema_visual}}, dan profesional.\n- Gunakan skema warna: {{skema_warna}}.\n- Gunakan tipografi modern dari Google Fonts (contoh: {{font_utama}}).\n- Website harus sepenuhnya mobile responsive.\n\nStruktur konten yang saya inginkan:\n1. Hero Section:\n - Foto profil (boleh placeholder)\n - Nama besar\n - Tagline dengan efek animasi ketik (typing effect)\n - Tombol Call to Action (CTA) yang memiliki efek hover menyala/glowing\n\n2. About Section:\n - Card dengan efek glassmorphism\n - Berisi deskripsi singkat tentang saya atau pemilik website\n\n3. Skills Section:\n - Bisa berupa bar, card, atau grid icon\n - Contoh skill: HTML, CSS, JavaScript, AI, UI/UX Design (boleh Anda tambah/ubah agar menarik)\n\n4. Contact Section:\n - Form kontak sederhana (nama, email, pesan)\n - Deretan icon/link ke sosial media utama\n\nKriteria teknis:\n- Sertakan HTML, CSS (via Tailwind), dan JavaScript dalam satu file `index.html` agar mudah di-copy-paste.\n- Jangan berikan penjelasan di luar kode.\n- Tampilkan hanya satu blok kode utuh yang siap dipakai."
},
"participant_git_guide": {
"title": "Prompt Praktik – Panduan Upload Proyek ke GitHub",
"use_case": "Peserta meminta panduan langkah demi langkah menggunakan Git dari terminal untuk mengupload proyek ke GitHub.",
"placeholders": {
"{{nama_folder_proyek}}": "Nama folder di komputer yang berisi file proyek, misalnya: mysite",
"{{url_repo_github}}": "URL repository GitHub tujuan, misalnya: https://github.com/username/repo-baru.git"
},
"prompt_template": "Saya sudah memiliki file `index.html` di komputer saya, tersimpan di dalam folder bernama \"{{nama_folder_proyek}}\".\n\nSaya ingin mengupload folder tersebut ke repository GitHub dengan URL: \"{{url_repo_github}}\".\n\nTolong berikan panduan lengkap langkah demi langkah menggunakan terminal/command prompt untuk:\n1. Mengecek apakah git sudah terpasang (beserta cara menginstall singkat jika belum ada).\n2. Inisialisasi git di folder proyek.\n3. Menambahkan semua file ke staging area.\n4. Membuat commit pertama dengan pesan yang bagus.\n5. Menghubungkan folder lokal ke repository GitHub di atas.\n6. Melakukan push pertama ke branch utama (main/master) sehingga kodenya muncul di GitHub.\n\nUntuk setiap perintah (misalnya `git init`, `git status`, `git add .`, `git commit -m`, `git branch`, `git remote add origin`, `git push`), jelaskan:\n- Kapan perintah itu dijalankan\n- Apa artinya dengan bahasa yang sangat sederhana untuk pemula\n- Contoh perintah lengkap yang bisa langsung saya copy-paste."
},
"participant_deploy_guide": {
"title": "Prompt Praktik – Panduan Deploy ke Netlify/Vercel",
"use_case": "Peserta meminta panduan untuk mendeploy website statis yang sudah ada di GitHub ke Netlify atau Vercel.",
"placeholders": {
"{{platform}}": "Pilih platform deploy: Netlify atau Vercel",
"{{url_repo_github}}": "URL repository GitHub yang berisi proyek yang akan dideploy"
},
"prompt_template": "Kode website saya sudah ada di GitHub dengan URL repository: {{url_repo_github}}.\n\nSaya ingin website ini bisa diakses online oleh semua orang menggunakan {{platform}}.\n\nTolong jelaskan langkah-langkah yang harus saya lakukan, dengan bahasa yang sangat sederhana untuk pemula, mencakup:\n1. Cara login atau signup ke {{platform}} menggunakan akun GitHub.\n2. Cara menghubungkan {{platform}} dengan akun GitHub saya (autorisasi yang perlu diklik).\n3. Cara melakukan \"Import Project\" dari repository GitHub tadi:\n - Memilih repository yang benar\n - Mengatur nama project jika perlu\n - Pengaturan dasar (branch mana yang dipakai, build command dan publish directory untuk proyek HTML statis sederhana)\n4. Proses deploy pertama:\n - Tombol apa yang harus diklik\n - Berapa lama biasanya menunggu\n - Bagaimana mengecek kalau deploy berhasil atau gagal\n5. Cara mendapatkan dan membagikan URL domain yang diberikan {{platform}} (misalnya `https://nama-proyek.netlify.app` atau `https://nama-proyek.vercel.app`).\n6. (Opsional) Cara melakukan deploy ulang otomatis setiap kali saya melakukan push perubahan baru ke branch utama di GitHub.\n\nJika ada perbedaan langkah antara Netlify dan Vercel, jelaskan untuk keduanya secara ringkas dan beri label yang jelas, misalnya: \"[Netlify] ...\" dan \"[Vercel] ...\"."
}
}
}