Anthropic เพิ่มคำสั่ง /design ใน Claude Code เพื่อสร้าง UI Mockup บน Terminal

Anthropic ได้ขยายความสามารถของ Claude Code ด้วยคำสั่ง /design ใหม่ ซึ่งช่วยให้นักพัฒนาสามารถสร้าง ปรับปรุง และดู UI mockup ได้โดยไม่ต้องออกจาก terminal

การทำ UI Prototyping โดยตรงใน Terminal

แทนที่จะต้องสลับไปมาระหว่าง Figma และ shell ตอนนี้คุณสามารถพิมพ์คำสั่งอย่าง /design a few options for a login screen ได้เลย Claude จะตอบกลับด้วย "artboards" แบบโต้ตอบได้หลายรูปแบบที่แสดง mockup ความละเอียดสูง คุณสามารถเปรียบเทียบเลย์เอาต์ เลือกแบบที่ชอบ และปรับแต่งรูปลักษณ์ได้ด้วยการถามคำถามเพิ่มเติม ทั้งหมดนี้ทำได้ก่อนที่จะเริ่มเขียนโค้ดจริงแม้แต่บรรทัดเดียว

Mockup ที่เข้าใจบริบทจาก Codebase ของคุณ

Nate Parrott นักพัฒนา ระบุว่า Claude สามารถอ่าน repository ปัจจุบันได้จริง โดยจะดึงพาเลตสี (colour palettes), ไลบรารีคอมโพเนนต์ (component libraries) และรูปแบบเลย์เอาต์ (layout conventions) มาใช้ เพื่อปรับแต่งแต่ละดีไซน์ให้เข้ากับสไตล์เดิมของโปรเจกต์ ผลลัพธ์จะปรากฏในรูปแบบ "Artifacts" ซึ่งเป็นมุมมองเฉพาะภายใน Claude ที่แสดงรูปภาพโดยไม่ต้องเปิดโปรแกรมแก้ไขกราฟิกแยกต่างหาก ในขั้นตอนนี้ mockup จะอยู่ในพื้นที่ทำงานของ Claude เท่านั้น คุณต้องบันทึกลงในระบบไฟล์ (file system) อย่างชัดเจนก่อนที่จะเปลี่ยนพวกมันให้เป็นโค้ด

ทำไมสิ่งนี้ถึงสำคัญต่อการพัฒนาด้วย AI

คำสั่งนี้ช่วยรวมสองขั้นตอนของวงจรการพัฒนาซอฟต์แวร์ (software development life cycle) เข้าด้วยกัน นั่นคือการออกแบบและการเขียนโค้ด ทีมที่ให้ความสำคัญกับความเร็วสามารถสร้างตัวเลือกเลย์เอาต์ได้หลายแบบด้วย prompt เพียงครั้งเดียว ช่วยเร่งขั้นตอนการค้นหาไอเดียในช่วงเริ่มต้น และเนื่องจาก Claude ใช้ codebase จริง ทำให้ mockup ยังคงรักษาเอกลักษณ์ของแบรนด์ (on-brand) และเข้ากันได้กับระบบคอมโพเนนต์ ช่วยลดขั้นตอนการปรับแต่งด้วยมือที่มักตามมาหลังจากใช้การสร้างรูปภาพแบบทั่วไป

Anthropic มองว่านี่คือก้าวสำคัญสู่การเป็น "AI software engineer" ที่จัดการได้ทั้งด้านตรรกะ (logic) และความสวยงาม (aesthetics) หาก terminal สามารถทำหน้าที่เป็นพื้นที่ทำงานแบบ multi-modal ได้ เส้นแบ่งระหว่างการเขียนโค้ดและการสร้างประสบการณ์ผู้ใช้ (user experience) ก็จะลดน้อยลงอย่างมาก

ข้อจำกัดในปัจจุบัน

ฟีเจอร์นี้ยังอยู่ในช่วง preview โดย mockup ที่สร้างขึ้นจะไม่กลายเป็นไฟล์ซอร์สโค้ดโดยอัตโนมัติ คุณต้องทำการ export และนำไปรวมเข้ากับโปรเจกต์ด้วยตัวเอง ขั้นตอนเพิ่มเติมนี้อาจทำให้เสียเวลาที่ควรจะประหยัดได้ โดยเฉพาะในโปรเจกต์ขนาดใหญ่ที่มีคอมโพเนนต์จำนวนมาก

วิธีทดลองใช้งาน

รัน claude update เพื่อดึง build ล่าสุดในช่วง preview และเปิดใช้งานคำสั่ง /design

สรุปประเด็นสำคัญ

  • การทำ Prototyping แบบครบวงจร: /design สร้าง UI artboards ได้หลายรูปแบบโดยตรงจาก prompt ใน terminal
  • ความสอดคล้องตามบริบท: Claude สแกน codebase ปัจจุบันเพื่อให้ mockup สอดคล้องกับระบบการออกแบบ (design system) ที่มีอยู่
  • เวิร์กโฟลว์ที่คล่องตัว: ด้วยการรวมพลังการสั่งงานของ Claude Design เข้ากับการทำงานของ Claude Code นักพัฒนาจึงสามารถเปลี่ยนจากแนวคิดไปสู่ visual prototype ได้โดยไม่ต้องสลับเครื่องมือ

คำสั่ง /design ใหม่ของ Anthropic ช่วยให้นักพัฒนาสามารถสร้างและปรับปรุง UI mockup ได้โดยตรงจาก terminal ซึ่งช่วยลดการสลับไปมาระหว่างเครื่องมือออกแบบและโปรแกรมแก้ไขโค้ด ซึ่งเป็นคอขวดที่ทีมที่ทำงานอย่างรวดเร็วหลายทีมยังคงต้องเผชิญ

การสร้างร่างภาพ (Visual Drafts) จาก CLI Prompt

คุณเพียงพิมพ์คำสั่งอย่าง /design a few options for a login screen แล้ว Claude จะส่งชุด artboards แบบโต้ตอบกลับมา โดยแต่ละ artboard จะแสดง mockup ความละเอียดสูงที่คุณสามารถตรวจสอบ เปรียบเทียบ และปรับแต่งได้ด้วยการถามคำถามเพิ่มเติม

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

ทำไมเหล่านักพัฒนาถึงให้ความสำคัญกับเครื่องมือออกแบบใน Terminal

นักพัฒนาส่วนใหญ่ใช้เวลาส่วนใหญ่ในแต่ละวันไปกับการสลับไปมาระหว่าง terminal สำหรับเขียนโค้ดและแอปออกแบบ UI การนำการทำ visual prototyping เข้ามาอยู่ในหน้าต่างเดียวกับที่เขียนโค้ด ช่วยรวมสองขั้นตอนของวงจรการพัฒนาซอฟต์แวร์เข้าด้วยกัน

สำหรับทีมที่เน้นความเร็ว การสร้างตัวเลือกเลย์เอาต์หลายแบบด้วย prompt เพียงครั้งเดียวสามารถเร่งขั้นตอนการค้นหาไอเดียในช่วงเริ่มต้นได้ การที่ Claude อ่าน codebase ที่มีอยู่ช่วยให้ mockup ยังคงรักษาเอกลักษณ์ของแบรนด์และเข้ากันได้กับระบบคอมโพเนนต์ของโปรเจกต์ ช่วยลดขั้นตอนการปรับแต่งด้วยมือที่มักจะตามมาหลังจากขั้นตอนการสร้างรูปภาพแบบทั่วไป

Anthropic มองว่าการเพิ่มฟีเจอร์นี้เป็นก้าวสำคัญสู่การเป็น "AI software engineer" ที่สามารถจัดการได้ทั้งด้านตรรกะและความสวยงาม หาก terminal สามารถทำหน้าที่เป็นพื้นที่ทำงานแบบ multi-modal ได้ เส้นแบ่งระหว่างการเขียนโค้ดและการสร้างประสบการณ์ผู้ใช้ก็จะยิ่งบางลง

ข้อจำกัดและเหตุผลที่ยังต้องใช้เครื่องมือออกแบบแบบดั้งเดิม

ฟีเจอร์นี้ยังอยู่ในช่วงพรีวิว และยังมีข้อจำกัดในทางปฏิบัติหลายประการ ประการแรก ม็อคอัพ (mockups) ที่สร้างขึ้นจะไม่กลายเป็นไฟล์ต้นฉบับ (source files) โดยอัตโนมัติ นักพัฒนาจะต้องส่งออกและนำไปรวมเข้ากับโปรเจกต์ด้วยตนเอง ขั้นตอนที่เพิ่มขึ้นมานี้อาจทำให้ความสามารถในการประหยัดเวลาลดลงสำหรับโปรเจกต์ขนาดใหญ่ที่ต้องมีการซิงค์คอมโพเนนต์ (components) จำนวนมาก

สิ่งที่ควรจับตามองเมื่อฟีเจอร์นี้พัฒนาขึ้น

บันทึกการอัปเดตของ Anthropic ระบุว่าสามารถเปิดใช้งานคำสั่งนี้ได้ง่ายๆ ด้วย claude update

สรุปสาระสำคัญ: การใส่ design prompt ลงใน terminal ของ Claude Code ช่วยให้นักพัฒนามีทางลัดจากแนวคิดไปสู่ visual prototype ได้ แต่เวิร์กโฟลว์ยังคงต้องพึ่งพาการส่งต่องานด้วยตนเองและยังขาดความลุ่มลึกเมื่อเทียบกับเครื่องมือ UI โดยเฉพาะ การพัฒนาของฟีเจอร์นี้จะเป็นตัวตัดสินว่าคำสั่งนี้จะยังคงเป็นเพียงความสะดวกเฉพาะกลุ่ม หรือจะกลายเป็นส่วนสำคัญของ AI-driven development stack