search
User

model_training AI Training Data

ตัวอย่างที่ Active จะถูก inject เข้า AI Pipeline อัตโนมัติ

insights Coverage Dashboard add เพิ่ม Training Example
psychology

19

Few-Shot

block

12

Negative

tune

4

Refinement

widgets

6

Module

check_circle

41

Active ✅

dataset

41

ทั้งหมด

hub

Training Data → AI Pipeline (อัตโนมัติ)

psychology

Few-Shot

inject เข้า ai_generate + ai_director

✨ 🎬

block

Negative

inject เข้า ai_review เพื่อบอก "อย่าทำแบบนี้"

🔍

tune

Refinement

inject เข้า ai_refine เพื่อปรับแต่ง

✏️

widgets

Module Usage

ตัวอย่างวิธีใช้โมดูลเฉพาะ

🧩

api API Endpoints — Training Data Flow Node.js อ่านทุก 5 นาที
GET https://admin.bigzwebcenter.live/api/v1/ai-engine/active-config

Node.js configEngine เรียก endpoint นี้ทุก 5 นาที — ดึง few_shot_examples, negative_examples, refinement_examples จาก Training ทั้งหมดพร้อมกัน → inject เข้าทุก pipeline steps อัตโนมัติ

GET Few-Shot Examples
/api/v1/ai-engine/examples?category=few_shot&limit=3
inject as: few_shot_examples
used by: ✨ ai_generate · 🎬 ai_director
GET Negative Examples
/api/v1/ai-engine/examples?category=negative&limit=3
inject as: negative_examples
used by: 🔍 ai_review
GET Refinement Examples
/api/v1/ai-engine/examples?category=refinement&limit=3
inject as: refinement_examples
used by: ✏️ ai_refine
Training data ถูกใช้จริงใน AI Pipeline — active: 41 examples · few_shot: 19 · negative: 12 · refinement: 4
dataset ทั้งหมด psychology Few-Shot block Negative tune Refinement widgets Module
ทุกสถานะ ✅ Active ⭕ Inactive
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Full Page — ร้านค้าออนไลน์ / E-commerce แฟชั่น

สร้างหน้าแรกร้านค้าออนไลน์ขายเสื้อผ้าแฟชั่น โทนสีดำขาวแดง มี Hero, สินค้าแนะนำ, จุดเด่น, CTA สมัครสมาชิก 

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#ffffff","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","products","why-us","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":120,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":24,"backgroundColor":"#0f0f0f","minHeight":"90vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["hero-label","hero-h1","hero-sub","hero-cta"],"linkedNodes":{},"parent":"ROOT"},"hero-label":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"NEW COLLECTION 2026","fontSize":11,"fontWeigh...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Full Page — อสังหาริมทรัพย์ / Real Estate

สร้างหน้าแรกบริษัทอสังหาริมทรัพย์ โทนน้ำเงินขาว ดูน่าเชื่อถือ มี Hero ค้นหาโครงการ, โครงการแนะนำ, บริการ, สถิติ, CTA 

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#f0f4ff","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","listings","services","stats","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":100,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":28,"backgroundColor":"#1e3a5f","backgroundType":"image","backgroundImage":"https://loremflickr.com/1400/700/real,estate,building","minHeight":"85vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["re-h1","re-sub","re-cta"],"linkedNodes":{},"parent":"ROOT"},"re-h1":{"type":{"resolvedName":"T...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Full Page — ฟิตเนส / ยิม

สร้างหน้าแรก Fitness Center / ยิม โทนดำแดง พลังงานสูง มี Hero, โปรแกรม, สิ่งอำนวยความสะดวก, Testimonial, ทดลองเรียนฟรี 

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0a0a0a","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","programs","facilities","testimonial","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":120,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":24,"backgroundColor":"#0a0a0a","backgroundType":"image","backgroundImage":"https://loremflickr.com/1400/700/gym,fitness,exercise","minHeight":"100vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["gym-h1","gym-sub","gym-cta"],"linkedNodes":{},"parent":"ROOT"},"gym-h1":{"type":{"res...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Full Page — สปา / ร้านเสริมสวย / ความงาม

สร้างหน้าแรกสปาและร้านเสริมสวย โทนขาวโรสโกลด์ ดูหรูหรา มี Hero, บริการ, แกลลอรี, รีวิว, จองคิว 

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#fff5f7","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","services","gallery","reviews","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":120,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":24,"backgroundColor":"#2d1b24","backgroundType":"image","backgroundImage":"https://loremflickr.com/1400/700/spa,beauty,wellness","minHeight":"90vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["spa-tag","spa-h1","spa-sub","spa-cta"],"linkedNodes":{},"parent":"ROOT"},"spa-tag":{"type":{"r...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Full Page — คาเฟ่ / ร้านกาแฟ Specialty Coffee

สร้างหน้าแรกร้านกาแฟ Specialty Coffee โทนน้ำตาล-ครีม อบอุ่น มี Hero, เมนูแนะนำ, เรื่องราวเรา, แกลลอรี, ตำแหน่งร้าน 

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#f5ede0","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","menu","story","gallery","location"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":120,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":24,"backgroundColor":"#2c1810","backgroundType":"image","backgroundImage":"https://loremflickr.com/1400/700/coffee,cafe,interior","minHeight":"90vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["cafe-tag","cafe-h1","cafe-sub","cafe-cta"],"linkedNodes":{},"parent":"ROOT"},"cafe-tag":{"type...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Full Page — สถาบันการศึกษา / คอร์สออนไลน์

สร้างหน้าแรกสถาบันสอนออนไลน์ / E-Learning โทนน้ำเงินขาว ดูน่าเชื่อถือ มี Hero, คอร์สแนะนำ, วิธีการเรียน, อาจารย์, ลงทะเบียน 

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#f0f6ff","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","courses","how","instructors","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":100,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":24,"backgroundColor":"#0f172a","minHeight":"85vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["edu-label","edu-h1","edu-sub","edu-stats-row","edu-cta"],"linkedNodes":{},"parent":"ROOT"},"edu-label":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"#1 Platform การเรียนออนไ...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

[Super Director] ฟิตเนสสำหรับคนที่กลัวยิมแบบเดิม

สร้างเว็บ Fitness center สำหรับคนที่อยากออกกำลังกายแต่รู้สึก intimidated กับยิมทั่วไป

Super Director: ตัวอย่างการ flip convention — trust-first approach สำหรับ brand ที่ต้องสร้าง psychological safety ก่อน sell

{"concept":"Fitness Without Fear — เปลี่ยน intimidation เป็น invitation","emotion_journey":["recognition","relief","belonging","motivation","action"],"unexpected_element":"ไม่มี PricingCard ใน sections แรกๆ — แทนที่ด้วย Social Proof จากคนที่เคยกลัวยิมเหมือนกัน เพราะ trust ต้องมาก่อน price","cross_industry_inspiration":"ยืม warmth จาก boutique wellness spa + community feel จาก coworking space","theme":{"primary_color":"#1a1a2e","secondary_color":"#e94560","mood":"Dark but approachable — warm energy ไม่ใช่ aggressive","typography":"Bold headlines + approachable body text, หลีกเลี่ยง ALL-CAPS aggressive"},"sections":[{"order":1,"name":"Anti-Hero","narrative_role":"Hook ด้วย pain point โดยตรง ไม่ใช่ product pitch","description":"เราเข้าใจว่าคุณกลัวยิม — headline ที่พูดตรงๆ กับ target รูปบรรยาก...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

[Super Generate] SaaS Trust-First — Testimonials ก่อน Features

เว็บ SaaS ระบบจัดการธุรกิจ ต้องการสร้าง trust ก่อน ให้ลูกค้าเชื่อผ่านคนอื่นก่อนเห็น features

Super Generate: creative choice = StatsCounter ใน hero area + Testimonials section ก่อน Features — trust-first layout สำหรับ B2B SaaS

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#f8fafc","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","social-proof","features","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":100,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":24,"backgroundColor":"#0f172a","minHeight":"80vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["hero-badge","hero-h1","hero-sub","hero-stats","hero-cta"],"linkedNodes":{},"parent":"ROOT"},"hero-badge":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"ใช้งานจริงโดย 12,000+ บริษ...

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

[Super] StatsCounter ใน Hero — Data-Driven Brand

แสดง credibility ด้วยตัวเลขทันทีใน hero section สำหรับ brand ที่มี strong data

Creative pattern: StatsCounter 4 ตัวใน hero section — เหมาะกับ brand ที่มี strong data และ credibility-first approach เช่น SaaS, Healthcare, FinTech

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0f172a","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","paddingTop":100,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":32,"minHeight":"85vh","justifyContent":"center"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["h1","sub","stats-row","cta"],"linkedNodes":{},"parent":"ROOT"},"h1":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"ตัวเลขที่พิสูจน์
ว่าเราเชื่อถือได้","fontSize":52,"fontWeight":"800","color":"#ffffff","textAlign":"center","lineHeight":1....

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Hero Section — ร้านอาหารญี่ปุ่น Dark Gold

สร้างหน้าแรกร้านอาหารญี่ปุ่น Omakase โทนสีดำทอง ดูหรูหรา มี Hero รูปภาพ และ CTA

ตัวอย่างร้านอาหาร Luxury โทน dark + gold — ใช้ FlexContainer + backgroundImage overlay, ปุ่ม CTA สี gold

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {
      "backgroundColor": "#0a0a0a",
      "paddingTop": 0,
      "paddingBottom": 0,
      "minHeight": "100vh"
    },
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["hero-wrap"],
    "linkedNodes": {},
    "parent": null
  },
  "hero-wrap": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "paddingTop": 120,
      "paddingBottom": 80,
      "paddingLeft": 24,
      "paddingRight": 24,
      "gap": 24,
      "backgroundType": "image",
      "backgroundImage": "https://images.unsplash.com/photo-1579...

…[truncated]
edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

อย่าใช้ Unsplash URL แบบ /photo-xxx โดยตรง

ใส่รูปภาพจาก Unsplash ใน Image component

ห้ามใช้ URL รูปภาพในรูปแบบ https://unsplash.com/photos/xxxxx หรือ https://source.unsplash.com/xxx เพราะ URL เหล่านี้ไม่ใช่ direct image URL และจะโหลดไม่ได้ใน Craft.js. ต้องใช้ URL รูปภาพตรงจาก CDN เท่านั้น เช่น https://images.unsplash.com/photo-xxx?w=800 หรือ URL จาก Unsplash API ที่มี format .jpg/.png/.webp ชัดเจน หรือใช้ LoremFlickr: https://loremflickr.com/800/500/keyword แทน

edit
Refinement bolt Live — inject → ✏️ Refine

ปรับโทนสีให้เข้มขึ้น (Light → Dark Mode)

ต้องการปรับ design ที่มีอยู่ให้เป็น Dark Mode สีเข้ม

เมื่อ user ขอให้ "ทำให้เข้มขึ้น" หรือ "Dark Mode": 1) เปลี่ยน Section.props.backgroundColor เป็น #0f172a หรือ #09090b. 2) เปลี่ยน Text ทุกตัวที่สีเข้ม (#1e293b, #334155 ฯลฯ) เป็น #ffffff หรือ #f1f5f9. 3) เปลี่ยน Text สี secondary (#64748b, #94a3b8) เป็น #94a3b8 หรือ #64748b (เปิดเพิ่ม opacity). 4) เปลี่ยน Container.backgroundColor จาก #ffffff เป็น #1e293b. 5) ปรับ border สีจาก #e2e8f0 เป็น #334155. สีที่ควรใช้: bg=#0f172a, card=#1e293b, text-primary=#f1f5f9, text-muted=#94a3b8, border=#334155

edit
Module bolt Live — inject → 🧩 Module Steps

วิธีใช้ NavMenu component

สร้าง Navigation Menu (Header) สำหรับเว็บไซต์

NavMenu เป็น component พิเศษ: 1) ใช้เป็น ROOT โดยตรง (ไม่ต้องมี Section ครอบ). 2) menuItems ใช้รูปแบบ "ชื่อ|#anchor" คั่นด้วย newline ( ). 3) bgColor = สีพื้นหลัง navbar. 4) accentColor = สีปุ่ม CTA หรือ active item. 5) ห้ามใส่ nodes ใดๆ ใน NavMenu (nodes: []). 6) isCanvas: false เสมอ

{
  "ROOT": {
    "type": {"resolvedName": "NavMenu"},
    "isCanvas": false,
    "props": {
      "brandText": "BigZ Studio",
      "bgColor": "#0f172a",
      "textColor": "#f1f5f9",
      "accentColor": "#dc2626",
      "menuItems": "หน้าแรก|#home
บริการ|#services
ผลงาน|#portfolio
เกี่ยวกับ|#about
ติดต่อ|#contact"
    },
    "nodes": [],
    "custom": {},
    "hidden": false,
    "displayName": "NavMenu",
    "linkedNodes": {},
    "parent": null
  }
}
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

[Super Director] คาเฟ่ Luxury สำหรับ Remote Worker

คาเฟ่ specialty coffee ระดับ premium ที่ต้องการดึงดูดนักธุรกิจและ remote worker ให้เลือกเป็น "ออฟฟิศที่ 3"

Super Director: cross-industry blend example — ยืม workspace positioning ใส่ cafe brand เพื่อสร้าง unique angle

{"concept":"Your Third Office — ไม่ใช่แค่กาแฟดี แต่คือ productivity space ที่สวยที่สุดในเมือง","emotion_journey":["aspiration","familiarity","productivity","loyalty"],"unexpected_element":"Section ชื่อ The Regulars — แสดง quote จาก regulars เกี่ยวกับ productivity และ creativity ที่เพิ่มขึ้น (social proof แบบ work-context ไม่ใช่แค่รีวิวกาแฟ)","cross_industry_inspiration":"ยืม workspace aesthetic จาก WeWork + warmth จาก boutique hotel lobby + editorial style จาก luxury lifestyle magazine","theme":{"primary_color":"#1c1c1c","secondary_color":"#c9a84c","mood":"Dark luxury ผสม warm productivity — serious แต่ inviting","typography":"Serif display headlines + clean sans body — ความคมชัดที่ยังอบอุ่น"},"sections":[{"order":1,"name":"The Atmosphere","narrative_role":"ขาย feeling ก่อน — คนเลือกคาเฟ่ด...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

[Super Generate] ร้านอาหาร Visual-First — GalleryGrid เป็น Hero

ร้านอาหาร fine dining ที่ต้องการให้ภาพอาหารและบรรยากาศพูดแทนทุกอย่าง ตีอาหารให้โดดเด่นทันทีก่อนข้อความ

Super Generate: creative choice = GalleryGrid (6 images) เป็น section แรกสุด — visual impact ก่อนข้อความทั้งหมด เหมาะกับ visual-driven brand

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0a0a0a","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["visual-open","brand-intro","signature","cta"],"linkedNodes":{},"parent":null},"visual-open":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","paddingTop":80,"paddingBottom":0,"paddingLeft":0,"paddingRight":0,"gap":0,"backgroundColor":"#0a0a0a"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["gallery-hero","brand-overlay"],"linkedNodes":{},"parent":"ROOT"},"gallery-hero":{"type":{"resolvedName":"GalleryGrid"},"isCanvas":false,"props":{"images":["https://loremflickr.com/800/600/japanese,food,omakase","https://loremflickr.c...

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

[Super] GalleryGrid เป็น Hero Opening — Visual-Driven Brand

แสดง gallery ภาพเป็นสิ่งแรกที่เห็นก่อน text ใดๆ เหมาะกับ brand ที่ product/atmosphere พูดแทนตัวเองได้

Creative pattern: GalleryGrid 6 images เป็น opening element ก่อน brand identity — เหมาะกับ restaurant, fashion, interior design, photography, art gallery

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0a0a0a","paddingTop":60,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["gallery-first","brand-id"],"linkedNodes":{},"parent":null},"gallery-first":{"type":{"resolvedName":"GalleryGrid"},"isCanvas":false,"props":{"images":["https://loremflickr.com/700/500/product,premium","https://loremflickr.com/700/500/luxury,design","https://loremflickr.com/700/500/craft,artisan","https://loremflickr.com/700/500/interior,beautiful","https://loremflickr.com/700/500/detail,close","https://loremflickr.com/700/500/atmosphere,mood"],"columns":3,"gap":6,"borderRadius":0},"displayName":"GalleryGrid","custom":{},"hidden":false,"nodes":[],"linkedNodes":{},"parent":"ROOT"},"brand-id":{"type":{"re...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Hero Section — SaaS / Tech Product Dark Blue

สร้าง Hero section สำหรับ SaaS Software บริษัท tech โทนน้ำเงินเข้ม มี headline, subtext และ 2 ปุ่ม

ตัวอย่าง SaaS hero — dark navy, badge badge, 2-button row, large headline. ใช้เป็นต้นแบบสำหรับ tech/software

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {
      "backgroundColor": "#0f172a",
      "paddingTop": 0,
      "paddingBottom": 0
    },
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["hero-section"],
    "linkedNodes": {},
    "parent": null
  },
  "hero-section": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "paddingTop": 100,
      "paddingBottom": 100,
      "paddingLeft": 24,
      "paddingRight": 24,
      "gap": 20,
      "backgroundColor": "transparent"
    },
    "displayName": "FlexContainer",
    "custom": {},
    "hidden": fa...

…[truncated]
edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

อย่าลืม ROOT node และอย่าใส่ parent ใน ROOT

สร้าง Craft.js JSON โดยไม่มี ROOT node

ทุก Craft.js JSON ต้องมี key "ROOT" เสมอ และ ROOT node ต้องมี parent: null เท่านั้น (ห้ามมี parent เป็น string อื่น). ถ้าไม่มี ROOT หรือ ROOT.parent ไม่ใช่ null Craft.js จะ crash ทันที. ตัวอย่างผิด: {"hero": {..., "parent": null}} โดยไม่มี ROOT. ตัวอย่างถูก: {"ROOT": {..., "parent": null}, "hero": {..., "parent": "ROOT"}}

edit
Refinement bolt Live — inject → ✏️ Refine

เพิ่ม CTA Button ที่โดดเด่น

เพิ่ม Call-to-Action button ที่น่าคลิกและโดดเด่น

เมื่อ user ขอ "เพิ่ม CTA button": 1) เพิ่ม Button node ใหม่เข้าไปใน FlexContainer หรือ Section ที่เหมาะสม. 2) ใช้ backgroundColor ที่ contrast กับ background หลัก เช่น ถ้า bg เข้มให้ใช้ #dc2626 (brand red) หรือ #8b5cf6 (violet). 3) กำหนด paddingTop/paddingBottom อย่างน้อย 14px, paddingLeft/paddingRight อย่างน้อย 32px. 4) fontWeight: "700", fontSize: 15. 5) borderRadius: 10 หรือ 12. 6) เพิ่ม text ที่ action-oriented เช่น "เริ่มต้นเลย", "ติดต่อเรา", "สมัครฟรี". 7) ห้ามลืม parent node ที่ถูกต้อง

edit
Module bolt Live — inject → 🧩 Module Steps

วิธีใช้ Section + FlexContainer + Container (layout หลัก)

สร้าง layout พื้นฐาน Section > Container (maxWidth) > FlexContainer > content

Pattern: Section (full-width bg) > Container (maxWidth centered) > FlexContainer (row/column layout) > content nodes. ใช้เป็น template หลักสำหรับทุก section. Container ใช้ maxWidth + margin:0 auto เพื่อ center content. FlexContainer ใช้ flexWrap สำหรับ responsive

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {"backgroundColor": "#ffffff","paddingTop": 80,"paddingBottom": 80},
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["wrapper"],
    "linkedNodes": {},
    "parent": null
  },
  "wrapper": {
    "type": {"resolvedName": "Container"},
    "isCanvas": true,
    "props": {"maxWidth": "1100px","margin": "0 auto","width": "100%","paddingLeft": 24,"paddingRight": 24},
    "displayName": "Container",
    "custom": {},
    "hidden": false,
    "nodes": ["row"],
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "row": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {"flexDirection": "row","alignItems": "center","j...

…[truncated]
edit
Refinement bolt Live — inject → ✏️ Refine

เปลี่ยน/เพิ่ม URL ให้ปุ่ม (Button link)

ต้องการให้ปุ่ม CTA ลิงก์ไปยัง URL ที่ระบุ

เมื่อ user ขอให้ "เพิ่มลิงก์ให้ปุ่ม" หรือ "ให้ปุ่มลิงก์ไปที่...": 1) อัพเดท prop "link" ของ Button node นั้น. 2) ถ้า URL เป็น external (https://) ให้ตั้ง openNewTab: true. 3) ถ้าเป็น anchor (#section) หรือ internal path ให้ openNewTab: false. 4) ห้ามลบ props อื่น (backgroundColor, textColor, etc.) ออก — อัพเดทเฉพาะ link และ openNewTab เท่านั้น.

edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

[Super Director] อสังหาฯ Premium แบบ No Pressure

บริษัทอสังหาริมทรัพย์ระดับ premium ที่ต้องการให้ลูกค้า discover เอง ไม่ต้องการ aggressive sales approach

Super Director: editorial no-pressure approach — CTA positioning strategy เป็น unexpected choice ที่ works กับ premium brand

{"concept":"Find Home, Not Just Property — ให้ลูกค้า discover เองโดยไม่รู้สึกว่าถูก sell","emotion_journey":["curiosity","trust","aspiration","confidence","readiness"],"unexpected_element":"ไม่มีปุ่ม CTA ใน 3 sections แรก — ปล่อยให้ browse และ trust ก่อน CTA อยู่ท้ายสุดเพียงที่เดียว","cross_industry_inspiration":"ยืม editorial layout จาก luxury magazine + trust signals จาก law firm + curation feel จาก art gallery","theme":{"primary_color":"#0d1b2a","secondary_color":"#f0c93a","mood":"Editorial luxury — professional แต่ aspirational เหมือน Monocle magazine","typography":"Large serif display + clean body — ความ authoritative ที่ยังเข้าถึงได้"},"sections":[{"order":1,"name":"Story Opening","narrative_role":"Hook ด้วย narrative ไม่ใช่ property listing","description":"ทุกบ้านมีเรื่องราว — full-...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

[Super Generate] Product Launch — Countdown ใน Hero สร้าง Urgency

หน้า landing page สำหรับ product launch ครั้งสำคัญ ต้องสร้าง excitement และ urgency ให้ผู้เข้าชมรีบ sign up

Super Generate: creative choice = Countdown component ใน hero section — สร้าง urgency และ excitement สำหรับ product launch

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#030712","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero","features","social","cta"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":80,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":32,"backgroundColor":"#030712","minHeight":"100vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["launch-tag","launch-h1","launch-sub","countdown-wrap","launch-cta","launch-note"],"linkedNodes":{},"parent":"ROOT"},"launch-tag":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"🚀 LAUNC...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Features Section — คลินิกทันตกรรม 3 จุดเด่น

Features section สำหรับคลินิกทันตกรรม สีฟ้าขาว น่าเชื่อถือ แสดง 3 บริการหลัก

Features 3 card — light blue/white, card กลางสีน้ำเงิน (highlight) สไตล์คลินิกน่าเชื่อถือ

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {
      "backgroundColor": "#f8faff",
      "paddingTop": 80,
      "paddingBottom": 80,
      "paddingLeft": 24,
      "paddingRight": 24
    },
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["content-wrap"],
    "linkedNodes": {},
    "parent": null
  },
  "content-wrap": {
    "type": {"resolvedName": "Container"},
    "isCanvas": true,
    "props": {
      "maxWidth": "1100px",
      "margin": "0 auto",
      "width": "100%"
    },
    "displayName": "Container",
    "custom": {},
    "hidden": false,
    "nodes": ["section-title","cards-row"],
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "section-title": {
    "type": {"r...

…[truncated]
edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

อย่าใช้ HTML tag โดยตรงใน type.resolvedName

ใส่ type: "div" หรือ type: "p" ใน node

ห้ามใช้ HTML tag เช่น "div", "span", "p", "h1", "section" ใน type.resolvedName เพราะ Craft.js ใช้ชื่อ Component เท่านั้น. ชื่อที่ถูกต้องคือ: Section, Container, FlexContainer, GridContainer, Text, Button, Image, NavMenu, Hero, Feature, HeroImageSlide. ตัวอย่างผิด: {"type": {"resolvedName": "div"}}. ตัวอย่างถูก: {"type": {"resolvedName": "Container"}}

edit
Refinement bolt Live — inject → ✏️ Refine

ลด complexity ให้ Minimal / ลด clutter

ต้องการทำให้ design เรียบง่ายขึ้น ลดองค์ประกอบที่ไม่จำเป็น

เมื่อ user ขอ "ทำให้เรียบง่าย" หรือ "Minimal": 1) ลบ Container/FlexContainer ที่ซ้อนกันโดยไม่จำเป็น ให้เหลือแค่ ROOT > FlexContainer > [nodes]. 2) ลด paddingTop/paddingBottom ของ Section จาก 80-100 เหลือ 60-80. 3) ลด gap ระหว่าง elements. 4) ลบ boxShadow, border ที่ไม่จำเป็น. 5) ใช้สีน้อยลง — เหลือแค่ 1-2 สีหลัก + white/black. 6) ลด fontWeight ของ text รอง จาก 700 เป็น 400-500. 7) ลบ decorative elements (emoji badge, gradient, pattern overlay) ออกเหลือแต่ content หลัก

edit
Module bolt Live — inject → 🧩 Module Steps

วิธีสร้าง Pricing Cards 3 แพ็กเกจ

Pricing section 3 แพ็กเกจ มี highlight package กลาง

Pricing 3 card: Basic (white) | Pro (brand red + scale up = highlight) | Enterprise (white). ใช้ transform:scale(1.05) ให้ card กลางโดดเด่น. ปุ่ม Pro ใช้ white text บน red bg

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {"backgroundColor": "#f8fafc","paddingTop": 80,"paddingBottom": 80,"paddingLeft": 24,"paddingRight": 24},
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["price-wrap"],
    "linkedNodes": {},
    "parent": null
  },
  "price-wrap": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {"flexDirection": "column","alignItems": "center","gap": 40},
    "displayName": "FlexContainer",
    "custom": {},
    "hidden": false,
    "nodes": ["price-title","price-cards"],
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "price-title": {
    "type": {"resolvedName": "Text"},
    "isCanvas": false,
    "props": {"text": "...

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

วิธีใช้ ImageSlide component

สร้าง Image Slideshow section ที่ responsive

ImageSlide: 1) ใช้ heightMode="ratio" เป็น default เพื่อ responsive. 2) slides เป็น array ของ {image, link, alt}. 3) image ใน slides ใช้ placeholder "[IMG_N]" pipeline จะ inject รูปจริงให้. 4) วางใน Container (maxWidth) เสมอ. 5) isCanvas: false เสมอ

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#ffffff","paddingTop":60,"paddingBottom":60,"paddingLeft":24,"paddingRight":24},"displayName":"Section","custom":{},"hidden":false,"nodes":["slide-wrap"],"linkedNodes":{},"parent":null},"slide-wrap":{"type":{"resolvedName":"Container"},"isCanvas":true,"props":{"maxWidth":"1100px","margin":"0 auto","width":"100%"},"displayName":"Container","custom":{},"hidden":false,"nodes":["slide-title","img-slide"],"linkedNodes":{},"parent":"ROOT"},"slide-title":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"แกลลอรี่ภาพ","fontSize":28,"fontWeight":"700","color":"#0f172a","textAlign":"center","marginBottom":32},"displayName":"Text","custom":{},"hidden":false,"nodes":[],"linkedNodes":{},"parent":"slide...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Hero Section — Boutique Hotel Luxury White

หน้าแรกโรงแรม Boutique ริมทะเล สีขาวน้ำเงิน ดูสะอาด Luxury มี Hero รูปและ CTA

Hotel hero แบบ 2-column — text left + image right, สี navy/white/gold, layout แบบ magazine

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {
      "backgroundColor": "#ffffff",
      "paddingTop": 0,
      "paddingBottom": 0
    },
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["hero-flex"],
    "linkedNodes": {},
    "parent": null
  },
  "hero-flex": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {
      "flexDirection": "row",
      "alignItems": "center",
      "justifyContent": "space-between",
      "paddingTop": 80,
      "paddingBottom": 80,
      "paddingLeft": 80,
      "paddingRight": 0,
      "gap": 40,
      "minHeight": "85vh",
      "flexWrap": "wrap"
    },
    "displayName": "FlexContainer",
    "custom": {},
    "hi...

…[truncated]
edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

อย่า nest Container ซ้อนกันเกิน 4 ชั้นโดยไม่จำเป็น

สร้าง Section > Container > FlexContainer > Container > FlexContainer > Container > Text

การ nest container ซ้อนกันลึกเกิน 4 ชั้น (Section > Container > FlexContainer > Container > Text) ทำให้ JSON ใหญ่โดยไม่จำเป็น และ AI จะใช้ tokens มากเกินไป. ควรออกแบบ structure แบบ flat: ROOT (Section) > FlexContainer > [Text, Button, Image] โดยตรง ไม่ต้องมี Container คั่นกลางถ้าไม่จำเป็น. เพิ่ม Container ก็ต่อเมื่อต้องการ maxWidth wrapper หรือ card style เท่านั้น

edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

Button ต้องมี link + openNewTab เสมอ

ใส่ Button component โดยไม่ระบุ link

ทุก Button node ต้องมี prop "link" และ "openNewTab" เสมอ แม้จะยังไม่มี URL จริงก็ให้ใช้ "#" เป็น default. ห้ามสร้าง Button โดยไม่มี link เพราะผู้ใช้จะไม่สามารถตั้งค่าลิงก์ได้ใน preview mode. ตัวอย่างผิด: {"type":{"resolvedName":"Button"},"props":{"text":"คลิกเลย","backgroundColor":"#dc2626"}} ตัวอย่างถูก: {"type":{"resolvedName":"Button"},"props":{"text":"คลิกเลย","backgroundColor":"#dc2626","link":"#","openNewTab":false,"textColor":"#ffffff","borderRadius":9999}}

edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

ห้ามใช้ string ใน props ที่ต้องเป็น number (fontSize, padding, borderRadius)

กำหนด fontSize: "16px", paddingTop: "40px", borderRadius: "8px"

Props ที่เป็น numeric ใน Craft.js ต้องเป็น number ล้วน ห้ามใส่หน่วย "px" เด็ดขาด ตัวอย่างผิด: {"fontSize": "16px", "paddingTop": "40px", "borderRadius": "8px"} ตัวอย่างถูก: {"fontSize": 16, "paddingTop": 40, "borderRadius": 8} Props ที่ต้องเป็น number เสมอ: fontSize, fontWeight (400/600/700/800), paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, gap, borderRadius, lineHeight (numeric), minHeight (ถ้าเป็นตัวเลข), width (ถ้าเป็น % หรือ px ให้เป็น string เช่น "100%" แต่ถ้าเป็นตัวเลขล้วนให้เป็น number) ข้อยกเว้น: maxWidth เช่น "1100px" และ width เช่น "100%" ให้เป็น string ได้

edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Hero Section — Personal Portfolio Minimal Dark

หน้า Portfolio ของ Freelance Designer โทน dark minimal สไตล์ modern มีชื่อ, ตำแหน่ง, CTA contact

Portfolio hero — dark minimal, left-aligned, ชื่อใหญ่, role สีม่วง, 2 ปุ่ม hire + work

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {
      "backgroundColor": "#09090b",
      "paddingTop": 0,
      "paddingBottom": 0,
      "minHeight": "100vh"
    },
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["port-wrap"],
    "linkedNodes": {},
    "parent": null
  },
  "port-wrap": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {
      "flexDirection": "column",
      "alignItems": "flex-start",
      "justifyContent": "center",
      "paddingTop": 0,
      "paddingBottom": 0,
      "paddingLeft": 80,
      "paddingRight": 80,
      "minHeight": "100vh",
      "gap": 16
    },
    "displayName": "FlexContainer",
    "custom": {},
    "...

…[truncated]
edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

Hero Section — บริษัท IT พร้อม Button Link

สร้าง Hero section สำหรับบริษัท IT บริการ Cloud โทนน้ำเงิน มีปุ่ม CTA ลิงก์ไปหน้า contact

ตัวอย่าง Hero IT/Cloud — dark navy, 2-button CTA. สำคัญ: Button ทุกตัวต้องมี link + openNewTab เสมอ แม้จะเป็น anchor link เช่น #contact

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0f172a","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero-wrap"],"linkedNodes":{},"parent":null},"hero-wrap":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","justifyContent":"center","paddingTop":100,"paddingBottom":100,"paddingLeft":24,"paddingRight":24,"gap":24,"minHeight":"90vh"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["badge","headline","subtext","cta-row"],"linkedNodes":{},"parent":"ROOT"},"badge":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"☁️ Cloud Solutions Provider","fontSize":12,"color":"#60a5fa","fontWeight":"600","letterSpacing":"0....

…[truncated]
edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

ห้าม nodes[] อ้างอิง id ที่ไม่มีอยู่ใน JSON

สร้าง FlexContainer ที่มี nodes: ["child-1","child-2","child-3"] แต่ใน JSON มีแค่ child-1 และ child-2

ทุก id ที่ปรากฏใน nodes[] ของ node ใดๆ จะต้องมี key นั้นอยู่ใน JSON object ด้วย ตัวอย่างผิด: {"wrapper": {"nodes": ["title","desc","btn-missing"]}} แต่ไม่มี key "btn-missing" ใน JSON ผลที่เกิด: Craft.js จะ crash หรือ render ไม่ครบ วิธีตรวจสอบ: ก่อน output ให้ scan ทุก nodes[] แล้ว verify ว่าทุก id มีอยู่เป็น key ใน JSON นอกจากนี้ ทุก node ที่มี parent เป็น X จะต้องมี id ของตัวเองปรากฏอยู่ใน nodes[] ของ X ด้วย

edit
Few-Shot bolt Live — inject → ✨ Generate / 🎬 Director

PricingCard + BlogCard — พร้อม Link Props

ตัวอย่าง PricingCard และ BlogCard ที่มี link props ครบ

ตัวอย่าง PricingCard ที่มี buttonLink + buttonOpenNewTab และ BlogCard ที่มี articleLink + articleOpenNewTab — props เหล่านี้บังคับต้องมีเมื่อสร้าง component ทั้งสอง

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#f8fafc","paddingTop":60,"paddingBottom":60,"paddingLeft":24,"paddingRight":24},"displayName":"Section","custom":{},"hidden":false,"nodes":["demo-row"],"linkedNodes":{},"parent":null},"demo-row":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"row","gap":24,"justifyContent":"center","flexWrap":"wrap"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["pc1","bc1"],"linkedNodes":{},"parent":"ROOT"},"pc1":{"type":{"resolvedName":"PricingCard"},"isCanvas":false,"props":{"planName":"Pro Plan","price":"990","currency":"฿","period":"/เดือน","features":"เว็บไซต์ไม่จำกัด\nSSL ฟรี\nซัพพอร์ต 24/7","buttonText":"เลือกแพ็กเกจนี้","buttonLink":"https://example.com/sign...

…[truncated]
edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

ห้าม node ขาด required fields หรือมี field ผิดประเภท

สร้าง node โดยไม่มี displayName หรือ custom หรือ hidden หรือ linkedNodes

ทุก node ใน Craft.js JSON ต้องมี required fields ครบดังนี้: - type: { resolvedName: "ComponentName" } (object, ห้ามเป็น string) - isCanvas: true หรือ false (boolean, ห้ามเป็น string "true"/"false") - props: {} (object, อาจว่างได้แต่ต้องมี key นี้) - displayName: "ComponentName" (string) - custom: {} (object, มักว่าง) - hidden: false (boolean) - nodes: [] (array, อาจว่างสำหรับ non-canvas) - linkedNodes: {} (object, มักว่าง) - parent: "parentId" หรือ null สำหรับ ROOT (string หรือ null) ตัวอย่างผิด: ขาด linkedNodes, ขาด custom, isCanvas เป็น "true" (string) ตัวอย่างถูก: มีทุก field และ type ถูกต้องตามที่ระบุ

edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

ห้าม Text node มี nodes[] ที่ไม่ว่าง (Text ไม่ใช่ Canvas)

สร้าง Text node แล้วใส่ child nodes เข้าไปใน nodes[]

Component ที่มี isCanvas: false ต้องมี nodes: [] เท่านั้น ห้ามมี children Component ที่ isCanvas: false เสมอ: Text, Button, Image, Video, Divider, StatsCounter, IconBox, ServiceCard, PricingCard, Testimonial, BlogCard, ProductCard, TeamMember, StepItem, Rating, Countdown, NavMenu, FooterBlock, ContactForm, Accordion, Tabs ตัวอย่างผิด: {"type":{"resolvedName":"Text"}, "isCanvas":false, "nodes":["child-span"]} — จะ error ตัวอย่างถูก: {"type":{"resolvedName":"Text"}, "isCanvas":false, "nodes":[]} — ถูกต้อง ถ้าต้องการจัดกลุ่มข้อความ ให้ใช้ FlexContainer หรือ Container ครอบแทน

edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

[Super] อย่า translate prompt ตรงๆ โดยไม่ตีความ

user บอก "เว็บฟิตเนส" แล้วสร้างยิมทั่วไปเลย

Super Director ต้องตีความ brief ก่อนเสมอ อย่า translate ตรงๆ ถามก่อนเสมอ: ฟิตเนสแบบไหน? สำหรับใคร? ต้องการให้รู้สึกยังไง? แตกต่างจากคู่แข่งอย่างไร? ตัวอย่างผิด: "เว็บฟิตเนส" → Hero + Programs + Facilities + CTA (ยิมทั่วไป 100%) ตัวอย่างถูก: "เว็บฟิตเนส" → วิเคราะห์ก่อนว่า target คือใคร → ถ้าเป็น luxury fitness → ยืม aesthetic จาก spa → sections ต่างกันโดยสิ้นเชิง กฎ: ทุก brief ต้องมี concept + emotion_journey ก่อนออกแบบ sections เสมอ

edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

[Super] อย่าใช้ spacing เท่ากันทุก section

ใส่ paddingTop: 80, paddingBottom: 80 ทุก section โดยไม่มีเหตุผล

Super Generate ต้องสร้าง visual rhythm ที่ deliberate การ padding เท่ากันทุก section ทำให้ผู้เข้าชม "desensitized" — ไม่มีจุดหยุดพัก ไม่มี emphasis ตัวอย่างผิด: Hero(80/80) → Features(80/80) → Testimonials(80/80) → CTA(80/80) ตัวอย่างถูก: Hero(120/80 ใหญ่ = importance) → Features(60/60 แน่นขึ้น) → Testimonials(80/80 ปกติ) → CTA(100/100 กว้างขึ้น = final emphasis) กฎ: sections ที่ important ควร pad มากกว่า, transition sections pad น้อยกว่า, CTA section มักใหญ่ที่สุดเพื่อ closing impact

edit
Negative bolt Live — inject → 🔍 Review (อย่าทำแบบนี้)

[Super] อย่าวาง CTA button ทุก section

วาง Button "ติดต่อเรา" หรือ "สมัครเลย" ทุก section ตั้งแต่ต้นจนจบ

Super roles ต้องคิดเรื่อง CTA strategy อย่างจงใจ การมี CTA ทุก section ลด impact ของ CTA จริงๆ และทำให้ผู้เข้าชมรู้สึกว่าถูก pressure กลยุทธ์ที่ดี: - Trust-first brand: CTA เดียวที่ท้ายสุด หลังจาก trust ถูกสร้างแล้ว - Urgency brand: CTA ใน hero + CTA ท้าย (2 จุด) - High-consideration brand (อสังหาฯ, B2B): ไม่มี CTA ใน 3 sections แรก - Impulse brand (event, sale): CTA + countdown ใน hero ทันที กฎ: จำนวนและตำแหน่ง CTA ต้องตัดสินใจจาก buyer journey ไม่ใช่ใส่ทุกที่เพราะ "ควรมี"

edit