003 Web IHT

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,

{

  "title": "Pembuatan Website/Web App + Materi Presentasi + Deployment & Git (Template Prompt)",

  "description": "Template prompt berbahasa Indonesia untuk meminta AI membuat website atau web app, dokumentasi prompt, materi presentasi, serta panduan deployment (Netlify, Vercel) dan GitHub atau GitLab. Dilengkapi placeholder agar bisa digunakan berulang dengan materi pelatihan yang berbeda-beda.",

  "variables": [

    {

      "name": "jenis_website",

      "description": "Jenis website, misalnya: company profile, landing page produk, web app dashboard, blog, portofolio, dan sebagainya."

    },

    {

      "name": "topik_niche",

      "description": "Topik atau niche website, misalnya: jasa pembuatan website dengan AI, agensi IT, kursus online, dan sebagainya."

    },

    {

      "name": "target_pengguna",

      "description": "Target pengguna utama, misalnya: pelaku UMKM, perusahaan, pelajar, umum, dan sebagainya."

    },

    {

      "name": "tujuan_utama",

      "description": "Tujuan utama website, misalnya: mengumpulkan lead, menjual produk, menampilkan portofolio, edukasi, dan sebagainya."

    },

    {

      "name": "preferensi_warna",

      "description": "Preferensi warna brand atau tema warna utama website. Boleh dikosongkan jika ingin AI yang menentukan."

    },

    {

      "name": "teknologi_frontend",

      "description": "Pilihan teknologi frontend, misalnya: HTML CSS JS murni, React, Vue, Next.js, dan sebagainya."

    },

    {

      "name": "materi_presentasi",

      "description": "Isi materi pelatihan atau presentasi yang ingin diubah menjadi konten website dan outline slide. Bisa berupa poin-poin, ringkasan, atau naskah panjang."

    }

  ],

  "prompt": "Saya ingin kamu bertindak sebagai **web developer**, **web designer**, dan **instruktur pelatihan** yang berpengalaman.\n\nTugasmu adalah membuat sebuah **website atau web app** sekaligus **materi presentasi/IHT** berdasarkan parameter berikut:\n- Jenis website: {{jenis_website}}\n- Topik atau niche: {{topik_niche}}\n- Target pengguna: {{target_pengguna}}\n- Tujuan utama website: {{tujuan_utama}}\n- Preferensi warna (jika ada): {{preferensi_warna}}\n- Teknologi yang digunakan: {{teknologi_frontend}}\n- Materi pelatihan atau presentasi dari pengguna (jika ada): {{materi_presentasi}}\n\nJika ada parameter yang kosong, gunakan asumsi yang masuk akal dan jelaskan asumsi tersebut secara singkat.\n\n---\n\n## 1. Konsep dan Tujuan Website serta Materi\n\n1. Jelaskan dulu secara ringkas:\n   - Konsep singkat websitenya (apa, untuk siapa, manfaat utama).\n   - Struktur halaman (section apa saja secara berurutan).\n   - Gaya atau style desain (warna utama, kombinasi warna pendukung, jenis font, mood atau nuansa visual).\n\n2. Integrasikan **materi pelatihan atau presentasi** dari pengguna:\n   - Jika `{{materi_presentasi}}` terisi, olah materi tersebut menjadi:\n     - Ringkasan poin-poin utama.\n     - Beberapa subtopik atau bab yang logis.\n     - Penanda mana bagian yang cocok menjadi section di website dan mana yang menjadi slide terpisah.\n   - Jika `{{materi_presentasi}}` kosong, buat sendiri materi pelatihan yang relevan dengan topik website, misalnya:\n     - Pengantar topik.\n     - Konsep dasar.\n     - Studi kasus singkat.\n     - Tips praktik terbaik.\n\n---\n\n## 2. Desain dan UX (Modern dan Responsif)\n\nBuat desain yang:\n- Modern, clean, dan **mobile-first** (responsif di mobile dan desktop).\n- Menggunakan kombinasi warna profesional atau sesuai `{{preferensi_warna}}` jika diisi.\n- Menggunakan Google Fonts yang umum dan mudah dibaca (misalnya Inter, Poppins, Roboto, atau Open Sans).\n\nStruktur minimal yang harus ada:\n- Header dengan logo (boleh berupa teks) dan navigation bar.\n- Hero section dengan:\n  - Judul kuat (headline utama).\n  - Subjudul yang menjelaskan nilai atau manfaat.\n  - Tombol CTA (Call To Action) yang jelas.\n- Section fitur atau layanan utama.\n- Section Tentang Kami atau Tentang.\n- Section portofolio atau studi kasus (jika relevan dengan topik atau niche).\n- Section testimoni (jika relevan).\n- Section khusus untuk **materi pelatihan atau presentasi** (misalnya berjudul Materi Pelatihan, Silabus, atau Outline Training) yang memuat hasil olahan dari `{{materi_presentasi}}`.\n- Section kontak (form dan info kontak dasar).\n- Footer lengkap (copyright, link media sosial, dan link penting lain).\n\nSelain memberikan kode, jelaskan secara singkat:\n- Alasan pemilihan gaya desain (warna, font, layout) dan bagaimana itu mendukung tujuan website.\n- Prinsip UX yang digunakan (misalnya visual hierarchy, penggunaan whitespace, konsistensi, dan kemudahan navigasi).\n\n---\n\n## 3. Teknologi dan Struktur Kode\n\nGunakan teknologi sesuai nilai `{{teknologi_frontend}}`:\n\n- Jika diisi HTML CSS JS murni:\n  - Buat:\n    - File `index.html`\n    - File `style.css`\n    - File `script.js` (jika diperlukan, misalnya untuk interaksi sederhana seperti menu mobile atau animasi ringan)\n\n- Jika diisi framework lain (misalnya React, Vue, Next.js):\n  - Jelaskan singkat struktur project (file utama, folder, dan sebagainya).\n  - Tetap sertakan contoh kode utama yang cukup untuk dijalankan (minimal satu halaman utama dengan styling dasar).\n\nAturan umum kode:\n- Rapi, terstruktur, dan mudah dibaca.\n- Menggunakan komentar seperlunya untuk menjelaskan bagian penting.\n- Responsif (tampil baik di mobile dan desktop).\n- Hindari dependensi yang tidak perlu.\n\n---\n\n## 4. Dokumentasi Prompt dan Cara Menyusun Prompt AI\n\nSaya ingin output ini juga menjadi **materi pembelajaran atau IHT** tentang pembuatan website dan materi presentasi menggunakan AI.\n\nSertakan bagian dokumentasi yang berisi:\n\n1. **Ringkasan prompt** yang kamu gunakan (versi disederhanakan) dalam beberapa poin.\n2. Penjelasan cara menyusun prompt yang baik untuk:\n   - Pembuatan website atau web app dengan bantuan AI.\n   - Mengubah `{{materi_presentasi}}` menjadi:\n     - Struktur konten website.\n     - Outline presentasi atau slide.\n3. Contoh variasi prompt untuk:\n   - Mengubah desain (warna, font, layout).\n   - Menambah halaman baru.\n   - Menambah fitur (misalnya form kontak dengan validasi, gallery, FAQ, blog section, dan sebagainya).\n   - Mengganti materi pelatihan dengan topik lain (misalnya dari topik pembuatan website dengan AI menjadi topik lain apa pun yang diinginkan pengguna).\n\nTuliskan dokumentasi ini dengan format yang mudah dibaca (gunakan heading dan bullet point).\n\n---\n\n## 5. Cara Preview atau Deploy Online (Netlify, Vercel, GitHub Pages)\n\nBuat **langkah-langkah praktis** (step by step) untuk melakukan preview atau deploy website ini secara online, minimal:\n\n### A. Menggunakan Netlify\n\nJelaskan dari nol:\n1. Persiapan folder proyek di lokal (struktur file yang diperlukan).\n2. Cara membuat akun Netlify.\n3. Cara deploy:\n   - Metode drag and drop folder ke Netlify.\n   - Metode connect ke GitHub jika menggunakan repository.\n4. Cara update jika ada perubahan kode (redeploy atau publish ulang).\n\n### B. Menggunakan Vercel\n\nJelaskan dari nol:\n1. Persiapan repository di GitHub atau GitLab.\n2. Cara membuat akun dan menghubungkan repository ke Vercel.\n3. Pengaturan project (framework preset, build dan output directory jika diperlukan).\n4. Cara redeploy atau update ketika ada perubahan di repository.\n\n### C. Alternatif Singkat: GitHub Pages (Opsional)\n\nBerikan ringkasan singkat cara deploy statis menggunakan GitHub Pages:\n1. Struktur repository yang dibutuhkan.\n2. Cara mengaktifkan GitHub Pages dari menu Settings.\n3. URL hasil deploy dan cara update.\n\nGunakan bahasa yang mudah dipahami pemula.\n\n---\n\n## 6. Penyimpanan Kode di GitHub dan GitLab (Git Dasar)\n\nBerikan **panduan langkah demi langkah** untuk menyimpan proyek ke GitHub dan GitLab.\n\n### A. Menggunakan Git ke GitHub\n\n1. Inisialisasi repository lokal:\n   - `git init`\n2. Menambahkan file:\n   - `git add .`\n3. Commit awal:\n   - `git commit -m 'Initial commit'`\n4. Membuat repository baru di GitHub melalui web.\n5. Menambahkan remote dan push pertama kali:\n   - `git remote add origin https://github.com/username/nama-repo.git`\n   - `git branch -M main` jika perlu mengubah nama branch.\n   - `git push -u origin main`\n\nBerikan juga tips singkat untuk update berikutnya (commit dan push perubahan).\n\n### B. Menggunakan GitLab\n\n1. Buat repository baru di GitLab.\n2. Tambahkan remote GitLab:\n   - `git remote add origin https://gitlab.com/username/nama-repo.git`\n3. Push awal dan cara update berikutnya.\n4. Jelaskan secara singkat perbedaan utama GitHub dan GitLab, misalnya:\n   - Fitur CI/CD bawaan.\n   - Pengaturan private repository.\n   - Hal lain yang relevan secara ringkas.\n\nTuliskan langkah-langkahnya dengan jelas, seolah-olah ini adalah materi IHT atau training untuk pemula sampai menengah.\n\n---\n\n## 7. Format Jawaban yang Harus Kamu Ikuti\n\nSusun jawaban akhir dengan struktur terurut seperti ini:\n\n1. **Ringkasan Konsep Website dan Materi**\n2. **Struktur Halaman dan Desain (UX/UI)**\n3. **Kode Lengkap**\n   - Potongan kode `index.html`\n   - Potongan kode `style.css`\n   - Potongan kode `script.js` jika ada\n   - Jika menggunakan framework, jelaskan file utama yang perlu dibuat\n4. **Outline Materi Pelatihan dan Presentasi**\n   - Ringkasan `{{materi_presentasi}}` (atau materi yang kamu buat sendiri jika kosong)\n   - Outline slide presentasi (judul slide, poin-poin utama, dan catatan singkat presenter jika perlu)\n5. **Dokumentasi Prompt dan Cara Menyusun Prompt AI**\n6. **Tutorial Deploy ke Netlify**\n7. **Tutorial Deploy ke Vercel dan ringkasan GitHub Pages jika disertakan**\n8. **Tutorial Menyimpan Kode di GitHub dan GitLab**\n\nGunakan bahasa Indonesia yang jelas, rapi, dan komunikatif. Anggap pembaca adalah peserta pelatihan atau IHT dengan level pemula sampai menengah, jadi hindari istilah teknis yang terlalu rumit tanpa penjelasan singkat.\n"

}