Kullanım kılavuzuna geç
slideshowyazan HeyGen

Slideshow Skill.

PPT ve slayt desteler için bir Claude Code ve Codex skill'i: fragmanlar, dallanma ve sunum modu ile etkileşimli HyperFrames slayt gösterileri.

  • Presentations
  • HTML slaytları
heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md
--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · Toplamda 33.631 karakter

01 Ne yapar

Claude Code ve Codex'te slideshow Skill 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

Ayrık slaytlar, fragment gösterimleri, dallanma, hotspot navigasyonu ve konuşmacı notlarıyla birlikte yerleşik sunum modu içeren HyperFrames slayt gösterileri — sunumlar, yatırımcı sunumları veya etkileşimli deckler — hazırlar. Ayrıca mevcut sayfaları decklere dönüştürür. Çıktı, hyperframes ile sunulan gezilebilir bir decktir, render edilmiş bir MP4 değildir. Slaytları ve bağlantıları tanımlamak için bir JSON island script bloğu kullanır. Fragmentleri (bir slayt içindeki gösterim durma noktaları), hotspot'lar üzerinden çevrimdışı sıralara dallanmayı ve BroadcastChannel üzerinden senkronize edilen düzenlenebilir notlarla sunum modunu destekler.

Açıkça talep edilmedikçe hazırlamadan önce onay ister. Katı slayt yazım kurallarını uygular: başlıklar tam cümle iddiaları olarak, slayt başına bir fikir, aşağıdan yukarıya pazar büyüklüğü hesaplaması, en az 30pt yazı tipi. Adı belirtilen herhangi bir görseli elle oluşturmadan önce canlı kataloğu arar. Kaynak sayfaları aktarırken, sayfa hareketini slayttan slayta geçişlere dönüştürürken orijinal tasarımı, hareketi, etkileşimleri ve medya davranışını korur.

Neler üretir

  • Sahneler, klipler, GSAP zaman çizelgeleri ve bir JSON island manifest içeren bir HyperFrames kompozisyonu
  • Konuşmacı notlarıyla sunum modu dahil, hyperframes ile sunulan gezilebilir bir deck
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Amacı Doğrulayın

    Kullanıcı açıkça bir slayt gösterisi isterse ilerleyin; aksi halde durun ve onay istemeden önce bir HyperFrames slayt gösterisinin ne anlama geldiğini (çalıştırılabilir deck, navigasyon, sunum modu) açıklayın.

  2. 02
    Zamanlama Özellikleriyle Sahneleri Tanımlayın

    Her slayt bir sahne tarafından desteklenir. Her birini data-composition-id, data-start, data-duration ve data-label ile tanımlayın.

  3. 03
    JSON Island Ekleyin

    Kompozisyon HTML'sine type application/hyperframes-slideshow+json olan tam olarak bir script bloğu ekleyin.

  4. 04
    Slaytları Katı Kurallara Göre Yazın

    Başlıklar tam cümle iddiaları olmalıdır. Slayt başına bir fikir ve bir görsel. Vurguyla başlayın. Sadece aşağıdan yukarıya pazar büyüklüğü hesaplaması. Yazı tipi en az 30pt eşdeğeri.

  5. 05
    Görselleri Oluşturmadan Önce Kataloğu Arayın

    Bir slaytın gerektirdiği her görünüm, efekt, grafik veya geçiş için sade İngilizce ile npx hyperframes catalog --query komutunu çalıştırın ve yazmaya başlamadan önce en üstteki sonuçları okuyun.

02 Uyumunuzu bulun

slideshow Skill'ini Ne Zaman Kullanmalı

Claude Code veya Codex'te iş PPT ve bu tür slayt sunumları olduğunda slideshow skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Ayrık slaytlara sahip sunumlar, yatırımcı sunumları veya etkileşimli sunumlar
  • Fragman gösterimleri, dallanma, sıcak nokta navigasyonu ve sunum modu içeren sunumlar
  • Mevcut bir sayfayı sunuma dönüştürme

Sınırları Bilin

  • Sunum niyetinin belirsiz olduğu istekler — yazmadan önce onay gerektirir
  • İzleyicinin okuması gereken 40px'ten küçük metin

Ne Sağlamalısınız

  • Figma kaynak URL'si (isteğe bağlı)Sunumun içeriği veya senaryo panosu bir figma.com URL'sinden geliyorsa, oluşturmadan önce varlık dışa aktarımı, marka token'ları ve senaryo panosu yeniden inşası için önce /figma komutunu çalıştırın.

03 Skill'in içinde

slayt gösterisi Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

  1. Slayt Başına Bir Fikir ve Bir Görsel

    İkinci bir madde işareti kümesi veya ikinci bir grafik eklemek istiyorsanız, slaydı bölün.

  2. Yazı Tipi En Az 30pt Eşdeğeri

    1920×1080'de bir başlık 72–96px; gövde metni 48px'tir. İzleyicinin okuması gereken hiçbir metin için 40px'in altına inmeyin.

  3. Sadece Aşağıdan Yukarıya Pazar Büyüklüğü Hesaplaması

    Hesaplamayı göstermeden asla 50 milyar dolarlık bir TAM yazmayın. Birim ekonomisinden yukarı doğru inşa edin: hesap sayısı × ACV veya işlem sayısı × komisyon oranı.

  4. Elle Oluşturmadan Önce Kataloğu Arayın

    Bir slaytın gerektirdiği her adlandırılmış görsel için npx hyperframes catalog --query komutunu çalıştırın ve yazmaya başlamadan önce en üstteki sonuçları okuyun. Gerçek bir blok, basitleştirilmiş bir yaklaşımdan daha iyidir.

  5. Slayt Gösterilerini MP4'e Render Etmeyin

    Bir sunum, ana kök kompozisyonu olmadan birkaç üst düzey sahne kompozisyonu olarak yazıldığında, render işlemi yalnızca ilk kompozisyonu çözer ve sessizce kesilmiş bir MP4 üretir.

  6. Fragman Zamanları composition-timeline'da Mutlak Konumlardır

    Fragment zamanları, sahnenin başlangıcına göre ofset değil, data-start ile aynı koordinat alanını kullanır. Bu zamanlar, slaytın start, end aralığının içinde (dahil) olmalıdır.

  7. Taşıma Sırasında Kaynak Sayfa Sadakatini Koruyun

    Orijinal sayfanın görsel tasarımını, hareket dilini, etkileşimli davranışını, medya davranışını ve sunum olanaklarını mümkün olduğunca yakın şekilde koruyun.

04 İşe koyun

Claude Code veya Codex'e slideshow'u Yükleyin

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 slideshow 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 slideshow

skills/slideshow/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Beceriye İlk PPT ve Slayt Sunumu Görevini Verin

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

Starter prompt
Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

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:

  • Lint 0 hata bildirene ve doğrulama çalışma zamanı hatası bildirmeyene kadar dosyayı düzeltin ve yeniden çalıştırın
  • Her slide.sceneId değerinin data-composition-id ile mevcut bir sahneye çözümlendiğini doğrulayın
  • Her hotspot.target değerinin tanımlı bir slideSequence id'sine referans verdiğini doğrulayın
  • Fragment zamanlarının her slaytın start, end aralığının içinde olduğunu doğrulayın

OpenDesign'da slideshow'u SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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/slideshow/SKILL.md Doğrulama sırasında kaydedilen içerik sağlama toplamı; commit 558c11b
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
49.761 Bu katalogda 9 skill içeren heygen-com/hyperframes deposunun tamamı için 2026-09-14'te alınan GitHub anlık görüntüsü. slideshow 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. Slideshow oluşturma sözleşmesiBir HyperFrames slideshow, slaytları ve bağlantıları bildiren bir JSON adası içeren normal bir kompozisyondur
  2. Çıktı — gezilebilir bir sunum, doğrusal bir MP4 değilHyperframes mevcutken sunun; MP4'e render etmeyin, çünkü bu ilk kompozisyona kısaltır
  3. Amaç onayıKullanıcı açıkça bir slideshow istemediyse oluşturmadan önce onaylayın; yönlendirilmiş amaç önceden onaylanmıştır
  4. İki parçadata-composition-id ve zamanlama ile tanımlanan sahneler; slides ve slideSequences dizilerini içeren JSON adası
  5. ŞemaSlideshowManifest, SlideRef, SlideHotspot ve SlideSequence alan tanımları ve gereksinimleri
  6. Slayt yazım kurallarıBaşlıklar tam cümleler olarak, slayt başına bir fikir, aşağıdan yukarıya boyutlandırma, 30pt minimum, önce katalog araması
  7. Kaynak sayfaları taşımaOrijinal tasarımı, hareketi, etkileşimleri, medyayı koruyun; sayfa hareketini slayt geçişlerine çevirin; medya olaylarını bağlayın
  8. Fragmentler: bir slayt içinde durma noktalarını açığa çıkarmaSlayt aralığı içinde mutlak zaman çizelgesi zamanları; denetleyici Next'te her fragmente atlar; aralarda oynatma yok
  9. Dallanma: hotspot'lar ve slayt dizileriDal slaytları ana çizgiden hariç tutulur; hotspot tıklaması gezinti yığınına ekler; geri, üst öğeye döner
  10. Uygulamalı örnek: fragment ve dal içeren 3 slaytlı sunumSahneler, JSON adası, GSAP zaman çizelgesi ve bir dal dizisi içeren tam HTML iskeleti
  11. Sarmalayıcı bileşenhyperframes-slideshow içine sarın; gezinme, klavye, dokunma, hotspot sağlar; Present, izleyici sekmesi açar; genel sessize alma
  12. Slideshow'u bağımsız çalıştırma (geçici)Motor barındırmalı önizleme yayınlanana kadar bağımsız demolar geçici çözümler gerektirir; references/standalone-harness.md'ye bakın
Skill'in Kendi Açıklaması
"Bir HyperFrames slayt gösterisi oluşturun — ayrı slaytlar, parça geçişleri, dallanma, tıklama noktası navigasyonu ve konuşmacı notlarıyla yerleşik sunucu moduyla bir sunum, tanıtım sunumu veya etkileşimli sunum; ayrıca mevcut bir sayfayı sunuma dönüştürür. Çıktı, render edilmiş bir MP4 değil, gezinilebilir bir sunumdur. Kullanıcı açıkça bir slayt gösterisi istemediyse, oluşturmadan önce onaylayın. Belirsizlik → /hyperframes."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 33.631 karakter. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

slideshow Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Fragmentler nedir ve nasıl çalışır?

Bir fragment, denetleyicinin bir açığa çıkma durumunu tuttuğu, bir slaytın start, end aralığı içindeki saniye cinsinden mutlak kompozisyon zaman çizelgesi zamanıdır.

Oynatıcı, fragmentlere sahip bir slayta fragments[0]'dan girer, ardından Next'te sonraki her fragmente atlar. Son fragmentten sonra, Next bir sonraki slayta geçer. Gezinme, oynatma odaklı değil, atlama odaklıdır.

Slideshow

Gerçek bir PPT ve Slayt Desteleri Görevi üzerinde slideshow çalıştırın.

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

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

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