ใช้ Playground แยก Component ก่อนประกอบหน้า
เรียนรู้ ใช้ Playground แยก Component ก่อนประกอบหน้า เพื่อทำงานกับ AI Coding อย่างตรวจสอบได้
เป้าหมาย: เปลี่ยนคำสั่งกว้างเป็น artifact, evidence, change และ verification ที่ทีมไทยดูแลต่อได้ · ใช้เวลาประมาณ 17 นาที
Understand → Prove → Change → Verify
ให้ AI เร็วขึ้นโดยลดการเดาและเพิ่มหลักฐาน
Understand
สร้าง Playground หรือ Story สำหรับ state/variant ของ component ด้วยข้อมูลจำลอง ตรวจ responsive, keyboard, error และ loading แยกจาก API เพื่อหา defect เร็ว แล้วจึงเชื่อมระบบจริง
Prove
แสดงไฟล์ คำสั่ง reproduction log test หรือ screenshot ที่พิสูจน์สภาพปัจจุบัน
Change
เปลี่ยนเล็กที่สุดใน scope ที่ตกลงและรักษางานเดิมของทีม
Verify
รัน focused test ก่อน full suite และบันทึกสิ่งที่ยังไม่ได้ตรวจ
Artifact ที่ทีมต้องอ่านร่วมกัน
Playground
เขียน Playground แบบสั้น ระบุ source of truth, owner, verification และ last reviewed
เอกสารมีค่าเมื่อป้องกันข้อผิดพลาดที่เคยเกิดและยังตรวจได้
component state
เขียน component state แบบสั้น ระบุ source of truth, owner, verification และ last reviewed
เอกสารมีค่าเมื่อป้องกันข้อผิดพลาดที่เคยเกิดและยังตรวจได้
fixture
เขียน fixture แบบสั้น ระบุ source of truth, owner, verification และ last reviewed
เอกสารมีค่าเมื่อป้องกันข้อผิดพลาดที่เคยเกิดและยังตรวจได้
responsive
เขียน responsive แบบสั้น ระบุ source of truth, owner, verification และ last reviewed
เอกสารมีค่าเมื่อป้องกันข้อผิดพลาดที่เคยเกิดและยังตรวจได้
รูปแบบ Vibe Coding ที่สร้างหนี้
เริ่ม code ก่อนยืนยันปัญหา
ทำ feature ถูกคำแต่ผิดงาน
ทวน flow และ acceptance ก่อน
แก้หลาย hypothesis พร้อมกัน
ไม่รู้ว่าอะไรแก้ defect และ regression เพิ่ม
reproduce แล้วเปลี่ยนทีละตัวแปร
ให้ AI ทำ destructive action จากชื่อกว้าง
target ผิดและกู้คืนไม่ได้
resolve target, backup/rollback, explicit approval
ทำ Engineering Change Pack
ปุ่มอนุมัติทำงานได้เฉพาะเมื่อ backend พร้อม จึงตรวจ mobile state ยาก
สร้าง brief/PRD, evidence, risk, small change plan, tests, rollback และ review note
ดูคำตอบตัวอย่าง
ทวน goal/user/flow/data/edge case เป็นภาษาไทย เขียน acceptance ที่ทดสอบได้ สำรวจ repo และ environment fact สร้าง reproduction กับ focused regression test เลือก component/design token เดิม เปลี่ยนเฉพาะ scope รัน lint/type/test/build ตามผลกระทบ สำหรับข้อมูลหรือ deploy ให้ dry-run ตรวจ target/backup/rollback และขอ approval ก่อน บันทึกสิ่งที่ยังไม่พิสูจน์
- goal/PRD confirmed
- repo/environment evidence
- reproduction/test
- small scoped change
- security/data review
- rollback/final verification
บันทึกช่วยจำ
- อย่าใส่ credential ข้อมูลลูกค้า หรือ production dump ใน Prompt
- คำสั่ง destructive, deploy และ migration ต้องทำตามสิทธิ์และ approval ขององค์กร
สรุปบทเรียนนี้
- ยืนยันก่อน code
- debug จากหลักฐาน
- เปลี่ยนเล็กและ rollback ได้