Claude Design · เครื่องมือออกแบบหน้าจอ UI ด้วย AI ในเครือ Claude · เพิ่งปล่อยอัปเดตใหญ่ที่แก้ปัญหาคาใจตั้งแต่วันเปิดตัว เครื่องมือตัวนี้เปิดมาได้แค่ 2 เดือนก็มีผู้ใช้แตะหลักล้านคนในสัปดาห์แรก แต่คนที่ลองจริงเจอกำแพงเดียวกันเกือบทุกคน · พิมพ์สั่งงานไปได้ราว 15 นาที โควต้าการใช้ก็หมด ต้องรอรอบใหม่ ทำให้มันสนุกตอนเดโม แต่เอามาทำงานจริงต่อเนื่องไม่ได้

อัปเดตรอบนี้แก้ที่ต้นเหตุของปัญหานั้น พร้อมเปิดทางใหม่ ๆ ให้ Claude Design ขยับจาก "ของเล่นน่าตื่นเต้น" มาเป็นเครื่องมือที่นักออกแบบและ developer เอาไปใช้ใน workflow จริงได้ ของใหม่หลักมีสี่อย่าง · โควต้าการใช้ที่รวมกับเครื่องมืออื่นแล้ว · การดึง design system ของเราเองเข้ามา · การส่งงานต่อกับ Claude Code เครื่องมือเขียนโค้ดด้วย AI ในเครือเดียวกัน ได้สองทาง · และตัวแก้ไขงานแบบลากปรับเองที่ไม่กินโทเค็น

โควต้าที่เคยหมดใน 15 นาที หายไปแล้ว

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

อัปเดตใหม่ยุบโควต้าก้อนแยกนั้นทิ้ง แล้วให้ Claude Design ใช้โควต้าชุดเดียวกับเครื่องมืออื่นในเครือ Claude · ทั้ง Claude Chat สำหรับแชต · Claude Code สำหรับเขียนโค้ด · และเว็บ Claude.ai พูดง่าย ๆ คือทุกอย่างใช้โควต้าชุดเดียวกัน เราจึงทำงานออกแบบได้ยาวขึ้นมากก่อนจะถึงขีดจำกัด

ดึง design system ของเราเองเข้ามา

ของใหม่ที่เปลี่ยนวิธีทำงานมากที่สุดคือการ import design system ของเราเองเข้าไปได้ เดิม Claude Design ออกแบบจากศูนย์ตามที่มันคิดเอง ผลงานเลยออกมาหน้าตากลาง ๆ ไม่ตรงกับแบรนด์ที่เรามีอยู่แล้ว อัปเดตนี้เปิดให้ดึงระบบดีไซน์จาก repo · ไฟล์จาก Figma เครื่องมือออกแบบ UI ยอดนิยม · หรือ codebase ทั้งก้อนเข้ามาเป็นฐาน งานที่ได้จึงใช้สี ฟอนต์ และคอมโพเนนต์เดียวกับที่ทีมเราใช้จริง

วิธีดึงเข้ามาทำผ่าน Claude Code ฝั่ง command line ไม่ใช่แอปบนเดสก์ท็อป ขั้นตอนเริ่มต้นสั้น ๆ มีแค่นี้

1. CD เข้าไปในโฟลเดอร์ของ design system ที่จะดึงเข้า
2. พิมพ์ claude เพื่อเปิด Claude Code CLI
3. พิมพ์คำสั่ง /design-sync แล้วตอบคำถามที่มันถาม
4. รอประมาณ 30 นาทีให้มัน sync เสร็จ
5. กลับไปที่ Claude Design · เข้าหน้า Design Systems · กด refresh ก็จะเห็นระบบดีไซน์ของเราโผล่ขึ้นมา

ตัวอย่างในวิดีโอทดสอบคือการดึงระบบดีไซน์ชื่อ Arya UI ซึ่งเป็นชุดคอมโพเนนต์สำเร็จรูปที่เขียนด้วย React เข้ามา แล้วสั่งให้สร้างหน้า dashboard ของแอป SaaS สำหรับนักวิจัย UX ผลที่ได้คือ Claude Design ร่างเลย์เอาต์มาให้เลือก 3 แบบ พร้อมปุ่มสลับ dark mode ให้ในตัว เพราะระบบดีไซน์ต้นทางรองรับโหมดมืดอยู่แล้ว

ส่งงานไป-กลับกับ Claude Code ได้

ของใหม่อีกอย่างที่ช่วยคนทำงานจริงคือการส่งงานต่อกันระหว่าง Claude Design กับ Claude Code ได้สองทาง ออกแบบหน้าจอเสร็จใน Claude Design แล้วอยากให้ Claude Code เขียนโค้ดต่อ ก็กด Export แล้วเลือก "Send to Claude Code" · คัดลอก prompt ที่มันสร้างให้ · ไปวางใน Claude Code จากนั้น Claude Code จะดึงทั้งโปรเจกต์ไปทำต่อเอง

และในทางกลับกัน โปรเจกต์ที่เริ่มจาก Claude Code อยู่แล้ว ก็ดึงกลับมาออกแบบต่อใน Claude Design ได้เหมือนกัน คนที่ถนัดเขียนโค้ดเป็นหลักจึงไม่ต้องเลือกข้างว่าจะอยู่กับเครื่องมือไหน แต่สลับไปมาตามจังหวะของงานได้ ของแถมที่มากับเรื่องนี้คือ MCP connectors ตัวเชื่อมที่ให้ Claude เข้าถึงเครื่องมือและข้อมูลภายนอก ถ้าเราตั้งไว้ใน Claude Code ระบบจะ sync มาใช้ใน Claude Design ให้อัตโนมัติ ไม่ต้องตั้งค่าซ้ำ

ตัวแก้ไขที่ลากปรับเองได้ ไม่ต้องเสียโทเค็น

เวอร์ชันแรกของ Claude Design มีข้อจำกัดที่น่ารำคาญอย่างหนึ่ง · จะขยับปุ่มนิดเดียวก็ต้องพิมพ์ prompt สั่ง แล้วทุกครั้งที่สั่งก็กินโทเค็น อัปเดตนี้สร้าง canvas editor ขึ้นมาใหม่ ใส่ปุ่มสำหรับลาก · ปรับขนาด · และจัดแนววัตถุเอง การปรับ UI เล็ก ๆ น้อย ๆ จึงทำได้เองโดยไม่ต้องพิมพ์สั่งและไม่เปลืองโทเค็น

ตัวแก้ไขมีสองโหมดให้เลือกตามความถนัด

• Pro · สำหรับคนที่อยากคุมละเอียด มีเครื่องมือครบเหมือนทำงานใน Figma มี layer tree ให้เพิ่มข้อความ เฟรม และรูปทรงได้
• Simple · สำหรับคนที่ขอแค่ปรับหน้าตาพื้นฐาน ไม่ต้องเจอปุ่มเยอะ

ใช้โหมดไหนเมื่อไหร่ก็ดูที่ความคุ้นเคยเป็นหลัก ถ้าเคยจับเครื่องมือออกแบบมาก่อนก็เลือก Pro ถ้าแค่อยากขยับ ๆ ให้เข้าที่ก็เลือก Simple พอ และเมื่อจะแก้งานจริง มีสามทางให้เลือกผสมกัน · ลากปรับเองด้วยปุ่มบน canvas · พิมพ์ comment แล้วกด send ให้ Claude แก้ให้ · หรือวาดมาร์กอัปลงบน canvas ตรง ๆ

เมื่อออกแบบเสร็จ ช่องทางส่งออกก็มีมากขึ้น · ดาวน์โหลดเป็นไฟล์ zip · เป็นไฟล์ HTML ที่เปิดได้เอง · เป็น PDF · หรือส่งต่อไป Canva · Miro · PowerPoint ก็ได้ ทำให้งานที่ร่างใน Claude Design ส่งต่อไปยังเครื่องมือที่ทีมใช้อยู่แล้วได้ไม่สะดุด

สิ่งที่เพิ่มมาในแดชบอร์ดใหม่

นอกจากของหลักสี่อย่าง หน้า dashboard ที่ทำใหม่ยังแสดงให้เห็นว่าระบบสร้างงานได้หลากหลายขึ้น รวมถึง motion graphics และ animation loop ไม่ได้จำกัดอยู่แค่หน้าจอนิ่ง ๆ และมีหน้า Examples ให้เข้าไปดูงานที่คนอื่นสร้างไว้ เป็นจุดตั้งต้นที่ดีสำหรับคนที่ยังนึกไม่ออกว่าจะเริ่มจากตรงไหน

สำหรับคนที่อยากลองเอง ลำดับแรกที่ทำได้เลยคือเข้า Claude Design แล้วลองดึงไฟล์ที่มีอยู่เข้ามาก่อน · มันรับไฟล์ Figma · JPEG · PNG · และ HTML ได้ ลองเอาหน้าจอเก่าหรือภาพ mockup ที่มีอยู่ใส่เข้าไป แล้วสั่งให้มันต่อยอด จะเห็นภาพเร็วกว่าเริ่มจากศูนย์

บทเรียนจากคนที่ใช้ของจริงก็น่าฟัง · Griffin Wooldridge ครีเอเตอร์สายออกแบบที่ลองอัปเดตนี้แล้วทำคลิปรีวิว เล่าว่าสองฟีเจอร์ที่เขารอมาตั้งแต่เดือนเมษายนคือการดึง design system เข้ามา และการส่งงานต่อ Claude Code · เพราะเขาเองยังถนัดทำงานในฝั่ง Claude Code มากกว่า การที่ส่งงานข้ามไปมาได้สองทางจึงเป็นจุดที่ทำให้เครื่องมือนี้เข้ากับวิธีทำงานเดิมของเขาได้พอดี

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

---

ที่มา: คลิป Claude Design Just Changed Everything (New Update) จากช่อง Griffin Wooldridge