ตอนวางแผนหน้าจอ AI agent มักวาดกล่องด้วยตัวอักษรมาให้ดู ปุ่มอยู่มุมขวา ตารางอยู่ข้างล่าง ตัวกรองอยู่บนสุด แบบนี้บอกได้ว่าอะไรอยู่ตรงไหนและเรียงยังไง แต่บอกไม่ได้ว่าปุ่มใหญ่แค่ไหน ตัวหนังสือหนักแค่ไหน ระยะห่างพอหรือยัง หรือสีไหนเข้ากับหน้าอื่น
เรื่องพวกนี้ผมต้องเห็นก่อนถึงจะตัดสินใจได้ ถ้ารอเห็นหลัง agent เขียนโค้ดเสร็จ ก็มักต้องแก้อีกรอบ agent เขียน HTML ได้เร็วอยู่แล้ว ผมจึงให้ทำเป็นหน้าเว็บจริงตั้งแต่ตอนเลือกแบบ
นี่เป็นตอนต่อจากงานที่ไม่ใช่โค้ด ที่เล่าไว้สั้น ๆ ว่ามี skill นี้ ตอนนี้จะเล่าว่าหน้าแบบนี้หน้าตาเป็นยังไง และใช้ตัดสินใจเรื่องอะไรได้บ้าง
หนึ่งหน้ามีหลายคำถาม แต่ละคำถามมีสองสามแบบ
เวลาต้องเลือกหน้าตาของหน้าจอ agent จะทำหน้า HTML ไว้ใน public/design/ ของโปรเจกต์ หนึ่งโฟลเดอร์ต่อหนึ่งเรื่อง โฟลเดอร์นี้อยู่ใน .gitignore จึงไม่ปนกับโค้ดจริง
หน้าหนึ่งมีได้หลายคำถาม คำถามที่เกี่ยวกันอยู่หน้าเดียวกัน จะได้ตอบรวดเดียว แต่ละคำถามมีสองสามแบบ ติดรหัสสั้น ๆ A, B, C ไว้ ส่วนหน้าตาของแต่ละแบบ agent ออกแบบเองได้เต็มที่
skill สั่งให้ agent ทำอีกสามเรื่องก่อนวาด
- อ่านระบบดีไซน์ของโปรเจกต์ก่อน ฟอนต์ สี และตัวแปร CSS ที่ใช้จริง หน้าตัวเลือกจึงดูเป็นของระบบเดียวกัน
- ใช้ข้อมูลจริงจากฐานข้อมูล และเลือกข้อมูลที่ทำให้หน้าจอลำบาก เช่น ชื่อที่ยาวที่สุด แทนข้อมูลที่จัดมาสวย ๆ
- ใส่แบบเดิมเป็นตัวเลือกแรก ถ้าหน้านั้นมีอยู่แล้ว จะได้เทียบกับของที่ใช้อยู่
ประโยคบอกข้อเสียสำคัญที่สุดบนหน้า
ใต้ทุกแบบมีหนึ่งประโยคบอกว่าเลือกแบบนี้แล้วได้อะไร เสียอะไร ผมว่าประโยคนี้สำคัญกว่าภาพ ถ้าไม่มีก็จะเลือกจากแบบที่ดูสวยกว่าในวันนั้น แทนที่จะเลือกจากสิ่งที่ยอมเสีย
ตัวอย่างจากคำถาม "ที่เลือกชื่อในหน้าตรวจ"
| แบบ | ข้อเสียที่เขียนไว้ |
|---|---|
| A ในแผงขวา | เห็นตัวเลือกทันทีที่เปิดโพสต์ แต่แผงกว้างแค่ 320px จึงแสดงตัวอย่าง Google ไม่ได้ |
| B มุมมองใหม่ | กว้างพอเทียบตัวอย่าง Google กับการ์ดบนเว็บ แต่ต้องกดเข้ามุมมองนี้ก่อนจึงจะเลือกได้ |
| C ทั้งสองที่ | เลือกได้เร็วเหมือน A และเปิดดูละเอียดแบบ B ได้ แต่ต้องดูแลสองที่ให้ตรงกัน |
ประโยคพวกนี้ต้องเป็นภาษาที่ผมพูดเอง skill มีกฎว่าหัวข้อเป็นประโยคบอกเล่าสั้น ๆ ไม่ใช่คำถาม และให้ใช้คำที่ผมเคยเขียนในโน้ตรอบก่อน ๆ ข้อความในหน้าจอจำลองก็ต้องสั้นเท่าของจริง ถ้า agent ใส่คำอธิบายยาวลงไปในปุ่มหรือป้าย สัดส่วนที่เห็นจะไม่ตรงกับหน้าจอที่จะทำจริง
ตัวอย่างจากหน้าเลือกชื่อโพสต์
ตอนอยากให้ Claude เสนอชื่อโพสต์สองสามแบบ แล้วผมเลือกเองในหน้าตรวจของหลังบ้าน agent ทำหน้าตัวเลือกมาห้าคำถาม เลือกชื่อที่ไหน เทียบแต่ละชื่อด้วยอะไร ปกจะเป็นยังไงเมื่อเปลี่ยนชื่อ หลังเลือกแล้วเกิดอะไรขึ้น และมีอะไรต้องเปลี่ยนบ้าง หน้าจอจำลองใช้โพสต์ที่รอตรวจอยู่จริงในวันนั้น
คำถามที่ 3 ถามเรื่องปก แบบ A ใช้ปกเดียวกับทุกชื่อ แบบ B ทำหนึ่งปกต่อหนึ่งชื่อ แต่ละแบบมีปกจริงของโพสต์นั้นให้ดู
คำตอบที่ส่งกลับไปหน้าตาแบบนี้
เลือกชื่อโพสต์ในหน้าตรวจ
1. ที่เลือกชื่อในหน้าตรวจ → A
2. สิ่งที่ใช้เทียบแต่ละแบบ → A
3. ปกเมื่อเปลี่ยนชื่อ → A + B
↳ แล้วแต่ความเหมาะสม จะ cover เดียวกันหรือคนละ cover กัน ก็ได้
มี คนละ variant กันบ้างก็ดี สีเริ่มแบบเดียวกัน เริ่มดูซ้ำ ๆ เหมือนกันหมดแล้ว
4. หลังเลือกชื่อ → A
5. สิ่งที่ต้องเปลี่ยนคำตอบส่งกลับไปแค่รหัสของแบบ ไม่ส่งข้อความของตัวเลือก เพราะโน้ตมักเขียนมาแก้หรือเติมตัวเลือกนั้น ถ้าวางคู่กันจะอ่านเหมือนพูดขัดกันเอง skill จึงบอก agent ว่าถ้าโน้ตกับตัวเลือกไม่ตรงกัน ให้เชื่อโน้ต
ข้อ 3 เป็นตัวอย่างที่ชัด ผมเลือกทั้ง A และ B แล้วบอกในโน้ตว่าปกเริ่มดูซ้ำกัน กฎที่ได้จากข้อนี้ก็คือใช้ปกเดียวเมื่อทุกชื่อพูดเรื่องเดียวกัน ใช้ปกของแต่ละชื่อเมื่อมุมของชื่อเปลี่ยนสิ่งที่ปกควรเล่า และให้เปลี่ยนแบบและสีของปกไม่ให้ซ้ำโพสต์ก่อน ๆ ตอนนี้ฟีเจอร์นี้อยู่ในหน้าตรวจแล้ว และโพสต์นี้ก็มีชื่อให้ผมเลือกสามแบบเหมือนกัน
หน้าตรวจซูมและวาดได้แบบ Figma
ช่วงแรกหน้าตัวเลือกเป็นหน้าเลื่อนยาวหน้าเดียว มีแถบด้านล่างให้เลือกและเขียนโน้ต แล้วกดคัดลอกไปวางในแชท ตอนนี้ทุกหน้าเปิดในหน้าตรวจกลางที่ agent ทำเพิ่มทีหลัง
- ซ้าย รายการคำถาม มีวงกลมบอกว่าข้อไหนตอบแล้ว
- กลาง ทุกแบบวางเทียบกันบนพื้นที่ที่ซูมและเลื่อนได้ ทุกแบบใช้ระดับซูมเดียวกัน ขนาดจึงเทียบกันได้ตรง ๆ และมีคำถามกับประโยคข้อเสียอยู่บนพื้นที่นั้นด้วย
- ขวา ที่เลือกแบบ เลือกได้หลายแบบ ข้ามข้อที่ให้ Claude ตัดสินเองได้ และมีช่องเขียนความเห็น
- เครื่องมือ ปักโน้ตลงบนจุดในหน้าจอ วาดกรอบหรือลูกศร และแก้คำในหน้าจอจำลองได้ตรงที่เห็น
- ขนาดจอ หน้าจอเดียวกันดูได้ทั้งขนาดเดสก์ท็อป แท็บเล็ต และมือถือ
ตอนตอบเสร็จ ผมกดปุ่มส่ง คำตอบจะกลับไปที่ session ของ agent ที่รออยู่เลย ไม่ต้องคัดลอกไปวางเอง agent อ่านแล้วทำต่อในรอบเดียวกัน
ใช้กับเรื่องที่เป็นภาพล้วน ๆ ก็ได้ อย่างตราประทับโลโก้ของเว็บนี้ แต่ละแบบมีให้ดูสามที่ บนกระดาษ บนฝาโน้ตบุ๊ก และขนาดเล็กท้ายบรรทัด
เลือกรูปแบบหน้าตามสิ่งที่ต้องตัดสินใจ
ไม่ใช่ทุกเรื่องเป็นการเลือกระหว่างสองสามแบบ skill จึงมีหน้าห้ารูปแบบ
| รูปแบบ | ได้อะไร | ใช้เมื่อ |
|---|---|---|
options |
หลายคำถาม คำถามละสองสามแบบ | มีเรื่องต้องเลือก |
mockup |
ทุกหน้าจอของงานหนึ่งเรียงตามลำดับ เขียนโน้ตได้ทุกขั้น | อยากเห็นการใช้งานตั้งแต่ต้นจนจบ เช่น รายการ แก้ไข และบันทึกสำเร็จ |
live |
สคริปต์ที่ฉีดเข้าไปในแอปที่รันอยู่ สลับแบบได้จากแผงลอย | ปรับหน้าที่มีอยู่แล้ว และอยากเห็นกับข้อมูลจริง |
flow |
หน้าเล่าลำดับของงานหลายขั้น พร้อมแผนภาพ | อธิบาย job หรือการเชื่อมต่อที่ผ่านหลายระบบ |
sandbox |
ทั้งงานเป็นแอปจำลองที่กดเล่นได้ทุกทาง | ต้องลองกดจริงก่อนเริ่มทำ backend |
ใช้ต่อกันได้ด้วย เช่น ใช้ options เลือกหน้าตาก่อน แล้วใช้ live ลองแบบที่เลือกกับข้อมูลจริงในแอป
เริ่มจากโครงหยาบก่อนเสมอ
ถ้ายังไม่รู้ว่างานนี้มีกี่หน้าจอ หรือแต่ละหน้ามีอะไรบ้าง skill ให้ agent ทำเป็นโครงหยาบก่อน มีแค่กล่องกับเส้น ฟอนต์พื้นฐาน ไม่มีสี หน้าที่ทำสวยแล้วชวนให้ติเรื่องสีและระยะห่าง ทั้งที่ยังไม่รู้เลยว่าหน้านั้นควรมีอยู่หรือเปล่า
ผมเลือกโครงสองสามรอบจนรายการหน้าจอนิ่ง แล้วค่อยให้ agent ทำแบบเต็ม เฉพาะเรื่องที่ต้องตัดสินจากน้ำหนัก ระยะห่าง ฟอนต์ หรือสี
หน้าตัวเลือกเก็บไว้ ไม่ลบ
ทำงานเสร็จแล้ว agent ไม่ลบหน้าตัวเลือก และไม่ถามว่าจะลบไหม บางหน้าผมกลับมาเปิดดูว่าตอนนั้นเลือกอะไรเพราะอะไร บางหน้ากลายเป็นตัวอย่างดีไซน์ที่ใช้ต่อ ตั้งแต่เริ่มทำเว็บเวอร์ชันนี้มีหน้าแบบนี้ราว 20 หน้า ตั้งแต่ทิศทางของแบรนด์ โลโก้ หน้าแรก หลังบ้าน ไปจนถึงหน้า analytics จะลบก็ต่อเมื่อผมสั่งเท่านั้น หรือย้ายเข้าที่เก็บในหน้าตรวจเอง
การตัดสินใจที่ต้องจำไว้นาน ๆ ไม่ได้อยู่ในหน้าตัวเลือก agent ย้ายไปเขียนไว้ในเอกสารดีไซน์ของโปรเจกต์ ตามที่เล่าไว้ในตอนที่ว่าด้วยความรู้ของโปรเจกต์
ถ้าอยากลองทำเอง
skill ของผมโตมาทีละนิดตามสิ่งที่ขาดในแต่ละรอบ แต่จุดเริ่มต้นใช้กฎข้อเดียวก็พอ เขียนไว้ใน CLAUDE.md ว่าเมื่อไหร่ที่ต้องเลือกหน้าตา ให้ทำหน้า HTML สองสามแบบไว้ในโฟลเดอร์ที่ไม่ commit ใช้ฟอนต์และสีของโปรเจกต์ และเขียนใต้แต่ละแบบหนึ่งประโยคว่าเลือกแล้วเสียอะไร
แค่นี้ก็เปลี่ยนคำถามจาก "ชอบแบบไหน" เป็น "ยอมเสียอะไร" ได้แล้ว ส่วนหน้าตรวจ การส่งคำตอบกลับ และรูปแบบอื่น ๆ ค่อยเพิ่มเมื่อเจอว่าขาดอะไร
