ช่อง Codex Community ปล่อยคลิปสอน Claude Design ฟีเจอร์ใหม่จาก Anthropic Labs ที่เปิดให้ทุกคนออกแบบเว็บ ทำแบรนด์ และทำสไลด์ได้ผ่านการพิมพ์สั่งด้วยภาษาคน โดยไม่ต้องมีพื้นฐานดีไซน์และไม่ต้องแตะโค้ดแม้แต่บรรทัดเดียว ฟีเจอร์นี้ปลดล็อกกำแพงใหญ่สำหรับคนทำธุรกิจเล็ก ฟรีแลนซ์ และครีเอเตอร์ จากเดิมที่ต้องจ้างดีไซเนอร์หลักหมื่นหรือเสียเวลานั่งเรียน Figma หลายเดือน ให้เหลือแค่การคุยกับ AI เพื่อปั้นงานที่ต้องการ

คู่มือฉบับนี้สรุปเนื้อหาเชิงปฏิบัติการจากคลิปดังกล่าว โดยไล่เรียงผ่านเคสจริงของร้านกาแฟ ตั้งแต่วิธีปั้นหน้าเว็บจาก prompt เดียว การเลือกใช้ 3 โหมดแก้งานให้ตรงจุด การสร้าง design system เพื่อคุมโทนแบรนด์ให้สม่ำเสมอทุกชิ้น ไปจนถึงการต่อท่อดึงข้อมูลจริงจาก Notion ผ่าน MCP

Claude Design คืออะไร และเริ่มเข้าใช้งานตรงไหน

Claude Design คือโหมดออกแบบบน Claude ของ Anthropic Labs ที่เน้นการคุยโต้ตอบกับ AI เพื่อสร้างหน้าเว็บ งานนำเสนอ สื่อเคลื่อนไหว หรือคู่มือแบรนด์ สถานะปัจจุบันยังเป็น research preview (เวอร์ชันทดลองใช้งาน) จึงเป็นช่วงเวลาของการเรียนรู้ศักยภาพและข้อจำกัด มากกว่าการนำไปใช้แทนทีมดีไซน์ระดับโปรดักชันแบบเบ็ดเสร็จ

การเข้าใช้งาน ให้สังเกตแถบเมนูด้านข้าง (sidebar) ในหน้า Claude ไปที่หมวด products แล้วกดเลือก Design ระบบจะเปิดหน้า dashboard หลักขึ้นมา พื้นที่ฝั่งซ้ายใช้สร้าง prototype ใหม่ (ต้นแบบจำลองที่กดคลิกและเลื่อนดู responsive ได้จริง ไม่ใช่แค่ภาพนิ่ง) ส่วนฝั่งขวาจะรวม recent designs โปรเจกต์ตัวอย่าง และ design systems ที่เราบันทึกไว้

4 ขั้นตอนหลัก จาก Prompt สั้นสู่หน้าเว็บใช้งานจริง

เวิร์กโฟลว์ของ Claude Design แบ่งออกเป็น 4 ขั้นตอนที่เปลี่ยนไอเดียให้กลายเป็นหน้าเว็บที่จับต้องได้

1. สร้าง Prototype ใหม่: กดปุ่ม new prototype แล้วเลือกระดับความละเอียดเป็น high-fidelity เพื่อให้ได้ต้นแบบที่สมบูรณ์ใกล้เคียงงานจริง จากนั้นกด create เข้าสู่หน้าโปรเจกต์ ซึ่งแบ่งเป็นช่องแชตฝั่งซ้ายและแคนวาสแสดงผลงานฝั่งขวา
2. ป้อน Prompt เริ่มต้น: พิมพ์บอกความต้องการลงในช่องแชต เช่น สั่งให้ออกแบบหน้า Landing Page หรือ Portfolio ของร้านกาแฟ
3. กำหนดทิศทางงาน (Direction Questions): ระบบจะถามคำถามสั้นๆ เพื่อล็อกขอบเขตงาน เช่น โทนภาพลักษณ์ที่ต้องการ องค์ประกอบหลักที่ต้องมี สิ่งที่ไม่ควรใส่ และรูปแบบ layout เมื่อตอบครบแล้วให้กด continue
4. รอรับผลงานและ Variations: แต่ละรอบ AI จะใช้เวลาประมวลผลประมาณ 5 ถึง 10 นาที โดย Claude Design จะสร้างออกมาให้เลือกหลาย variation พร้อมกันบนแคนวาสเดียว คล้ายการเปิดดูบอร์ดใน Figma นอกจากนี้ยังมีแท็บ design files ให้เปิดดูและหยิบโค้ดไปพัฒนาต่อได้ทันที

3 โหมดแก้งานที่ต้องรู้

งานออกแบบแทบไม่เคยจบในรอบแรก Claude Design จึงเตรียมโหมดปรับแต่งมาให้ 3 แบบตามลักษณะของงาน

• Tweaks: เหมาะสำหรับปรับแต่งจุดย่อยๆ เช่น สลับดู variation อื่น เปลี่ยน accent color (สีเน้นของแบรนด์) หรือปรับตัวเลือกย่อยในคอมโพเนนต์
• Edit: เหมาะสำหรับปรับการตั้งค่าภาพรวมทั้งหน้า เช่น เปลี่ยนสีพื้นหลัง ปรับ base font size หรือโครงสร้างระยะห่างหลัก
• Markup: โหมดที่ทรงพลังและใช้งานบ่อยที่สุด เพียงคลิกเลือกกล่องหรือ element บนหน้าจอ แล้วพิมพ์บอกสิ่งที่อยากแก้เป็นภาษาคน เช่น คลิกที่ส่วน hero แล้วพิมพ์สั่งให้จัดกึ่งกลาง พร้อมเกลาข้อความพาดหัวใหม่ AI จะประมวลผลและอัปเดตเฉพาะจุดนั้นให้ทันที

ในคลิป ผู้สอนเน้นย้ำว่าโหมด Markup คืออาวุธหลักที่ช่วยให้คุยกับดีไซน์ได้ตรงจุดที่สุด เพราะชี้ตำแหน่งที่ต้องการแก้ได้ชัดเจนโดยไม่ต้องเสียเวลาอธิบายตำแหน่งหน้าจอ

Design System คุมแบรนด์ให้อยู่หมัด

หัวใจสำคัญที่ทำให้ผลงานดูเป็นมืออาชีพคือ design system หรือชุดกติกาของแบรนด์ที่กำหนดชุดสี ไทโปโมกราฟี ระยะห่าง (spacing) และ UI components เพื่อให้ทุกชิ้นงานพูดเป็นภาษาเดียวกัน

การสร้าง design system ทำได้ง่ายๆ โดยไปที่แท็บ design systems แล้วกดสร้างใหม่ จากนั้นอัปโหลดสินทรัพย์ของแบรนด์ที่มีอยู่ เช่น โค้ดบน GitHub ไฟล์ Figma หรือแค่ไฟล์โลโก้และฟอนต์ประจำร้าน ระบบจะใช้เวลาวิเคราะห์ประมาณ 5 ถึง 10 นาที แล้วสร้าง style guide ฉบับสมบูรณ์ออกมาให้โดยอัตโนมัติ รวมถึงความสามารถในการตรวจจับและจับคู่ฟอนต์จากภาพโลโก้ได้ด้วย

เมื่อได้ style guide มาแล้ว ให้ตรวจสอบความถูกต้อง หากมีจุดที่ไม่ลงตัว เช่น สัดส่วนโลโก้ใหญ่เกินไป ให้สั่ง AI ปรับแก้จนพอใจ จากนั้นกด publish และตั้งเป็นค่าเริ่มต้น (default) เพื่อให้โปรเจกต์ใหม่ทุกชิ้นดึงอัตลักษณ์แบรนด์ชุดนี้ไปใช้โดยอัตโนมัติ ช่วยลดเวลาและค่าใช้จ่ายในการจ้างทำคู่มือแบรนด์ได้อย่างมาก

ดึงข้อมูลจริงเข้าสู่ดีไซน์ด้วย MCP และ Zapier

นอกจากการปั้นหน้าตาเว็บ Claude Design ยังรองรับการดึงข้อมูลจริงจากระบบอื่นเข้ามาแสดงผลแบบอัตโนมัติ ผ่านมาตรฐาน MCP (Model Context Protocol)

ตัวอย่างในคลิปคือการสร้างเว็บร้านกาแฟที่ดึงรายการเมนูและราคาจริงจากฐานข้อมูลใน Notion โดยมีขั้นตอนดังนี้

1. สร้าง prototype ใหม่และผูก design system ประจำแบรนด์
2. กดเครื่องหมายบวกมุมล่างซ้ายเพื่อตั้งค่าตัวเชื่อมต่อ (connector) โดยใช้ Zapier ทำหน้าที่เป็นตัวกลางความปลอดภัย
3. สร้าง MCP server เชื่อมต่อระหว่าง Claude และ Zapier พร้อมกำหนดสิทธิ์การเข้าถึงเฉพาะหน้า Notion ที่เก็บข้อมูลเมนู
4. พิมพ์ prompt สั่งให้ Claude ดึงข้อมูลจากฐานข้อมูล Notion ที่ระบุ แล้วจัดวางลงในเลย์เอาต์ตาม design system

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

ต่อยอดนอกเหนือจากหน้าเว็บ: Wireframe สไลด์ และภาพเคลื่อนไหว

Claude Design ไม่ได้จำกัดอยู่แค่การออกแบบหน้าเว็บ แต่ยังครอบคลุมงานสร้างสรรค์อีกหลายรูปแบบ

• Wireframe: เลือกโหมด start with sketch เพื่ออัปโหลดภาพสเก็ตช์มือคร่าวๆ ระบบจะแปลงโครงร่างลายเส้นให้กลายเป็น wireframe ดิจิทัลหลายรูปแบบ เหมาะสำหรับช่วงระดมไอเดียระยะเริ่มต้น
• Slide Deck: สั่งสร้างสไลด์นำเสนอพร้อมข้อมูลเชิงลึก และสามารถสั่ง regenerate ให้แปลงหน้าสไลด์เป็นรูปแบบ infographic สำหรับโพสต์บนโซเชียลมีเดีย เช่น Instagram ได้ทันที
• Animation: เลือกสร้างชิ้นงานเคลื่อนไหวจากเทมเพลต แล้วนำ design system มาครอบ เช่น การทำป้ายเมนูบอร์ดเคลื่อนไหวสำหรับเปิดวนบนจอทีวีในร้านกาแฟ แม้คุณภาพไฟล์งานจะไม่เทียบเท่าการเรนเดอร์ระดับสูงจากโปรแกรมตัดต่อเฉพาะทาง แต่ก็เพียงพอสำหรับการใช้งานทั่วไปหน้าร้าน

สิ่งที่ต้องรู้ก่อนเริ่มใช้งานจริง

เพื่อให้ใช้งานเครื่องมือได้อย่างมีประสิทธิภาพ ควรทำความเข้าใจบริบทตามจริง 3 ข้อ

1. ระยะเวลาประมวลผล: การ generate แต่ละรอบใช้เวลาประมาณ 5 ถึง 10 นาที จึงเหมาะกับการวางแผนงานล่วงหน้าเป็นรอบๆ มากกว่างานที่ต้องการผลลัพธ์แบบเรียลไทม์
2. สถานะการพัฒนา: ตัวระบบยังอยู่ในช่วงวิจัยและทดลอง ฟังก์ชันและอินเทอร์เฟซอาจได้รับการปรับปรุงอย่างต่อเนื่อง
3. ระดับของงานเคลื่อนไหว: โหมด animation เหมาะกับงานเคลื่อนไหวง่ายๆ สำหรับโปรโมตทั่วไป ยังไม่สามารถทดแทนซอฟต์แวร์ระดับมืออาชีพอย่าง After Effects ได้

3 สเต็ปแนะนำสำหรับผู้เริ่มต้น:

• ทดลองสร้าง Portfolio หรือ Landing Page: เริ่มจาก new prototype เลือกโหมด high-fidelity พิมพ์ความต้องการ แล้วใช้โหมด Markup ค่อยๆ ชี้ปรับรายละเอียดทีละจุด
• สร้าง Design System ประจำธุรกิจ: อัปโหลดโลโก้และโทนสีหลักเพื่อสร้าง style guide มาตรฐาน แล้วตั้งเป็น default เพื่อใช้เป็นฐานสำหรับทุกงานดีไซน์ในอนาคต
• แปลงสไลด์เป็น Infographic และสื่อโปรโมต: ทดลองสั่งสร้างสไลด์แล้วต่อยอดเป็นภาพกราฟิกหรือภาพเคลื่อนไหวสั้นเพื่อใช้บนช่องทางออนไลน์

Claude Design ช่วยลดช่องว่างระหว่างไอเดียกับงานดีไซน์คุณภาพ ทำให้การปั้นหน้าตาแบรนด์และต้นแบบเว็บระดับพรีเมียมไม่ได้จำกัดอยู่แค่คนที่มีทักษะกราฟิกเฉพาะทางอีกต่อไป