Claude Design เพิ่งได้รับการอัปเดตที่ใหญ่ที่สุดนับตั้งแต่เปิดตัว Zubair Trabzada จากช่อง AI Workshop ได้ทดลองฟีเจอร์ใหม่ทั้งหมดอย่างละเอียดและแชร์ผ่าน YouTube — และสิ่งที่เขาค้นพบไม่ใช่แค่การเปลี่ยนหน้าตา แต่เป็นการปรับวิธีทำงานระหว่างดีไซเนอร์กับโค้ดในระดับพื้นฐาน
ตั้งแต่การ sync design system ข้ามผลิตภัณฑ์ การแก้ไข canvas โดยไม่เปลืองโควต้า ไปจนถึง MCP connector ที่ขยาย ecosystem อีกขั้น — Claude Design 2.0 เริ่มชัดเจนขึ้นว่ากำลังพยายามเป็นศูนย์กลางของ creative workflow ไม่ใช่แค่เครื่องมือทำ prototype
สรุปสั้น ๆ
- Token ของ Claude Design รวมกับ Claude Code และ Claude Chat เป็น pool เดียว — ไม่หมดโควต้ากลางคันอีกแล้ว
- Sync design system จาก Claude Code ด้วยคำสั่งเดียว ทำให้ทุกงานใช้สี ฟอนต์ และ component ชุดเดิมโดยอัตโนมัติ
- แก้ไข canvas โดยตรงได้สามวิธี ทั้ง Edit, Comment และ Markup — ไม่ต้อง chat กับ Claude ซ้ำ
- เพิ่ม MCP connector ได้แล้ว รวมถึงผ่าน Zapier เพื่อเชื่อมแอปกว่า 9,000 ตัว
- ส่งออกเป็น PDF, PowerPoint, HTML และส่งตรงไปยัง Lovable, Replit, Vercel และอื่น ๆ ได้จากใน Claude Design
UI ใหม่และ Template พร้อมเริ่มได้ทันที
เข้า Claude Design ได้สองทาง คือผ่านเว็บที่ claude.ai/design หรือจาก desktop app ที่มีแท็บ Design อยู่ด้านล่างขวา หน้าตาเปลี่ยนไปจากเดิมชัดเจน มีแท็บ Build อยู่ตรงกลาง และด้านล่างมีปุ่มเลือก design system กับ template หลายแบบให้เริ่มงานได้ทันที
Template ที่มีให้เลือกได้แก่ prototype, slides, document, wireframe และ animation โดย animation เป็นตัวที่เพิ่มใหม่ในรอบนี้ แต่ละแบบออกแบบมาสำหรับงานต่างประเภท คนทำ presentation เลือก slides แล้วสั่ง Claude สร้างได้เลย ไม่ต้องอธิบายโครงสร้างพื้นฐานซ้ำทุกครั้ง ด้านขวามือยังเลือกโมเดลได้ และกดปุ่ม + เพื่อดึงโค้ดจาก GitHub หรืออัปโหลดไฟล์ design มาอ้างอิงได้ด้วย
Token Pool ร่วมกัน: จบปัญหาหมดโควต้ากลางคัน
หนึ่งในปัญหาที่ผู้ใช้ Claude Design บ่นมาตลอดคือโควต้าที่หมดเร็วผิดปกติ เพราะเดิม Claude Design มี token budget แยกต่างหากจาก Claude Chat และ Claude Code ทำให้อาจเจอข้อความ "usage limit" ทุก 15-20 นาทีแม้ account หลักยังมีโควต้าเหลืออยู่มาก
ตอนนี้ทั้งสาม product ใช้ pool เดียวกัน หมายความว่า token ที่จ่ายรายเดือนใช้ร่วมกันได้ระหว่าง Claude Chat, Claude Code และ Claude Design ในทีเดียว ผลที่ตามมาคือคนที่ใช้งานเบาแต่เจอ limit บ่อยจะรู้สึกได้ทันทีว่าลื่นขึ้น และคนที่ใช้หนักก็ไม่ต้องบริหารโควต้าหลายที่อีกต่อไป
Design System Sync: เชื่อม Claude Code เข้ากับ Claude Design
นี่คืออัปเดตที่น่าจะส่งผลมากที่สุดสำหรับทีมและ freelancer ที่มี design system อยู่แล้ว เดิมถ้าต้องการให้ Claude Design รู้จักสีแบรนด์ ฟอนต์ และ component ของเรา ต้องอัปโหลดทุกอย่างด้วยมือหรืออธิบายในทุก prompt ใหม่
ตอนนี้ถ้าเก็บ design system ไว้ใน Claude Code ในรูป React component, CSS token หรือ bare component package — สามารถ sync ข้ามมาได้ด้วยสามขั้นตอน: (1) เปิด terminal แล้ว cd เข้าโฟลเดอร์ design system (2) รัน claude เพื่อเปิด Claude Code (3) พิมพ์ /design sync แล้วกด Enter
Claude จะอ่าน component และ token ทั้งหมด แล้วสร้างสำเนา design system ให้เลือกใช้ใน Claude Design โดยอัตโนมัติ หลังจากนั้นทุกโปรเจกต์ใหม่แค่เลือก design system นี้ ทุก element ที่ถูกสร้างจะยึดตามสี ฟอนต์ และ component ที่ sync มาโดยไม่ต้องบรีฟซ้ำอีกเลย
ถ้ารัน
/design syncแล้วได้ error ว่าคำสั่งไม่รู้จัก ให้รันclaude updateก่อนเพื่ออัปเดต CLI เป็นเวอร์ชันล่าสุด
แก้ไขบน Canvas โดยตรง ไม่ต้องเปลืองโควต้า
ฟีเจอร์นี้เล็กแต่แก้ปัญหาที่น่ารำคาญจริง ๆ ก่อนหน้านี้ถ้าอยากแก้ข้อความหรือ element บนหน้า ต้องพิมพ์อธิบายให้ Claude อีกรอบ ซึ่งกินโควต้าและเสียเวลา ใน Claude Design 2.0 มีสามวิธีแก้ไขที่ไม่ต้องผ่าน chat
แก้ตรงบน canvas — คลิก Edit แล้วคลิกที่ element ที่ต้องการ จะมี panel เปิดขึ้นทางซ้ายให้แก้ข้อความ ฟอนต์ และรูปแบบได้ทันที เหมาะสำหรับงานแก้ละเอียดที่รู้ว่าต้องการอะไรชัดเจน
ใช้ Comment — คลิก Comment แล้วปักหมุดไว้บนจุดที่ต้องการ เขียนคำอธิบายแล้วกด Send to Claude Claude จะแก้ตาม comment นั้นโดยตรงโดยไม่ต้องกลับไปพิมพ์ใน chat ด้านซ้าย ฟีเจอร์นี้ยังใช้แชร์ feedback ให้ทีมได้ด้วย
ใช้ Markup — วาดวงกลมหรือ annotation ล้อม element แล้วเขียนโน้ตแนบไว้ เหมาะสำหรับบอก feedback แบบ visual เช่น "ลบ section นี้" หรือ "ย้าย button ขึ้นด้านบน" Claude จะอ่าน markup และทำการแก้ไขให้อัตโนมัติ
ส่งออก แชร์ และเชื่อม Claude Code กลับไป
Claude Design ส่งออกงานได้หลายรูปแบบ ทั้ง PDF, PowerPoint (สำหรับ slides), project archive (.zip) และ standalone HTML นอกจากนี้ยังส่งตรงไปยัง platform ภายนอกได้จากปุ่มเดียว เช่น Lovable, Replit, Vercel, Wix, Adobe, Gamma และ Miro โดยไม่ต้องทำด้วยมือ
สิ่งที่น่าสนใจกว่าคือส่งกลับไปยัง Claude Code ได้ด้วย ทำให้ workflow ทำงานแบบ loop ได้จริง: สร้าง design ใน Claude Design → ส่งเป็น reference ให้ Claude Code build → sync design system กลับมาใน Claude Design ใหม่ได้อีกครั้ง เป็น ecosystem ที่ปิดในตัวเองโดยไม่ต้องออกไปใช้เครื่องมือภายนอก
MCP Connector ใน Claude Design
เช่นเดียวกับที่ Claude Chat และ Claude Code เพิ่ม MCP ได้ ตอนนี้ Claude Design เพิ่ม connector ได้เช่นกัน เข้าได้จาก Manage Connectors → Browse Directory แล้วเลือก connector ที่ต้องการ มี direct connector ให้หลาย tool แต่ที่น่าใช้เป็นพิเศษคือ Zapier
Zapier connector เปิดให้เชื่อมแอปกว่า 9,000 ตัว รวมถึง Canva, Figma, Banner Bear, Placid และอื่น ๆ ที่ไม่มีเป็น direct connector ของ Claude Design วิธีเพิ่มคือเข้า mcp.zapier.com → เพิ่ม MCP server ชนิด Claude → อนุมัติการเชื่อมต่อ → กลับมาที่ Claude Design แล้ว Zapier จะปรากฏใน connectors พร้อมใช้งาน
ข้อดีของการเชื่อมผ่าน Zapier แทน direct connector คือสามารถเลือก permission เฉพาะ ในแต่ละแอปได้ เช่น ให้ Canva เฉพาะสิทธิ์ "find design" หรือ "upload asset" โดยไม่ต้องให้สิทธิ์ทั้งบัญชี ซึ่งเป็นข้อได้เปรียบด้าน security และการจัดการ scope
บทสรุป
Claude Design 2.0 เปลี่ยนจากเครื่องมือ prototype แยกต่างหากมาเป็นส่วนหนึ่งของ workflow ที่เชื่อมกับ Claude Code ได้อย่างแท้จริง ทั้ง design system sync ที่ตัดการทำซ้ำออก, canvas editing ที่ประหยัดโควต้า และ MCP connector ที่ขยาย ecosystem — รวมกันแล้วทำให้ตัวเลือกนี้คุ้มพิจารณาจริง สำหรับทีมที่ทำงานอยู่บน Claude stack อยู่แล้ว
