AI Prompt Template & Full Examples
Prompt template for Claude/ChatGPT + import-ready hero/CTA section 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
- Use the prompt template above to generate JSON
- Quick validation: ensure valid JSON (JSONLint) + has an
elementsarray - Open builder → Import Schema → paste → Import
- Fine-tune with drag-drop on canvas if needed
- 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 instyle.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"