ก่อนทำหน้าจอจริง ผมยังอยากเห็นแบบ

ตรวจแล้วครับ — ข้อสังเกตของคุณถูกต้อง และเป็นช่องว่างเชิงโครงสร้างจริง ไม่ใช่แค่เอกสารตกหล่น สิ่งที่พบ

• 01-plan.md ปิด S1 แล้ว (Task 1–4) และกำหนด S2 ถัดไปเป็น Foundation & Data layer — คือโครงโปรเจกต์ + ชั้นข้อมูล + seed + เรนเดอร์ #/items ซึ่งเป็นงานที่ไปทาง "โครงหลังบ้าน" จริงตามที่คุณเห็น
• sabayjai-pantry.md ครอบคลุม สถาปัตยกรรม · Data Model · Contracts · โครงไฟล์ · route table แต่ ไม่มีหัวข้อ UX/UI เลย — ไม่มี wireframe, ไม่มีเลย์เอาต์หน้าจอ, ไม่มีแผนผังการนำทาง, ไม่มีสเปกองค์ประกอบ/สถานะ (เหลือง–แดง, toast, modal)
• ต้นเหตุอยู่ที่ TEMPLATE.md เองก็มีแค่ 4 หัวข้อ (Overview · Data Model · Contracts · Trade-offs) และ ROADMAP.md walking ลำดับ "Design → Data/Foundation → ฟีเจอร์" โดยไม่มีขั้น UX/UI เป็นขั้นมาตรฐาน

ผลคือ R002–R006 จะเริ่มสร้างหน้าจอจริงโดยไม่มีแบบร่างให้ตรวจก่อน — ขัดกับหลัก SADF ที่ "ตกลงแบบก่อนลงมือ" และ "มนุษย์เป็นผู้ตรวจรับ" เพราะจอถูกสร้างไปแล้วกว่าจะได้ตรวจ ผมเห็นด้วยว่าควรมี Draft UX/UI ก่อน S2 (อย่างน้อยต้องมี shell/เมนู/การ์ดรายการ ที่ S2 จะสร้างจริง) ก่อนขอลงมือ ขอตัดสินใจ 4 ข้อครับ

รับทราบครับ — จะถามในแชตเท่านั้น ไม่ใช้ปุ่ม สรุปสิ่งที่ผมตรวจพบสั้น ๆ ก่อน:R001 S1 ปิดครบ Task 1–4 แล้ว และ 01-plan.md กำหนด S2 ถัดไปเป็น Foundation & Data layer (โครง Vite + ชั้นข้อมูล + seed + เรนเดอร์ #/items) ส่วน sabayjai-pantry.md มีสถาปัตยกรรม/Data Model/Contracts/โครงไฟล์/route table แต่ ไม่มีหัวข้อ UX/UI และ TEMPLATE.md ของรีโปก็มีแค่ 4 หัวข้อ จึงไม่มีที่ให้เขียน UX/UI มาตั้งแต่ต้น ทำให้ R002–R006 จะสร้างหน้าจอจริงโดยไม่มีแบบให้ตรวจก่อน ขอให้คุณเลือก 4 ข้อนี้ครับ (ตอบเป็นข้อ ๆ เช่น "1. ก, 2. ก, 3. ข, 4. ก") 1) วางงาน Draft UX/UI ไว้ตรงไหน

• ก. เพิ่ม Sprint S1.5 · UX/UI Draft ใน R001 ก่อนเริ่ม S2 (ผมแนะนำ — S1 ปิดแล้ว S2 ยังไม่เริ่ม แทรกได้สะอาด ไม่ต้องเลื่อน Release อื่น)
• ข. ขยายผลส่งมอบ S1 เดิม เพิ่มหัวข้อ UX/UI เข้าเอกสารดีไซน์เดิม (ไม่เพิ่ม Sprint แต่เอกสารเดียวจะปนสองระดับรายละเอียด)
• ค. แยกเป็น Release ใหม่ (เช่น R001.5) มี 01-plan.md / 02-result.md ของตัวเอง
• ง. ทำคู่ขนานไปกับ S2 ไม่ต้องรอ (เร็วสุด แต่ shell/เมนู/การ์ดใน S2 ถูกสร้างก่อนมีแบบ)

2) รูปแบบของ Draft

• ก. Wireframe ในไฟล์ Markdown (โครงกล่อง ASCII + หมายเหตุ) (ผมแนะนำ — ตรวจในรีโปได้ คุมเวอร์ชันด้วย git ได้)
• ข. Prototype HTML/CSS คลิกได้จริง (เห็นภาพจริง แต่แตะโค้ดโปรเจกต์ก่อนชั้นข้อมูลเสร็จ)
• ค. ภาพ mockup จากเครื่องมือภายนอก เช่น Figma/สเก็ตช์ (สวย แต่ตรวจ/แก้ในรีโปยาก)

3) ขอบเขตหน้าจอ

• ก. ครบ 8 route แต่ลงลึกเฉพาะจอที่ทำจริงใน S2 + R002–R004 (ผมแนะนำ)
• ข. เฉพาะจอของ S2 และ R002 เท่านั้น (เล็กสุด แต่ R003–R004 ต้องทำ draft รอบใหม่)
• ค. ครบ 8 route ลงลึกทุกจอพร้อมสถานะและข้อความไทย (จบครั้งเดียว แต่งานใหญ่และอาจต้องรื้อ)

4) ปรับโครงเอกสารถาวรไหม

• ก. อัปเดตทั้ง ROADMAP.md และ TEMPLATE.md ให้มีหัวข้อ UX/UI เป็นมาตรฐาน (ผมแนะนำ)
• ข. อัปเดตแค่ ROADMAP + 01-plan.md ของ R001
• ค. ยังไม่ต้อง ดูผลลัพธ์ draft ก่อน

หมายเหตุเล็ก: คำว่า "Backend" ในแผนตอนนี้คือ Data layer ฝั่งเบราว์เซอร์ (localStorage) ไม่มีเซิร์ฟเวอร์จริง — ถ้าที่คุณกังวลคือต้องมี backend จริง ผมจะแยกเป็นอีกคำถามเรื่องขอบเขตสถาปัตยกรรมให้ครับ

ตอบคำถามข้อ 1 ก่อนครับ: ไม่จำเป็นต้องทำก่อน Backend — ชั้นข้อมูลเป็น JS ล้วนไม่แตะ DOM และสัญญาระบุครบแล้วใน S1 จึงไม่ต้องรอแบบจอ แต่มีกับดัก 2 จุด: S2 มี Task 1 (shell/เมนู) และ Task 4 (เรนเดอร์ seed) ที่แตะจอจริง ถ้าทำเต็มรูปแบบก่อนมีแบบจะได้จอที่ไม่มีแบบให้ตรวจและเสี่ยงรื้อ ผมจึงรัด S2 เป็น "โครง + ชั้นข้อมูล + ลิสต์เรียบไว้ยืนยันว่าต่อจอได้จริง" แล้วยกงานออกแบบไป S3 · UX/UI Draft ตามที่คุณเสนอ และเห็นด้วยกับกรอบ R001 ของคุณครับ: ขั้นต่ำ = lock data structure (ปิดไปแล้วใน S1) + Draft UX/UI ก็พอ ส่วนรายละเอียดจอจริงค่อยลงลึกตอนสร้างแต่ละจอใน R002–R006 ตอนนี้สร้าง prototype ที่คลิกได้ครบ 8 เส้นทางครับ ทำเสร็จแล้วครับ — แบบร่าง UX/UI พร้อมให้ตรวจ และเปิดอยู่ในแท็บ Preview แล้ว

ตอบคำถามข้อ 1 ของคุณ

ไม่จำเป็นต้องทำก่อน Backend — ชั้นข้อมูลเป็น JS ล้วน (storage/db/selectors/validate/seed/undo) ไม่แตะ DOM และสัญญาระบุครบใน S1 จึงไม่ต้องรอแบบจอ แต่ S2 มี 2 งานที่แตะจอจริง (shell/เมนู, เรนเดอร์ seed) ผมจึงรัด S2 ให้เหลือ "โครง + ชั้นข้อมูล + ลิสต์เรียบ ไม่ตกแต่ง" แล้วยกงานออกแบบไป S3 และย้ายงานตกแต่งจริงไปรวมกับ Task 8 ของ S3 ขอบเขต R001 ยังคงตามที่คุณวางไว้: lock data structure (ปิดแล้วใน S1) + Draft UX/UI เท่านั้น

สิ่งที่ส่งมอบ

• sabayjai-pantry-ux-ui.md — หลักการออกแบบ · แผนผังการนำทาง · โทเคนสี/ตัวอักษร/ระยะ · องค์ประกอบ 15 ตัว · รายละเอียด 8 จอ (ลงลึก 4 จอ: #/items #/add #/locations #/categories) · copy deck ภาษาไทย · a11y · traceability
• prototype.html — prototype คลิกได้ ไฟล์เดียว ไม่มี dependency (ตามที่คุณเลือก 2.ข) ใช้ข้อมูล seed 8 รายการ + "ของยาย" ที่ข้าวสารเพื่อสาธิต US-002
• 01-plan.md — เพิ่ม S3 (Task 1–8), รัด S2, ปิด OQ-R4…R7, เพิ่มเกณฑ์ตรวจรับเรื่องแบบร่าง + 3 ขนาดจอ
• ROADMAP.md — ขั้น UX/UI เป็นมาตรฐานทุก Release ที่แตะจอ + แก้บล็อก "จุดที่ต้องตัดสินใจใน R001" ที่ยังเขียนว่าแนะนำ Vercel / Static HTML ไม่มี build (ขัดกับที่ปิดไปแล้วว่า Vite + Cloudflare Pages)
• TEMPLATE.md — เพิ่มหัวข้อ "4. แบบร่างหน้าจอ (UX/UI Draft)"
• sabayjai-pantry.md — อ้างอิงแบบร่างจากตาราง route และย้ำว่า S2 ไม่ต้องรอแบบจอ

ผลตรวจจากของจริง (ไม่ได้ดูแค่ build ผ่าน)

• ครบ 8 เส้นทางเรนเดอร์ที่ 375 / 768 / 1280 px: ไม่มีความกว้างเกินจอเลยทุกจอ · 768 px การ์ด 2 คอลัมน์ · 1280 px คอลัมน์กลาง 960 px ไม่ยืดเต็มจอ
• กด − จนถึง 0 → ย้ายเข้า "ใช้หมดแล้ว" + toast ย้อนกลับ นับถอยหลัง 5 วิ → ย้อนกลับแล้วของกลับเข้ารายการจริง
• ค้น "ของยาย" เจอข้าวสาร (ค้นหมายเหตุ) · กรองจุดเก็บ+หมวดหมู่พร้อมกันได้
• ฟอร์มเพิ่มของ: กดบันทึกตอนชื่อว่าง → ขึ้น error ใต้ช่อง ไม่บันทึก · เพิ่มหมวดใหม่กลางฟอร์มได้โดยค่าในฟอร์มไม่หาย · บันทึกสำเร็จล้างตัวกรองให้แล้วเห็นการ์ดใหม่
• ลบจุดเก็บที่มีของ → "ยังมีของค้างอยู่ 4 ชิ้น — ย้ายของออกก่อนจึงจะลบได้" · จุดเก็บว่าง → dialog ยืนยัน → ลบได้
• รีเซ็ตข้อมูลตัวอย่าง → dialog → กลับ seed ครบ (8 ของ · 5 จุดเก็บ · 4 หมวด)
• แก้ที่เจอระหว่างตรวจ 3 จุด: ปุ่ม "ล้างตัวกรอง" ไม่โผล่หลังค้นหาแบบสด · แถบเมนูทับเนื้อหา 4 px ตอนเลื่อน (ย้ายไป sticky container เดียว) · เป้าแตะเดิม 38 px → 44 px ทุกปุ่ม/ชิป/เมนู
• ข้อจำกัด: ถ่ายภาพหน้าจอของ Preview ไม่ได้ในบิลด์นี้ (webview not composited) ผมจึงตรวจด้วยการอ่าน accessibility tree + วัดค่า DOM จริงแทน — ถ้าต้องการภาพประกอบให้คุณกดดูในแท็บ Preview ได้เลย

รอคุณตัดสิน 4 ข้อ (อยู่ในเอกสารข้อ 9)

seed ให้มุม "ใช้หมดแล้ว"/"ต้องซื้อ" ด้วยไหม · ยอมรับเมนูแบบข้อความ (ไม่มีไอคอน/bottom tab bar) ไหม · ชื่อ "สบายใจ Pantry" โอเคไหม · เรียงการ์ดแบบ แดง→เหลือง→ที่เหลือ โอเคไหม ถ้าถัดไปคือลงมือ S2 ผมพร้อมเริ่มทันทีครับ ตรวจรอบสุดท้ายแล้วครับ — แก้จุดที่เอกสารอ้างเกินจริงหนึ่งจุด (เอกสารบอกว่า "โฟกัสไปช่องแรกที่ขาด" แต่โค้ดเดิมแค่ขึ้นข้อความ) จึงเติมให้กดบันทึกแล้วโฟกัสไปที่ช่องแรกที่ผิดจริง แล้วโหลดหน้าใหม่ยืนยันซ้ำ ยืนยันด้วยการรันของจริง (ไม่ใช่แค่ไฟล์ครบ)

• โหลดไฟล์ใหม่แล้ว: กดบันทึกตอนชื่อว่าง → activeElement = f-name (โฟกัสถูกต้อง) + ข้อความ error 2 บรรทัด + ไม่มีการบันทึก (items = 8, hash ยังเป็น #/add)
• คอนโซลและ network ว่างทั้งคู่ — ไม่มี error/warning
• ตรวจซ้ำหลัง reload: 8 เส้นทางเรนเดอร์ครบ · ไม่มีความกว้างเกินจอที่ 375 / 768 / 1280 px · แถบเมนูติดบนไม่ทับเนื้อหา (topbar bottom 121 = nav bottom 121, การ์ดเริ่ม 161) · 768 px การ์ด 2 คอลัมน์ · 1280 px คอลัมน์กลาง 960 px
• ไฟล์สุดท้าย: prototype.html 51 KB · sabayjai-pantry-ux-ui.md 37 KB · 01-plan.md / ROADMAP.md / TEMPLATE.md / sabayjai-pantry.md แก้แล้ว (diff 74 บรรทัด เพิ่ม/31 ลบ — ไม่ได้เขียนทับทั้งไฟล์)

สิ่งที่ยังทำไม่ได้ / ข้อจำกัดที่ต้องรายงาน

• ถ่ายภาพหน้าจอ Preview ไม่ได้ในบิลด์นี้ (webview is not being composited) จึงตรวจด้วย accessibility tree + วัดค่า DOM แทน — ภาพสวยงามต้องดูด้วยตาคุณในแท็บ Preview
• ยังไม่ได้ทดสอบบนมือถือจริง (จำลองความกว้างเท่านั้น) และยังไม่ได้ทดสอบการใช้งานด้วยคีย์บอร์ด/screen reader เต็มเส้น
• S2 ยังไม่เริ่ม และ S3 Task 8 (นำแบบไปใช้กับแอปจริง) รอหลัง S2 — ยังไม่มีการแตะโค้ดแอปเลย
• แบบร่างเป็น "ร่างรอตรวจรับ": 4 คำถามในเอกสารข้อ 9 ยังรอคำตอบคุณ และถ้าคำตอบเปลี่ยน (เช่นเพิ่ม seed ใน #/used-up/#/shopping) ผมจะปรับแบบให้ตรงก่อนเริ่มสร้างจอจริง