83.3K+İndir
Kullanım kılavuzuna geç
frontend-slidesyazan Zara Zhang

Frontend Slides Skill.

Claude Code ve Codex için PPT ve slayt sunum skill'i: sıfırdan veya PowerPoint dosyalarından dönüştürülerek animasyon açısından zengin HTML sunumlar oluşturur.

  • Presentations
  • HTML slaytları
OpenDesign İndirKullanım kılavuzunu görüntüle
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okunmuştur · toplamda 28.057 karakter

01 Ne yapar

frontend-slides Skill'in Claude Code ve Codex İçinde Yaptığı

Ö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

Frontend Slides, sıfırdan oluşturulan veya bir .pptx dosyasından dönüştürülen, tamamen tarayıcıda çalışan, bağımlılıksız ve animasyon açısından zengin HTML sunumlar oluşturur. Tasarımcı olmayanlar için yazılmıştır; onlar estetiklerini soyut açıklamalar arasından seçerek değil, bakarak keşfederler: üç tekli slayt stil önizlemesi (güvenli bir hazır ayar, en az bir cesur şablon ve bir joker seçenek) üretir ve kullanıcının bunlara görsel olarak tepki vermesini sağlar.

Bir sunumun ne kadar metin taşıyacağı, düşük yoğunluklu sunum odaklı ile yüksek yoğunluklu okuma odaklı arasındaki bir yoğunluk seçimiyle belirlenir. Her deste, görünüme eşit şekilde ölçeklenen sabit bir 1920x1080 sahne içinde oluşturulur ve teslimat canlı bir Vercel URL'si veya bir PDF dışa aktarımıyla sona erebilir.

Neler üretir

  • Tüm stil ve betikleri satır içi olan, kendi kendine yeten tek bir HTML sunumu.
  • Teslimat sırasında silinen üç geçici stil önizleme dosyası (style-a.html, style-b.html, style-c.html).
  • İsteğe bağlı olarak, deck'in metin, Slack veya e-posta ile paylaşılması için Vercel üzerinde canlı bir URL, herhangi bir cihazdan görüntülenebilir.
  • İsteğe bağlı olarak, e-posta, Slack veya baskı için, her slaytın ekran görüntüsü alınıp birleştirilmesiyle üretilen bir PDF.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Modu Tespit Et

    Skill önce işin sıfırdan oluşturulan yeni bir deck mi, bir .pptx dönüşümü mü, yoksa mevcut bir HTML sunumun geliştirilmesi mi olduğuna karar verir ve buna uygun aşama yolunu uygular.

  2. 02
    Keşif Sorularını Tek Geçişte Sor

    Amaç, uzunluk, içerik hazırlığı ve yoğunluk birlikte sorulur; ortamın yerel bir yapılandırılmış soru arayüzü varsa bu kullanılır, böylece kullanıcı her şeyi tek seferde doldurur.

  3. 03
    Üç Stil Önizlemesi Oluştur

    Skill, kullanıcıdan bir stil adı istemek yerine üç tekli slayt başlık önizlemesi render eder, bunları otomatik olarak açar ve hangisini tercih ettiğini (veya öğeleri karıştırmak isteyip istemediğini) sorar.

  4. 04
    Tek Dosyalık Deck'i Oluştur

    Tam sunum, yoğunluk seçimini ve seçilen stil reçetesini kullanarak, zorunlu viewport-base.css'in tamamını ve bölüm bazlı yorumları satır içine alan tek bir HTML dosyası olarak yazılır.

  5. 05
    Bir PowerPoint Dosyasını Dönüştür

    Bir .pptx kaynağı için birlikte gelen Python betiği içeriği çıkarır, kullanıcı başlıkları, özetleri ve görsel sayılarını onaylar ve ancak bundan sonra stil keşfi ve HTML oluşturma gerçekleşir.

  6. 06
    Önce Teslim Et, Sonra Paylaşımı Öner

    Önizleme dosyaları silinir, sunum tarayıcıda açılır ve kullanıcıya dağıtım veya PDF dışa aktarma önerilmeden önce gezinme, CSS değişkenleri, yazı tipleri, .reveal sınıfı ve satır içi düzenleme hakkında bilgi verilir.

02 Uyumunuzu bulun

frontend-slides Skill Ne Zaman Kullanılır

Bu tür PPT ve slayt desteleri işlerinde Claude Code veya Codex'te frontend-slides skill'ini kullanın. Aşağıdaki uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Bir konuşma veya sunum için slayt hazırlatmak isteyen veya mevcut bir PPT/PPTX'i web slaytlarına dönüştürmek isteyen herkes.
  • Görsel bir tercih ifade edemeyen ama iki veya üç oluşturulmuş seçeneğe tepki verebilen tasarımcı olmayanlar.
  • Yeniden yazmak yerine yeniden stillendirilmesi gereken bir PowerPoint dosyasından başlayan biri.
  • İçerik eklemelerinin sabit aşama sığdırmasını bozma riski taşıdığı, mevcut bir HTML sunumunu iyileştirmek.
  • Telefonlarda görüntülenecek sunumlar; siyah kenarlıklı 16:9 sahne kabul edilebilir ama telefona özel bir düzen istenmiyor.

Sınırları Bilin

  • Görüntüleme cihazına göre düzenini uyarlaması gereken sunumlar; slayt içeriği bir ekrana sığacak şekilde asla yeniden düzenlenmez.
  • Bir PDF dışa aktarımının hareket veya etkileşimlilik taşımasını beklemek; bu statik bir anlık görüntüdür.
  • Slaytları .slide dışında bir sınıf adı kullanan, dışarıda oluşturulmuş HTML'i dışa aktarmak; bu durum dışa aktarma betiğinin hiçbir şey bulamamasına neden olur.

Ne Sağlamalısınız

  • AmaçEtkinlik, ön ayar eşleştirmesini ve joker tasarımı yönlendirir; sunulan seçenekler bir yatırım sunumu, öğretim eğitimi, konferans konuşması veya kurum içi sunumdur.
  • UzunlukKısa, orta veya uzun olarak bantlanmış kabaca slayt sayısı, sunumun kaç bölüm ve içerik slaytı taşıyabileceğini belirler.
  • Mevcut içerikKullanıcı tüm içeriğin hazır olup olmadığını, sadece kaba notlar mı yoksa sadece bir konu mu olduğunu belirtir ve malzemeyi paylaşır, böylece sunum bundan inşa edilir.
  • Yoğunluk moduSunucu odaklı düşük yoğunluk ile okuma odaklı yüksek yoğunluk arasında baştan yapılan tek bir seçim, hatırlanır ve slayt sayısına, tip ölçeğine ve düzene baştan sona uygulanır.
  • Görsel klasörü (isteğe bağlı)Görseller kullanılabilirlik ve baskın renkler açısından tek tek değerlendirilir ve taslak, önce planlanmak yerine bunların etrafında birlikte tasarlanır.

03 Skill'in içinde

frontend-slides 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. Sıfır Bağımlılık, Tek Dosya

    Sunumlar satır içi CSS ve JS içeren tek HTML dosyalarıdır, bu nedenle skill npm, bir paketleyici veya herhangi bir derleme aracına başvurmamalıdır.

  2. Cihaz İçin Asla Yeniden Düzenleme

    1920x1080 sahne bir bütün olarak ölçeklenir ve telefonlarda siyah kenarlıklı görünebilir; slayt içeriğini yeniden düzenlemek için duyarlı kesme noktaları kullanılmamalıdır.

  3. Slaytları Display Değil, Visibility ile Değiştirin

    Slayt değişimi, visibility, opacity ve pointer-events ile .active / .visible kullanır; display: none ve display: block yasaktır çünkü sonraki düzen sınıfları bunları geçersiz kılıp tüm slaytları aynı anda ortaya çıkarabilir.

  4. CSS Fonksiyonlarını Calc ile Tersine Çevirin

    clamp(), min() veya max() ifadesinin doğrudan negatiflenmesi sessizce göz ardı edilir, bu nedenle skill bunu calc(-1 * clamp(...)) şeklinde sarmalamalıdır.

  5. Fontshare veya Google Fonts'tan yazı tipleri

    Sistem yazı tipleri hiçbir zaman kullanılmaz ve estetik bölümü, kaçınılması gereken aşırı kullanılmış aileler olarak Inter, Roboto ve Arial'ı belirtir.

  6. Slaytta Şablon Adı Yok

    Şablon ve slug adları yalnızca kullanıcıya gönderilen mesajda yer alır; önizlemede veya slaytın kendisinde, diğer dahili iş akışı metinleriyle birlikte hiçbir zaman görüntülenmez.

  7. Küçültmek Yerine Bölmek

    Kaydırma, taşma, çakışan paneller ve rahat okuma boyutunun altındaki metin temel ihlallerdir; yoğunluk sınırının üzerindeki içerik daha fazla slayda dönüşür.

  8. design.md'den Önce preview.md Okunur

    Cesur şablonlar seçim indeksinden ön elenerek preview.md düzeyinde okunur; bir şablonun tam design.md dosyası yalnızca kullanıcı onu seçtikten sonra Aşama 3'te yüklenir.

04 İşe koyun

frontend-slides'ı 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.

frontend-slides'ı 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/zarazhangrui/frontend-slides --skill frontend-slides

SKILL.md için genel skills CLI formu; 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
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

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:

  • Herhangi bir değişiklikten sonra, sahnenin hâlâ 16:9 olduğunu, hiçbir metnin kartından taşmadığını, hiçbir panelin çakışmadığını ve 1280x720 ile bir telefon görünümünde ekran görüntülerinin doğru göründüğünü doğrulayın.
  • Taşma ve çakışmayı koddan değil, render edilmiş tarayıcı ekran görüntülerinden değerlendirin; çünkü ızgara panelleri görsel olarak birbirini örtebilir.
  • Her önizlemeyi açmadan önce görünür metnini okuyun ve herhangi bir dahili meta veri slayda sızmışsa revize edin.
  • Dağıtımdan sonra canlı URL'yi açın ve referans verilen her görselin gerçekten yüklendiğini doğrulayın.

OpenDesign'da frontend-slides paket olarak gelir: Plugins → Skills, ü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
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Dal main
Skill dosyası
SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 9906a34
License
MIT LICENSE dosyasından.
Repository yıldızları
29.255 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm zarazhangrui/frontend-slides deposu için alınmıştır. frontend-slides için bir değerlendirme veya kullanım sayısı 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 paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Temel İlkelerSıfır bağımlılık, göstermeden anlatmayan önizlemeler, ayırt edici tasarım, kademeli bilgi açıklama ve pazarlık konusu olmayan sabit 16:9 sahne.
  2. Tasarım EstetiğiGenel yapay zeka slayt tipografisi ve paletlerinden kaçınmayı hedefleyen tipografi, renk, hareket ve arka plan rehberliği.
  3. Sabit Sahne KurallarıCSS değişmezleri: 1920x1080 tuval, .active/.visible geçişi, sahne dışında sadece clamp, azaltılmış hareket desteği.
  4. Aşama 0: Modu Belirlemeİsteği yeni deste, PPT dönüştürme veya iyileştirme olarak sınıflandırır ve mevcut dosyalar için değişiklik kuralları içerir.
  5. Aşama 1: İçerik Keşfi (Yeni Sunumlar)Amaç, uzunluk, içerik hazırlığı ve yoğunluğu birlikte sorar, ardından sağlanan varsa görsel klasörünü değerlendirir.
  6. Aşama 2: Stil KeşfiSıkı önizleme özgünlüğü kuralları altında güvenli ön ayar, cesur şablon ve joker seçenekten üç önizleme oluşturur.
  7. Aşama 3: Sunum OluşturmaYoğunluk seçimini ve seçilen stil tarifini uygular, destekleyici dosyaları okur, tek bir sabit sahne HTML dosyası çıkarır.
  8. Aşama 4: PPT Dönüştürme.pptx içeriğini bir Python betiğiyle çıkarır, kullanıcıyla doğrular, ardından seçilen stile dönüştürür.
  9. Aşama 5: TeslimatÖnizlemeleri siler, desteyi açar ve dosya ayrıntılarını, navigasyonu, özelleştirme noktalarını ve satır içi düzenlemeyi özetler.
  10. Aşama 6: Paylaşım ve Dışa Aktarma (Seçenek
Skill'in Kendi Açıklaması
"Sıfırdan veya PowerPoint dosyalarını dönüştürerek animasyon açısından zengin, etkileyici HTML sunumlar oluşturun. Kullanıcı bir sunum oluşturmak, PPT/PPTX'i web'e dönüştürmek veya bir konuşma/sunum için slaytlar oluşturmak istediğinde kullanın. Tasarımcı olmayanlara soyut seçimler yerine görsel keşif yoluyla estetiklerini keşfetmede yardımcı olur."

SKILL.md'den ön madde açıklaması. Tam dosya yaklaşık 28.057 karakterdir. Tam dosyayı GitHub'da okuyun.

Frontend Slides

frontend-slides'ı gerçek bir PPT ve slayt destesi görevinde çalıştırın.

frontend-slides skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'de skill'i seçin, yukarıdaki prompt'u 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/zarazhangrui/frontend-slides --skill frontend-slides