Claude Code มี /design skill ใหม่ สร้าง artboard ให้เลือกก่อนลงมือเขียนโค้ด
Claude Code เพิ่มคำสั่ง /design (research preview) ยก workflow แบบ Claude Design เข้ามาไว้ใน CLI และ Desktop สั่งครั้งเดียวได้ดีไซน์หลายแบบให้เลือก ปรับแก้ แล้วค่อยสั่ง implement เป็นโค้ดจริง
โดย ณัฐพล ยงค์ไพบูลย์ผู้ร่วมก่อตั้งกลุ่ม Claude Thailand Community
เกิดอะไรขึ้น
ClaudeDevs บัญชีทางการของ Anthropic สำหรับนักพัฒนา ประกาศเมื่อวันที่ 18 สิงหาคม 2569 ว่า Claude Code ออกแบบ UI ได้แล้ว ผ่าน skill ใหม่ชื่อ /design ซึ่งยังอยู่ในสถานะ research preview
สิ่งที่ /design ทำคือยก workflow แบบ artboard ของ Claude Design เข้ามาไว้ในตัว Claude Code ทั้งฝั่ง CLI และ Desktop โดยสร้างอยู่บนระบบ artifacts พิมพ์ /design ครั้งเดียวจะได้ artboard ของ UI ที่แก้ไขได้ออกมาหลายแบบ เลือกแบบที่ชอบ ปรับตามใจ แล้วค่อยสั่งให้ Claude ลงมือเขียนโค้ดจริงตามแบบนั้น
Claude Design คืออะไร
Claude Design เป็นเครื่องมือออกแบบแยกต่างหากที่ Anthropic Labs ปล่อยออกมาตั้งแต่วันที่ 17 เมษายน 2569 หน้าตาเป็นแชตอยู่ฝั่งซ้ายและ canvas อยู่ฝั่งขวา ผู้ใช้บอกสิ่งที่ต้องการในแชต แล้ว Claude สร้างดีไซน์ที่ใช้งานได้จริงขึ้นมาบน canvas ให้ ปรับต่อได้ทั้งผ่านแชต ผ่านคอมเมนต์ที่ปักไว้บนงาน หรือแก้บน canvas ตรง ๆ
ตัวเครื่องมือยังอยู่ในสถานะ beta และเปิดให้ผู้ใช้แพ็กเกจ Pro, Max, Team และ Enterprise ใช้งานได้ โดยฝั่ง Enterprise ตั้งค่าเริ่มต้นเป็นปิดไว้ ผู้ดูแลระบบต้องเปิดให้ก่อน
ตัวอย่างที่ Anthropic เอามาโชว์
ในภาพเป็นเคสที่ผู้ใช้พิมพ์ว่า /design redesign the composer based on what people actually use it for คือสั่งให้ออกแบบแถบเครื่องมือของช่องพิมพ์ข้อความใหม่ โดยอ้างอิงจากสิ่งที่คนใช้งานจริง
Claude เปิดเอกสารผลสำรวจการใช้งานที่เป็นต้นทางขึ้นมาอ่านก่อน แล้วจึงสร้างผลลัพธ์ออกมาเป็น artboard ชื่อ “Composer redesign” ที่เปิดเป็นลิงก์ artifact ได้ ข้างในมีดีไซน์ให้เลือกหลายแบบ พร้อมโน้ตสีเหลืองกำกับเหตุผลของแต่ละแบบไว้
- แบบ A ตั้งใจทำแบบอนุรักษ์นิยม คง layout เดิมไว้ทั้งหมด แต่สลับปุ่ม MCP ออกไปใส่ Switch Model ที่คนใช้บ่อยกว่าแทน
- แบบ B ชื่อ Adaptive row ดันปุ่มที่ผู้ใช้กดบ่อยที่สุดและกดล่าสุดขึ้นมาเป็นแถวหลัก ส่วนที่เหลือย้ายไปซ่อนไว้ใต้เมนู More
- แบบ C ชื่อ Dense icon-only เป็นอีกทางเลือกที่บีบให้เหลือแต่ไอคอน
พอเลือกได้แล้ว ในภาพผู้ใช้พิมพ์สั่งต่อในแชตเดิมว่า Ok, implement option B with my edits เพื่อให้ Claude ลงมือเขียนโค้ดจริงตามแบบ B ที่ปรับแก้ไว้
ใครใช้ได้บ้าง
เปิดให้ผู้ใช้แพ็กเกจ Pro, Max, Team และ Enterprise ใช้ได้แล้ว โดยต้องอัปเดต Claude Code เป็นเวอร์ชันล่าสุดก่อนถึงจะเห็นคำสั่งนี้
ต่างจาก /design-sync ที่มีอยู่เดิมยังไง
ก่อนหน้านี้ Claude Code มีคำสั่งสาย design อยู่แล้วสองตัวคือ /design-login กับ /design-sync แต่คนละหน้าที่กับ /design
/design-sync ทำหน้าที่แปลง design system ที่เขียนด้วย React ในรีโปของเรา แล้วอัปโหลดขึ้น Claude Design เพื่อให้ดีไซน์ที่ Claude สร้างออกมาใช้คอมโพเนนต์จริงของโปรเจกต์ ไม่ใช่คอมโพเนนต์ที่มันคิดขึ้นเอง โดยการ sync ครั้งแรกจะไล่ตรวจทุกคอมโพเนนต์และอาจกินเวลาหลายชั่วโมงถ้ารีโปใหญ่ ส่วน /design-login ใช้ขออนุญาตเข้าถึง design system ด้วยบัญชี claude.ai
พูดง่าย ๆ คือ /design-sync เป็นการป้อนวัตถุดิบเข้าไปให้ ส่วน /design เป็นตัวสร้าง artboard ให้เลือกในแชต
มุมมองจากผู้เขียน
จุดที่ผมว่าน่าสนใจที่สุดคือมันไม่ได้ generate UI ขึ้นมาลอย ๆ แต่ไปดึงข้อมูลการใช้งานจริงมาอ้างอิงเป็นเหตุผลของการออกแบบด้วย และเขียนเหตุผลกำกับไว้ทุกแบบ ทำให้คนที่ไม่ได้เป็นดีไซเนอร์ก็พอตัดสินใจเลือกได้ว่าจะเอาแบบไหน
แต่ยังเป็น research preview อยู่ ก็ต้องรอดูคุณภาพจริงตอนเอาไปใช้กับงานที่ซับซ้อนกว่าตัวอย่างนี้ ใครลองสั่ง /design ดูแล้วได้ผลยังไง มาเล่าให้ฟังกันในกลุ่มได้เลย
ข้อมูลในบทความนี้อ้างอิงจากประกาศของบัญชี ClaudeDevs บน X (Twitter) เมื่อวันที่ 18 สิงหาคม 2569 ประกอบกับเอกสาร Claude Design และเอกสารคำสั่งของ Claude Code จาก Anthropic ภาพหน้าจอในบทความเป็นภาพทางการของ Anthropic อ่านต้นทางได้ที่ลิงก์ด้านล่าง
รับข่าวสารทางอีเมล
บทความใหม่ ข่าวอัปเดตเกี่ยวกับ Claude และประกาศกิจกรรมของชุมชน ส่งให้เป็นครั้งคราว ไม่ถี่จนรำคาญ