ไฟล์แนวทางออกแบบสำหรับเอเจนต์: บทเรียนจากการให้ AI สร้างหน้าเว็บให้ตรงแบรนด์ด้วย design.md

เมื่อเอเจนต์ AI ถูกใช้สร้างรายงาน ข้อเสนอ และไมโครไซต์นอกโค้ดเบสหลัก ผลลัพธ์มักหลุดจากแบรนด์เพราะไม่รู้จักระบบออกแบบ ทีม Vercel แก้ด้วยไฟล์แนวทางสาธารณะชื่อ design.md ที่ทำงานคู่กับสไตล์ชีตที่จำกัดขอบเขตและวงจรประเมิน บทความนี้สรุปโครงสร้าง วิธีวัดผล และสูตรที่ทีมอื่นทำตามได้

ช่องว่างที่ไฟล์นี้อุด

ภายในโค้ดเบสของบริษัท เอเจนต์เข้าถึงความรู้ของระบบออกแบบผ่านทักษะที่ตั้งค่าไว้ แต่เมื่อต้องสร้างของนอกโค้ดเบส เช่น รายงานการใช้งาน ข้อเสนอต่ออายุ หรือหน้าวางแผนแบบโต้ตอบ เอเจนต์ไม่มีอะไรให้ยึด ผลคือหน้าที่ดูเหมือนแดชบอร์ดซอฟต์แวร์ทั่วไป ลำดับความสำคัญของข้อมูลผิด และไม่มีใครดูออกว่ามาจากแบรนด์ไหน

สามชั้นที่ทำงานร่วมกัน

ชั้นแรกคือ design.md ซึ่งเป็นข้อความร้อยแก้วที่อธิบายการวางกรอบ ลำดับชั้น ตัวอักษร การจัดองค์ประกอบ มาตรฐานการเขียน และรูปแบบผิดพลาดที่ตั้งชื่อไว้ให้เอเจนต์รู้จักและหลีกเลี่ยง ชั้นที่สองคือสไตล์ชีตสาธารณะที่มีคลาสและโทเคนจำนวนจำกัด เพื่อกันไม่ให้เอเจนต์คิดระบบตัวอักษรและระยะห่างขึ้นมาเอง สไตล์ชีตโหลดในเบราว์เซอร์ ไม่ใช่ในบริบทของโมเดล จึงประหยัดโทเคนไว้ให้แนวทางออกแบบ ชั้นที่สามคือวงจรประเมินทั้งจากคนและอัตโนมัติ เพื่อยืนยันว่าแนวทางที่เขียนทำให้ผลลัพธ์ดีขึ้นจริง

พัฒนาแนวทางด้วยสถานการณ์คงที่และการสร้างซ้ำกว่า 200 รอบ

ทีมกำหนดสถานการณ์ที่เกิดซ้ำเจ็ดแบบ ตั้งแต่รายงานประสิทธิภาพ ข้อเสนอต่ออายุ รายงานเบนช์มาร์ก หน้าวางแผน เอกสารเปรียบเทียบสร้างเองกับซื้อ เอกสารสรุปการกำกับดูแลความปลอดภัย ไปจนถึงสไลด์นำเสนอ แล้วตรึงสถานการณ์ไว้ ให้ design.md เป็นสิ่งเดียวที่เปลี่ยน ผ่านการสร้างซ้ำมากกว่า 200 รอบ ทุกการแก้ไขถูกใส่ไว้ในชั้นที่เหมาะสม คือเรื่องที่ต้องใช้วิจารณญาณเขียนเป็นร้อยแก้ว เรื่องกลไกที่ทำซ้ำได้ใส่ใน CSS และเรื่องที่ล้มเหลวเชิงกลไกใส่เป็นการตรวจอัตโนมัติ

ผลการเปรียบเทียบด้วยพรอมป์ ข้อมูล โมเดล และขนาดหน้าจอชุดเดียวกัน พบว่าหน้าที่สร้างพร้อม design.md มีข้อบกพร่องที่บันทึกไว้น้อยกว่า 57% แต่ผู้เขียนยอมรับตรง ๆ ว่าตัวอย่างหกหน้ายังน้อยเกินกว่าจะสรุปเรื่องคุณภาพในวงกว้าง จุดที่น่าสนใจกว่าคือแนวทางไม่ได้ทำให้ทุกหน้าเหมือนกัน แต่ละสถานการณ์ใช้ตัวอักษรและระยะห่างเดียวกัน ทว่าโครงสร้างต่างกันตามเจตนาของผู้อ่าน หน้าวางแผนเริ่มด้วยตัวควบคุม ส่วนข้อเสนอเริ่มด้วยคำแนะนำ

ดูแลต่อเนื่องด้วยเอเจนต์รับคำร้องเรียน

หลังปล่อยใช้ ทีมตั้งเอเจนต์ในระบบแชตภายในเพื่อรับคำขอสร้างหน้าจริงทุกสัปดาห์ ระบบจัดกลุ่มคำร้องเรียนที่เกิดซ้ำโดยอัตโนมัติ และเมื่อยอมรับการแก้ไข ก็ส่งไปยังชั้นที่เหมาะสม ตัวชี้วัดที่ใช้ตัดสินว่าการแก้ได้ผลจริงคือความถี่ของคำร้องเรียนชนิดเดียวกันต้องลดลงเมื่อเวลาผ่านไป ไม่ใช่แค่ผ่านการทดสอบครั้งเดียว

สูตรเจ็ดขั้นที่ทีมอื่นทำตามได้

บทความสรุปเป็นขั้นตอนที่ทำซ้ำได้ เริ่มจากเลือกชิ้นงานที่เกิดซ้ำและมีผู้อ่านจริงหนึ่งชนิด สร้างผลลัพธ์ตั้งต้นโดยไม่มีแนวทางใหม่ แปลงการแก้ด้วยมือที่เคยทำให้เป็นกฎที่สังเกตและวัดได้ เผยแพร่สไตล์ชีตที่จำกัดขอบเขตพร้อมเอกสารว่ามีองค์ประกอบอะไรให้ใช้ รันการเปรียบเทียบแบบจับคู่เพื่อดูว่าแนวทางทำให้ความพยายามครั้งแรกดีขึ้นหรือไม่ ใส่การแก้ไขในชั้นที่ถูกต้องแทนการปรับผลลัพธ์ทีละชิ้น และเพิ่มระบบอัตโนมัติหลังจากวงจรทำมือพิสูจน์คุณค่าแล้ว

นำไปใช้กับงานเว็บในไทย

ทีมรับทำเว็บในไทยที่เริ่มใช้เอเจนต์ผลิตหน้าแลนดิ้ง อีเมลการตลาด หรือรายงานให้ลูกค้า มักเจอปัญหาเดียวกันคือผลลัพธ์แต่ละครั้งหน้าตาไม่เหมือนกัน วิธีที่ถูกที่สุดจากบทความนี้คือเขียนไฟล์แนวทางของแต่ละแบรนด์ลูกค้าสักหนึ่งหน้า ระบุฟอนต์ไทยที่ใช้ ระยะห่าง โทนคำ และรูปแบบที่ห้าม ควบคู่กับสไตล์ชีตกลางที่มีคลาสจำกัด แล้วให้เอเจนต์ทุกตัวโหลดก่อนเริ่มงาน ทีมงานแนะนำให้เก็บตัวอย่างผลลัพธ์ก่อนและหลังของงานจริงไว้เปรียบเทียบ เพราะนั่นคือหลักฐานที่ใช้อธิบายคุณค่ากับลูกค้าได้ชัดกว่าคำอธิบายใด ๆ