Lottie Creator MCP

Lottie Creator MCP

undefined

Lottie Creator MCP

Lottie Creator MCP, yapay zeka asistanınızı doğrudan animasyon iş akışınıza dahil eder — LottieFiles Creator uygulamasına tam erişim sağlayarak, sizin adınıza doğal dil aracılığıyla Lottie animasyonları oluşturup düzenlemesine olanak tanır. Kuruluma aşağıdan göz atabilirsiniz.

MCP sunucuları, yapay zeka ajanlarının Model Context Protocol kullanarak veri kaynaklarıyla etkileşime girmesi için standartlaştırılmış bir arayüzün parçasıdır. Lottie Creator MCP, Claude, Cursor ve Windsurf gibi yapay zeka asistanlarını yerel bir köprü aracılığıyla Creator API'ye bağlar — böylece yapay zekanız, Creator'a sizinle aynı tam erişime sahip olur.

MCP etkinken şunları yapabilirsiniz:

✦ Sıfırdan animasyonlar oluşturun

Ne istediğinizi tanımlayın — bir yükleme döngüsü, bir ilerleme çubuğu, bir karakter animasyonu — ve yapay zekanız bunu doğrudan Creator'da, katman katman oluşturacaktır.

✦ Mevcut animasyonları düzenleyin ve değiştirin

Renkleri değiştirin, zamanlamayı ayarlayın, yumuşatma eğrilerini değiştirin, katmanları yeniden adlandırın veya tüm bir sahneyi yeniden düzenleyin. Yapay zekanız dosyanızın mevcut durumunu okur ve gerçek zamanlı olarak düzenler.

✦ Toplu animasyon varyantları oluşturun

Aynı anda bir animasyonun birden çok sürümünü otomatik olarak üretin — koyu ve açık temalar, farklı boyutlar, marka renk varyasyonları.

✦ Animasyonları erişilebilirlik ve marka açısından analiz edin

Yapay zekanızdan animasyonları kontrast sorunları, hareket hızı, renk tutarlılığı veya marka yönergelerinizle uyum açısından incelemesini ve bulduklarını düzeltmesini isteyin.

✦ Proje iş akışınıza entegre edin

Daha geniş bir proje üzerinde çalışırken anında animasyon varlıkları oluşturun.

MCP'yi kullanmak için, yapay zeka istemcinize kurun ve LottieFiles Creator'da etkinleştirin. Aşağıdaki bölümler her adımı açıklamaktadır.

Ön Koşullar

Kurulumdan önce aşağıdakilerin hazır olduğundan emin olun:

✅ 📦 Node.js 18+: MCP paketini npx aracılığıyla çalıştırmak için gereklidir. Node.js'i İndir →

✅ 🎬 LottieFiles Creator: Tarayıcınızda creator.lottiefiles.com adresini açın ve bu sekmeyi açık tutun.

✅ 🤖 MCP uyumlu bir yapay zeka: Claude, Cursor, Windsurf, VS Code Copilot veya MCP destekleyen herhangi bir asistan.

Öncelikle, MCP dizelerine ve komutlarına erişebileceğiniz Creator MCP README dosyasına gidin.

MCP'yi Kurma

Tüm yapay zeka araçlarınız için aşağıdaki yapılandırmayı kullanabilirsiniz:

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

Bu belge, desteklenen MCP istemcilerimizden bazıları için kurulum adımlarını kapsar. Desteklenen MCP istemcileri için kurulum kılavuzlarının listesi için aşağıdaki listeye bakın:

Desteklenen MCP İstemcileri

Lottie Creator MCP'yi kurmak ve bağlamak için özel istemcinize yönelik talimatları izleyin. Bazı istemciler ayrıca, yapay zekanızın daha bilinçli, cilalı animasyonlar üretebilmesi için hareket tasarımı bilgisi ekleyen becerileri de destekler. 🖇️ İşte LottieFiles hareket tasarımı becerisi.

MCP istemciniz için adımları izleyin:

---

**1. Claude Desktop Ayarlarını Açın**

**Ayarlar → Geliştirici** yoluna gidin ve **"Yapılandırmayı Düzenle"** seçeneğine tıklayın. Bu, bilgisayarınızda VS Code, Cursor veya herhangi bir metin düzenleyici ile düzenleyebileceğiniz bir JSON yapılandırma dosyası açar.

<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 yapılandırmasını ekleyin**

Aşağıdakini yapılandırma dosyasındaki `mcpServers` nesnesinin içine yapıştırın. JSON'u geçerli tutmak için parantez/virgül eklemeniz veya kaldırmanız gerekebilir.

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

Yukarıdaki yapılandırmayı yapıştırdıktan sonra yapılandırma dosyasının nasıl görünebileceği aşağıda verilmiştir:

```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. Bağlı olduğunu doğrulayın**

Bir sohbette **"+"** düğmesine tıklayın, **Bağlayıcılar**'a gidin ve `lottiefiles-creator` geçişinin açık olduğunu onaylayın.

<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. Terminalinizde aşağıdaki komutu çalıştırın**

Hepsi bu kadar. Claude Code, MCP'yi otomatik olarak kuracak ve kaydedecektir.

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

#### **Cursor için Lottie Creator MCP'yi Kullanma**

1. `Cmd + Shift + P` (Mac) veya `Ctrl + Shift + P` (Windows/Linux) tuşlarına basın → **"Cursor Ayarları"**nı arayın
2. Kenar çubuğunda **Araçlar ve MCP'ler**'e gidin
3. **"Özel MCP ekle"** seçeneğine tıklayın

<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. Şunu yapıştırın:

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

Kaydedin ve **Cursor'u tamamen yeniden başlatın** (sadece yeniden yüklemeyin, çıkıp tekrar açın)

Yeniden başlattıktan sonra, **Ayarlar → Araçlar ve MCP**'ye gidin ve `lottiefiles-creator` yanında bağlı olduğunu onaylayan yeşil bir nokta görmelisiniz.

<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==" />

**Seçenek A: Derin bağlantı ile kurulum**

1. [LottieFiles MCP sunucusu derin bağlantısına](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) tıklayın. Bu, VS Code'da MCP yapılandırmasını açacaktır.
2. **Kur** düğmesine basın.

<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=" />

**Seçenek B: CLI veya yapılandırma dosyası**

Veya CLI aracılığıyla:

Terminal

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

Veya `.vscode/mcp.json` dosyanıza ekleyin:

JSON — .vscode/mcp.json

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

ℹ️ VS Code'da MCP araçlarını kullanmak için hesabınızda [GitHub Copilot](https://github.com/features/copilot) etkinleştirilmiş olması gerekir.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Antigravity'nin MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Cline'ın MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. [MCP yapılandırma kılavuzunu](https://github.com/openai/codex/blob/main/docs/config.md) izleyin ve şunu kullanın:

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

Veya CLI aracılığıyla ekleyin:

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

1. `copilot` başlatın 2. `/mcp add` çalıştırın 3. Yapılandırın: - Sunucu adı: `lottiefiles-creator` - Sunucu türü: `Local` - Komut: `npx -y @lottiefiles/creator-mcp@latest` VS Code MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Veya CLI aracılığıyla:

```
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 ``` Gemini Code Assist MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. JetBrains MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Kiro MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Qoder MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Şununla yerel bir MCP sunucusu ekleyin:

- Ad: `lottiefiles-creator`
- Komut: `npx`
- Argümanlar: `y @lottiefiles/creator-mcp@latest`

Warp MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Windsurf MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın.

Lottie Creator'a Bağlanma

1. Lottie Creator'ı Açın

Tarayıcınızda creator.lottiefiles.com adresine gidin ve oturumunuz boyunca bu sekmeyi açık tutun. MCP, Creator ile bu tarayıcı sekmesi aracılığıyla iletişim kurar.

1. Creator'da MCP'yi Etkinleştirin

Creator'da, Ayarlar → MCP Ayarları → MCP'yi Etkinleştir yoluna gidin.

1. Bağlantıyı onaylayın

Creator'da bir bildirim görmelisiniz: Yerel MCP köprüsü bağlandı

Bunu görüyorsanız, her şey hazır ve istem göndermeye başlamaya hazırsınız! Animasyon kalitesinin büyük ölçüde hangi modeli kullandığınıza bağlı olduğunu unutmayın, bu nedenle kullanabileceğiniz en iyi modeli kullandığınızdan emin olun.

Beceriler Hakkında

Beceriler, bir ajanın animasyon görevlerine nasıl yaklaşması gerektiğine dair rehberlik sağlar — MCP araç çağrıları ve yeniden kullanılabilir talimatlar olarak yerleşik derin hareket tasarımı bilgisinin bir kombinasyonunu kullanır.

Lottie Creator MCP bireysel araçları (bir katman oluştur, bir ana kare ayarla, bir dolguyu ayarla) sunarken, Beceriler yapay zekanızın bunları nasıl iyi kullanacağını anlamasına yardımcı olur. Hangi yumuşatma eğrisinin bir sıçramaya karşı bir solmaya uyduğunu, çok öğeli bir girişin nasıl sıralanacağını veya bir animasyonun mekanik değil bilinçli hissettirmesi için zamanlamanın nasıl yapılandırılacağını bilmek gibi şeyler.

Beceriler, MCP bağlantısının yerini almaz veya yeni araçlar eklemez. Hareket tasarımı uzmanlığını, yapay zekanızın animasyonlar üzerinde çalışırken otomatik olarak yararlandığı talimatlar halinde paketleyerek tahmin yürütmeyi azaltırlar.

Hareket tasarımı becerisini yükleyin

Bu komutu terminalinizde bir kez çalıştırın. Claude Code, Cursor, Codex ve GitHub Copilot dahil 40'tan fazla ajanla çalışır.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Şiddetle tavsiye edilir. Katı, mekanik animasyonlar üreten bir yapay zeka ile cilalı, bilinçli hareket üreten bir yapay zeka arasındaki fark neredeyse tamamen bu bağlama sahip olup olmamasına bağlıdır. Bir kez kurun ve her animasyon oturumuna uygulanır.

Tam beceriyi GitHub'da görüntüleyin → LottieFiles/motion-design-skill

Yetenekler

MCP, yapay zekanıza Creator API'ye tam erişim sağlar. İşte yapabileceği her şey:

🎬 Sahne Yönetimi

• Sahneler oluşturun — ad, boyut, kare hızı, süre ayarlayın
• Sahneler arasında geçiş yapın
• Arka plan rengini ayarlayın (yalnızca önizleme, dışa aktarılmaz)
• Sahne özelliklerini okuyun — katmanlar, boyut, kare hızı
• Sahneleri Lottie JSON'a dışa aktarın
• Lottie JSON, dotLottie, SVG veya görüntüleri içe aktarın

🗂 Katman Yönetimi

• Görünürlük, kilit durumu ve odak ayarlayın
• Zamanlamayı kontrol edin — başlangıç karesi, bitiş karesi, ofset
• Karışım modlarını ayarlayın (çarpma, ekran, bindirme dahil 16 mod)
• Maske ve matları uygulayın ve canlandırın
• Katmanları hizalayın ve çevirin
• Dönüşümleri canlandırın — konum, döndürme, ölçek, eğme

🔷 Şekil Oluşturma

• Dikdörtgen — konum, boyut, köşe yuvarlaklığı
• Elips — konum, boyut
• Çokgen — noktalar, yarıçap, yuvarlaklık
• Yıldız — iç/dış yarıçap, noktalar
• Yol — tam teğet kontrolü ile özel bezier
• Grup — mevcut şekilleri birlikte gruplandırın

🎨 Dolgular ve Konturlar

• Düz renk dolgusu — statik veya canlandırılmış RGB
• Doğrusal gradyan dolgusu — özel başlangıç/bitiş noktaları
• Radyal gradyan dolgusu — vurgu açısı ve uzunluğu
• Düz ve gradyan konturlar — canlandırılabilir genişlik ile
• Yolları kırp — çizimi canlandırın (başlangıç %, bitiş %, ofset)

⏱️ Animasyon ve Ana Kareler

• Belirli karelere değerlerle ana kareler ekleyin
• Statik değerler ayarlayın (animasyon yok)
• Ana kareleri okuyun, inceleyin ve kaldırın
• Yumuşatma ayarlayın — Doğrusal veya Kübik Bezier (x1, y1, x2, y2)
• Canlandırın: konum, döndürme, ölçek, opaklık, renk, yol ve daha fazlası

🖼 Varlık ve Oynatma

• Varlıkları listeleyin, klonlayın ve kaldırın (sahneler ve görüntüler)
• Görüntü özelliklerini okuyun — genişlik, yükseklik, base64 URI
• Oynatın, duraklatın ve belirli karelere atlayın
• Geçerli kareyi ve oynatma durumunu okuyun
• Seçili düğümleri ve ana kareleri okuyun

Yakında: Durum Makineleri ve Hareket Jetonları

En İyi Uygulamalar

• Daha iyi kalite için hareket tasarımı becerisini yükleyin: MCP, yapay zekanıza araçları sağlar. Hareket tasarımı becerisi ise bunları iyi kullanması için gereken muhakemeyi — yumuşatma eğrileri, zamanlama ilkeleri, koreografi — kazandırır. Tek bir komutla belirgin şekilde daha iyi çıktı alın. Hareket tasarımı becerisine buradan ulaşabilirsiniz.
• Kendi SVG'lerinizle başlayın, sonra canlandırın: Yapay zeka, sıfırdan illüstrasyon şekilleri oluştururken tahmin edilemez olabilir. En iyi sonuçlar için, önce mevcut SVG varlıklarınızı Creator'a aktarın, ardından yapay zekanızdan bunları canlandırmasını isteyin. Bu, görsel tarzınızı tutarlı tutar ve yapay zekanın en iyi yaptığı şeye — hareket, zamanlama ve sıralama — odaklanmasını sağlar.
  • Bu remix bağlantılarını test edin
    • Madalya: https://lottie.link/metal
    • Hava Durumu: https://lottie.link/weather
    • Grafik: https://lottie.link/graph
    • Posta Kutusu: https://lottie.link/mailbox1
• Her zaman kullanabileceğiniz en iyi modeli kullanın: Animasyon kalitesi, modelle doğru orantılı olarak artar. Claude Sonnet veya Opus'a erişiminiz varsa, daha küçük bir model yerine bunu kullanın — zamanlama, sıralama ve uzamsal muhakeme konularındaki fark belirgindir.
• Komut vermeden önce katmanlarınızı adlandırın: Yapay zeka, animasyonunuzun yapısını anlamak için katman adlarınızı okur. left_arm, right_leg, bg_circle ve text_headline gibi iyi adlandırılmış katmanlar, doğru öğeleri hedeflemesine, hatalardan kaçınmasına ve karmaşık sahnelerde düzenli kalmasına yardımcı olur. Shape 1 veya Group 4 gibi genel adlar, yapay zekanın çalışmanızı doğru şekilde geliştirmesini zorlaştırır.
• Karmaşık animasyonları adımlara bölün: "Bana tam bir onboarding animasyonu yap" yerine, sahne sahne ilerleyin. Sahneyi oluşturun → şekilleri ekleyin → ana kareleri ekleyin → zamanlamayı iyileştirin. Daha küçük adımlar size daha fazla kontrol sağlar ve hataları yakalayıp düzeltmeyi kolaylaştırır.
• Zamanlama ve his konusunda net olun: "Yumuşak bir solma" belirsizdir. "Yavaşlamalı 400 ms'lik bir solma" yapay zekanıza üzerinde çalışabileceği bir şey verir. Hissi ne kadar çok tanımlarsanız — çevik, zıplayan, yavaş ve sinematik — ilk sonuç hayal ettiğinize o kadar yakın olur.