AI Prompt Template & Contoh Lengkap

Template Prompt untuk Claude / ChatGPT

Copy-paste ke ChatGPT/Claude, lalu deskripsikan section yang kamu mau:

Saya butuh JSON BuilderSchema untuk Alus Builder (format raw, langsung importable). Aturan:

1. Root WAJIB: { "elements": [...] }
   (Jangan dibungkus wrapper apapun.)

2. Setiap element: { "id": "xxxxxxxx", "type": "...", "props": {...} }
   - id: 8-char alphanumeric, harus UNIK di seluruh schema
   - Renderer otomatis prefix "alsbldr-" saat output ke DOM

3. Hierarki: section > container > element-element basic

4. Element category Basic yang tersedia:
   - heading (text, level h1-h6, alignment, optional link/mode/richText)
   - basicText (text, tag p|div|span|figcaption|address|figure, optional link/wordsLimit/readMore)
   - richText (body: HTML string)
   - button (text, link, linkType url|whatsapp, alignment, width auto|full, + Meta/TikTok tracking)
   - textLink (text, link, alignment)
   - image (src, alt, optional link, alignment, + Meta/TikTok tracking)
   - video (url YouTube, aspectRatio 16/9|4/3|1/1, optional title)
   - icon (icon Lucide PascalCase, view default|stacked|framed, shape, size, dst.)
   PENTING — konteks element (penempatan divalidasi):
   - Untuk landing page / section, pakai HANYA element universal: Basic, General,
     eCommerce non-checkout (productGrid, courseGrid, checkoutButton, miniCheckout), Social.
   - Element Dynamic (productPrice, productImage, postTitle, pageTitle, courseTitle, ...)
     bersifat TEMPLATE-ONLY: hanya valid di dalam builder single_product / single_post /
     single_page / single_course. JANGAN taruh di page biasa kecuali aku minta buat template.
   - Form field (nameField, emailField, submitButton, ...) hanya jalan di Form Builder.
     Slot checkout* (checkoutForm, checkoutPayment, ...) hanya jalan di template checkout.


5. Layout types: section, container, block (semua butuh "children": [])
   - props: {} valid (layout schema punya defaults)

6. Style opsional:
   "style": { "desktop": {...}, "tablet": {...}, "mobile": {...} }
   Pakai struktur: layout (padding/margin/width/...), typography (color/fontSize/...),
   background (color/image), border (radius/width/color)

7. Untuk global class: tambah "classes": ["shortId"] di element +
   embed definition di "globalClasses" array di root.

8. JANGAN tulis "selectorConfig" — itu legacy, sudah dihapus dari format baru.

9. Output HANYA JSON valid — no comments, no trailing comma, no markdown fences.

Sekarang buatkan saya: [DESKRIPSIKAN APA YANG KAMU MAU]
Contoh: Hero section landing page jasa fotografi pernikahan, dengan headline besar
"Abadikan Momen Sakralmu", sub-text 1 paragraf tentang pengalaman 10 tahun, tombol
CTA "Lihat Paket" + "Konsultasi via WhatsApp" (nomor 6281234567890), background
hijau gelap, teks putih, center alignment.

Aturan konteks element — di mana tiap element boleh dipakai

Tidak semua element jalan di mana saja; builder memvalidasi penempatan berdasarkan konteks. Saat membuat schema untuk landing page atau section umum, pakai hanya element universal.

Grup	Berlaku di mana	Contoh
Universal	Page, section, atau template apa pun	Basic (heading, button, image…), General (accordion, counter…), eCommerce non-checkout (productGrid, courseGrid, checkoutButton, miniCheckout), Social
Dynamic — template only	Hanya di dalam template builder yang sesuai; datanya diambil dari post / produk / page / course saat ini	postTitle, postContent → single_post; productPrice, productImage, addToCartButton → single_product; pageTitle → single_page; courseTitle → single_course
Slot checkout — template only	Hanya di dalam template checkout	checkoutForm, checkoutPayment, checkoutSummary, checkoutTotals, checkoutPayButton
Form field — hanya Form Builder	Hanya di dalam Form Builder (bukan Page/Template builder)	nameField, emailField, selectField, submitButton

Patokan: untuk landing page atau section, jangan pakai element Dynamic, checkout, atau form-field kecuali memang diminta membuat template tersebut — element template-only di page biasa akan gagal validasi atau render kosong. Daftar lengkap per-kategori ada di halaman Element Type Reference.

Contoh 1: Hero Section sederhana

{

  "elements": [
    {
      "id": "sec001x9",
      "type": "section",
      "props": {},
      "style": {
        "desktop": {
          "layout": { "paddingTop": "80px", "paddingBottom": "80px", "paddingLeft": "24px", "paddingRight": "24px" },
          "background": { "color": "#0f172a" }
        }
      },
      "children": [
        {
          "id": "con002y8",
          "type": "container",
          "props": {},
          "children": [
            {
              "id": "h003z7w6",
              "type": "heading",
              "props": { "text": "Bangun Bisnis Online Tanpa Coding", "level": "h1", "alignment": "center" },
              "style": {
                "desktop": { "typography": { "fontSize": "56px", "color": "#ffffff", "fontWeight": "800" } },
                "mobile":  { "typography": { "fontSize": "32px" } }
              }
            },
            {
              "id": "txt04q5p",
              "type": "basicText",
              "props": {
                "text": "Buat website, kelola toko, dan jualan kursus online dalam satu platform. Mulai gratis tanpa kartu kredit.",
                "tag": "p"
              },
              "style": {
                "desktop": {
                  "typography": { "color": "#cbd5e1", "fontSize": "18px" },
                  "layout": { "marginTop": "16px", "maxWidth": "600px", "marginLeft": "auto", "marginRight": "auto" }
                }
              }
            },
            {
              "id": "btn05o4n",
              "type": "button",
              "props": {
                "text": "Mulai Gratis",
                "link": "/register",
                "linkType": "url",
                "alignment": "center",
                "width": "auto"
              },
              "style": {
                "desktop": { "layout": { "marginTop": "32px" } }
              }
            }
          ]
        }
      ]
    }
  ]
}

Contoh 2: CTA Section dengan Icon + Global Class

{

  "elements": [
    {
      "id": "sec06m3k",
      "type": "section",
      "props": {},
      "style": {
        "desktop": {
          "layout": { "paddingTop": "60px", "paddingBottom": "60px", "paddingLeft": "24px", "paddingRight": "24px" },
          "background": { "color": "#fef3c7" }
        }
      },
      "children": [
        {
          "id": "con07j2i",
          "type": "container",
          "props": {},
          "children": [
            {
              "id": "ic08h1g0",
              "type": "icon",
              "props": {
                "icon": "Sparkles",
                "view": "stacked",
                "shape": "circle",
                "alignment": "center",
                "link": "",
                "linkTarget": "_self",
                "primaryColor": "#ffffff",
                "secondaryColor": "#f59e0b",
                "size": 32,
                "rotate": 0,
                "borderWidth": 2,
                "borderRadius": 0,
                "padding": 16
              }
            },
            {
              "id": "h09f8e7d",
              "type": "heading",
              "props": { "text": "Promo Akhir Tahun: Diskon 50%", "level": "h2", "alignment": "center" },
              "style": { "desktop": { "layout": { "marginTop": "16px" }, "typography": { "color": "#78350f" } } }
            },
            {
              "id": "txt10c6b",
              "type": "basicText",
              "props": { "text": "Berlaku sampai 31 Desember. Daftar sekarang dan dapatkan akses penuh.", "tag": "p" },
              "style": { "desktop": { "layout": { "marginTop": "8px" }, "typography": { "color": "#92400e", "textAlign": "center" } } }
            },
            {
              "id": "btn11a5z",
              "type": "button",
              "props": { "text": "Klaim Diskon", "link": "/register?promo=END50", "alignment": "center", "width": "auto" },
              "classes": ["promo01"],
              "style": { "desktop": { "layout": { "marginTop": "24px" } } }
            },
            {
              "id": "tl12y4w3",
              "type": "textLink",
              "props": { "text": "Pelajari syarat & ketentuan →", "link": "/promo-tnc", "alignment": "center" },
              "style": { "desktop": { "layout": { "marginTop": "12px" }, "typography": { "fontSize": "14px" } } }
            }
          ]
        }
      ]
    }
  ],
  "globalClasses": [
    {
      "id": "promo01",
      "name": "btn-promo",
      "desktopStyle": {
        "background": { "color": "#dc2626" },
        "typography": { "color": "#ffffff", "fontWeight": "700" }
      },
      "pseudoStates": {
        ":hover": { "desktop": { "background": { "color": "#b91c1c" } } }
      }
    }
  ]
}

Workflow ideal dengan AI

1. Pakai template prompt di atas untuk generate JSON
2. Validasi cepat: cek JSON valid (JSONLint) + ada field elements berupa array
3. Buka builder → Import Schema → paste → Import
4. Tweak di canvas dengan drag-drop kalau perlu detail
5. Save

Common mistakes

• Lupa "children": [] di layout element (section/container/block) — wajib walau kosong
• ID duplikat di seluruh schema — validator reject
• Type tidak valid — periksa daftar di halaman Struktur Schema
• Style flatten (mis. "fontSize": "32px" langsung di element) — wrap di style.desktop.typography
• Comment JSON — JSON tidak support, AI kadang lupa hapus
• Trailing comma — strict JSON forbid
• Tulis "selectorConfig" — itu legacy, format baru pakai top-level "classes"