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.)

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.

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"