Lottie Creator MCP

Lottie Creator MCP

เชื่อมต่อผู้ช่วย AI เข้ากับ Lottie Creator ผ่านบริดจ์ MCP ในเครื่อง เพื่อสร้าง แก้ไข และทำแอนิเมชันด้วยพรอมต์

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) ช่วยให้ผู้ช่วยเบราว์เซอร์ที่เข้ากันได้ใช้ Creator ได้โดยตรง โดยไม่ต้องใช้บริดจ์ในเครื่องนี้ โดยเปิดใช้งานตามค่าเริ่มต้นในเบราว์เซอร์ที่รองรับ ทำตามคำแนะนำนี้หากคุณต้องการเชื่อมต่อผ่าน เซิร์ฟเวอร์ Creator MCP ในเครื่อง

Lottie Creator MCP นำผู้ช่วย AI ของคุณเข้าสู่ขั้นตอนการทำงานแอนิเมชันของคุณโดยตรง — มอบเครื่องมือในการตรวจสอบ สร้าง และแก้ไขแอนิเมชัน Lottie ใน LottieFiles Creator ผ่านภาษาธรรมชาติ คุณสามารถดูขั้นตอนการติดตั้งได้ด้านล่าง

เซิร์ฟเวอร์ MCP เป็นส่วนหนึ่งของอินเทอร์เฟซมาตรฐานสำหรับเอเจนต์ AI ในการโต้ตอบกับแหล่งข้อมูลโดยใช้ Model Context Protocol Lottie Creator MCP เชื่อมต่อผู้ช่วย AI เช่น Claude, Cursor และ Windsurf เข้ากับเครื่องมือแก้ไขของ Creator ผ่านบริดจ์ในเครื่อง

เมื่อเปิดใช้ MCP แล้ว คุณสามารถ:

✦ สร้างแอนิเมชันจากศูนย์

อธิบายสิ่งที่คุณต้องการ — ตัวโหลดแบบหมุน แถบความคืบหน้า แอนิเมชันตัวละคร — และ AI ของคุณจะสร้างมันใน Creator โดยตรง ทีละเลเยอร์

✦ แก้ไขและปรับเปลี่ยนแอนิเมชันที่มีอยู่

เปลี่ยนสี ปรับเวลา สลับเส้นโค้ง easing เปลี่ยนชื่อเลเยอร์ หรือปรับโครงสร้างทั้งฉาก AI ของคุณอ่านสถานะปัจจุบันของไฟล์และแก้ไขแบบเรียลไทม์

✦ สร้างแอนิเมชันหลายรูปแบบเป็นชุด

สร้างแอนิเมชันหลายเวอร์ชันพร้อมกันโดยอัตโนมัติ — ธีมมืดและสว่าง ขนาดต่าง ๆ รูปแบบสีแบรนด์

✦ วิเคราะห์แอนิเมชันเพื่อการเข้าถึงและแบรนด์

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

✦ บูรณาการเข้ากับขั้นตอนการทำงานโปรเจกต์ของคุณ

สร้างแอสเซ็ตแอนิเมชันได้ทันทีขณะทำงานในโปรเจกต์ที่ใหญ่ขึ้น

หากต้องการใช้ MCP ให้ติดตั้งในไคลเอนต์ AI ของคุณและเปิดใช้งานใน LottieFiles Creator ส่วนด้านล่างจะอธิบายแต่ละขั้นตอน

ข้อกำหนดเบื้องต้น

ก่อนติดตั้ง ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

✅ 📦 Node.js 18+: จำเป็นสำหรับการรันแพ็กเกจ MCP ผ่าน npx ดาวน์โหลด Node.js →

✅ 🎬 LottieFiles Creator: เปิด creator.lottiefiles.com ในเบราว์เซอร์ของคุณและเปิดแท็บนี้ไว้

✅ 🤖 AI ที่รองรับ MCP: Claude, Cursor, Windsurf, VS Code Copilot หรือผู้ช่วยอื่น ๆ ที่รองรับ MCP

ขั้นแรก ไปที่ ไฟล์ README ของ Creator MCP ซึ่งคุณสามารถเข้าถึงสตริงและคำสั่ง MCP ได้

การติดตั้ง MCP

สำหรับเครื่องมือ AI ทั้งหมดของคุณ คุณสามารถใช้การกำหนดค่าต่อไปนี้:

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

เอกสารนี้ครอบคลุมขั้นตอนการติดตั้งสำหรับไคลเอนต์ MCP ที่รองรับบางส่วนของเรา สำหรับรายการคำแนะนำการติดตั้งสำหรับไคลเอนต์ MCP ที่รองรับ ดูรายการด้านล่าง:

ไคลเอนต์ MCP ที่รองรับ

ทำตามคำแนะนำสำหรับไคลเอนต์เฉพาะของคุณเพื่อติดตั้งและเชื่อมต่อ Lottie Creator MCP ไคลเอนต์บางตัวยังรองรับสกิล ซึ่งเพิ่มความรู้ด้านการออกแบบการเคลื่อนไหวเพื่อให้ AI ของคุณสร้างแอนิเมชันที่ตั้งใจและสวยงามยิ่งขึ้น 🖇️ นี่คือ สกิลการออกแบบการเคลื่อนไหว ของ LottieFiles

ทำตามขั้นตอนสำหรับไคลเอนต์ MCP ของคุณ:

---

**1. เปิดการตั้งค่า Claude Desktop**

ไปที่ **การตั้งค่า → นักพัฒนา** และคลิก **"แก้ไขการกำหนดค่า"** ซึ่งจะเปิดไฟล์การกำหนดค่า JSON บนคอมพิวเตอร์ของคุณซึ่งคุณสามารถแก้ไขได้ใน VS Code, Cursor หรือโปรแกรมแก้ไขข้อความใดก็ได้

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. เพิ่มการกำหนดค่า MCP**

วางข้อความต่อไปนี้ลงในไฟล์การกำหนดค่าภายในออบเจกต์ `mcpServers` คุณอาจต้องเพิ่มหรือลบวงเล็บ/เครื่องหมายจุลภาคเพื่อให้ JSON ถูกต้อง

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

นี่คือลักษณะไฟล์การกำหนดค่าที่อาจเป็นหลังจากการวางการกำหนดค่าด้านบน:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. ตรวจสอบว่าเชื่อมต่อแล้ว**

คลิกปุ่ม **"+"** ในแชท ไปที่ **ตัวเชื่อมต่อ** และยืนยันว่าสวิตช์ `lottiefiles-creator` เปิดอยู่

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ**

เท่านี้เอง Claude Code จะติดตั้งและลงทะเบียน MCP โดยอัตโนมัติ

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **การใช้ Lottie Creator MCP สำหรับ Cursor**

1. กด `Cmd + Shift + P` (Mac) หรือ `Ctrl + Shift + P` (Windows/Linux) → ค้นหา **"Cursor Settings"**
2. ในแถบด้านข้างไปที่ **Tools & MCPs**
3. คลิก **"Add custom MCP"**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. วางใน:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

บันทึกและ **รีสตาร์ท Cursor ทั้งหมด** (ออกและเปิดใหม่ - ไม่ใช่แค่โหลดใหม่)

หลังจากรีสตาร์ท ไปที่ **การตั้งค่า → Tools & MCP** และคุณควรเห็นจุดสีเขียวถัดจาก `lottiefiles-creator` เพื่อยืนยันว่าเชื่อมต่อแล้ว

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**ตัวเลือก A: การติดตั้งผ่านดีพลิงก์**

1. คลิก [ดีพลิงก์เซิร์ฟเวอร์ MCP ของ LottieFiles](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) ซึ่งจะเปิดการกำหนดค่า MCP ใน VS Code
2. กดปุ่ม **ติดตั้ง**

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**ตัวเลือก B: CLI หรือไฟล์การกำหนดค่า**

หรือผ่าน CLI:

เทอร์มินัล

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

หรือเพิ่มใน `.vscode/mcp.json` ของคุณ:

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ คุณต้องเปิดใช้ [GitHub Copilot](https://github.com/features/copilot) ในบัญชีของคุณเพื่อใช้เครื่องมือ MCP ใน VS Code

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ทำตามเอกสารการตั้งค่า MCP ของ Antigravity และใช้การกำหนดค่าด้านบน ทำตามเอกสารการตั้งค่า MCP ของ Cline และใช้การกำหนดค่าด้านบน ทำตาม [คำแนะนำการกำหนดค่า MCP](https://github.com/openai/codex/blob/main/docs/config.md) โดยใช้:

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

หรือเพิ่มผ่าน CLI:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. เริ่ม `copilot` 2. รัน `/mcp add` 3. กำหนดค่า: - ชื่อเซิร์ฟเวอร์: `lottiefiles-creator` - ประเภทเซิร์ฟเวอร์: `Local` - คำสั่ง: `npx -y @lottiefiles/creator-mcp@latest` ทำตามเอกสารการตั้งค่า MCP ของ VS Code และใช้การกำหนดค่าด้านบน หรือผ่าน CLI:

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` ทำตามเอกสารการตั้งค่า MCP ของ Gemini Code Assist และใช้การกำหนดค่าด้านบน ทำตามเอกสารการตั้งค่า MCP ของ JetBrains และใช้การกำหนดค่าด้านบน ทำตามเอกสารการตั้งค่า MCP ของ Kiro และใช้การกำหนดค่าด้านบน ทำตามเอกสารการตั้งค่า MCP ของ Qoder และใช้การกำหนดค่าด้านบน เพิ่มเซิร์ฟเวอร์ MCP ในเครื่องด้วย:

- ชื่อ: `lottiefiles-creator`
- คำสั่ง: `npx`
- อาร์กิวเมนต์: `y @lottiefiles/creator-mcp@latest`

ทำตามเอกสารการตั้งค่า MCP ของ Warp และใช้การกำหนดค่าด้านบน ทำตามเอกสารการตั้งค่า MCP ของ Windsurf และใช้การกำหนดค่าด้านบน

การเชื่อมต่อกับ Lottie Creator

1. เปิด Lottie Creator

ไปที่ creator.lottiefiles.com ในเบราว์เซอร์ของคุณและเปิดแท็บนี้ไว้ตลอดเซสชัน MCP สื่อสารกับ Creator ผ่านแท็บเบราว์เซอร์นี้

1. เปิดใช้ MCP ในเครื่องใน Creator

ใน Creator ไปที่ การตั้งค่า → การตั้งค่า MCP → เปิดใช้ MCP ในเครื่อง

1. ยืนยันการเชื่อมต่อ

คุณควรเห็นการแจ้งเตือนใน Creator: เชื่อมต่อบริดจ์ MCP ในเครื่องแล้ว

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

เกี่ยวกับสกิล

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

ในขณะที่ Lottie Creator MCP เปิดเผยเครื่องมือแต่ละรายการ (สร้างเลเยอร์ ตั้งค่าคีย์เฟรม ปรับการเติม) สกิลช่วยให้ AI ของคุณเข้าใจ วิธีใช้อย่างมีประสิทธิภาพ เช่น การรู้ว่าเส้นโค้ง easing แบบใดเหมาะกับการเด้งเทียบกับการจางหาย วิธีจัดลำดับการเข้าขององค์ประกอบหลายรายการ หรือวิธีจัดโครงสร้างเวลาเพื่อให้แอนิเมชันรู้สึกตั้งใจมากกว่ากลไก

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

ติดตั้งสกิลการออกแบบการเคลื่อนไหว

รันคำสั่งนี้ครั้งเดียวในเทอร์มินัลของคุณ ใช้งานได้กับเอเจนต์ 40+ รวมถึง Claude Code, Cursor, Codex และ GitHub Copilot

เทอร์มินัล

npx skills add LottieFiles/motion-design-skill

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

ดูสกิลเต็มบน GitHub → LottieFiles/motion-design-skill

ความสามารถ

Lottie Creator MCP, Motion Copilot และ Lottie Creator WebMCP มีความสามารถในการแก้ไข Creator ที่เหมือนกัน การตั้งค่าและอินเทอร์เฟซผู้ช่วยแตกต่างกัน

พื้นที่	สิ่งที่คุณสามารถขอได้
ฉากและเลเยอร์	ตรวจสอบและสร้างฉาก เปลี่ยนขนาด อัตราเฟรม ระยะเวลา หรือพื้นหลังตัวอย่าง เปลี่ยนชื่อ ทำสำเนา จัดกลุ่ม จัดแนว จัดลำดับใหม่ ซ่อน หรือล็อกเลเยอร์
รูปร่างและข้อความ	สร้างและแก้ไขสี่เหลี่ยม วงรี รูปหลายเหลี่ยม ดาว เส้นทาง และข้อความ เปลี่ยนฟอนต์และสไตล์ข้อความ แยกข้อความเป็นส่วน ๆ สำหรับแอนิเมชัน
การจัดสไตล์และเอฟเฟกต์	ปรับการเติมทึบและการไล่สีหรือเส้นขีด ใช้โหมดผสมผสาน เงา เบลอ เอฟเฟกต์สี มาสก์ และแมตต์
แอนิเมชันและเวลา	เพิ่ม ตรวจสอบ เปลี่ยน คัดลอก หรือลบคีย์เฟรม ปรับ easing ทำแอนิเมชันการแปลง ความทึบ และสี ใช้เส้นทางการเคลื่อนไหว การเข้าที่เว้นระยะ และการปรับเวลา
แอสเซ็ตและการตรวจสอบฉาก	นำเข้า SVG แอนิเมชัน Lottie และรูปภาพ แปลงเลเยอร์รูปภาพ PNG หรือ JPG เป็นเวกเตอร์ ตรวจสอบฉากและย้ายหัวเล่นไปยังเฟรมที่ระบุ
ธีมและการเคลื่อนไหวที่ใช้ซ้ำได้	สร้างและเชื่อมโยงสล็อตโทเคนการเคลื่อนไหว อัปเดตค่า และสร้างหรือสลับธีม ค้นหาและใช้สไตล์ที่บันทึกไว้และพรีเซ็ตการเคลื่อนไหวจาก Motion System ของพื้นที่ทำงานของคุณ
เซกเมนต์และการโต้ตอบ	สร้างเซกเมนต์แอนิเมชันที่มีชื่อ สเตตแมชชีน สเตต การเปลี่ยน และอินพุต เชื่อมต่อเหตุการณ์คลิก โฮเวอร์ และสเตตกับการกระทำ

การเข้าถึงฟีเจอร์เป็นไปตามพื้นที่ทำงานและแผน Creator ของคุณ เมื่อแอนิเมชันพร้อม ให้ใช้ ตัวควบคุมการส่งออกของ Creator เพื่อบันทึกผลลัพธ์

แนวทางปฏิบัติที่ดีที่สุด

• ติดตั้งสกิล motion design เพื่อคุณภาพที่ดีขึ้น: MCP มอบเครื่องมือให้ AI ของคุณ สกิล motion design มอบวิจารณญาณในการใช้เครื่องมือเหล่านั้นอย่างมีประสิทธิภาพ — เส้นโค้ง easing, หลักการเรื่องจังหวะเวลา, การออกแบบท่าเต้น คำสั่งเดียว ผลลัพธ์ดีขึ้นอย่างเห็นได้ชัด สกิล motion design หาได้ ที่นี่
• เริ่มจาก SVG ของคุณเอง แล้วค่อยทำแอนิเมชัน: AI อาจคาดเดาได้ยากเมื่อสร้างรูปทรงภาพประกอบจากศูนย์ เพื่อผลลัพธ์ที่ดีที่สุด นำไฟล์ SVG ที่มีอยู่ของคุณเข้า Creator ก่อน แล้วค่อยขอให้ AI ทำแอนิเมชันให้ วิธีนี้รักษาสไตล์ภาพของคุณให้สม่ำเสมอ และให้ AI โฟกัสกับสิ่งที่มันทำได้ดีที่สุด — การเคลื่อนไหว จังหวะเวลา และลำดับเหตุการณ์
  • ทดลองใช้ลิงก์รีมิกซ์เหล่านี้
    • เหรียญรางวัล: https://lottie.link/metal
    • สภาพอากาศ: https://lottie.link/weather
    • กราฟ: https://lottie.link/graph
    • กล่องจดหมาย: https://lottie.link/mailbox1
• ใช้โมเดลที่ดีที่สุดที่คุณมีอยู่เสมอ: คุณภาพของแอนิเมชันแปรผันตรงกับโมเดล หากคุณเข้าถึง Claude Sonnet หรือ Opus ได้ ให้ใช้มันแทนโมเดลขนาดเล็กกว่า — ความแตกต่างในการจัดการจังหวะเวลา ลำดับเหตุการณ์ และการคิดเชิงพื้นที่นั้นเห็นได้ชัด
• ตั้งชื่อเลเยอร์ก่อนที่จะพิมพ์คำสั่ง: AI อ่านชื่อเลเยอร์ของคุณเพื่อทำความเข้าใจโครงสร้างแอนิเมชัน ชื่อเลเยอร์ที่ดี เช่น left_arm, right_leg, bg_circle และ text_headline ช่วยให้มันกำหนดเป้าหมายองค์ประกอบที่ถูกต้อง หลีกเลี่ยงข้อผิดพลาด และทำงานอย่างเป็นระเบียบในฉากที่ซับซ้อน ชื่อทั่วไป เช่น Shape 1 หรือ Group 4 ทำให้ AI ต่อยอดจากงานของคุณได้แม่นยำน้อยลง
• แบ่งแอนิเมชันที่ซับซ้อนออกเป็นขั้นตอน: แทนที่จะพูดว่า "สร้างแอนิเมชันแนะนำแอปแบบเต็มรูปแบบให้ฉัน" ให้ทำทีละฉาก สร้างฉาก → เพิ่มรูปทรง → เพิ่มคีย์เฟรม → ปรับจังหวะเวลาให้ละเอียด ขั้นตอนย่อยๆ ให้คุณควบคุมได้มากขึ้น และจับข้อผิดพลาดได้ง่ายขึ้นเพื่อแก้ไข
• ระบุจังหวะเวลาและความรู้สึกให้ชัดเจน: "เฟดแบบนุ่มนวล" กำกวมเกินไป "เฟดอิน 400ms แบบ ease-out" ให้ AI มีข้อมูลพอที่จะทำงาน ยิ่งคุณอธิบายความรู้สึกได้มากเท่าไร — กระฉับกระเฉง เด้งดึ๋ง ช้าและเหมือนในโรงภาพยนตร์ — ผลลัพธ์แรกก็จะยิ่งใกล้เคียงกับสิ่งที่คุณจินตนาการมากขึ้นเท่านั้น