Claude ทำหน้าที่เป็น Senior Developer สี่บทบาท ปรับปรุงแอปติดตามค่าใช้จ่ายของครอบครัว

การทดลองนี้เป็นการให้ Claude—โมเดล AI ของ Anthropic—ตรวจสอบและปรับปรุงแอปติดตามค่าใช้จ่ายของครอบครัวหนึ่งครั้ง โดยสั่งให้มันทำหน้าที่เป็นผู้พัฒนาระดับ senior สี่บทบาท ได้แก่ full‑stack engineer, debugging engineer, frontend engineer และ performance engineer ผลลัพธ์ที่ได้แสดงให้เห็นว่าการมองแอปจากมุมต่าง ๆ สามารถเปิดเผยข้อบกพร่องและโอกาสในการปรับปรุงที่ไม่เคยถูกสังเกตโดยผู้พัฒนาเดียวกัน

Overview

การทดลองเริ่มต้นด้วยการนำ Claude มาพัฒนาต้นแบบของแอปติดตามค่าใช้จ่ายโดยให้คิดเหมือน senior full‑stack engineer ซึ่งต้องออกแบบโครงสร้างระบบ, ฐานข้อมูลและ flow ของผู้ใช้ทั้งหมดก่อนลงมือเขียนโค้ด ผลลัพธ์คือแอป React ที่ทำงานได้ครบถ้วน มีฟีเจอร์เพิ่ม/ลบรายการ, จัดประเภท, ค้นหา, คำนวณยอดรวม และแสดงกราฟสรุปแบบสีสันสดใส การออกแบบที่คำนึงถึง UI‑responsive ทำให้แอปดูคล้ายผลิตภัณฑ์ MVP ของสตาร์ทอัพจริง ๆ

ต่อมา Claude ถูกสั่งให้ทำหน้าที่เป็น senior debugging engineer เพื่อค้นหาและแก้ไขบั๊กก่อนปล่อยสู่ผู้ใช้ทั่วไป แล้วจึงส่งต่อให้ทำงานต่อในฐานะ senior frontend engineer ที่เน้นการออกแบบเพื่อความเข้าถึง (accessibility) และการแสดงผลบนอุปกรณ์หลากหลาย สุดท้าย Claude รับบทเป็น senior performance engineer เพื่อประเมินและปรับแต่งด้านประสิทธิภาพ แม้ว่าผลลัพธ์จากบทบาทนี้จะไม่ได้ถูกระบุรายละเอียดในรายงานต้นฉบับ แต่กระบวนการทั้งหมดแสดงให้เห็นว่าการใช้ AI ในหลาย persona สามารถทำให้โค้ดมีคุณภาพสูงขึ้นอย่างเป็นระบบ

Full‑Stack Engineer Build

Claude เริ่มด้วยคำสั่งให้สร้าง “interactive household expense tracker” โดยกำหนดให้คิดเหมือน senior full‑stack engineer ก่อนเขียนโค้ดใด ๆ จะต้องอธิบายสถาปัตยกรรมและ flow ของผู้ใช้อย่างสั้น ๆ แล้วจึงสร้างแอปเป็น Claude Artifact การตอบกลับของ Claude ส่งมอบ React app ที่รวมฟีเจอร์สำคัญทั้งหมดไว้ในหน้าเดียว ได้แก่:

• การเพิ่มและลบรายการโดยบันทึกลง local storage
• การจัดประเภทค่าใช้จ่าย (เช่น Housing, Food) และการกรองตามช่วงเวลา
• การแสดงสรุปยอดรวมและกราฟวงกลมสีที่บ่งบอกสัดส่วนของแต่ละหมวด

โค้ดถูกออกแบบให้ responsive ตั้งแต่แรก ทำให้หน้าตาเหมาะกับทั้งเดสก์ท็อปและมือถือ แม้ว่า Claude จะไม่ได้ทำการตรวจสอบหรือแก้ไขบั๊กในขั้นตอนนี้ แต่แอปที่ส่งมอบดูสมบูรณ์พอ ๆ กับผลิตภัณฑ์ MVP ที่พร้อมทดลองใช้

Debugging Engineer Review

เมื่อเปลี่ยนบทบาทเป็น senior debugging engineer, Claude ถูกสั่งให้ทดสอบฟังก์ชันทั้งหมดโดยไม่แก้ไข UI หรือทำการรีแฟคเตอร์ใหญ่ ผลการตรวจสอบพบปัญหาหลายจุดสำคัญ:

• Form handling ไม่ได้อยู่ใน `<form>` จริง ทำให้การกด Enter ไม่ทำงานอย่างที่ควร
• ผู้ใช้สามารถบันทึกรายการโดยเว้นวันหรือใส่จำนวนเงินเป็นค่าผิดพลาดได้ เนื่องจากไม่มี validation
• การคำนวณยอดรวมของหมวด “Housing” แสดงผลผิดเมื่อไม่มีข้อมูลอยู่ในระบบ

Claude แก้ไขปัญหาเหล่านี้โดยเปลี่ยนส่วนที่เกี่ยวข้องให้กลายเป็นฟอร์มจริง, เพิ่มการตรวจสอบวันที่และจำนวนเงิน, และปรับสูตรคำนวนเพื่อหลีกเลี่ยงผลลัพธ์เท็จ นอกจากนี้ยังพบ storage failure ที่ซ่อนอยู่ใน console ซึ่งอาจทำให้ผู้ใช้คิดว่าข้อมูลถูกบันทึกแต่จริง ๆ แล้วไม่เป็นเช่นนั้น อย่างไรก็ตาม Claude ไม่ได้เพิ่มชุดทดสอบอัตโนมัติ (automated tests) เพื่อยืนยันการแก้ไขเหล่านี้

Frontend Engineer Review

บทบาทต่อไปของ Claude คือ senior frontend engineer ที่เน้นความเข้าถึงและการแสดงผลบนอุปกรณ์พกพา คำสั่งให้ตรวจสอบการใช้งานผ่านมือถือ, แป้นพิมพ์, และเทคโนโลยีช่วยเหลือ (assistive technology) ผลลัพธ์คือการปรับปรุงหลายด้าน:

• Focus outline ที่ถูกลบออกจากฟิลด์อินพุตได้รับการคืนค่าและทำให้มองเห็นได้ชัดเจนบนแป้นพิมพ์
• ป้ายกำกับ (labels) ถูกเชื่อมโยงอย่างถูกต้องกับคอนโทรลแต่ละอัน เพื่อให้ screen reader สามารถอ่านได้
• ข้อความ placeholder ของช่องค้นหาไม่ได้รับการประกาศโดย screen reader จึงเพิ่ม aria‑label ให้สามารถเข้าถึงได้
• ปรับ color contrast ของข้อความสีเทาอ่อนเพื่อให้เป็นไปตามมาตรฐาน WCAG 2.1

Claude ยังทำให้สถานะข้อผิดพลาด (validation messages) สามารถแจ้งเตือนผ่าน screen reader และเพิ่มคำอธิบายสำหรับกราฟสรุปค่าใช้จ่าย เพื่อไม่ให้ผู้ใช้ต้องพึ่งพาเฉพาะสีในการเข้าใจข้อมูล ทั้งหมดนี้ช่วยยกระดับความเป็นมิตรต่อผู้ใช้งานทุกกลุ่ม

Performance Engineer Insights

แม้รายงานต้นฉบับไม่ได้ลงรายละเอียดการปรับประสิทธิภาพโดย senior performance engineer, การสั่งให้ Claude ทำหน้าที่นี้แสดงถึงแนวคิดที่ว่าการทดสอบด้าน performance (เช่น เวลาโหลดหน้า, ความหน่วงของ UI) สามารถเป็นขั้นตอนสุดท้ายก่อนส่งมอบผลิตภัณฑ์ การใช้ AI เพื่อระบุคอขวดหรือเสนอการปรับแต่งเช่น lazy‑loading หรือ code splitting จะช่วยให้แอปทำงานได้เร็วและใช้ทรัพยากรอย่างมีประสิทธิภาพ แม้ข้อมูลเฉพาะเจาะจงจะไม่ถูกเปิดเผยในบทความนี้

Analysis

ผลลัพธ์จากสี่ persona ของ Claude แสดงให้เห็นว่าการมอบหมายหน้าที่ที่ชัดเจนแก่ AI สามารถทำให้กระบวนการพัฒนาแอปพลิเคชันเป็นระบบและครอบคลุมยิ่งขึ้น แต่ละบทบาทเน้นจุดที่แตกต่างกัน – จากโครงสร้างพื้นฐาน, การแก้บั๊ก, ความเข้าถึง, ถึงประสิทธิภาพ – ทำให้ข้อบกพร่องบางอย่างที่อาจมองข้ามได้ถูกค้นพบและแก้ไข นอกจากนี้ การใช้ Claude เป็น “senior developer” แทนคนจริงยังต้องคำนึงถึงการตรวจสอบคุณภาพสุดท้ายจากมนุษย์ เช่น การเพิ่มชุดทดสอบอัตโนมัติและการตรวจสอบความปลอดภัยของข้อมูล

Summary

การทดลองให้ Claude ทำหน้าที่เป็น senior full‑stack, debugging, frontend และ performance engineer แสดงว่า AI สามารถช่วยยกระดับคุณภาพซอฟต์แวร์ได้อย่างมีระบบ แม้ต้องอาศัยการตรวจสอบและปรับแต่งเพิ่มเติมจากมนุษย์เพื่อให้ได้ผลิตภัณฑ์ที่พร้อมใช้งานจริง.