ช่อง Codex Community ทำคลิป crash course สาธิตการใช้ Claude Design ฟีเจอร์ใหม่ในตระกูล Claude ที่ช่วยให้คนทั่วไปออกแบบงานได้ด้วยการพิมพ์บอกความต้องการ โดยไม่ต้องเป็นดีไซเนอร์และไม่ต้องเขียนโค้ด ฟีเจอร์นี้น่าสนใจสำหรับเจ้าของธุรกิจเล็ก ฟรีแลนซ์ และครีเอเตอร์ เพราะลดกำแพงจาก "ต้องจ้างดีไซเนอร์ หรือต้องใช้ Figma เป็นก่อน" เหลือแค่ "พิมพ์บอกว่าอยากได้อะไร"
บทความนี้สรุปเนื้อหาทั้งหมดจากคลิปดังกล่าวให้อ่านเป็นคู่มือทำตามได้ ตั้งแต่ Claude Design คืออะไร เวิร์กโฟลว์หลักจาก prompt เดียวไปเป็นเว็บจริง วิธีแก้งานทีละจุด การสร้าง design system (ชุดกฎของแบรนด์) เพื่อให้ทุกงานหน้าตาเป็นพวกเดียวกัน ไปจนถึงการดึงข้อมูลจริงจากแอปอื่นเข้ามาใช้ คลิปเดินเรื่องผ่านเคสร้านกาแฟตัวอย่างตลอดทาง จึงเห็นชัดว่าธุรกิจเล็กจริงๆ หยิบเครื่องมือนี้ไปทำอะไรได้บ้าง
Claude Design คืออะไร แล้วเข้าไปใช้ตรงไหน
Claude Design คือโหมดออกแบบใน Claude โดย Anthropic Labs ผู้ใช้คุยกับ AI เพื่อสร้างเว็บ แบรนด์ สไลด์ และ animation ได้โดยไม่ต้องเขียนโค้ด จากหน้าจอในคลิป สถานะปัจจุบันยังเป็น research preview หรือเวอร์ชันทดลองที่กำลังพัฒนา จึงควรมองว่าเป็นของใหม่ที่ยังอยู่ระหว่างปรับปรุง ไม่ใช่เครื่องมือสำเร็จรูปที่นิ่งแล้วทุกอย่าง
เข้าใช้งานได้จากแถบเมนูด้านข้าง (sidebar) ของ Claude โดยไปที่หัวข้อ products แล้วเลือกปุ่ม Design ระบบจะพาเข้าหน้า dashboard ฝั่งซ้ายของหน้านี้ใช้สร้าง prototype (ต้นแบบงานที่กดดูและเลื่อนดูได้จริง ไม่ใช่ภาพนิ่ง) ได้ทั้งงานออกแบบเว็บ สไลด์ และเทมเพลต ส่วนฝั่งขวารวม recent designs งานตัวอย่าง และ design systems ไว้ในที่เดียว
ข้อควรรู้: ฟีเจอร์ที่ยังเป็น research preview หมายความว่าหน้าตาและขั้นตอนบางอย่างอาจเปลี่ยนได้ในอนาคต บทความนี้อ้างอิงตามที่คลิปสาธิต ณ ช่วงปลายเดือนพฤษภาคม 2026
เวิร์กโฟลว์หลัก จาก prompt เดียวไปเป็นเว็บจริง
หัวใจของ Claude Design คือเวิร์กโฟลว์ 4 ขั้นที่เปลี่ยนคำสั่งสั้นๆ ให้กลายเป็นหน้าเว็บที่ใช้ได้จริง ขั้นแรกให้กดสร้าง new prototype แล้วเลือกระดับความละเอียดเป็น high-fidelity (ต้นแบบที่ละเอียดเหมือนของจริง ตรงข้ามกับร่างหยาบ) จากนั้นกด create ระบบจะพาเข้าหน้าโปรเจกต์ โดยมีช่องแชตอยู่ทางซ้ายและพื้นที่แสดงดีไซน์อยู่ทางขวา
ขั้นที่สองคือพิมพ์ prompt บอกสิ่งที่อยากได้ เคสในคลิปใช้ตัวอย่างง่ายๆ คือสั่งให้สร้างหน้า portfolio ขั้นที่สาม ระบบจะถามคำถามเกี่ยวกับทิศทางของงานไม่กี่ข้อ เช่น โทนหรือ aesthetic โดยรวมที่ต้องการ งานหลักของดีไซน์นี้คืออะไร มีอะไรที่ควรใส่หรือไม่ควรใส่ และต้องการ format แบบไหน เมื่อตอบครบแล้วก็กด continue เพื่อไปขั้นสุดท้าย
ขั้นที่สี่คือรอผลลัพธ์ แต่ละรอบใช้เวลาราว 5-10 นาที ไม่ใช่ได้ทันที จุดที่น่าสนใจคือ Claude Design ไม่ได้สร้างดีไซน์มาแบบเดียว แต่ทำมาหลาย variation (หลายเวอร์ชันของงานเดียวกันให้เลือก) การทำงานคล้ายไฟล์ Figma คือซูมออกแล้วเห็นทุกแบบเรียงอยู่บนพื้นที่เดียวกัน ด้านบนยังมี design files ซึ่งเป็นโค้ดทั้งหมดของงาน เปิดดูหรือคัดลอกออกไปใช้ในโปรเจกต์ของตัวเองได้
3 โหมดแก้งานที่มือใหม่ต้องรู้
หลังได้ดราฟต์แรกมาแล้ว งานออกแบบที่ดีแทบไม่เคยจบในรอบเดียว Claude Design จึงมีเครื่องมือแก้งานให้เลือก 3 โหมด แต่ละโหมดเหมาะกับงานคนละแบบ
โหมดแรกคือ Tweaks ใช้ปรับของเล็กๆ เช่น สลับ variation ที่กำลังแสดง เปลี่ยน accent color (สีเน้นหรือสีรองของดีไซน์) และปรับออปชั่นย่อยตามแต่ละโปรเจกต์ โหมดที่สองคือ Edit ใช้เปลี่ยนการตั้งค่าของทั้งหน้า เช่น พื้นหลัง ขนาดฟอนต์ และ base size ส่วนโหมดที่สามคือ Markup ทำงานต่างออกไป คือคลิกเลือก element บนหน้าจริงที่อยากแก้ แล้วพิมพ์อธิบายว่าต้องการให้เปลี่ยนอย่างไร ตัวอย่างในคลิปคือเลือกส่วน hero แล้วสั่งให้จัดกึ่งกลางและปรับข้อความให้ดีขึ้น เมื่อ AI ประมวลผลเสร็จก็จะแก้มาให้ จากนั้นทำซ้ำไปเรื่อยๆ จนพอใจ
ในคลิป ผู้สอนแนะนำว่าคนส่วนใหญ่ควรใช้ปุ่ม Markup เป็นหลัก เพราะเป็นวิธีที่ตรงไปตรงมาที่สุดในการชี้จุดที่อยากแก้แล้วบอกความต้องการเป็นภาษาคน คำแนะนำนี้มาจากประสบการณ์ของผู้สอน ผู้อ่านที่งานต่างออกไปอาจถนัดอีกโหมดมากกว่าก็ได้
Design system คือแบรนด์ของคุณ
จุดที่ผู้สอนชี้ว่าเป็นพลังตัวจริงของ Claude Design คือ design system หรือชุดกฎของแบรนด์ที่รวมสี ฟอนต์ typography spacing และ UI components ไว้ด้วยกัน เพื่อให้ทุกงานหน้าตาเป็นพวกเดียวกัน การสร้างเริ่มจากไปที่แท็บ design systems แล้วกดสร้างใหม่
ขั้นตอนสำคัญคือป้อนของจริงของแบรนด์เข้าไปให้ Claude เรียนรู้ โดยรับได้หลายแบบ ทั้งโค้ดบน GitHub ไฟล์ในเครื่อง ไฟล์ Figma หรือแค่ฟอนต์และไฟล์โลโก้ดิบๆ ก็พอ เมื่อกด generate และรอราว 5-10 นาที ระบบจะคืน style guide หรือคู่มือสไตล์ของแบรนด์ออกมาเป็นดราฟต์ ในเคสร้านกาแฟตัวอย่าง style guide ที่ได้มีครบทั้งฟอนต์ ชุดสี typography สำหรับหัวข้อและเนื้อความ ระยะ spacing และ UI components ที่น่าสนใจคือมันเดาฟอนต์ที่ถูกต้องจากโลโก้ที่ป้อนเข้าไปได้เอง
จากนั้นเป็นขั้นตรวจและอนุมัติ ถ้าพอใจก็เลือกทั้งหมดเป็น "looks good" เพื่อยืนยันว่าให้ใช้ชุดนี้ แต่ถ้ามีจุดเพี้ยน เช่น ในคลิปที่โลโก้เล็กเกินไปเมื่ออยู่ข้างตัวอักษร ก็สั่งให้ AI แก้ให้ได้ ระบบจะรันงานเบื้องหลังแล้วส่งผลใหม่กลับมา ขั้นสุดท้ายคือ publish design system นี้แล้วตั้งเป็นค่าเริ่มต้น (default) เพื่อให้ทุกงานหลังจากนี้หยิบแบรนด์เดียวกันไปใช้ซ้ำได้ ผลคือแบรนด์สม่ำเสมอทุกชิ้นงาน และนี่เป็นจุดที่ประหยัดเวลาและประหยัดงบจ้างดีไซเนอร์ได้มากที่สุดสำหรับธุรกิจเล็ก
ดึงข้อมูลจริงเข้ามาด้วย connector และ MCP
นอกจากออกแบบหน้าตาแล้ว Claude Design ยังดึงข้อมูลจริงจากแอปอื่นเข้ามาใช้ในงานได้ด้วย เคสในคลิปคือทำเว็บร้านกาแฟที่ต้องใช้ข้อมูลเมนูจริงจาก Notion (แอปจดโน้ตและฐานข้อมูล) วิธีเชื่อมต่อทำผ่าน MCP หรือ Model Context Protocol มาตรฐานเปิดที่ให้แอปและเครื่องมืออื่นต่อเข้ากับ AI ได้
ขั้นตอนเริ่มจากสร้าง prototype ใหม่และเลือก design system ที่เพิ่งทำไว้ แล้วไปที่เครื่องหมายบวกมุมล่างซ้ายเพื่อจัดการ connector ในคลิปเลือกใช้ Zapier (บริการเชื่อมต่อแอปอัตโนมัติ) เป็นตัวกลาง โดยเข้าไปที่ส่วน customize connectors แล้วเพิ่ม Zapier จากนั้นสร้าง MCP server ใหม่ เลือก Claude กด connect และยืนยันการเชื่อมต่อ เมื่อเชื่อมแล้ว ให้เปิดสิทธิ์ในฝั่ง Zapier เพื่อเข้าถึงหน้าและข้อมูลของ Notion ที่ต้องการ สุดท้ายพิมพ์ใน prompt ให้ดึงข้อมูลจากหน้า Notion ที่ระบุชื่อไว้
ผู้สอนแนะนำให้ใช้ Zapier เป็น connector หลัก เพราะมันคั่นกลางระหว่างแอปของเรากับ AI ทำให้คุมสิทธิ์การเข้าถึงข้อมูลได้ละเอียดขึ้นในเชิงความปลอดภัย ผลลัพธ์ที่ได้คือเว็บที่ดึงทั้ง aesthetic จาก design system ของแบรนด์ เมนูจริง และโลโก้จริงมาอยู่ในงานเดียว ผู้สอนประเมินว่าอยู่ในระดับที่นำไปเสนอลูกค้าได้เลย
ทำได้มากกว่าเว็บ wireframe สไลด์ และ animation
Claude Design ไม่ได้จำกัดอยู่แค่หน้าเว็บ ในคลิปสาธิตการใช้งานอีก 3 อย่างที่ต่อยอดจากของเดิมได้
อย่างแรกคือ wireframe หรือโครงหน้าเว็บแบบร่างที่ยังเป็นกล่องและเส้น เอาไว้วางตำแหน่งองค์ประกอบก่อนลงรายละเอียด วิธีทำคือเลือก start with sketch แล้ววาดมือคร่าวๆ ว่าอยากให้หน้าเว็บวางอย่างไร จากนั้นใส่ prompt ประกอบและตอบคำถามไม่กี่ข้อ ก็จะได้ wireframe หลายแบบมาเลือก ผู้สอนมองว่านี่เป็นจุดเริ่มที่ดีถ้ายังอยู่ในขั้นลองไอเดีย แต่ถ้ามี concept และ design system ที่ชัดเจนอยู่แล้ว ก็ข้ามขั้นนี้ไปได้เลย
อย่างที่สองคือ สไลด์ ในแบบเดียวกับ PowerPoint ที่สั่ง generate ออกมาได้ทันที ในคลิป หลังจากได้สไลด์ชุดแรก ผู้สอนสั่ง regenerate ให้ออกมาเหมือน infographic สำหรับลงโซเชียลอย่าง Instagram ผลคือแต่ละสไลด์มีภาพ ไอคอน และตัวอย่างมากขึ้น ผู้สอนประเมินว่าดูดีกว่าเวอร์ชันแรก use case ที่เห็นภาพคือต่อกับโปรเจกต์ใน Notion หรือทำ presentation ไว้เสนอลูกค้า
อย่างที่สามคือ animation หรืองานเคลื่อนไหวแบบอิงเวลา ทำโดยเลือก from template ไปที่ animations แล้วผูก design system เข้าไป เคสในคลิปคือทีวีในร้านกาแฟที่ปกติแสดงภาพนิ่งของเมนู แล้วเปลี่ยนเป็นวิดีโอเมนูเคลื่อนไหวที่เล่นวนซ้ำได้นานกว่า 1 นาที ผู้สอนสรุปตามจริงว่างานระดับนี้ยังไม่เทียบเท่ามืออาชีพที่ใช้ After Effects แต่ก็ถือเป็นก้าวที่ถูกทาง
ความคาดหวังตามจริง แล้วเริ่มยังไงวันนี้
ก่อนจะตื่นเต้นเกินไป มี 3 ข้อที่ควรตั้งความคาดหวังให้ตรงตามที่คลิปสาธิต ข้อแรก แต่ละ generation ใช้เวลาราว 5-10 นาที ไม่ใช่ได้ผลทันที จึงเหมาะกับการทำเป็นรอบมากกว่ารีบใช้หน้างาน ข้อสอง ฟีเจอร์ยังเป็น research preview ที่กำลังพัฒนา หน้าตาและความสามารถอาจเปลี่ยนได้ ข้อสาม งาน animation ยังไม่ถึงระดับมืออาชีพ แต่จุดแข็งที่ชัดเจนคือช่วยให้คนที่ไม่ใช่ดีไซเนอร์ผลิตงานที่ดูเป็นมืออาชีพออกมาได้
สำหรับคนที่อยากเริ่ม นี่คือ 3 อย่างที่ลองทำตามได้เลย
- สร้างเว็บหรือ portfolio ของตัวเองจาก prompt เดียว เริ่มที่ new prototype เลือก high-fidelity พิมพ์บอกว่าอยากได้อะไร แล้วตอบคำถาม direction รอราว 10 นาที จะได้ดราฟต์แรกหลายแบบให้เลือก จากนั้นใช้โหมด Markup คลิกแก้ทีละจุดจนพอใจ
- ทำ design system จากโลโก้และฟอนต์ที่มีอยู่ ป้อนโลโก้และฟอนต์ของร้านหรือแบรนด์เข้าไปเพื่อให้ได้ style guide กลับมา แล้ว publish ตั้งเป็น default งานถัดๆ ไปจะหน้าตาเป็นแบรนด์เดียวกันหมด นี่คือจุดที่ประหยัดเวลาที่สุดสำหรับธุรกิจเล็ก
- เปลี่ยนสไลด์เป็น infographic ลงโซเชียล หรือทำป้ายร้านเคลื่อนไหว สั่งทำ slide deck แล้ว regenerate แบบ infographic หรือทำ animation สั้นๆ จาก design system เพื่อขึ้นจอในร้านหรือใช้บนโซเชียล
ทิป: เริ่มจากข้อที่สองก่อนถ้าเป็นเจ้าของธุรกิจเล็ก เพราะ design system ที่ทำครั้งเดียวจะกลายเป็นฐานให้ทุกงานหลังจากนั้นหยิบไปใช้ซ้ำได้ ทั้งเว็บ สไลด์ และป้ายเคลื่อนไหว
โดยรวม Claude Design คือก้าวที่ดึงงานออกแบบซึ่งเคยต้องอาศัยทักษะเฉพาะทางหรือการจ้างคนนอก มาอยู่ในมือของเจ้าของธุรกิจ ฟรีแลนซ์ และครีเอเตอร์ที่พิมพ์บอกความต้องการเป็น ถึงจะยังเป็นเวอร์ชันทดลองและต้องรอผลเป็นรอบ แต่สำหรับคนที่อยากได้งานหน้าตามืออาชีพโดยไม่ต้องเริ่มจากศูนย์ นี่เป็นเครื่องมือที่ควรลองทำความรู้จักไว้
ที่มา: Codex Community: Claude Design Crash Course for Beginners (plus a few cool ticks) (YouTube, 2026-05-29)
