Prompt ที่ใช้จริง — เว็บอสังหาริมทรัพย์ บ้านสบาย

Prompt ด้านล่างใช้มอบหมายการสร้างตัวอย่างที่สี่ในรอบงานนี้ ผลลัพธ์ที่ตรวจแล้วและการตัดสินใจจาก skill สรุปไว้ใน lab บ้านสบายและบันทึก prompt/ผลลัพธ์ ไม่ใช่การอ้างว่าทุกคำแนะนำของ skill ถูกใช้โดยไม่ตรวจสอบ ชื่อ “Vibe to Production” ภายใน block เป็นข้อความประวัติศาสตร์ของ prompt ที่ใช้จริงก่อนเปลี่ยนชื่อ course shell เป็น AI Web Studio จึงเก็บไว้ verbatim

สร้างเว็บอสังหาริมทรัพย์ภาษาไทยชื่อ บ้านสบาย เป็นตัวอย่างที่สี่ของหลักสูตร Vibe to Production
ใช้ semantic HTML, CSS, vanilla JavaScript ตาม stack เดิม ไม่เพิ่ม dependencies
อ่านผลลัพธ์จริงจาก skill ui-ux-pro-max ใน design-system/baan-sabai/MASTER.md
และ page override design-system/baan-sabai/pages/home.md ก่อนลงมือ

ออกแบบเว็บค้นหาบ้านที่อ่านสบาย ใช้ teal/blue ภาพใหญ่และตัวอักษรไทยที่อ่านได้
ใช้ฟอนต์ IBM Plex Sans Thai ที่มีอยู่ และภาพ AI /images/real-estate-home.webp
แสดงรายการอสังหาริมทรัพย์สมมติ 6 รายการ พร้อมทำเล ประเภท ราคา จำนวนห้อง และพื้นที่
ทำตัวกรองทำเล ประเภท งบสูงสุด การเรียงราคา บันทึกรายการโปรดในเครื่อง
แสดงจำนวนผลลัพธ์และ empty state พร้อมปุ่มล้างตัวกรอง
เปิดรายละเอียดด้วย dialog ที่ใช้คีย์บอร์ดได้และคืน focus เมื่อปิด
ปุ่มสนใจทรัพย์เลือก property ในแบบฟอร์ม แล้วส่ง inquiry ผ่าน POST /api/contact
ใช้ข้อมูลสาธิตและแจ้งนโยบาย redact ชื่อ/อีเมล/ข้อความก่อนเขียน D1
มี loading, validation error, server error และ success state กันส่งซ้ำด้วย idempotency key
ไม่มีธุรกรรม จ่ายเงิน ลงประกาศ หรือคำรับรองผลตอบแทนจริง

ทุก CTA ต้องทำงานจริง มือถือ 390px ไม่ล้นแนวนอน มี skip link, focus visible,
labels, accessible status และ reduced-motion ไม่ใส่ testimonial หรือสถิติที่แต่งขึ้น
ส่ง source ที่ examples/real-estate/{index.html,style.css,main.js}
บันทึกสิ่งที่ทำ ข้อจำกัด และวิธีตรวจผล โดยให้ผู้ประสานงานรัน build/browser tests

ดู ผลลัพธ์จริงและวิธีใช้ skill และ เว็บบ้านสบาย

เปิดแผนภาพ user journey แบบเต็มหน้า เพื่อเทียบ flow ที่เกิดจาก prompt ข้อความใน code block เป็น prompt ที่ใช้จริง จึงรักษาไว้ตามต้นฉบับและใช้แผนภาพเป็นหลักฐานอธิบายผลลัพธ์เท่านั้น