งานออกแบบเคยเป็นกำแพงสำหรับคนที่ไม่ได้เรียนมาทางนี้ เจ้าของร้านที่อยากได้สไลด์พิตช์ลูกค้าสวยๆ มักต้องจ้างคนอื่น หรือนั่งสู้กับโปรแกรมเป็นวันๆ ถ้าอยากได้แลนดิ้งเพจเก็บอีเมลลูกค้าก็ต้องรอ dev ส่วนคนที่มีไอเดียทำแอปก็มักไม่รู้จะทำให้คนอื่นเห็นภาพในหัวได้อย่างไรก่อนลงเงินจ้างจริง Claude Design คือเครื่องมือใหม่ของ Anthropic ที่เข้ามาอุดช่องว่างนี้ ผู้ใช้แค่พิมพ์บอกว่าอยากได้อะไร ระบบก็สร้างงานออกแบบที่ใช้ได้จริงให้ ตั้งแต่สไลด์เด็ค แลนดิ้งเพจ ไปจนถึงโปรโตไทป์แอปมือถือ คลิปสอน "Claude Design Tutorial for Beginners" ของ Kate Hayes ครีเอเตอร์สาย AI อธิบายการใช้งาน 4 ขั้นตอนตั้งแต่ต้นจนจบ พร้อมตัวอย่างงานจริง 3 ชิ้นที่คนทำงานทั่วไปน่าจะได้ใช้ บทความนี้สรุปเนื้อหาจากคลิปดังกล่าวเป็นภาษาไทยให้อ่านง่าย
Claude Design คืออะไร
Claude Design คือพื้นที่ทำงานออกแบบด้วย AI (visual creation workspace) ของ Anthropic หลักการคือ ผู้ใช้บรรยายว่าอยากได้งานหน้าตาแบบไหน แล้วระบบจะสร้างชิ้นงานภาพที่ดูเรียบร้อยพร้อมใช้ให้จริง ไม่ใช่แค่ตอบเป็นข้อความเหมือน AI แชตทั่วไป งานที่ทำได้ครอบคลุมแลนดิ้งเพจ สื่อการตลาด งานโพสต์โซเชียล สไลด์พรีเซนเทชัน ไปจนถึงโปรโตไทป์สำหรับแอปมือถือ
ในคลิป Kate Hayes เน้นย้ำตั้งแต่ต้นว่านี่คือการก้าวข้ามจากการ "generate ข้อความ" ไปสู่การสร้าง "งานออกแบบจริง" จุดนี้ทำให้ Claude Design ต่างจากการสั่งงาน AI แบบเดิมที่ได้ผลลัพธ์เป็นตัวหนังสือ
การเข้าใช้งานทำได้ 2 ทาง คือเข้าที่ลิงก์ claude.ai/design โดยตรง หรือเข้าผ่านแผงด้านซ้ายของหน้า Claude บนเว็บเบราว์เซอร์ จุดที่ต้องรู้ก่อนคือ ณ ตอนที่คลิปถ่ายทำ Claude Design ยังไม่เปิดให้ใช้บนแอป Claude เวอร์ชัน desktop หรือมือถือ จึงต้องเข้าผ่านเว็บเท่านั้น
ขั้นที่ 1: ทำความรู้จักหน้าจอ
ขั้นแรกคือการดูให้ออกว่าปุ่มอยู่ตรงไหน เมื่อเปิด Claude Design ขึ้นมา แถบด้านบนจะมีหลายแท็บให้เลือก ได้แก่ แท็บ recent ที่แสดงงานที่เพิ่งทำไป แท็บ designs ที่รวมโปรเจกต์ทั้งหมด แท็บ examples ที่เลื่อนดูตัวอย่าง prompt สำหรับสร้างงานแต่ละแบบได้ และแท็บ design systems ซึ่งเป็นหัวใจที่จะพูดถึงในขั้นที่ 3
ส่วนแผงทางซ้ายมือคือจุดเริ่มสร้างงาน เลือกได้ว่าจะสร้างโปรโตไทป์ (เช่น แอปมือถือ) สร้างสไลด์เด็คพรีเซนเทชัน เลือก from template ถ้าเคยเซฟงานเดิมไว้เป็นเทมเพลตของตัวเอง หรือเลือก other ถ้างานที่อยากทำไม่เข้าหมวดข้างต้น
ขั้นที่ 2: สร้างและแก้งานออกแบบ
ขั้นนี้คือเนื้อหาหลักที่ Kate Hayes ยกตัวอย่างงานจริง 3 ชิ้นจากมุมของเจ้าของธุรกิจรับจัดสวน ซึ่งเป็นเคสที่เทียบเคียงกับงานของเจ้าของกิจการ SME คนทำคอนเทนต์ และพนักงานออฟฟิศไทยได้โดยตรง
เริ่มงานทุกชิ้นด้วยวิธีเดียวกัน คือเลือกชนิดงานจากแผงซ้าย ตั้งชื่อโปรเจกต์ เลือก design system ถ้ามี (ค่อยว่ากันในขั้นถัดไป) แล้วพิมพ์ prompt บอกว่าอยากได้อะไร จุดที่ Kate Hayes เน้นคือ ยิ่งใส่รายละเอียดมากเท่าไรยิ่งดี เพราะจะได้ไม่ต้องเสียเวลาแก้ไปแก้มาทีหลัง นอกจากพิมพ์เองแล้ว ยังแนบไฟล์เป็นบริบทเพิ่มได้ด้วย ทั้งเอกสาร PDF ภาพสกรีนช็อต ไฟล์ Figma หรือ codebase ที่มีอยู่
เคสที่ 1 สไลด์เด็คพิตช์ลูกค้า ตัวอย่างคือสร้างสไลด์ 6 หน้าเพื่อพิตช์ธุรกิจรับจัดสวนให้ลูกค้าหรือคณะกรรมการหมู่บ้าน ใน prompt ระบุหัวข้อแต่ละสไลด์ไว้ชัด ทั้งกลุ่มลูกค้าที่ให้บริการ บริการที่มี เหตุผลที่ลูกค้าเลือกเรา ผลงานก่อน-หลัง แพ็กเกจราคา และหน้าปิดที่ชวนจองคิวปรึกษาฟรี ผลที่ได้คือสไลด์หน้าตามืออาชีพครบตามที่สั่ง
เคสที่ 2 โปรโตไทป์แอปมือถือ เจ้าของธุรกิจที่อยากทำแอปให้ลูกค้าใช้ขอใบเสนอราคาหรือดูตารางนัด สามารถสร้างโปรโตไทป์ขึ้นมาดูหน้าตาก่อนลงทุนจ้างจริงได้ โดยเลือกได้ว่าจะเอาแบบ wireframe (โครงร่างคร่าวๆ) หรือ high-fidelity (มีสีและฟอนต์เหมือนแอปจริง) จุดที่น่าสนใจคือโปรโตไทป์ที่ได้กดเล่นได้ ทั้งเลื่อนดูหน้าต่างๆ กดปุ่ม และติ๊กเช็กบ็อกซ์ อย่างไรก็ตาม Kate Hayes ย้ำชัดว่านี่เป็นเพียงแบบจำลองหน้าตา ไม่ใช่แอปที่ทำงานได้จริง เหมาะสำหรับเอาไปให้ทีมพัฒนาดูเป็นภาพตั้งต้น หรือส่งต่อให้ Claude Code สร้างเป็นแอปจริงต่อ เรื่องนี้จะกล่าวถึงในขั้นที่ 4
เคสที่ 3 แลนดิ้งเพจเก็บอีเมล สำหรับคนที่อยากสร้างฐานลูกค้าด้วยการแจกของฟรีแลกอีเมล ตัวอย่างคือแลนดิ้งเพจแจกคู่มือดูแลสนามหญ้าหน้าใบไม้ผลิ มีช่องให้กรอกชื่อ-อีเมล และปุ่มดาวน์โหลด แค่พิมพ์บอก ระบบก็สร้างหน้าเพจออกมาให้ และยังสามารถ export เป็นโค้ด HTML ไปขึ้นเว็บจริงได้ (รายละเอียดอยู่ในขั้นที่ 4)
แก้งานได้ 4 ทาง
เมื่องานออกมาแล้ว ถ้าอยากปรับแก้ Claude Design มีวิธีให้เลือก 4 ทาง ครอบคลุมตั้งแต่สั่งแก้ด้วยคำพูด ไปจนถึงลงไปพิมพ์เองในชิ้นงาน
- แก้ผ่านแชตด้านข้าง พิมพ์บอกการเปลี่ยนแปลงที่ต้องการเหมือนคุยกับ Claude เช่น "ทำสไลด์หน้าแรกให้ตัวหนาและสะดุดตากว่านี้"
- ปุ่ม Markup กดเลือกเฉพาะส่วนที่อยากแก้ แล้วบอก Claude ว่าต้องการอะไรกับส่วนนั้น
- ปุ่ม Edit กดเข้าไปในบล็อกแล้วพิมพ์แก้ข้อความเองได้ตรงๆ
- ปุ่ม Show Tweaks เป็นการปรับแบบสำเร็จรูปที่ไม่กระทบโครงสร้างงานมาก เช่น สลับชุดสี (color story) เปลี่ยนฟอนต์หัวเรื่อง (เช่น Playfair หรือ DM Serif) หรือเปลี่ยนน้ำเสียงของงานจากคลาสสิกเป็นโมเดิร์นหรือเอดิทอเรียล
นอกจากนี้ยังมีปุ่ม Comments สำหรับทีมที่ทำงานร่วมกัน สมาชิกในทีมเข้ามาคอมเมนต์บนงานให้คนอื่นเห็นได้ เมื่องานเสร็จ ยังมีตัวเลือก Present สำหรับนำเสนอ ทั้งแบบในแท็บเบราว์เซอร์และแบบเต็มจอ
ขั้นที่ 3: Design system ตั้งค่าแบรนด์ไกด์ครั้งเดียว
นี่คือขั้นที่ Kate Hayes ชี้ว่าเป็นฟีเจอร์ทรงพลังที่สุดของ Claude Design และเป็นจุดที่ผู้ใช้จำนวนมากมองข้าม ไม่ได้ใช้ประโยชน์เท่าที่ควร
Design system คือ "สมุดกฎของแบรนด์" ที่ใส่เข้าไปใน Claude Design โดยตรง ระบบจึงรู้ว่าชิ้นงานที่สร้างออกมาต้องตรงกับแบรนด์ ทั้งชุดสี ฟอนต์ และสไตล์การเขียน เมื่อตั้งค่าไว้ครั้งเดียว ระบบจะนำไปใช้กับทุกงานต่อจากนั้นอัตโนมัติ Kate Hayes เปรียบว่าคล้ายกับ brand kit ของ Canva แต่ลงลึกกว่า เพราะใส่ได้ทั้งชุดสี typography โลโก้ สไตล์ของส่วนประกอบอย่างปุ่มและการ์ด ไปจนถึงแนวทางน้ำเสียงและโทนของแบรนด์
ในมุมของ Kate Hayes ความทรงพลังอยู่ตรงที่งานชิ้นที่ 1 ชิ้นที่ 2 และชิ้นที่ 50 จะออกมาเหมือนมาจากดีไซเนอร์คนเดียวกัน นั่นคือได้ความสม่ำเสมอของแบรนด์ทุกชิ้นงานโดยแทบไม่ต้องลงแรง แถมยังประหยัดเวลามหาศาล เพราะไม่ต้องมาพิมพ์อธิบายสี ฟอนต์ การจัดวางใหม่ทุกครั้งที่สั่งงาน
ทิป: สำหรับเจ้าของธุรกิจหรือคนทำคอนเทนต์ที่ต้องผลิตงานออกแบบสม่ำเสมอ จุดคุ้มที่สุดของ Claude Design อยู่ที่ design system เพราะตั้งค่าแบรนด์ครั้งเดียวแล้วทุกชิ้นงานจะหน้าตาไปในทางเดียวกันเอง
ตั้งค่าได้โดยเข้าแท็บ design systems ด้านบน กด create แล้วใส่ชื่อบริษัท จากนั้นดึงข้อมูลแบรนด์เข้ามาได้หลายทาง เช่น ใส่ลิงก์เว็บไซต์ที่มีอยู่เพื่อให้ระบบดึงสีและฟอนต์ออกมา ลิงก์โค้ดจาก GitHub ลากโฟลเดอร์โค้ดจากเครื่องเข้ามา อัปโหลดไฟล์ Figma หรือลากไฟล์ฟอนต์ โลโก้ และแอสเซ็ตต่างๆ เข้ามา รวมถึงพิมพ์โน้ตเพิ่ม เช่น ขอชุดสีโทนเอิร์ธ หรือขอปุ่มมุมมน
เมื่อกด generate ระบบจะดึงข้อมูลจากเว็บและไฟล์ที่อัปโหลด แล้วแสดงส่วน needs review ให้ตรวจทีละองค์ประกอบ ทั้งโลโก้ น้ำเสียงแบรนด์ ชุดสีหลัก สีกลาง และสีเสริม ผู้ใช้กดได้ว่า "looks good" หรือ "needs work" เพื่อปรับจนพอใจ จากนั้นสลับจากสถานะ draft เป็น published และตั้งเป็นค่าเริ่มต้น (make default) ได้ เมื่อสร้างงานใหม่ ระบบจึงใช้ design system นั้นโดยอัตโนมัติ ไม่ต้องป้อนข้อมูลแบรนด์ซ้ำในทุก prompt
ขั้นที่ 4: Export งานออกไปใช้จริง
เมื่องานเสร็จและพร้อมส่งออก กดปุ่ม Share มุมขวาบนจะเจอตัวเลือกหลายแบบ ซึ่งครอบคลุมตั้งแต่การแชร์ให้ทีม การดาวน์โหลดไฟล์ ไปจนถึงการส่งต่อให้เครื่องมืออื่นทำงานต่อ
- แชร์ให้ทีม กำหนดสิทธิ์เพื่อนร่วมงานได้ว่าให้ดูอย่างเดียว คอมเมนต์ แก้ไข หรือตั้งเป็นส่วนตัว
- ทำซ้ำ duplicate โปรเจกต์ หรือ duplicate เป็นเทมเพลตไว้ใช้ครั้งต่อไป
- ดาวน์โหลดไฟล์ เป็น
.zipหรือ export เป็น PDF - export เป็น PPTX สำหรับงานสไลด์ เปิดต่อใน PowerPoint เพื่อแก้เพิ่มได้
- ส่งไป Canva สำหรับคนที่ใช้ Canva อยู่แล้ว ไปแต่งหรือใส่แบรนด์ต่อให้เนี้ยบได้
- export เป็น HTML แบบ standalone เหมาะกับแลนดิ้งเพจ เอาโค้ดไปขึ้นกับเว็บโฮสต์ของตัวเองได้เลย
- ส่งต่อให้ Claude Code สำหรับโปรโตไทป์แอป
จุดที่ Kate Hayes ย้ำในขั้นนี้คือความต่างระหว่าง Claude Design กับ Claude Code โดย Claude Design ทำหน้าตาของงานออกแบบ ส่วน Claude Code รับแบบนั้นไปสร้างให้เป็นแอปที่ทำงานได้จริง คนที่มีไอเดียแอปจึงทำงานได้ครบเส้นทาง ตั้งแต่ออกแบบหน้าตาใน Claude Design แล้วส่งต่อให้ Claude Code ทำให้ใช้งานได้จริง
ข้อควรรู้ก่อนใช้
ก่อนจะตื่นเต้นไปกับความสามารถข้างต้น มีสองเรื่องที่ Kate Hayes ระบุไว้ตรงๆ ในคลิปและควรรู้ก่อนตัดสินใจ
เรื่องแรก Claude Design เปิดให้ใช้เฉพาะผู้ที่อยู่ในแพ็กเกจเสียเงินเท่านั้น คือ Claude Pro ขึ้นไป ผู้ที่อยากใช้งานจึงต้องสมัครแพ็กเกจดังกล่าวก่อน
เรื่องที่สอง ณ ตอนที่คลิปถ่ายทำ Claude Design ยังอยู่ในช่วงที่ Anthropic เรียกว่า research preview หมายความว่ายังอยู่ระหว่างการทดสอบและพัฒนา จึงอาจเจอบั๊กหรืออาการแปลกๆ ระหว่างใช้งานได้ Kate Hayes มองว่านี่เป็นเรื่องปกติของเครื่องมือในช่วงนี้ และเป็นเหตุผลที่ระบบเตรียมหลายช่องทางไว้ให้แก้และปรับงาน
โดยรวมแล้ว Claude Design ช่วยให้คนที่ออกแบบสไลด์ แลนดิ้งเพจ หรือโปรโตไทป์แอปไม่เป็น ทำงานออกแบบระดับมืออาชีพได้แค่พิมพ์บอก จุดคุ้มที่สุดสำหรับคนที่ต้องผลิตงานต่อเนื่องคือ design system ส่วนข้อจำกัดเรื่องแพ็กเกจเสียเงินและสถานะ research preview เป็นสิ่งที่ควรชั่งน้ำหนักก่อนเริ่มใช้
ที่มา: Kate Hayes: Claude Design Tutorial for Beginners | Master 99% in under 20 Minutes (YouTube, 2 มิถุนายน 2026)
