model_training AI Training Data

อย่าใช้ 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 แทน

อย่าลืม 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"}}

อย่าใช้ 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"}}

อย่า 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 เท่านั้น

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}}

ห้ามใช้ 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 ได้

ห้าม 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 ด้วย

ห้าม 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 ถูกต้องตามที่ระบุ

ห้าม 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 ครอบแทน

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

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

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

[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

[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 ไม่ใช่ใส่ทุกที่เพราะ "ควรมี"