ตัวอย่างที่ prototype
เจนออกมาจริง
dailyMu

คิวอาร์มงคล
workflow & UX

รวมทุกอย่างของฟีเจอร์ QR Code Art ไว้ที่เดียว — สเปก ผังการทำงาน และ prototype ที่กดเล่นได้จริงทั้งฝั่งลูกค้าและฝั่งแอดมิน

✓ ตรวจครบทุกไฟล์แล้ว ร่าง 0.2 อัปเดต 26 สิงหาคม 2569 ขอบเขต: workflow + UX + prototype เท่านั้น
เริ่มที่นี่ — กดเล่นได้เลย
📱
แอปลูกค้าprototype/index.html

เดินได้ครบทั้งเส้นทาง — เลือกวิธี (พิมพ์เอง / อัปโหลดคิวอาร์เดิม) → รูปอ้างอิง → ด้านที่อยากเสริม → ธีม → เจน 4 แบบติดลายน้ำ → เลือก 1 แบบ → ไฟล์ การ์ดปริ้นต์ และประวัติ

ไซส์มือถือ 390×844ภาพเจนสดจริงมีแถบทดลอง
🖥
หลังบ้านprototype/backoffice.html

3 แท็บ — คลังธีมมงคล (แก้สีแล้วภาพตัวอย่างเปลี่ยนทันที) · กฎจับคู่ตาราง 8×5 คลิกแก้ได้ทีละช่อง · สถิติพร้อมกราฟและช่วงเวลา

เดสก์ท็อป10 ธีม · 40 ช่องกฎมีเคสช่องเตือน
ทั้งสอง prototype มีปุ่มทดลองอยู่ที่แถบล่างจอ — ฝั่งลูกค้า: สลับผู้ใช้ที่เกิดวันต่าง ๆ 8 วัน · 💳 โควต้าหมด · 💥 บังคับให้สแกนตกทั้งชุด · 🔍 อ่านคิวอาร์ที่อัปโหลดไม่ออก · ↺ ล้างข้อมูล
ฝั่งหลังบ้าน: ⚠️ จำลองช่องกฎมีปัญหา · เติมค่าตั้งต้นให้ช่องที่ว่าง
ข้อมูลไม่ถูกบันทึกที่ไหน — รีเฟรชหน้าแล้วกลับค่าเดิมทั้งหมด
ผังการทำงานและสเปก
🌸
ผังฝั่งลูกค้าdocs/user-flow.html

เส้นทางหลักแยก 2 ทางตั้งแต่ขั้นแรก · จุดเดียวที่ตัดโควต้า · 10 กรณีที่ต้องรับมือ · ตารางสรุปหน้าจอทั้ง 10 หน้า

ยึดตามผังนี้
⚙️
ผังฝั่งแอดมินdocs/backoffice-flow.html

3 แท็บพร้อมเงื่อนไขบันทึก · ฟิลด์ของธีมหนึ่งอันว่าอันไหนลูกค้าเห็น · กฎที่ตั้งไปโผล่ตรงไหนในฝั่งลูกค้า

ยึดตามผังนี้
📄
สเปกรวมdocs/spec.html

ภาพรวมฟีเจอร์ · ตาราง “เคาะแล้ว” 21 ข้อ กับ “ยังไม่เคาะ” 16 ข้อ แยกกันชัด · สีประจำวันเกิด · พรีเซ็ตธีม 10 ธีม · กฎจับคู่

ไฟล์ต้นทางคือ spec.md
ถ้าผังกับ spec ขัดกัน ให้ยึดผัง — บรรทัดนี้กำกับไว้บนหัวไฟล์ spec ด้วย เพื่อไม่ให้ตัดสินใจผิดตอนเอาไปทำจริง
สรุปสิ่งที่ตัดสินใจแล้ว

✓ เคาะแล้ว

  • รูปที่อัปโหลด = style reference เอาแค่โทนสี ไม่ยึดองค์ประกอบเดิม
  • อินพุตมี 2 ทางเท่านั้น — พิมพ์ข้อความ/ลิงก์ หรืออัปโหลดคิวอาร์ที่มีอยู่แล้ว
  • ความมูมาจาก วันเกิดในโปรไฟล์ × ด้านที่อยากเสริม — ลูกค้าไม่ต้องพิมพ์ prompt
  • วันเกิดมาจากตอนสมัครแอป ไม่มีให้เลือกซ้ำในฟีเจอร์นี้
  • เจน 4 แบบติดลายน้ำ · เลือก 1 = ตัด 1 โควต้า · การเจนไม่ตัดโควต้า
  • โควต้าฟรีตามแพลน หมดแล้วเด้งเติมเครดิต
  • ระบบเช็คสแกนเอง แล้วโชว์คะแนนสแกนติดทุกแบบ
  • ได้กลับไป: PNG · คำอธิบายมงคล · การ์ดปริ้นต์ · ประวัติในแอป
  • หลังบ้าน: คลังธีม · กฎจับคู่ · สถิติ

◇ ยังไม่เคาะ

  • จำนวนโควต้าต่อแพลน และราคาเครดิต
  • ตรวจรูปอัปโหลด (moderation)
  • ใครคุมพารามิเตอร์ engine
  • เก็บรูปที่อัปโหลดนานแค่ไหน (PDPA)
  • สเปกไฟล์งานพิมพ์ · หน้าตาลายน้ำ
  • QR แบบแก้ปลายทางได้ · referral · ภาษาอังกฤษ
  • เกณฑ์คะแนนสแกนติดตัวเลขจริง
ไฟล์ทั้งหมด
ไฟล์คืออะไรสถานะ
index.htmlหน้ารวม (หน้านี้)🟢 ล่าสุด
README.mdสรุปสถานะไฟล์และงานที่เหลือ🟢 ล่าสุด
docs/spec.mdสเปก — ไฟล์ต้นทาง แก้ที่นี่ที่เดียว🟢 ล่าสุด
docs/spec.htmlสเปกแบบอ่านในเบราว์เซอร์🤖 สร้างอัตโนมัติ
docs/user-flow.htmlผังฝั่งลูกค้า🟢 ล่าสุด
docs/backoffice-flow.htmlผังฝั่งแอดมิน🟢 ล่าสุด
prototype/index.htmlแอปลูกค้า (มือถือ)🟢 ล่าสุด
prototype/backoffice.htmlหลังบ้าน (เดสก์ท็อป)🟢 ล่าสุด
tools/build-spec.pyตัวแปลง spec.md → spec.html🟢 ล่าสุด
ขึ้นออนไลน์ที่ dailymu-qr.pages.dev — ลิงก์เปิดเป็นสาธารณะ
ทุกไฟล์เป็น single file — CSS/JS อยู่ในไฟล์ทั้งหมด ไม่มี CDN ไม่ต้อง build · เปิดด้วย open index.html ได้เลย
ภาพ QR ใน prototype วาดขึ้นในเบราว์เซอร์เพื่อให้กดเล่นได้ ไม่ใช่ engine จริงของทีมเดฟ และสแกนไม่ติดจริง