Claude Animation: วิธีสร้างแอนิเมชั่นด้วย Claude และจัดส่งไปยังแอปของคุณ
วิธีสร้างแอนิเมชันด้วย Claude: Claude Design, Claude Motion, อาร์ติแฟกต์และ Claude Code, สิ่งที่แต่ละอันเอาท์พุต และวิธีรับแอนิเมชันที่สร้างโดย Claude ลงในแอปจริง
หลัก Takeaway
คุณสามารถสร้างแอนิเมชันด้วย Claude ได้สามวิธี: Claude Design หรือ Claude Motion สำหรับเอาต์พุตภาพ, Claude artifacts สำหรับการสาธิต HTML, CSS และ JavaScript และ Claude Code การเขียนโค้ดแอนิเมชั่น หรือการขับเคลื่อนเครื่องมืออื่นๆ บน MCP แต่ละแบบจะให้การออกแบบ ไฟล์วิดีโอ หรือโค้ดที่ยังต้องใส่ลงในผลิตภัณฑ์ของคุณ ภาพเคลื่อนไหวที่ต้องเรียกใช้ภายในแอปจริงต้องมีรูปแบบที่แอปสามารถเรียกใช้ได้ ดังนั้นการเคลื่อนไหวที่สร้างโดย Claude ส่วนใหญ่จึงถูกส่งไปยังรันไทม์ก่อนที่จะจัดส่ง
เกี่ยวกับคู่มือนี้
ExodeUI ไม่มีส่วนเกี่ยวข้องกับ Anthropic Claude เป็นเครื่องหมายการค้าของ Anthropic คู่มือนี้อธิบายถึงสิ่งที่ Claude สามารถสร้างขึ้นสำหรับการเคลื่อนไหว โดยอ้างอิงจากเอกสารของ Anthropic เอง และสิ่งที่ต้องทำเพื่อนำการเคลื่อนไหวนั้นไปไว้ในแอปที่จัดส่ง
วิธีสร้างแอนิเมชั่นด้วย Claude
Claude สามารถสร้างการเคลื่อนไหวได้ในรูปทรงที่แตกต่างกันสองสามแบบ และไม่สามารถใช้แทนกันได้ อันไหนที่คุณใช้เป็นตัวตัดสินว่าคุณจะได้อะไรและเหลืองานอีกเท่าไร
- Claude Design: แชทกับ Claude เพื่อรับการออกแบบและต้นแบบเชิงโต้ตอบบนผืนผ้าใบ ซึ่งรวมอยู่ในแผน Free, Pro, Max, Team และ Enterprise และไซต์แบบสแตนด์อโลนที่ claude.ai/design จะปิดให้บริการในวันที่ 14 ธันวาคม พ.ศ. 2569
- Claude Motion: เปลี่ยนพรอมต์และไฟล์ของคุณให้เป็นแอนิเมชั่นสั้น ๆ ซึ่งสร้างเป็นโค้ดที่เล่นได้เหมือนวิดีโอและส่งออกเป็น MP4 อยู่ในรุ่นเบต้าในแผน Team และ Enterprise และไม่ได้ใช้โมเดลวิดีโอ ดังนั้นจึงไม่สามารถสร้างภาพหรือผู้คนที่สมจริงได้
- สิ่งประดิษฐ์ Claude: HTML, CSS และ JavaScript ที่รันได้ซึ่งแสดงตัวอย่างภายในการสนทนา ซึ่งรวดเร็วสำหรับการสาธิตการเคลื่อนไหว
- Claude Code: เขียนโค้ดภาพเคลื่อนไหวใน repo ของคุณ หรือแก้ไขเครื่องมือบน MCP รวมถึงเซิร์ฟเวอร์ ExodeUI MCP
ให้คำแนะนำที่ทำให้เกิดการเคลื่อนไหวที่ดีขึ้น
คลุมเครือแจ้งรับการเคลื่อนไหวที่คลุมเครือ Claude ตอบสนองต่อรายละเอียดที่นักออกแบบภาพเคลื่อนไหวจะขอ ไม่ว่าจะเป็นคุณสมบัติ จำนวน จังหวะ ทริกเกอร์ และสถานะ ตั้งชื่อแทนการบรรยายความรู้สึก
ตั้งชื่อการค่อยๆ เปลี่ยนและระยะเวลา
พูดว่า "สปริงโดยมีแสงสะท้อน" หรือ "ค่อยๆ คลายออกมากกว่า 200 มิลลิวินาที" แทนที่จะพูดว่า "ราบรื่น" ค่าที่โมเดลสามารถใช้เอาชนะคำคุณศัพท์ได้
ตั้งชื่อทริกเกอร์
พูดสิ่งที่เริ่มต้น: "เมื่อแตะ", "เมื่อวางเมาส์เหนือ" หรือ "เมื่อรายการเสร็จสิ้นการโหลด" การเคลื่อนไหวที่มีตัวกระตุ้นสามารถเชื่อมต่อกับเหตุการณ์จริงได้ในภายหลัง
ตั้งชื่อรัฐ
แสดงรายการเหล่านั้น เช่น "ไม่ได้ใช้งาน กด โหลด สำเร็จ ผิดพลาด" เพื่อให้คุณได้รับเครื่องสถานะขนาดเล็กแทนที่จะเป็นแอนิเมชั่นเดี่ยว
ตั้งชื่อแพลตฟอร์มและขีดจำกัด
บอกว่าเอาต์พุตเป็น React, SwiftUI หรือการสาธิตเว็บ และสิ่งที่ไม่ควรทำ เช่น "เฉพาะการแปลงภาพเคลื่อนไหวและความทึบ"
เหตุใดแอนิเมชันสาธิตจึงไม่พร้อมสำหรับการผลิต
Claude สามารถสร้างโค้ดแอนิเมชั่นที่ดูถูกต้องในหน้าตัวอย่างและยังต้องปรับปรุงก่อนจัดส่ง Gap ไม่ใช่คุณภาพ แต่เป็นรูปร่างของ Output
- โดยปกติจะเป็นโค้ดแบบใช้ครั้งเดียวสำหรับหน้าจอเดียว ไม่ใช่ส่วนประกอบที่นำมาใช้ซ้ำได้
- มักจะมีสถานะเดียวและไม่มีตรรกะสำหรับการโหลด ข้อผิดพลาด ปิดการใช้งาน หรือถูกขัดจังหวะการโต้ตอบ
- มันถูกเขียนขึ้นสำหรับแพลตฟอร์มเดียว ดังนั้นเวอร์ชัน React จะไม่ทำงานบน iOS หากไม่มีการเขียนใหม่
- การกำหนดเวลาและการค่อยๆ เปลี่ยนนั้นแสดงอยู่ในโค้ด ดังนั้นนักออกแบบจึงไม่สามารถเปลี่ยนสิ่งเหล่านี้ได้หากไม่มีนักพัฒนา
- สิ่งใดก็ตามที่จะนำมาใช้ซ้ำจำเป็นต้องมีรูปแบบไฟล์ที่แอปสามารถทำงานได้ ไม่ใช่ตัวอย่างข้อมูลที่วางลงในองค์ประกอบเดียว
จัดส่งแอนิเมชั่นที่สร้างโดย Claude ด้วยเซิร์ฟเวอร์ MCP ของ ExodeUI
ExodeUI เป็นเครื่องมือเบราว์เซอร์และเดสก์ท็อปสำหรับ UI และภาพเคลื่อนไหวแบบโต้ตอบ แอนิเมชันอยู่ในไฟล์ .exode ที่เปิดอยู่ไฟล์เดียวซึ่งมีเลย์เอาต์ ไทม์ไลน์ สเตทแมชชีน ฟิสิกส์ของสปริง และลอจิก แพ็คเกจรันไทม์เล่นไฟล์นั้นใน React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter ดังนั้นแอนิเมชั่นเดียวกันจะทำงานภายในแอพ แทนที่จะถูกสร้างขึ้นใหม่สำหรับแต่ละแพลตฟอร์ม ExodeUI เปิดเผยเซิร์ฟเวอร์ MCP พร้อมด้วยเครื่องมือมากกว่า 100 รายการ (สร้าง สร้างภาพเคลื่อนไหว เพิ่มตรรกะและฟิสิกส์ ซิงค์กับโปรแกรมแก้ไขสด ส่งออก) ดังนั้น Claude Code, Cursor, OpenCode และไคลเอ็นต์ MCP อื่นๆ จึงสามารถสร้างและแก้ไขไฟล์จากข้อความแจ้งในภาษาธรรมดาได้ การตั้งค่าอยู่ในผลิตภัณฑ์ ไม่ใช่ในสคริปต์ ดังนั้นจึงไม่มีคำสั่งให้คัดลอก: เปิด MCP ในการตั้งค่า ExodeUI จากนั้นเชื่อมต่อไคลเอ็นต์ของคุณด้วยวิธีที่คุณเชื่อมต่อเซิร์ฟเวอร์ MCP ใดๆ เราสร้าง ExodeUI ดังนั้นให้ตรวจสอบทางเลือกอื่นด้วย
1. เปิด MCP ใน ExodeUI
ในการตั้งค่า ExodeUI ให้เปิดใช้งานเซิร์ฟเวอร์ MCP โดยเผยแพร่เครื่องมือที่ไคลเอ็นต์การเข้ารหัส AI ใช้ในการสร้างและแก้ไขไฟล์
2. เชื่อมต่อลูกค้าของคุณ
ชี้ Claude Code, Cursor, OpenCode หรือไคลเอนต์ MCP ใด ๆ ที่เซิร์ฟเวอร์ ExodeUI เช่นเดียวกับที่คุณเชื่อมต่อกับเซิร์ฟเวอร์ MCP อื่น ๆ
3. อธิบายการเคลื่อนไหว
ขอภาพเคลื่อนไหวในภาษาธรรมดา เอเจนต์แก้ไขไฟล์ .exode และการเปลี่ยนแปลงจะแสดงในตัวแก้ไข ExodeUI
4. จัดส่งไฟล์เดียวกัน
เรนเดอร์ไฟล์ .exode ผ่านรันไทม์ ExodeUI ใน React, SwiftUI, Flutter และอื่นๆ อีกมากมาย และขับเคลื่อนอินพุตและสถานะจากโค้ดของคุณ
Claude Design กับ Claude Code + ExodeUI
ทั้งสองเส้นทางเริ่มต้นด้วยข้อความแจ้งและสิ้นสุดด้วยการเคลื่อนไหวในผลิตภัณฑ์ของคุณ สิ่งที่เกิดขึ้นระหว่างนั้นแตกต่างกัน: Claude Design เก็บงานไว้ในผืนผ้าใบการออกแบบ ในขณะที่ Claude Code บวก ExodeUI จะเก็บไว้ในไฟล์ที่ทำงาน
สิ่งที่คุณได้รับ
Claude Design: การออกแบบหรือต้นแบบที่คลิกได้ พร้อมชุดแฮนด์ออฟสำหรับ Claude Code Claude Code + ExodeUI: ไฟล์ .exode ที่เล่นเป็นส่วนประกอบ
ที่ที่ภาพเคลื่อนไหวทำงาน
Claude Design: ในพื้นที่การออกแบบและในต้นแบบที่ใช้ร่วมกัน Claude Code + ExodeUI: ในแอป บนเว็บ iOS และ Android ตอบสนองต่ออินพุตและข้อมูล
แก้ไขหลังจากแฮนด์ออฟ
Claude Design: เปลี่ยนดีไซน์แล้วส่งต่ออีกครั้ง Claude Code + ExodeUI: ผู้ออกแบบแก้ไขไฟล์เดียวกันกับที่แอปทำงาน โดยไม่ต้องสร้างใหม่
โดยที่ Claude Design ชนะ
สำรวจทิศทางด้วยภาพจำนวนมาก นำเสนอต่อผู้มีส่วนได้ส่วนเสีย และสร้างงานคงที่หรืองานต้นแบบในแผนใดๆ รวมถึงแผนฟรี
โดยที่ ExodeUI ชนะ
การเคลื่อนไหวที่ต้องจัดส่งพร้อมสถานะ ฟิสิกส์ และอินพุต ที่นำมาใช้ซ้ำข้ามแพลตฟอร์มจากไฟล์เดียว
ตัวอย่างการใช้งานการผลิต
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}คีย์ Principles ที่ต้องจำ
- Claude Design และ Claude Motion สร้างงานภาพ และ Claude Code สร้างโค้ด แต่ไม่มีรายการใดที่เป็นรันไทม์
- ภาพเคลื่อนไหวจะจัดส่งเมื่อมีรูปแบบที่แอปสามารถเรียกใช้และเชื่อมโยงกับสถานะจริงและอินพุตเท่านั้น
- ตั้งชื่อการค่อยๆ เปลี่ยน ทริกเกอร์ และสถานะในข้อความแจ้งเพื่อรับการเคลื่อนไหวที่คุณสามารถใช้ได้จริง
- เซิร์ฟเวอร์ MCP ของ ExodeUI ช่วยให้ Claude Code สร้างและแก้ไขไฟล์ .exode หนึ่งไฟล์ที่ทำงานใน React, SwiftUI, Flutter และอื่นๆ