หัวใจของระบบจัดการทุกตัว — ข้อมูลต้อง ทำงานได้ · เชื่อมถึงกัน · แสดงให้อ่านง่าย. แต่ละหัวข้อ ซ้ายอธิบาย + ตัวอย่างจริง · ขวามีภาพหน้าจอ
หน้านี้แบ่งเป็น 3 ภาค: ฟังก์ชันที่ควรมี · การเชื่อมโยง · การแสดงผล. แต่ละหัวข้อ — ฝั่งซ้าย:คืออะไร (อธิบายแบบมือใหม่ + เปรียบเทียบ) + ตัวอย่างจริง + ใช้เมื่อไหร่ (เขียว) ระวัง (แดง) · ฝั่งขวา:ภาพหน้าจอตัวอย่างจริง
ทุกชุดข้อมูล (ลูกค้า/สินค้า/งาน) ต้องทำอะไรกับมันได้บ้าง — เพิ่ม ดู แก้ ลบ ค้นหา และทำทีละมาก ๆ
4 อย่างพื้นฐานสุดที่ข้อมูลทุกตารางต้องทำได้: Createเพิ่ม · Readดู · Updateแก้ไข · Deleteลบ. เปรียบเหมือน "สมุดรายชื่อ" — ต้องจดเพิ่มได้ เปิดอ่านได้ ขีดแก้ได้ และลบออกได้ ถ้าขาดข้อใดข้อหนึ่งระบบก็ใช้งานจริงไม่ได้
เมื่อข้อมูลเยอะ ต้องหาเจอได้ไว: ค้นหาพิมพ์ชื่อ/เบอร์เจอทันที · กรอง (Filter)เลือกดูเฉพาะกลุ่ม · เรียง (Sort)จัดลำดับมาก→น้อย · แบ่งหน้า (Pagination)ตัดเป็นหน้า ๆ ไม่ให้โหลดพันแถวพร้อมกัน. เปรียบเหมือนห้องสมุด — ถ้ามีหนังสือ 1,000 เล่มต้องมีระบบค้นและจัดหมวด ไม่งั้นหาไม่เจอ
ทำงานกับข้อมูลทีละก้อนใหญ่: นำเข้า (Import)วางจาก Excel ทีเดียวเป็นร้อยแถว ไม่ต้องคีย์ทีละราย · ส่งออก (Export)โหลดออกเป็นไฟล์ไปทำต่อ/ส่งบัญชี · Bulk actionติ๊กเลือกหลายแถวแล้วสั่งทำพร้อมกัน (ลบ/ส่งข้อความ/เปลี่ยนสถานะ). เปรียบเหมือน "เลือกทั้งกอง แล้วสั่งทีเดียว" แทนหยิบทีละชิ้น
ทำให้ข้อมูล "ไหลถึงกัน" ไม่กระจัดกระจาย — ข้อมูล 1 ชิ้นอยู่ที่เดียว ที่อื่นแค่ "ชี้มา" (อ้างอิง) ไม่ก๊อปซ้ำ
ข้อมูลในธุรกิจโยงกันเป็นสาย: ลูกค้า 1 ราย → มีได้หลายออเดอร์ → แต่ละออเดอร์มีได้หลายรายการสินค้า(เรียกว่า one-to-many). หัวใจคือ เก็บแค่ "รหัสอ้างอิง" ไม่ก๊อปข้อมูลซ้ำ— ออเดอร์เก็บแค่ "รหัสลูกค้า C-018" ไม่จดชื่อ-ที่อยู่เต็มมาทั้งก้อน เปรียบเหมือนเขียน "ดูเล่ม 3 หน้า 5" แทนถ่ายเอกสารทั้งเล่มมาแปะ
แบ่งหน้าจอเป็น 2 ฝั่ง: รายการ (master) อยู่ซ้าย· คลิกอันไหน รายละเอียด (detail) โผล่ขวาทันที ไม่ต้องเปิดหน้าใหม่. เปรียบเหมือนกล่องอีเมล — ฝั่งซ้ายเป็นรายชื่อจดหมาย คลิกฉบับไหนเนื้อหาก็ขึ้นฝั่งขวา เลื่อนดูทีละฉบับได้ไว
ตัวเลขสรุป (KPI) ต้อง กดเข้าไปดูได้ว่ามาจากอะไร— เห็น "ยอดขาย ฿84k" แล้วคลิก → แตกออกเป็นรายการออเดอร์ทุกใบที่รวมกันได้ยอดนั้น. เปรียบเหมือนซูมกล้องจาก "ภาพรวมทั้งเมือง" ลงไปดู "ทีละบ้าน" ได้
ตอนกรอกฟอร์ม ถ้าต้องอ้างถึงข้อมูลที่มีอยู่แล้ว ให้ เลือกจากรายการ (dropdown) ไม่พิมพ์ใหม่— สร้างออเดอร์ก็เลือกลูกค้าจากที่มี ไม่พิมพ์ชื่อ-เบอร์ซ้ำทุกครั้ง (กันพิมพ์ผิด กันสร้างลูกค้าซ้ำคนเดิม 3 เวอร์ชัน). ถ้าไม่มีในรายการ → มีปุ่ม "เพิ่มใหม่" ในตัวเลือกได้เลย
ข้อมูลชุดเดียวกัน แสดงได้หลายแบบ — เลือกให้ถูกสถานการณ์ ผู้ใช้ถึงจะอ่านง่าย
ข้อมูลรายการเดียวกันโชว์ได้ 3 ทรง: Table (ตาราง)หลายคอลัมน์เทียบกันเป็นแถว เหมาะบนคอม · List (รายการ)เรียบ ๆ ทีละบรรทัด อ่านง่ายบนมือถือ · Card (การ์ด)เป็นช่อง ๆ มีรูป/เด่น เหมาะของที่ต้องเห็นภาพ เช่นสินค้า. เลือกผิดทรง = อ่านยากทันที (เอาสินค้ามีรูปไปยัดตาราง หรือเอาตัวเลข 8 คอลัมน์ไปทำการ์ด)
| หลายแถว เทียบหลายค่า (บนคอม) | Table |
| มือถือ / แต่ละรายการมีไม่กี่ค่า | List |
| มีรูป / อยากให้เด่น (สินค้า) | Card grid |
| ตัวเลขสรุปตัวเดียว | KPI card |
| แนวโน้ม / สัดส่วน | กราฟ |
| เหตุการณ์ตามเวลา | Timeline |
Detail view= เปิดดู 1 รายการแบบเต็ม ๆ รวมทุกข้อมูลที่เชื่อมกันไว้ในที่เดียว (ข้อมูลหลัก + ออเดอร์ + เอกสาร) · Timeline= แถบประวัติว่า "เกิดอะไรขึ้นเมื่อไหร่" เรียงตามเวลา. เปรียบเหมือน "แฟ้มประวัติคนไข้" — เปิดมาเห็นทุกอย่างของคนนี้ + ไทม์ไลน์ว่ารักษาอะไรไปบ้าง
เข้าใจครบ 3 ภาคแล้ว ทีนี้ลงมือ — ก๊อปข้อความนี้ไปวางใน Claude Code แล้วเปลี่ยนคำใน วงเล็บสีเหลือง ให้เป็นข้อมูลธุรกิจคุณ มันจะออกแบบหน้าจอ + โครงข้อมูลให้ตามหลักทั้งหมดในบทนี้
สร้างหน้าจัดการ [ลูกค้า] ให้ฉัน ตามนี้: - CRUD ครบ เพิ่ม/ดู/แก้/ลบ — "ลบ" ให้เป็น soft delete (ซ่อน ไม่ลบทิ้งจริง เก็บประวัติไว้) - มี ค้นหา + กรอง + เรียง + แบ่งหน้า เปิดใช้อัตโนมัติเมื่อข้อมูลเกิน 20 แถว - ช่องที่อ้างถึงข้อมูลอื่น ให้เป็น dropdown เลือกจากที่มี (lookup) เก็บแค่รหัสอ้างอิง ห้ามก๊อปชื่อ/ที่อยู่มาเก็บซ้ำ — แก้ต้นทางที่เดียวจบ - ตัวเลขสรุป (KPI) ทุกตัว คลิกเจาะดูที่มาได้ (drill-down) - มีหน้า detail ของ 1 รายการ รวมข้อมูลที่เชื่อมกัน + timeline บันทึก "ใครทำอะไรเมื่อไหร่" อัตโนมัติ ไม่ต้องให้คนจดเอง แสดงผลแบบ [Table] เพราะ [ต้องเทียบหลายค่าบนคอม]