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

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

Anthropic Labs เปิด Claude Design ให้สั่งงานภาพด้วยการคุยกับ Claude ตั้งแต่งานออกแบบ ต้นแบบหน้าจอ สไลด์ ไปจนถึงเอกสารหน้าเดียว ส่วนงานภาพเคลื่อนไหวไม่ได้อยู่ในประกาศเปิดตัวเลย ความสามารถนี้อยู่ในเทมเพลตชื่อ Animation แล้วช่อง Futurepedia ก็หยิบมาใช้ในคลิปจนกลายเป็นวิธีทำงานประจำ

ทางเข้า Claude Design กับเงื่อนไขก่อนกดใช้

เข้าได้สองทาง คือพิมพ์ claude.ai/design ตรงๆ หรือกดจากแถบด้านข้างใน Claude แต่ก่อนถึงตรงนั้นต้องสมัครแพลนแบบเสียเงินก่อน ประกาศของ Anthropic ระบุแพลนที่ใช้ได้ไว้สี่แบบ ทั้ง Pro, Max, Team, Enterprise แล้วทยอยปล่อยให้ใช้ทีละกลุ่ม ส่วนคลิปที่ทดลองใช้จริงพูดถึงเฉพาะ Pro กับ Max

ป้ายที่ติดอยู่บนตัวผลิตภัณฑ์ตอนนี้คือ research preview หรือรุ่นทดลองที่ปรับเปลี่ยนได้ตลอด เบื้องหลังใช้โมเดล Claude Opus 4.7 ซึ่ง Anthropic เรียกว่าโมเดลด้านการมองเห็นที่เก่งที่สุดของตัวเอง การใช้งานจะกินโควตาของแพลนที่มีอยู่แล้ว และถ้าอยากใช้ต่อหลังโควตาหมดก็เปิดใช้งานส่วนเกินได้

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

ข้างในไม่ใช่ไฟล์วิดีโอสำเร็จรูป แต่เป็นโค้ดที่รันให้ดูสด

เครื่องมือแบบ text-to-video รับคำสั่งแล้วส่งไฟล์วิดีโอสำเร็จรูปกลับมาเพียงไฟล์เดียว จะแก้อะไรก็ต้องสั่งสร้างใหม่ ตรงนี้ต่างจาก Claude Design ที่ส่งงานอีกแบบกลับมา

เวลาสั่งงานแอนิเมชันใน Claude Design Claude จะเขียนโค้ดขึ้นมาสามชั้น คือ HTML ที่วางโครงว่ามีอะไรอยู่ตรงไหน CSS ที่กำหนดหน้าตาและสี และ JavaScript ที่สั่งว่าอะไรขยับตอนไหน ระหว่างที่เขียน ระบบก็แสดงผลจากโค้ดนั้นให้ดูทันที

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

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

สามทางเริ่มงานแอนิเมชัน เลือกจากของที่มีอยู่ในมือ

เริ่มจากพิมพ์บอกอย่างเดียว เลือกทางนี้เมื่อยังไม่มีภาพอะไรอยู่ในมือเลย ในคลิปสั่งสั้นๆ ว่า animate a visual explanation of how LLMs are trained and how they work แล้วกดส่งไปแบบนั้น พอคำสั่งกว้างขนาดนี้ Claude จะถามกลับมาก่อนหนึ่งชุด ทั้งคนดูเป็นใคร อยากได้ยาวกี่วินาที อัตราส่วนภาพเท่าไร และอยากได้ป้ายข้อความมากน้อยแค่ไหน ตอบครบแล้วกดต่อไป อีกไม่กี่นาทีก็ได้คลิป 30 วินาที อัตราส่วน 16:9 กลับมา

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

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

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

ท่าที่คุ้มที่สุดของคนทำคลิป คือวาง transcript ลงไปตรงๆ

สามทางข้างบนยังเป็นการทำภาพขึ้นมาก่อน แล้วค่อยหาที่วางในคลิปทีหลัง ส่วนทางที่เปลี่ยนวิธีทำงานจริง คือการส่ง transcript ที่มีข้อความถอดเสียงและเวลากำกับไปพร้อมกับพรอมต์

พอ Claude เห็นว่าประโยคไหนอยู่วินาทีที่เท่าไร มันก็รู้ว่าต้องขึ้นภาพอะไรตอนไหน ขั้นตอนที่เคยต้องมานั่งจับจังหวะเองทีหลังจึงหายไป

ลำดับงานมีสี่ขั้น

1. เลือก design system เพื่อให้แต่ละท่อนใช้สไตล์และโทนของแบรนด์เดียวกัน ถ้ายังไม่มีก็ข้ามไปก่อน แล้วเลือกเทมเพลต Animation
2. วางพรอมต์กลางที่เขียนไว้ใช้ซ้ำได้ทุกคลิป
3. ขอ transcript ออกมาก่อน โดยขอเป็นไฟล์ SRT ที่วางเวลากำกับไว้บรรทัดบนและประโยคที่พูดไว้บรรทัดล่าง ในคลิปใช้ Gemini พิมพ์สั่งว่า give me an SRT transcript for this แล้ววางช่วงคลิปที่อยากได้ภาพลงไป ประมาณ 5 ถึง 10 วินาทีก็ได้กลับมา
4. วาง transcript ต่อท้ายพรอมต์เดิม แล้วกดส่ง

พรอมต์กลางที่ใช้ในคลิปหน้าตาแบบนี้ เขียนกว้างไว้ตั้งแต่ต้นเพื่อให้ใช้ซ้ำได้กับทุกหัวข้อ

I want motion graphics that will be used over a talking head video.
They should follow the transcript, illustrate the concepts at the matching
timestamps, default to graphics and icons to illustrate concepts whenever
possible. Use the interface when applicable. Use text minimally when
appropriate to emphasize key points or label things. The exception is if
there's a definition where the exact text on screen makes sense.

Leave blank space on the right third mostly, sometimes the top third, for me
to place the talking head. You can switch between locations as you see fit.

Aspect ratio 16:9.

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

ผลที่กลับมาในคลิปคือไม่มีคำถามให้ตอบเลยสักข้อ ภาพมาพร้อมพื้นที่ว่างฝั่งขวาตามที่สั่ง และไทม์ไลน์ด้านล่างแบ่งฉากย่อยตามช่วงเวลาใน transcript

จากตรงนี้เหลือแค่การเก็บงาน แผง tweaks เอาไว้ลองสลับชุดสีที่ใช้เน้นจุดสำคัญจนกว่าจะถูกใจ ส่วนไทม์ไลน์ด้านล่างลากยืดหรือหดความยาวของแต่ละช็อตได้

ที่สะดวกกว่านั้นคือการสั่งแก้ด้วยภาษาพูด ในคลิปขอเปลี่ยนประโยคตัวอย่างจาก the cat sat on the mat เป็น the kettle began to boil ระบบเปลี่ยนให้ทุกจุดที่ประโยคนั้นโผล่ รวมถึงในคำถามช่วงท้ายคลิปด้วย ส่วนที่เหลืออยู่เหมือนเดิมทั้งหมด และเพราะ Claude ตั้งชื่อฉากไว้ให้ใต้ไทม์ไลน์แล้ว เวลาจะสั่งแก้ก็เรียกชื่อฉากนั้นได้เลย

พอได้ตามที่ต้องการแล้ว กด Share เลือกวิดีโอ แล้วตั้งความละเอียดเป็น 1080p ก่อนสั่ง export ความยาวที่คลิปบอกว่าคุมได้จริงคือท่อนละ 30 วินาทีถึง 2 นาที แล้วทำหลายท่อนต่อหนึ่งคลิป ไม่ใช่สั่งทีเดียวยาวทั้งคลิป

design system คือตัวที่ทำให้ทุกท่อนดูเป็นแบรนด์เดียวกัน

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

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

วิธีสร้างคือเปิดเมนู design system แล้วเลือกว่าจะสั่ง Claude Code ให้สร้าง design system หรือสร้างใน Claude Design ตรงนั้นเลย จากนั้นป้อนวัตถุดิบเข้าไป จะเป็นลิงก์โค้ดจาก GitHub ไฟล์จากเครื่อง ไฟล์งานออกแบบจาก Figma หรือวางภาพอ้างอิงที่อยากให้ยึดเป็นแนวก็ได้ ใครมีโน้ตกำกับเพิ่มก็เติมได้อีก แล้วรอราวห้านาที

ในคลิปวางภาพอ้างอิงไปสามภาพ และเพราะไม่ได้ตั้งชื่อให้ Claude เลยตั้งชื่อเองว่า Halo Neon Design System

ตอนเริ่มใช้ครั้งแรก Claude ยังนำไฟล์โค้ดของโปรเจกต์และไฟล์งานออกแบบของทีมมาสร้าง design system ให้ได้ด้วย ใครสนใจเรื่องนี้เป็นพิเศษ มีบทความที่ว่าด้วยการตั้งค่า design system ครั้งเดียวให้งานของทั้งทีมออกมาตรงแบรนด์ แยกไว้อีกชิ้น

ราคาที่ต้องจ่ายจริง และของที่ยังไม่อยู่ในกล่อง

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

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

ใครอยากเห็นเส้นทางอื่นที่สั่งงานตัดต่อด้วยภาษาพูด มีบทความที่ไล่สองเส้นทางตัดต่อวิดีโอผ่าน Claude เทียบไว้แล้ว

ข้อสุดท้ายสำคัญกับการตั้งความคาดหวัง หน้าประกาศ Claude Design ของ Anthropic ไม่ได้พูดถึงงานภาพเคลื่อนไหวหรือ motion graphic ไว้เลยสักบรรทัด สิ่งที่ประกาศคือเครื่องมือทำงานออกแบบและต้นแบบ ส่วนวิธีทำ motion graphic จาก transcript เป็นวิธีใช้ที่คนใช้งานจริงไปเจอเข้าในเทมเพลตแอนิเมชัน แล้วบอกต่อกันเอง เครื่องมือนี้จึงยังไม่ใช่โปรแกรมตัดต่อวิดีโอแบบครบวงจร แต่เป็นเครื่องมือออกแบบที่ทำภาพเคลื่อนไหวได้ดี

เริ่มจากคลิปเดียวที่เคยปล่อยไปแล้ว

สิ่งที่ลงมือทำได้เย็นนี้เลยคือ หยิบสคริปต์ของคลิปที่ปล่อยไปแล้วมาหนึ่งอัน ตัดมาสักท่อนที่เคยรู้สึกว่าภาพประกอบไม่พอ ขอ transcript ของท่อนนั้น แล้วส่งเข้าไปรอบเดียว

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

คลิปเดียวนั้นยังใช้ตรวจคำอธิบายได้ด้วย เพราะภาพที่ออกมาขยับตามคำพูดในแต่ละวินาที ตรงไหนที่ภาพไม่ตรงกับที่คิดไว้ ลองย้อนกลับไปอ่านประโยคตรงเวลานั้นอีกครั้ง

ที่มา:

• คลิป Claude Design Just Unlocked AI Motion Graphics จากช่อง Futurepedia
• บทความ Introducing Claude Design by Anthropic Labs จาก anthropic.com