Kullanım kılavuzuna geç
motion-graphicsyazan HeyGen

Motion Graphics Skill.

Claude Code ve Codex için motion ve video skill'i: kısa tasarım odaklı motion graphics: kinetik tipografi, istatistik sayaçları, logo stingleri, alt bantlar.

  • Motion & Video
  • Video
heygen-com/hyperframes · skills/motion-graphics/SKILL.mdSKILL.md
--- name: motion-graphics description: A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up … --- ## Categories — split by the search decision ## Prerequisites ## Flow ## Resume table ## Design notes (maintainers — execution does not read this)
Üst bilgi ve bölüm başlıkları 2026-09-14 tarihinde üst akış dosyasından okundu · tam halde 15.566 karakter

01 Ne yapar

motion-graphics Skill'i Claude Code ve Codex İçinde Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Kinetik tipografi, istatistik sayaç artışı, grafik vuruşu, logo sting'i, alt bant, animasyonlu harita, tweet veya web sayfası gibi kısa, tasarım odaklı, anlatısız tek bir motion graphic için yönlendirme öncelikli bir skill — genellikle 10 saniyenin altında, en fazla 30 saniye civarında, MP4 veya şeffaf bir katman olarak render edilir.

Varlık öncelikli ve yeniden kullanım öncelikli bir yaklaşımdır: ilk ayrım parçanın bir aramaya gerek duyup duymadığıdır; form kategorileri boş asset_needs ile kullanıcı tarafından sağlanan içerik üzerinde çalışır, arama odaklı kategoriler döndürülen içerik türüne göre animasyon yapar ve Builder, elle yazılması gereken boşluklardan önce katalog bloklarını bir araya getirir. Workflow, en fazla bir açıklayıcı soru ile otonom çalışır, ancak render işlemi lint, check ve proof snapshot'larının ardında kullanıcı onayına bağlıdır.

Neler üretir

  • Envelope'u, seçilen kategoriyi veya arama amacını, asset_needs'i ve block, layout, motion ile pozisyonları tutan taslak ve ardından nihai shot-plan.json.
  • HF sözleşmesine uyan, window.__timelines üzerinde durdurulmuş bir GSAP zaman çizelgesi, clip sınıfları ve kararlı id'ler ile deterministik bir tl.seek(0) içeren compositions/index.html.
  • Proof zamanlarını incelemek için snapshots/ altında bir contact veya snapshot sayfası.
  • renders/video.mp4, ya da webm veya mov formatıyla render edilirken şeffaf bir katman.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Projeyi Başlat

    Adım 0, PROJECT_DIR = videos/<project-name>/ oluşturur ve boş örnek ile bu skill'i kullanarak hyperframes init çalıştırır; hyperframes.json zaten mevcutsa bu adım tamamen atlanır.

  2. 02
    Planla ve Aramaya Karar Ver

    İlk ayrım parçanın bir aramaya gerek duyup duymadığıdır: hayır ise asset_needs: [] olan bir form kategorisi anlamına gelir, evet ise arama sorgularının asset_needs[] içine yayılması anlamına gelir.

  3. 03
    Gerektiğinde Varlıkları Kaynakla

    Adım 2, varlıkları media-use aracılığıyla dondurulmuş, proje-yerel yollara ve bir kayıt defterine çözümler; asset_needs boşsa bu adım atlanır ve doğrudan tasarıma geçilir.

  4. 04
    Elinizdekilere Göre Tasarlayın

    İkinci bir Director geçişi, çözümlenmiş varlıkların etrafında katalog bloklarını ve hyperframes-animation kurallarını ile blueprint'leri seçer, ardından shot plan'ı sonlandırır.

  5. 05
    Yeniden kullanım öncelikli şekilde oluştur

    Builder, npx hyperframes add ile katalog blokları ekler ve bunları yerinde özelleştirir; sadece boşlukları ve asset-fusion olanağını elle yazarak compositions/index.html'i üretir.

  6. 06
    Proof Snapshot'ları Al

    Açılış durumunu, imza hareketi ve son duraklamayı gösteren proof zamanlarını seçin, ardından oluşturulan contact veya snapshot sayfasını inceleyin.

02 Uyumunuzu bulun

motion-graphics Skill Ne Zaman Kullanılır

Claude Code veya Codex'te motion-graphics skill'ini bu türden hareket ve video işi olduğunda kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Metin hareketinin tüm fikir olduğu, çarpıcı bir söz, alıntı veya başlık.
  • Sayaç animasyonu ve halkalı tek bir hero sayısı.
  • Kullanıcının kendi logosundan oluşturulmuş bir logo tanıtımı veya marka birleştirmesi.
  • Bölgeleri vurgulama, yerleri birbirine bağlama veya bir konuma yakınlaştırma gibi coğrafi hareket.
  • Bir arama kaynak içeriği sağladığında animasyonlu tweet, haber makalesi veya manşet işlemeleri.

Sınırları Bilin

  • Daha uzun, seslendirmeli veya çok sahneli işler başka bir yere yönlendirilir.
  • Seslendirme veya canlı çekim içeren ya da kısa format penceresini çok aşan her şey.
  • Aramaya dayalı kategoriler, bir sağlayıcı kullanılamadığında bulunan varlıklarını kaybeder ve varlıksız moda geri döner.
  • Figma'yı ham MCP araçlarıyla yönlendirmek arındırmayı, kaynak izlenebilirliğini ve marka token bağlamayı atlar, bu nedenle bu yol devre dışı bırakılmıştır.

Ne Sağlamalısınız

  • İçeriğin kendisikinetik tipografi, istatistik, grafikler, logo-reveal ve lower-thirds kullanıcı tarafından sağlanan içeriği alır, yani satır, sayı, veri veya logo bir aramadan değil sizden gelir.
  • Varlığın bulunduğu yer buysa bir figma.com URL'siVarlık dışa aktarma, marka token'ları ve Motion'dan GSAP'e çeviri için önce /figma'yı çalıştırın, ardından çıktısından derleme yapın.
  • Varlık kaynaklama için isteğe bağlı anahtarlarGörsel üretimi için GEMINI_API_KEY veya GOOGLE_API_KEY, ayrıca web sayfası, haber, tweet ve varlık birleştirme gerçek varlık aramaları için asset_scout ve arama sağlayıcıları.

03 Skill'in içinde

motion-graphics Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. /hyperframes Üzerinden Yönlendir

    Ana giriş kapısı /hyperframes'tir; bu skill yalnızca kısa, tasarım odaklı, seslendirmesiz bir motion graphic oluşturur, kabaca 10 saniyenin altında, seslendirme veya canlı çekim konusu olmadan.

  2. Bir Soru, Sonra Derleme

    Bu iş akışı tasarım itibarıyla otonomdur: agents/director.md'den en fazla bir netleştirici soru sorulur, ardından ara bir inceleme olmaksızın doğrulamaya kadar derlenir.

  3. Skill'i Yenilemeden Önce Onaylayın

    Güncelleme komutunu çalıştırmadan önce kullanıcıya sorun; güncelse hızlı bir no-op'tur, aksi halde bu skill'i ve bağlı olduğu temel domain skill'lerini yeniler.

  4. Render İşlemi Kullanıcı Onayına Bağlıdır

    Kontroller ve kanıt anlık görüntüleri geçtikten sonra önce kanonik önizleme veya render sorusunu sorun, ve yalnızca açık bir render yanıtından sonra render edin.

  5. Çalışma Alanı Kökünde Asla Init Çalıştırmayın

    Çalışma alanı kökünde asla hyperframes init çalıştırmayın ve PROJECT_DIR içinde asla başka bir hyperframes/ dizini iç içe yerleştirmeyin.

  6. Her Komutu Subshell İçinde Çalıştırın

    Ana akış veya bir subagent tarafından verilmiş olsun, her Bash komutu bir (cd "$PROJECT_DIR" && ...) subshell'idir; çıplak cd kullanımına izin verilmez.

  7. Proje Adını Türetin

    Kullanıcının verdiği dizini kullanın, yoksa amacı <subject>-motion şeklinde biçimlendirilmiş kısa bir kebab-case addan türetin; çalışma alanının temel adını veya bir zaman damgasını kullanmayın.

  8. Bir Kusuru Zamanlamayla Gizlemeyin

    Bir kapı (gate) başarısız olduğunda, kusuru gizlemek için sabit bir süreyi asla değiştirmeyin; bunun yerine kompozisyonu yerinde onarın.

04 İşe koyun

Claude Code veya Codex'e motion-graphics Kurulumu

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza motion-graphics Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

skills/motion-graphics/SKILL.md için genel skills CLI biçimi; repository kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Make a short motion graphic, about 8 seconds, from [our launch tagline] — kinetic type, motion-first, no narration, using the kinetic-type category and the caption blocks. Then close with a logo sting built from [our logo.svg], and render it to MP4.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Başka bir şey yapmadan önce lint çalıştırın ve projeye karşı kontrol edin; her ikisi de PROJECT_DIR'den alt kabuk (subshell) olarak çalışır.
  • İlerlemeden önce oluşturulan contact veya snapshot sayfasını inceleyin.
  • Bir lint, check veya snapshot hatasında, yerinde bir onarım geçişi için repair alt ajanını devreye alın ve başarısız olan kapıyı yeniden çalıştırın.
  • Render çıktısının var olduğunu, boş olmadığını ve amaçlanan süreye sahip olduğunu, ve teslimatın (handoff) artifact, süre, kare kimliği ve kanıt zamanlarını adlandırdığını doğrulayın.

OpenDesign'da motion-graphics'i SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
HeyGen
Skill dosyası
skills/motion-graphics/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 558c11b
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
49.761 GitHub anlık görüntüsü 2026-09-14 tarihinde heygen-com/hyperframes deposunun tamamı için alınmıştır; bu depoda katalogdaki 9 skill bulunur. motion-graphics için kullanım sayısı veya derece değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

  1. motion-graphics — dispatch girişiÖn kapıyı, otonom akışı, proje dizinini ve init'ten render'a kadar olan aşama tablosunu belirtir.
  2. Kategoriler — arama kararına göre ayrılırArama gerektirmeyen form kategorilerini ve döndürülen içeriğe göre seçilen arama odaklı kategorileri listeler.
  3. Ön koşullarPlatform, sistem araçları, macOS GPU ortam değişkeni, isteğe bağlı API anahtarları ve bunların yerel yedekleri.
  4. Akış0'dan 6'ya kadar adımlar: başlatma, planlama, kaynak bulma, tasarlama, oluşturma, doğrulama, onaylama, render.
  5. Devam tablosuHer kısmi proje durumu için hangi adımdan devam edileceği.
  6. Tasarım notları (yürütücüler — çalıştırma bunu okumaz)Varlık öncelikli gerekçe, yeniden kullanım öncelikli eşleme, kategori modülü sözleşmesi, dizin yapısı ve yönlendirici (router) kaydı.
Skill'in Kendi Açıklaması
"Hareketin mesaj olduğu kısa, tasarım odaklı bir hareket grafiği — kinetik tipografi, istatistik sayımı, grafik/veri görselleştirme vuruşu, logo canlandırması / marka kilidi, alt üçte / uyarı / sosyal bindirme, animasyonlu harita (bölgeleri vurgula, yerleri bağla, bir konuma yakınlaş), animasyonlu tweet / haber makalesi / başlık, web sayfası / UI animasyonu (scroll, cursor, uyarılar) veya gerçek bir görüntünün geometrisini grafikle birleştirme. Genellikle 10 saniyenin altında (~30 saniyeye kadar), anlatım veya canlı aksiyon konusu yok; MP4 veya şeffaf bindirme olarak render eder. Daha uzun / anlatımlı / çok sahneli → /general-video. Belirsiz → /hyperframes."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 15.566 karakter uzunluğundadır. GitHub'da dosyanın tamamını okuyun.

Motion Graphics

Gerçek bir Motion ve Video görevinde motion-graphics çalıştırın.

OpenDesign indirin, motion-graphics'i SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için