AI Prompt Template & Full Examples

Prompt Template for Claude / ChatGPT

I need a BuilderSchema JSON for Alus Builder (raw format, directly importable). Rules:

1. Root MUST be: { "elements": [...] }
   (No outer wrapper.)

2. Each element: { "id": "xxxxxxxx", "type": "...", "props": {...} }
   - id: 8-char alphanumeric, UNIQUE across the whole schema
   - The renderer auto-prefixes "alsbldr-" for DOM output

3. Hierarchy: section > container > basic elements

4. Available Basic-category elements:
   - 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, etc.)
   IMPORTANT — element context (placement is validated):
   - For a landing page / section, use ONLY universal elements: Basic, General,
     eCommerce non-checkout (productGrid, courseGrid, checkoutButton, miniCheckout), Social.
   - Dynamic elements (productPrice, productImage, postTitle, pageTitle, courseTitle, ...)
     are TEMPLATE-ONLY: valid only inside the single_product / single_post / single_page /
     single_course builders. Do NOT put them on a normal page unless I ask for a template.
   - Form fields (nameField, emailField, submitButton, ...) work ONLY in the Form Builder.
     checkout* slots (checkoutForm, checkoutPayment, ...) work ONLY in the checkout template.


5. Layout types: section, container, block (all need "children": [])
   - props: {} is valid (layout schema has defaults)

6. Optional style:
   "style": { "desktop": {...}, "tablet": {...}, "mobile": {...} }
   Use structure: layout (padding/margin/width/...), typography (color/fontSize/...),
   background (color/image), border (radius/width/color)

7. For global classes: add "classes": ["shortId"] on the element +
   embed definitions in a "globalClasses" array at root.

8. DO NOT write "selectorConfig" — that's legacy, removed from the new format.

9. Output ONLY valid JSON — no comments, no trailing commas, no markdown fences.

Now build me: [DESCRIBE WHAT YOU WANT]
Example: Hero section for a wedding photography landing page with a big headline
"Capture Your Sacred Moments", a 1-paragraph sub-text about 10 years of experience,
"View Packages" + "WhatsApp Consult" (number 6281234567890) CTAs, dark green
background, white text, center alignment.

Element context rules — where each element is allowed

Not every element works everywhere; the builder validates placement by context. When generating a schema for a landing page or generic section, stick to universal elements only.

Group	Where it works	Examples
Universal	Any page, section, or template	Basic (heading, button, image…), General (accordion, counter…), eCommerce non-checkout (productGrid, courseGrid, checkoutButton, miniCheckout), Social
Dynamic — template only	Only inside the matching template builder; they pull data from the current post / product / page / course	postTitle, postContent → single_post; productPrice, productImage, addToCartButton → single_product; pageTitle → single_page; courseTitle → single_course
Checkout slots — template only	Only inside the checkout template	checkoutForm, checkoutPayment, checkoutSummary, checkoutTotals, checkoutPayButton
Form fields — Form Builder only	Only inside the Form Builder (not the Page/Template builder)	nameField, emailField, selectField, submitButton

Rule of thumb: for a landing page or section, do not use Dynamic, checkout, or form-field elements unless explicitly asked to build that template — a template-only element on a normal page fails validation or renders empty. The full per-category list lives on the Element Type Reference page.

Example 1: Simple Hero Section

{

  "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": "Build Your Online Business Without Code", "level": "h1", "alignment": "center" },
              "style": {
                "desktop": { "typography": { "fontSize": "56px", "color": "#ffffff", "fontWeight": "800" } },
                "mobile":  { "typography": { "fontSize": "32px" } }
              }
            },
            {
              "id": "txt04q5p",
              "type": "basicText",
              "props": {
                "text": "Build websites, manage stores, and sell online courses in one platform. Start free, no credit card required.",
                "tag": "p"
              },
              "style": {
                "desktop": {
                  "typography": { "color": "#cbd5e1", "fontSize": "18px" },
                  "layout": { "marginTop": "16px", "maxWidth": "600px", "marginLeft": "auto", "marginRight": "auto" }
                }
              }
            },
            {
              "id": "btn05o4n",
              "type": "button",
              "props": {
                "text": "Start Free",
                "link": "/register",
                "linkType": "url",
                "alignment": "center",
                "width": "auto"
              },
              "style": {
                "desktop": { "layout": { "marginTop": "32px" } }
              }
            }
          ]
        }
      ]
    }
  ]
}

Example 2: CTA Section with 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": "Year-End Promo: 50% Off", "level": "h2", "alignment": "center" },
              "style": { "desktop": { "layout": { "marginTop": "16px" }, "typography": { "color": "#78350f" } } }
            },
            {
              "id": "txt10c6b",
              "type": "basicText",
              "props": { "text": "Valid until December 31. Sign up now and get full access.", "tag": "p" },
              "style": { "desktop": { "layout": { "marginTop": "8px" }, "typography": { "color": "#92400e", "textAlign": "center" } } }
            },
            {
              "id": "btn11a5z",
              "type": "button",
              "props": { "text": "Claim Discount", "link": "/register?promo=END50", "alignment": "center", "width": "auto" },
              "classes": ["promo01"],
              "style": { "desktop": { "layout": { "marginTop": "24px" } } }
            },
            {
              "id": "tl12y4w3",
              "type": "textLink",
              "props": { "text": "Read terms & conditions →", "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" } } }
      }
    }
  ]
}

Ideal AI workflow

1. Use the prompt template above to generate JSON
2. Quick validation: ensure valid JSON (JSONLint) + has an elements array
3. Open builder → Import Schema → paste → Import
4. Fine-tune with drag-drop on canvas if needed
5. Save

Common mistakes

• Forgetting "children": [] on layout elements — required even when empty
• Duplicate IDs across the schema — validator rejects
• Invalid type — check the list on the Schema Structure page
• Flattened style (e.g. "fontSize": "32px" directly on element) — wrap in style.desktop.typography
• JSON comments — not supported; AI sometimes forgets to remove
• Trailing commas — strict JSON forbids
• Writing "selectorConfig" — legacy; the new format uses top-level "classes"