Full lab เรียนต่อด้วยตัวเองประมาณ 2 ชั่วโมง — ออกแบบเว็บอสังหาริมทรัพย์ด้วย ui-ux-pro-max

Lab นี้ใช้ skill ชื่อ ui-ux-pro-max เพื่อค้นหาแนวทาง UI/UX แล้วแปลงผลค้นหาเป็นเว็บอสังหาริมทรัพย์ภาษาไทย “บ้านสบาย” ที่อยู่ใน /examples/real-estate/ ชื่อที่ผู้เรียนอาจพบว่าเขียนเป็น ux-ui-pro-max หมายถึงงานประเภทเดียวกัน แต่ชื่อ canonical ของ skill ที่ใช้ในโครงการนี้คือ ui-ux-pro-max.

Lab นี้อยู่นอก workshop 2 วัน / 8 ชั่วโมง เป้าหมายไม่ใช่ให้ skill ตัดสินงานออกแบบแทนทีม เมื่อใช้เวลาประมาณ 120 นาที ผู้เรียนควรทำได้สามอย่าง:

• หาและตรวจการติดตั้ง skill ใน agent host ของตนโดยไม่เดา path หรือ syntax
• สร้าง design-system recommendation, อ่านเหตุผล และบันทึกการตัดสินใจที่ใช้/ปรับ/ไม่ใช้
• ส่งมอบหน้า responsive ที่มี search/filter, empty state, form feedback และหลักฐานตรวจรับ

เว็บนี้เป็นกรณีศึกษาในชั้นเรียน ทรัพย์ ราคา รูป และข้อความทั้งหมดเป็นข้อมูลสมมติ ไม่มีประกาศขาย นัดชม รับชำระเงิน หรือคำแนะนำการลงทุนจริง

สิ่งที่ต้องมีก่อนเริ่ม

• อ่าน พื้นฐาน skills, design และ assets และ prompt ที่ใช้สร้างบ้านสบาย
• Python 3.x สำหรับ search script; script นี้ไม่ต้องติดตั้ง Python package เพิ่ม
• skill ui-ux-pro-max ที่ติดตั้งใน agent host ของผู้เรียน
• repository นี้ซึ่งใช้ semantic HTML, CSS และ vanilla JavaScript; ไม่ได้ใช้ Tailwind หรือ React

โครงการไม่ได้คัดลอก ui-ux-pro-max มาแจกใน training-skills/ และไม่อ้างสิทธิ์การนำชุดข้อมูลของ skill ไปเผยแพร่ต่อ ตัวอย่าง skill ที่ repository แจกให้ฝึกอ่านคือ training-skills/website-evidence-review/ ซึ่งเป็นคนละ skill กัน ผู้เรียนต้องติดตั้ง ui-ux-pro-max ตามคู่มือและสิทธิ์ใช้งานของ host ตนเอง

0–15 นาที: หา skill และตรวจ prerequisites

แต่ละ host เก็บ skills และเรียกใช้ต่างกัน ให้เปิด skill catalog ของเครื่องนั้น ค้นชื่อ ui-ux-pro-max แล้วคัดลอก directory ที่ติดตั้งจริงมาใส่ตัวแปรด้านล่าง อย่าเดา path จากเครื่องผู้สอน และอย่าอ้างว่าเรียก $ui-ux-pro-max ได้จนกว่าเอกสารของ host จะยืนยัน syntax นั้น

UI_UX_PRO_MAX_DIR="/path/from-your-agent-skill-catalog/ui-ux-pro-max"
test -f "$UI_UX_PRO_MAX_DIR/SKILL.md"
test -f "$UI_UX_PRO_MAX_DIR/scripts/search.py"
python3 "$UI_UX_PRO_MAX_DIR/scripts/search.py" --help

ผลที่คาดหวังคือทุกคำสั่งจบด้วย exit code 0 และหน้าช่วยเหลือแสดง --design-system, --domain, --stack, --persist, --output-dir และ --page หาก python3 ไม่มี ให้ลองคำสั่ง Python 3 ที่ host รองรับ เช่น python หรือ py -3; อย่าเปลี่ยนไปดาวน์โหลด script จาก URL ที่ไม่ทราบแหล่งที่มา

ถ้ายังไม่ติดตั้ง ให้ใช้ตัวจัดการ skill หรือขั้นตอนติดตั้งของ host นั้น และตรวจ SKILL.md ก่อนเรียก script การติดตั้งสำเร็จหมายถึงหาไฟล์และเปิด --help ได้ ไม่ได้หมายความว่าคำแนะนำเหมาะกับงานแล้ว

15–35 นาที: ตั้ง brief ก่อนค้นหา

เขียน brief สั้น ๆ ก่อนเปิดฐานข้อมูลของ skill:

อย่าเลือก --stack react หรือ --stack nextjs เพราะชื่อผลิตภัณฑ์ฟังดูเหมือน marketplace ตัวค้นหามี html-tailwind เป็น stack ที่ใกล้เคียง แต่โครงการนี้ไม่มี Tailwind การเรียก stack นั้นจะเพิ่มคำแนะนำที่ไม่ตรงกับ source จริง รอบนี้จึงใช้ design system และ domain ux ซึ่งใช้กับ HTML ทั่วไป แล้วให้ brief ระบุ stack implementation แทน

35–55 นาที: สร้าง design system และเก็บหลักฐาน

ตั้ง project root จาก directory ปัจจุบัน แล้วเรียก search script ผ่าน path ของ skill ที่ตรวจแล้ว:

PROJECT_ROOT="$(pwd)"
mkdir -p artifacts
python3 "$UI_UX_PRO_MAX_DIR/scripts/search.py" \
  "real estate residential property Bangkok warm editorial calm trust search listings" \
  --design-system --persist -p "Baan Sabai" \
  --output-dir "$PROJECT_ROOT" -f markdown \
  > artifacts/ui-ux-pro-max-design-system.txt

คำสั่งนี้เป็นคำสั่งที่ใช้จริงในโครงการ ผลลัพธ์ terminal ถูกเก็บใน artifacts/ui-ux-pro-max-design-system.txt และ source of truth ที่ persist แล้วอยู่ใน design-system/baan-sabai/MASTER.md หาก MASTER.md มีอยู่ก่อน --persist จะไม่เขียนทับ ให้เปิดอ่านและ diff ก่อน ใช้ --force เฉพาะเมื่อทีมตั้งใจสร้างใหม่และยอมรับการเปลี่ยน source of truth แล้ว

ผลที่ได้จริงประกอบด้วย:

• pattern แบบ Marketplace / Directory โดยให้ search เป็น CTA หลัก
• palette สี trust teal #0F766E, action blue #0369A1, พื้น #F0FDFA
• style Exaggerated Minimalism และ typography Cinzel + Josefin Sans
• CTA รองให้ลงประกาศ, virtual tour และแนวทางภาพอสังหาริมทรัพย์
• checklist เรื่อง contrast, visible focus, responsive และ reduced motion

จากนั้นค้นเฉพาะปัญหา UX ที่มีผลกับ directory:

python3 "$UI_UX_PRO_MAX_DIR/scripts/search.py" \
  "search filter form accessibility" --domain ux \
  > artifacts/ui-ux-pro-max-ux-search.txt

ผลจริงมี 3 ข้อ: input ต้องมี label, หน้าผลลัพธ์ว่างต้องให้ทางไปต่อ และ form submit ต้องแสดง loading แล้วจบด้วย success หรือ error

55–75 นาที: เปลี่ยนคำแนะนำให้เป็นการตัดสินใจ

เปิดแผนภาพขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง

ภาพ user journey ทำให้ตรวจได้ว่าคำแนะนำด้านภาพไม่ได้กลบงานหลักของผู้ใช้: ผู้ใช้ต้องไปต่อได้เมื่อผลลัพธ์ว่าง, กลับจาก dialog ได้โดย focus ไม่หาย และเข้าใจว่า form เป็นการส่งความสนใจสาธิต ไม่ใช่การนัดชมหรือธุรกรรม

ฝึกอ่านภาพ: เดินเส้นทางด้วย keyboard ตั้งแต่ filter จนถึง form แล้วจด pain point ที่เกิดจริงหนึ่งข้อ หากภาพไม่มี state ที่พบ ให้บันทึกเป็น fidelity gap ก่อนแก้ภาพตาม Lab เสริม diagram-design

บันทึก page override ที่ design-system/baan-sabai/pages/home.md ก่อนเขียน UI ตารางนี้แสดงความต่างระหว่าง “ผลค้นหา” กับ “สิ่งที่ใช้จริง”:

หลักคิดคือ recommendation ช่วยเปิดทางเลือก ส่วน product truth, ภาษา, stack, accessibility test และฟังก์ชันที่มีจริงเป็นตัวตัดสินสุดท้าย

75–100 นาที: ส่ง prompt ให้ลงมือเป็น vertical slice

หลังเตรียม design system ในขั้นก่อนหน้า คัดลอก prompt ฉบับเต็มด้านล่างไปให้ coding agent ในสำเนา starter ของผู้เรียน ข้อความนี้ตรงกับ prompt ที่มอบหมายจริง ชื่อ course เดิมใน block เป็นส่วนหนึ่งของหลักฐานประวัติศาสตร์และเก็บไว้ verbatim; เมื่อสร้างตัวอย่างใหม่ให้ใช้ชื่อ AI Web Studio ใน brief ใหม่:

สร้างเว็บอสังหาริมทรัพย์ภาษาไทยชื่อ บ้านสบาย เป็นตัวอย่างที่สี่ของหลักสูตร 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

ผลลัพธ์ที่ควรได้: เว็บ บ้านสบาย ที่มีบ้านสมมติ 6 รายการ ตัวกรอง รายการโปรด dialog รายละเอียด และฟอร์มส่งความสนใจ เทียบกับ ภาพผลลัพธ์ แล้วตรวจ interaction ตามขั้นถัดไป

Prompt ติดตามผลหลังสร้าง

ตรวจเว็บบ้านสบายที่เพิ่งสร้างกับ design-system/baan-sabai/pages/home.md
ลองกรองจนไม่พบรายการแล้วล้างตัวกรอง เรียงราคา บันทึกรายการโปรดแล้ว reload
เปิด/ปิดรายละเอียดด้วย keyboard และตรวจ focus; ปุ่มสนใจต้องเลือกบ้านในฟอร์มให้ถูกต้อง
ลองส่งข้อมูลสมมติและจำลอง network error; retry ข้อมูลเดิมต้องใช้ Idempotency-Key เดิม
ตรวจ desktop/390px, contrast, labels และ reduced motion แล้วแก้เฉพาะจุดที่ไม่ผ่าน
สรุปข้อกำหนด / ผลจริง / หลักฐาน / สิ่งที่แก้ โดยไม่อ้างผลตรวจที่ยังไม่ได้รัน

ผลจาก prompt ต้องเป็น source ที่ review ได้:

• examples/real-estate/index.html — landmarks, filter form, six-listing directory, inquiry form และ native dialog
• examples/real-estate/style.css — token สีจาก design system, IBM Plex Sans Thai, responsive grid, focus และ reduced-motion rule
• examples/real-estate/main.js — filter/sort, favorites ใน localStorage, empty state, dialog focus restoration และ POST /api/contact
• public/images/real-estate-home.webp — ภาพประกอบส่งเว็บ 272,916 bytes ที่มี dimensions ใน HTML

ข้อกำหนดสำคัญของ prompt คือไม่เพิ่ม dependency และไม่แก้ API ให้เชื่อ field ใหม่จาก browser หน้า real-estate แปลงบ้านที่เลือกเป็นข้อความตัวอย่าง แล้วส่ง contact contract เดิม {name,email,message,consent,website} พร้อม Idempotency-Key

100–115 นาที: ตรวจผลเป็นชั้น ๆ

ตรวจ source ก่อนเพื่อให้ failure อ่านง่าย:

node --check examples/real-estate/main.js
npm run build
npm run lint

จากนั้นเปิด /examples/real-estate/ ใน preview ที่ทีมจัดพอร์ตไว้แล้ว และตรวจด้วย keyboard กับ viewport 390px:

1. Tab จาก skip link ไปยังรายการบ้าน
2. กรองจนไม่พบรายการ แล้วตรวจว่ามีคำอธิบายและปุ่มล้างตัวกรอง
3. เพิ่ม/ลบรายการโปรดและ reload เพื่อดู local persistence
4. เปิด/ปิด dialog ด้วย keyboard แล้วตรวจว่า focus กลับปุ่มเดิม
5. เลือก “สนใจทรัพย์” แล้วตรวจว่าฟอร์มเลือกบ้านและ focus ไปชื่อ
6. ส่งข้อมูล synthetic ที่ valid และ invalid; ตรวจ loading, error และ success โดยไม่อ้างว่านัดชมแล้ว
7. เปิด Reduce Motion และตรวจว่า smooth scroll/transition ไม่เป็นอุปสรรค
8. ตรวจไม่มี horizontal overflow ที่ 390px และไม่มี serious/critical accessibility finding

ผลตรวจรอบส่งมอบ: node --check ผ่าน และ browser suite ผ่าน 40/40 กรณี รวมตัวอย่างบ้านสบายทั้ง desktop/390px, axe, filters/reset, sort, favorites persistence, dialog focus, inquiry และ retry ดู raw output ใน artifacts/browser-tests.txt และภาพจริงใน gallery ผลนี้เป็นหลักฐานของเวอร์ชันที่ส่งมอบ ผู้เรียนต้องรันทดสอบใหม่หลังแก้โค้ดของตน

115–120 นาที: ส่งหลักฐานและ retrospective

ส่งมอบสี่อย่าง:

1. query และ raw output ของ skill
2. MASTER.md กับ page override ที่บอก use/adapt/reject
3. prompt, source diff และ URL ของเว็บ
4. command output, browser checks, screenshot และข้อจำกัดที่ยังเหลือ

ตอบ retrospective สั้น ๆ: “คำแนะนำใดที่เราปฏิเสธ และการปฏิเสธนั้นทำให้ผลิตภัณฑ์ซื่อตรงหรือใช้ง่ายขึ้นอย่างไร?” ถ้าคำตอบคือ “ใช้ทุกอย่างตาม skill” ให้ย้อนกลับไปตรวจ CTA, typography, stack และ feature ที่ไม่มี backend อีกครั้ง

ดูภาพรวม prompt → artifact → verification ที่ บันทึก prompt และผลลัพธ์ และเปิด เว็บบ้านสบาย. ภาพหน้าจอ release อยู่ที่ /images/results/real-estate-desktop.png

หากต้องสร้างแผนภาพ journey ใหม่จากผลทดสอบ ใช้ ชุด prompt diagram-design และเก็บ source/สิ่งที่ลดทอนไว้กับหลักฐานของ lab