98.8K+İndir
Kullanım kılavuzuna geç
hyperframes-creativeyazan HeyGen

HyperFrames Creative Skill.

Claude Code ve Codex için hareket ve video skill'i: HyperFrames videoları için yaratıcı yönlendirme: palet, tipografi, kompozisyon, seslendirme, ritim.

  • Motion & Video
  • Video
OpenDesign İndirKullanım kılavuzunu görüntüle
heygen-com/hyperframes · skills/hyperframes-creative/SKILL.mdSKILL.md
--- name: hyperframes-creative description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`. --- ## Workflow ## Routing ## Scripts ## Boundaries
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 6.317 karakter

01 Ne yapar

hyperframes-creative Skill'inin Claude Code ve Codex'te Yaptığı İşler

Ö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

HyperFrames videoları için, hyperframes-core'dan gelen teknik sözleşme uygulandıktan sonra kullanılan, animasyon dışı yaratıcı yönlendirme. Tasarım spesifikasyonu ayrıştırmasını (marka gerçeği olarak frontmatter içeren frame.md / design.md), paletleri, tipografiyi, seslendirmeyi, beat planlamasını, ses-reaktif görselleri, kompozisyon desenlerini ve marka kararlarını ele alır.

Önemsiz olmayan işler için iki referans web içgüdülerinin önüne geçer: house-style.md, promptların nasıl yorumlanacağını ve arka plan/ön plan katman tarifleriyle gerçek içeriğin nasıl üretileceğini açıklar; video-composition.md ise boş web sayfası düzenlerinden kaçınmak için video-ortamı ölçeğini, derinliğini ve ön plan detayını tanımlar. Atomik hareket desenleri, sahne blueprint'leri, geçişler ve CSS işaretçi efektleri için bunun yerine hyperframes-animation kullanın.

Neler üretir

  • Video-ortamı ölçeği, derinlik desenleri ve marka tutarlı renkler ve tipografi kullanan HTML kompozisyonu
  • Render edilmiş frame erişilebilirliğini inceleyen contrast-report.mjs'den kontrast raporu
  • Ses-reaktif kompozisyonlar için extract-audio-data.py'den ses bantları veri dosyası
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Önce Tasarım Spesifikasyonunu Okuyun

    Bir projede frame.md, design.md veya DESIGN.md varsa, önce onu okuyun ve renkler, fontlar, boşluklar, ton ve kısıtlamalar için frontmatter token'larını marka gerçeği olarak ele alın.

  2. 02
    Bir Görsel Yön Rotası Seçin

    Eğer bir tasarım spesifikasyonu yoksa, frame-presets/ içinden hazır bir frame-preset benimseyin, visual-styles.md'den adlandırılmış bir stil seçin, house-style.md'den hızlı varsayılanları kullanın veya design-picker.md üzerinden etkileşimli bir seçim çalıştırın.

  3. 03
    HTML Yazmadan Önce Beat'leri Planlayın

    Çok sahneli çalışmalarda, HTML yazmadan önce ritim ve zamanlamayı planlamak için beat-direction.md'ye başvurun. Sahne geçişleri için hyperframes-animation/transitions/'a geçin.

  4. 04
    Hareket Korkuluklarını Uygulayın

    Hareket yoğun çalışmalarda önce üst düzey korkuluklar için motion-principles.md'yi okuyun, ardından atomik hareket kuralları için hyperframes-animation'a geçin.

02 Uyumunuzu bulun

hyperframes-creative Skill Ne Zaman Kullanılır

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

İyi Uyum

  • Marka yönünü tanımlayan frontmatter token'larına sahip frame.md veya design.md dosyaları için tasarım spesifikasyonu işleme
  • HyperFrames videoları için palet seçimi, tipografi seçimleri ve marka veya stil kararları
  • Resim içinde resim, konu arkasında metin, başlık kartları ve slayt gösterileri gibi kompozisyon desenleri
  • Hareketi eşlemek için önceden hesaplanmış ses bantlarını kullanan sese duyarlı görseller

Sınırları Bilin

  • Bunun yerine hyperframes-animation'a ait olan atomik hareket desenleri
  • Sahne taslakları, geçişler ve CSS marker efektleri—bunlar için hyperframes-animation kullanın

Ne Sağlamalısınız

  • Görsel yön için kullanıcı promptuBir tasarım spesifikasyonu yoksa, visual-styles.md veya prompt-expansion.md üzerinden yönlendirmek için adlandırılmış bir stil, mod veya açık uçlu bir prompt talebi sağlayın.

03 Skill'in içinde

hyperframes-creative 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. Önce house-style.md ve video-composition.md'yi Okuyun

    Önemsiz olmayan her kompozisyon için, renkleri seçmeden veya HTML yazmadan önce references/house-style.md ve references/video-composition.md dosyalarını okuyun.

  2. Frontmatter Token'ları Marka Gerçeğidir

    Tasarım spesifikasyonlarında, frontmatter'ı normatif, düz metni ise bağlam olarak ele alın. Renkler, yazı tipleri, boşluk, ton ve kısıtlamalar için frontmatter token'ları diğer varsayılanları geçersiz kılar.

  3. hyperframes-core Teknik Kurallarını Asla Geçersiz Kılmayın

    Temel yapıyı ve kısıtlamaları tanımlayan hyperframes-core tarafından oluşturulan teknik sözleşmeyi geçersiz kılmayın.

  4. İstenmeyen İçerik Genişletmesi Yok

    Talep açıkça istemedikçe veya önce kullanıcıya genişletmeyi önermedikçe ekstra sahne, anlatım, müzik, altyazı veya geçiş eklemeyin.

  5. Recipe Referanslarını Göreve Özgü Tutun

    Basit düzenlemeler için her referans dosyasını okumayın. Yalnızca elinizdeki göreve ilişkin referansları yükleyin.

  6. Tasarım Spesifikasyonu Öncelik Sırası

    Hangi tasarım spesifikasyonunun okunacağına karar verirken şu önceliği izleyin: önce frame.md, sonra design.md, sonra DESIGN.md.

  7. Betikleri Repo Kök Dizininden Çalıştırın

    Tüm betikleri, depo kök dizininden açık yollarla çalıştırın, örneğin: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.

  8. Minimal İşler İçin Tasarım Sistemi Gerekmez

    Minimal bir teknik kompozisyon için tam bir tasarım sistemi gerektirmeyin. Skill, görevin karmaşıklığına göre ölçeklenir.

04 İşe koyun

hyperframes-creative'i Claude Code veya Codex'e Yükleyin

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

hyperframes-creative'i Claude Code, Codex veya Ajanınıza 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 hyperframes-creative

skills/hyperframes-creative/SKILL.md için genel skills CLI formu; depo 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
Create a 45-second product announcement video for [product name] using a cyberpunk visual style with fast pacing and high-contrast palette. Plan the beats to open with a hook about [customer pain point], then reveal three key features with audio-reactive text reveals. Use the brutalist frame-preset from frame-presets/ and generate voice-over narration that matches the technical tone from our existing design.md.

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:

  • design-adherence.md'ye göre renkler, tipografi, köşeler, boşluk ve derinlik açısından tasarıma uyumu doğrulayın
  • Web sayfası düzenlerinden kaçınmak için video-composition.md'nin yoğunluk ve ölçek kurallarına uyulduğunu kontrol edin

OpenDesign'da hyperframes-creative'i SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, sonra üst çubukta seçin.

OpenDesign İndirHızlı başlangıcı okuyun

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
Repository
github.com/heygen-com/hyperframes Dal main
Skill dosyası
skills/hyperframes-creative/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 tüm heygen-com/hyperframes deposu için alındı; bu depoda katalogda yer alan 9 beceri bulunuyor. hyperframes-creative için bir değerlendirme veya kullanım sayısı değil.
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. HyperFrames Creativehyperframes-core teknik sözleşmesinden sonra kullanılmak üzere marka, tempo, stil, anlatım ve kompozisyon yönlendirmesi
  2. WorkflowDört adımlı süreç: tasarım spesifikasyonunu oku, görsel rota seç, sahneleri planla, hareket kurallarını uygula
  3. YönlendirmePaletler, kompozisyon, anlatım, sese duyarlı efektler ve stil ön ayarları için konuları referans dosyalarla eşleştiren tablo
  4. Betiklercontrast-report.mjs, extract-audio-data.py, package-loader.mjs; depo kök dizininden açık yollarla çalıştırın
  5. SınırlarTemel kuralları geçersiz kılmayın, tasarım sistemleri gerektirmeyin, istenmeyen içerik eklemeyin veya her referansı okumayın
Skill'in Kendi Açıklaması
"HyperFrames videoları için animasyon dışı yaratıcı yön. Tasarım özellikleri (frame.md / design.md) işleme, paletler, tipografi, anlatım, ritim planlaması, ses-reaktif görseller, kompozisyon kalıpları ve marka / stil kararları için kullanın. Atomik hareket kalıpları ve sahne planları için `hyperframes-animation` kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 6.317 karakter. Dosyanın tamamını GitHub'da okuyun.

HyperFrames Creative

hyperframes-creative becerisini gerçek bir Hareket ve Video Görevi üzerinde çalıştırın.

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

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

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