Page Spec v1

Prompt AI supaya hasil HTML terus ngam dengan editor ROAS.my.

Spec ini bantu AI bina landing page mobile-first dengan section yang boleh diedit, CTA yang boleh dipetakan ke checkout, dan asset yang selamat untuk dihoskan dalam ROAS.my.

Cara guna ROAS.my Buka llms.txt Starter prompts

section snippet

<section data-roas-section="hero" id="hero">
  <div class="wrap">
    <p class="eyebrow">Untuk ibu bapa yang mahu anak lebih fokus</p>
    <h1>Bantu Anak Fokus Belajar Tanpa Paksa</h1>
    <p>Copy pendek yang jelaskan manfaat utama produk.</p>
    <img src="anak-fokus-hero.webp" alt="Anak sedang belajar dengan tenang">
    <a class="cta" data-roas-cta>Dapatkan Pakej Hari Ini</a>
  </div>
</section>

Satu fail HTML lengkap

Section bertanda data-roas-section

CTA checkout guna data-roas-cta

Spec Untuk AI

Link rasmi untuk diberi kepada ChatGPT, Claude, Gemini, atau mana-mana AI:
https://roas.my/llms.txt

# ROAS.my Page Spec v3

Tujuan: hasilkan landing page HTML yang boleh terus diimport, diedit dan
dipublish dalam ROAS.my. Ikut semua peraturan ini.

## Cara ROAS.my bekerja
- AI hanya membina struktur, copy dan visual landing page dalam satu fail HTML.
- ROAS.my mengurus media, produk, checkout COD/FPX, order, email, tracking,
  analytics, domain dan integrasi operasi secara berasingan.
- Jangan cuba membina semula fungsi platform ini di dalam HTML.
- Import menghasilkan draft. Merchant boleh publish untuk melihat page live
  walaupun CTA checkout belum dipetakan; sistem akan memaparkan warning.

## 1. Output wajib
- Pulangkan SATU fail HTML lengkap bermula dengan <!DOCTYPE html>.
- Letak semua CSS dalam <style> di <head>.
- JavaScript fungsi UI seperti accordion boleh inline, tetapi elakkan jika CSS
  atau elemen <details> sudah mencukupi.
- Jangan gunakan framework, npm package, PHP, WordPress shortcode, React/Vue,
  build step atau fail CSS/JS tempatan yang berasingan.
- Jangan terangkan kod selepas output akhir. Pulangkan fail HTML sahaja apabila
  user sudah meluluskan copy dan flow.

## 2. Fakta dan copywriting
- Gunakan hanya fakta, harga, testimoni, sijil dan claim yang diberi user.
- Jangan reka statistik, nama doktor, kelulusan, testimoni atau claim kesihatan.
- Bahasa Melayu mestilah natural untuk audience Malaysia, bukan terjemahan
  literal. English boleh digunakan untuk istilah biasa seperti checkout.
- Cadangan flow direct response:
  hero -> masalah -> akibat/keinginan -> penyelesaian -> manfaat/cara guna ->
  bukti/testimoni -> pakej -> FAQ/objection -> CTA akhir.
- Hero perlu jelas: produk/offer, siapa ia bantu, manfaat utama dan satu CTA.
- Setiap section perlu ada satu tugas. Elakkan pengulangan ayat dan hype kosong.

## 3. Struktur editor ROAS.my
- Setiap bahagian utama WAJIB berupa:
  <section data-roas-section="nama-unik" id="nama-unik">...</section>
- Gunakan nama ringkas dan unik: hero, masalah, penyelesaian, manfaat,
  testimoni, pakej, faq, cta-akhir.
- Jangan duplicate data-roas-section.
- Jangan cipta atribut data-roas-id. ROAS.my menambahkannya semasa import.
- Gunakan HTML semantik: h1 hanya sekali, kemudian h2/h3 mengikut hierarki.
- Pastikan elemen teks bukan dibina melalui JavaScript supaya boleh diedit.

## 4. Gambar dan media
- Guna <img src="nama-fail-deskriptif.webp" alt="penerangan gambar">.
- Jangan guna URL gambar luaran, base64, blob, CSS background URL luaran atau
  hotlink. User akan upload gambar sebenar dalam Media ROAS.my.
- Jika gambar belum tersedia, tetap sediakan tag <img> pada lokasi yang tepat.
- Beri width dan height atau aspect-ratio untuk elakkan layout shift.
- Gunakan object-fit: cover hanya jika crop tidak menjejaskan produk atau teks.
- Jangan jadikan teks penting sebagai sebahagian daripada gambar.
- YouTube dibenarkan melalui https://www.youtube.com/embed/VIDEO_ID sahaja.

## 5. CTA dan checkout
- Semua butang beli, pilih pakej atau checkout WAJIB:
  <a class="..." data-roas-cta>Teks CTA</a>
- Jangan letak href pada data-roas-cta. Merchant akan pilih produknya dalam
  editor ROAS.my.
- Setiap kad pakej boleh ada data-roas-cta sendiri.
- Link scroll biasa guna href="#pakej" dan target section mesti ada id="pakej".
- Link luaran boleh guna URL HTTPS penuh.
- Jangan bina form order, cart, payment selector atau checkout sendiri.
  ROAS.my menyediakan validation, harga, COD/FPX, tracking dan order.
- Satu landing page boleh mempunyai beberapa produk dan optional order bump.
  Merchant memilih serta menyusunnya selepas import; jangan hard-code harga
  checkout melalui JavaScript.

## 6. Tracking dan script terlarang
- Jangan masukkan Meta Pixel, CAPI, GA4, GTM, TikTok Pixel, Clarity, Hotjar,
  affiliate pixel atau script analytics lain.
- Jangan masukkan fbq(), gtag(), dataLayer, ttq atau noscript tracking.
- Jangan masukkan service worker, push notification, popup pihak ketiga,
  live-chat script atau code yang mengubah checkout.
- ROAS.my inject tracking daripada Settings dan membuang tracking lama.

## 7. CSS dan responsive
- Mobile-first bermula pada 320px. Tiada horizontal scroll.
- Container utama disyorkan max-width 1100-1200px dengan padding 16-24px.
- Gunakan grid/flex responsive; satu kolum pada mobile.
- Jangan skala font berdasarkan viewport width sahaja. Gunakan clamp() dengan
  minimum dan maksimum yang munasabah jika perlu.
- Pastikan button sekurang-kurangnya 44px tinggi dan teks tidak terpotong.
- Elakkan fixed height pada section kandungan.
- Jangan gunakan z-index melampau, overlay yang menghalang checkout, negative
  margin berlebihan, decorative orb atau animasi berat.
- Hormati prefers-reduced-motion. Hadkan font kepada maksimum dua keluarga.

## 8. Accessibility dan trust
- Set lang="ms", meta charset dan viewport.
- Semua gambar ada alt yang bermakna; gambar dekoratif guna alt="".
- Warna teks/latar perlu contrast jelas.
- Gunakan <button> untuk tindakan UI dan <a> untuk navigasi.
- FAQ disyorkan guna <details><summary>.
- Jangan papar countdown palsu, stok palsu atau notifikasi jualan rekaan.

## 9. External asset yang dibenarkan
- Google Fonts melalui <link href="https://fonts.googleapis.com/...">.
- YouTube embed rasmi.
- Selain dua perkara ini, page mesti self-contained dan media menggunakan
  nama fail lokal untuk dimasukkan ke ROAS.my.
- Jika user hanya mempunyai URL gambar, mereka boleh import URL itu melalui
  Media ROAS.my. HTML akhir tetap perlu merujuk asset lokal, bukan hotlink.

## 10. Checklist sebelum pulangkan HTML
- Satu fail HTML lengkap dan boleh dibuka terus dalam browser.
- Semua section utama mempunyai data-roas-section unik.
- Semua CTA beli menggunakan data-roas-cta tanpa href.
- Semua gambar menggunakan nama fail lokal dan alt text.
- Tiada tracking, form order, external image atau dependency framework.
- Mobile 320px dan desktop tidak overflow.
- Harga/fakta sama dengan maklumat user.
- Flow mempunyai hero, masalah, penyelesaian, bukti, pakej, FAQ dan CTA akhir.

Maklumat manusia dan tutorial lengkap:
https://roas.my/knowledgebase

Starter Prompts

BM: Salespage Produk

Baca dan patuhi spec ini dahulu: https://roas.my/llms.txt

Tulis satu fail HTML lengkap untuk landing page produk [NAMA PRODUK] dalam Bahasa Melayu Malaysia.

Sasaran pelanggan: [SIAPA].
Masalah utama: [MASALAH].
Manfaat utama: [MANFAAT].
Harga/pakej: [PAKEJ].
Tone: trusted, clear, conversion-focused, bukan hype kosong.

Pastikan setiap bahagian guna <section data-roas-section="...">, semua gambar guna nama fail .webp lokal, dan semua butang beli guna <a data-roas-cta> tanpa href.

EN: Product Landing Page

Read and follow this spec first: https://roas.my/llms.txt

Create one complete HTML file for a mobile-first product landing page for [PRODUCT NAME].

Audience: [AUDIENCE].
Main problem: [PROBLEM].
Key benefits: [BENEFITS].
Packages/pricing: [PACKAGES].
Tone: trustworthy, clear, conversion-focused, not exaggerated.

Use <section data-roas-section="..."> for every major section, local .webp image filenames with alt text, and checkout buttons as <a data-roas-cta> without href.

BM: Rework LP Sedia Ada

Baca dan patuhi spec ini dahulu: https://roas.my/llms.txt

Tukar HTML landing page di bawah supaya sesuai untuk import ke ROAS.my.

Keperluan:
- Buang semua tracking pixel/script.
- Tukar semua gambar external/base64 kepada nama fail .webp lokal yang deskriptif.
- Tambah data-roas-section pada setiap section utama.
- Tukar semua butang beli/checkout kepada <a data-roas-cta> tanpa href.
- Kekalkan copywriting dan struktur conversion asal sebaik mungkin.

HTML asal:
[PASTE HTML DI SINI]

Checkout & TQ Custom

Gunakan marker ini apabila mahu design checkout atau halaman terima kasih sendiri. Sistem masih mengawal validation, harga, order, tracking dan bayaran.

# HTML Checkout Custom
Letak tepat satu marker bagi setiap field wajib:
data-roas-field="name|phone|email|address1|address2|postcode|city|state|payment|submit"

Jenis elemen:
- name, phone, email, address1, address2, postcode, city: <input> atau <textarea>
- state: <select>
- payment: bekas seperti <div> (sistem isi pilihan FPX/COD)
- submit: <button> atau <input>

Contoh minimum:
<input data-roas-field="name">
<input data-roas-field="phone">
<input data-roas-field="email">
<div data-roas-shipping>
  <textarea data-roas-field="address1"></textarea>
  <input data-roas-field="address2">
  <input data-roas-field="postcode">
  <input data-roas-field="city">
  <select data-roas-field="state"></select>
</div>
<div data-roas-custom-fields></div>
<div data-roas-field="payment"></div>
<span data-roas-value="offer-name"></span>
<span data-roas-value="subtotal"></span>
<span data-roas-value="shipping"></span>
<div data-roas-cod-row><span data-roas-value="cod-fee"></span></div>
<span data-roas-value="total"></span>
<button data-roas-field="submit">Buat Pesanan</button>

Nilai checkout opsyenal:
brand-name, offer-name, offer-subtitle, offer-price, offer-gift,
subtotal, shipping, cod-fee, total. Gambar produk: data-roas-image="offer".

# HTML Terima Kasih Custom
Marker wajib: data-roas-value="status-title", "order-code", dan "total".
Nilai lain: brand-name, status-message, offer-name, subtotal, shipping,
cod-fee, payment, customer-name, address, company-line.
Link opsyenal: data-roas-link="retry" atau data-roas-link="whatsapp".

Semua <script>, iframe, handler on* dan form buatan sendiri akan dibuang.
ROAS.my menyuntik form, validation, harga, tracking dan payment flow sebenar.

Contoh Section

AI boleh ulang struktur ini untuk hero, masalah, testimoni, pakej, FAQ, dan footer. Nama section mesti unik.

<section data-roas-section="hero" id="hero">
  <div class="wrap">
    <p class="eyebrow">Untuk ibu bapa yang mahu anak lebih fokus</p>
    <h1>Bantu Anak Fokus Belajar Tanpa Paksa</h1>
    <p>Copy pendek yang jelaskan manfaat utama produk.</p>
    <img src="anak-fokus-hero.webp" alt="Anak sedang belajar dengan tenang">
    <a class="cta" data-roas-cta>Dapatkan Pakej Hari Ini</a>
  </div>
</section>

FAQ Ringkas

Kenapa CTA beli tak boleh letak href?

ROAS.my akan sambungkan butang itu kepada produk checkout yang dipilih dalam editor, supaya link checkout, tracking, dan bayaran kekal konsisten.

Boleh guna gambar dari URL luar?

Jangan. Guna nama fail seperti produk-hero.webp, kemudian upload gambar sebenar dalam ROAS.my supaya page laju dan asset tak hilang.

Boleh letak Meta Pixel atau GA4 dalam HTML?

Tidak perlu. ROAS.my inject tracking daripada Settings dan akan buang kod tracking lama semasa import.