หัวหน้าฝ่ายออกแบบของ Claude Code สร้างงานด้วย AI อย่างไร [YouTube]

• สาธิต เวิร์กโฟลว์ใช้งานจริง ว่าใช้ Claude Code ในการพัฒนาผลิตภัณฑ์จริงอย่างไร โดยลงมือเพิ่มฟีเจอร์ autocomplete ให้ Excalidraw ด้วยตัวเอง
• แม้จะเป็นการบรรยายโดยนักออกแบบ แต่เนื้อหาแทบทั้งหมดใกล้เคียงกับเวิร์กโฟลว์ของนักพัฒนา โดยครอบคลุมการ รันหลาย Claude session แบบขนานด้วย worktree, การสร้างฟีเจอร์ต้นแบบ, การตรวจสอบบนเบราว์เซอร์ และการเปิด PR ในแนวทางที่เน้น CLI
• แก่นสำคัญคือไม่ได้ใช้ AI เป็นแค่เครื่องมือเขียนโค้ดแทนคน แต่ใส่มันเข้าไปใน pipeline การพัฒนาผลิตภัณฑ์ที่ต่อเนื่องตั้งแต่ สำรวจไอเดีย → เปรียบเทียบแนวทางการพัฒนา → ตรวจสอบด้วยตัวเอง → เขียน PR → ปรับตามรีวิว → ช่วย merge
• จุดที่มีประโยชน์ต่อนักออกแบบคือ แม้จะยอมรับข้อจำกัดว่า Claude ยังตัดสินใจด้านดีไซน์ได้ไม่ดีนัก แต่ก็แสดงให้เห็นวิธีใช้มันสร้างหลายแนวทางได้อย่างรวดเร็ว และให้รีวิวผ่าน PR ที่มีภาพหน้าจอ·GIF เพื่อ เพิ่มทั้งความเร็วในการตัดสินใจด้านดีไซน์และการควบคุมคุณภาพ
• จุดที่มีประโยชน์ต่อนักพัฒนาคือ ได้เห็นแพตเทิร์นที่ชัดเจนในการเชื่อม Claude Code เข้ากับรีโพซิทอรีจริงและโฟลว์การทำงานร่วมกัน เช่น /prototype, loop, โหมดสิทธิ์อัตโนมัติ, self-test บน Chrome, และการทำงานอัตโนมัติสำหรับจัดระเบียบโค้ด·รีวิว·merge PR
• มุมมองที่สำคัญเป็นพิเศษคือ “ไม่ใช่ว่าทุกคนสร้างได้แล้ว ทุกอย่างควรถูก deploy” และในยุค AI ที่คนจำนวนมากขึ้นสามารถสร้างโค้ดได้ จึงต้องขยาย การตรวจสอบ, การรีวิว, การมีส่วนร่วมของดีไซน์, และเกณฑ์การ deploy ให้เป็นระบบอัตโนมัติที่ขยายต่อได้
• สุดท้ายแล้ว วิดีโอนี้ไม่ได้แค่สอนนักออกแบบเขียนโค้ดด้วย AI แต่เป็นกรณีศึกษาว่านักออกแบบและนักพัฒนาจะใช้ AI เป็นตัวกลางเพื่อ ทดลองได้เร็วขึ้นโดยยังรักษาคุณภาพของผลิตภัณฑ์ อย่างไร

---

บริบทของการบรรยายและผู้บรรยาย

• Meaghan Choi หัวหน้าฝ่ายออกแบบของ Claude Code
• ออกแบบ ผลิตภัณฑ์สาย CLI มาตั้งแต่ก่อนนำ AI มาใช้ และมีส่วนร่วมในการออกแบบ Claude CLI โดยนิยามตัวเองว่าเป็น "CLI die-hard"
• กล่าวว่าคนใน Anthropic เข้าถึงเครื่องมือได้ตลอดเวลาและใช้งานทั้งวัน จึงมีบรรยากาศของการมองหา วิธีทำงานที่เหมาะสมที่สุด อย่างต่อเนื่อง
• ระบุชัดว่าเดสก์ท็อปแอปเข้าถึงได้ง่ายกว่า และงานทั้งหมดในเดโมนี้ ทำแบบเดียวกันได้ใน desktop app
  • CLI เป็นเพียงความชอบส่วนตัวของผู้บรรยาย ไม่ใช่วิธีที่ผู้ชมจำเป็นต้องทำตาม

การตั้งค่าสภาพแวดล้อมสำหรับงานขนานและความเร็วสูง

• worktree

  • หากรัน Claude หลายตัวพร้อมกันในรีโพซิทอรีโลคัลเดียวกัน อาจเกิด การชนกัน เพราะงานของแต่ละตัวเขียนทับกันได้
  • worktree ช่วยสร้างสำเนารีโพซิทอรีแบบแยกจากกัน เพื่อให้ทำหลายงานแบบขนานได้
    • เวลาวิศวกรเปิด Claude ไว้ 4~5 ตัว มักจะเป็นการโคลนรีโพซิทอรีเป็น repo1·repo2 หรือใช้ worktree
    • เมื่อรัน claude --worktree ระบบจะ checkout ไปยัง branch ใหม่ให้อัตโนมัติ จัดการง่ายกว่า จึงแนะนำให้ใช้

• Opus 1M · fast mode

  • ผู้บรรยายใช้ Opus 1M context และ fast mode ตลอดเวลา แต่ทั้งนี้บางองค์กรอาจเข้าถึงได้จำกัด
  • อธิบายว่าเป็นการตั้งค่าเพื่อให้เดโม 15 นาทีเดินได้รวดเร็วขึ้น และมีความต่างด้านความเร็วอยู่เล็กน้อย

• auto mode

  • คนใน Anthropic ใช้ auto mode ตลอด ซึ่งเป็นทางเลือกแทนโหมดสิทธิ์ต่ำ
  • เนื่องจาก classifier จะตรวจจับว่ามีการกระทำที่เสี่ยงหรือไม่ จึงไม่ต้องคอยกดอนุมัติ "Yes, accept" ซ้ำๆ ทำให้งานเร็วขึ้นมาก

• Loop

  • Loop เป็นพรอมป์ต์มาตรฐานที่หมายถึง "ทำต่อไปจนกว่าจะเสร็จ" และทำให้ระบบวนทำงานซ้ำจนกว่างานจะเสร็จสมบูรณ์

พรอมป์ต์และ prototype skill

• สั่งให้เพิ่มฟีเจอร์ใน Excalidraw ด้วย พรอมป์ต์ง่ายๆ เพียงว่า "อยากเพิ่ม autocomplete" โดยไม่มีสเปกดีไซน์

• prototype skill

  • เป็น slash prototype skill ที่เจ้าตัวขอให้ Claude ช่วยสร้างขึ้นมาเอง โดยให้สร้างแนวทางการพัฒนาเริ่มต้น 5 แบบ (หรือ n แบบ) สำหรับฟีเจอร์หนึ่งๆ แล้วพรีวิวเป็นไฟล์ HTML ก่อนวนปรับต่อ
    • เน้นว่าสกิลไม่ได้เขียนด้วยมือ แต่สร้างจากพรอมป์ต์ พร้อมพูดว่า "ทุกวันนี้ไม่มีใครเขียนสกิลด้วยมือแล้ว"
  • ขอให้ Claude เลือกหนึ่งแนวทางด้วยตัวเองก่อนและอธิบายเหตุผล โดยผู้บรรยายบอกว่าชอบดูผลลัพธ์แบบนี้
  • เพิ่มเงื่อนไขว่า "อนุญาตให้ทำ online research" และบอกว่าถ้าเป็น production codebase จริง ก็จะสั่งให้อ้างอิงทุกแหล่งข้อมูล เช่น Slack·Google Docs·บันทึกการพูดคุย·BigQuery
  • สั่งให้พัฒนาแนวทางที่ดีที่สุด, ตรวจสอบ, ทำสไตล์ให้สอดคล้อง แล้วสร้าง PR ที่มีภาพหน้าจอประกอบ
    • หลังจากนั้นจึงเปลี่ยนจากการอ่าน transcript มาเป็นการ รีวิว PR ที่มีวิดีโอบันทึกฟีเจอร์ที่พัฒนาแล้วแทน
  • ในเดโม Claude เสนอหลายแบบของ autocomplete แบบแท็บ และสุดท้ายเลือกแบบที่ 2 ตามความเห็นของผู้ชม

หลักการ 3 ข้อของการทำงาน

• LLM ส่วนใหญ่รวมถึง Claude ยังอ่อนด้านดีไซน์ ดังนั้นมนุษย์ยังต้องมีส่วนร่วมกับ craft และการตัดสินใจต่อไป
  • นี่อาจไม่ใช่ข้อจำกัดถาวร แต่เวิร์กโฟลว์ปัจจุบันตั้งอยู่บนสมมติฐานว่า "มนุษย์เป็นคนตัดสินว่าอะไรจะเข้าไปอยู่ในผลิตภัณฑ์"
• แม้การเขียนโค้ดจะทำอัตโนมัติได้ แต่ก็ควร มอบหมายงานที่ไม่ใช่การเขียนโค้ดให้ Claude ด้วย ไม่เช่นนั้นก็ยังไม่ใช่วิธีใช้งานที่อัตโนมัติที่สุด
• ไม่ใช่ว่าใครๆ ก็ ship ได้แล้ว ทุกอย่างควรถูก ship และเมื่อทุกคนสามารถ push เข้าสู่ production ได้ จึงต้องมีระบบที่ขยายต่อได้รองรับ

การทำงานอัตโนมัติสำหรับงานที่ไม่ใช่การเขียนโค้ด

• Claude in the web (cloud)

  • ใช้จัดการ งานเก็บรายละเอียดเล็กๆ นับร้อยจุด ที่พบในแอปแบบต่อเนื่อง โดยไม่ต้องเปิด session แยก
  • หากวิศวกรบ่นว่ามีการแก้ไขมากเกินไป ก็จะขอให้ squash เป็น PR เดียว
    • การแก้ไข CSS เล็กน้อยบางครั้งได้รับอนุมัติอัตโนมัติโดยไม่ต้องรีวิว ซึ่งมีประโยชน์ต่อการรักษาความเรียบร้อยของผลิตภัณฑ์

• การทำ merge PR อัตโนมัติ

  • คนในทีมแทบทุกคนเปิด Claude ไว้ตลอดเพื่อช่วย merge PR ทำให้ผู้บรรยายไม่ต้องเข้าไปยุ่งกับ CI หรือขั้นตอนก่อน merge ด้วยตัวเองอีกต่อไป
  • simplify และ code review เป็นคำสั่งภายในรีโพซิทอรีสำหรับ จัดระเบียบ (prune) codebase ซึ่งทีมวิศวกรรมที่ใช้ AI ก็น่าจะมีเครื่องมือคล้ายกัน
  • commit push PR คือคำสั่งที่รันการตรวจสอบภายในทั้งหมดแบบรวดเดียว
  • คำสั่งที่ใช้ตรวจ PR ที่เปิดอยู่แล้ว ผลักดันต่อไปจนถึงขั้นเสร็จสมบูรณ์ ถูกฝังไว้ในสกิล
    • มีการเชื่อมกับ Slack เพื่อส่ง DM อัตโนมัติไปยังผู้รีวิวโค้ดหรือผู้รับ on-call โดยแก่นสำคัญคือการรวมชุดเครื่องมือต่างๆ เข้าด้วยกัน

• Claude in Chrome

  • Claude เปิด Chrome ขึ้นมาทดสอบการทำงานได้เอง และแนะนำว่านี่เป็นวิธีที่ดีที่สุดสำหรับ การตรวจสอบการเปลี่ยนแปลงฝั่งฟรอนต์เอนด์ด้วยตัวเอง
  • จากนั้นบันทึกภาพหน้าจอเป็นชุด GIF แล้วโพสต์ก่อนเปิด PR

• สเกจูลรูทีน (Claude code work)

  • ใช้งาน routine แบบตั้งเวลาเพื่อดึง การเปลี่ยนแปลงฝั่งฟรอนต์เอนด์ จากทุกรีโพซิทอรี
  • ตรวจดู Slack·Google Meet transcript·Google Docs เป็นต้น เพื่อเช็กว่านักออกแบบมีส่วนร่วมหรือไม่ และถ้าไม่มีจะทำการปักธงไว้
  • หากไม่มีส่วนร่วม ก็จะรีวิวดีไซน์แล้วร่าง adversarial design PR จากมุมมองที่โต้แย้ง ก่อนส่ง DM ไปยังวิศวกรคนนั้นเพื่อขอให้ร่วมงานกับนักออกแบบ
    • เพราะ Claude ยังอ่อนด้านดีไซน์ จึงปิดฟังก์ชัน DM นี้ไว้อยู่ ซึ่งเชื่อมโยงกับหลักการข้อ 1 (LLM ยังอ่อนด้านดีไซน์)
  • เป็นกลยุทธ์ที่ผลักดันระบบอัตโนมัติไปไกลถึง ขั้นถัดไปของขั้นถัดไป ไม่ใช่หยุดแค่ขั้นแรก เพื่อให้พร้อมใช้งานได้ทันทีเมื่อโมเดลรุ่นถัดไปออกมา

เหตุผลที่มีประโยชน์ต่อนักออกแบบ·นักพัฒนา

• เป้าหมายของการบรรยายคือการ ยกระดับ (up level) วิธีทำงานของผู้ใช้ Claude Code และเปิดเผยรูปแบบการทำงานยอดนิยมที่ใช้จริงภายใน Anthropic
• ในมุมของนักพัฒนา มีการเสนอคำสั่งและพฤติกรรมที่ช่วยเพิ่มความเร็วงานประจำวันได้โดยตรง เช่น งานขนานด้วย worktree, ตัดการอนุมัติซ้ำๆ ด้วย auto mode, และ การทำ PR merge·CI อัตโนมัติ
  • เครื่องมืออย่าง simplify และ code review ที่ใช้ในงานบรรยายนี้ แม้จะเป็นเครื่องมือภายใน แต่ทีมวิศวกรรมที่ใช้ AI ก็มักมีสิ่งเทียบเท่ากันอยู่แล้ว จึงแนะนำให้ถาม engineering partner เพื่อเอาไปใช้
• ในมุมของนักออกแบบ การบรรยายยืนยันชัดเจนว่าภายใต้สมมติฐานที่ว่า LLM ยังอ่อนด้านดีไซน์ มนุษย์ยังต้องเป็นผู้รับผิดชอบหลักต่อ craft และการตัดสินใจ โดยให้อัตโนมัติทำหน้าที่เสริม
  • เป็นแนวทางการรักษาคุณภาพดีไซน์ด้วยระบบ เช่น สเกจูลรูทีน ที่ตรวจจับและปักธงการเปลี่ยนแปลงฝั่งฟรอนต์เอนด์ที่ถูก ship โดยไม่มีนักออกแบบเข้าร่วม