frontend-slides: kodlama ajanıyla web slaytları oluşturun
frontend-slides, kodlama ajanları için en çok star alan açık kaynaklı PPT skill'idir; slaytları, tarayıcıda doğrudan sunabileceğiniz sade ve modern web sayfaları olarak inşa eder. Bu rehber; ne olduğunu, nasıl kurulup kullanılacağını, gerçekten neyi iyi yaptığını (ve sınırlarını), diğer Claude PPT skill'leriyle nasıl kıyaslandığını ve tek bir skill yetmez hâle geldiğinde bir Agent-Native Design Workspace'in nereden devreye girdiğini anlatıyor.
Bir sunum istiyorsanız ve zaten bir terminalde yaşıyorsanız, frontend-slides ona kavuşmanın en temiz yollarından biridir. Bu bir kodlama ajanı skill'idir: bir sunum uygulaması açmak yerine, sunumu zaten kullandığınız ajana anlatırsınız ve frontend-slides fikrinizi web sayfaları olarak inşa edilmiş slaytlara dönüştürür — tarayıcıdan doğrudan sunduğunuz gerçek HTML ve CSS.
Ayrıca türünün en popüler seçeneğidir. 25k GitHub yıldızı ve MIT lisansıyla frontend-slides, büyüyen Claude PPT skill rafının en üstünde yer alır. Bu rehber; onun ne olduğunu, nasıl kurulup yönlendirileceğini, neyi iyi yaptığını ve nerede durduğunu, bu alandaki diğer skill'lerle nasıl kıyaslandığını ve bir sunum sürekli bir çalışmaya dönüştüğünde tam bir çalışma alanının nereye oturduğunu kapsar.
frontend-slides nedir
frontend-slides bir skill'dir: kodlama ajanınızın (Claude Code, Codex, Cursor ve diğerleri) tek bir işi iyi yapmak için bir görevin ortasında yüklediği, paketlenmiş bir talimatlar dizisi. Bu durumda o iş, bir sunum oluşturmaktır. Ajanınızın halihazırda sahip olduğu frontend becerilerine yaslanır ve onları slaytlara yöneltir: sunumu sade bir dille anlatırsınız, ajan da tarayıcıda çevirdiğiniz, slayt başına bir tane, temiz ve modern web sayfaları yazar.
Çıktı tasarımı gereği web-yerlidir. Her slayt HTML ve CSS olduğundan tam denetim elde edersiniz — özel yerleşimler, gerçek tipografi, gradyanlar, geçişler, gömülü grafikler, tarayıcının çizebildiği her şey. Zara Zhang tarafından geliştirilip sürdürülüyor, MIT altında açık kaynak ve bu skill'lerin geri kalanı gibi kendi model anahtarını getir yöntemiyle çalışıyor: API anahtarını siz verirsiniz, ustalığı skill sağlar.
Nasıl çalışır
Döngü kısa ve büyük ölçüde sohbete dayalıdır:
- Skill'i kurun — frontend-slides'ı kodlama ajanınızın skill dizinine klonlayın veya ekleyin (depo, kurulum adımlarını içerir). Kendi model anahtarınızı getirin.
- Sunumu anlatın — ajana konuyu, hedef kitleyi, tonu ve yaklaşık slayt sayısını verin. Brief ne kadar belirginse, kurduğu yapı o kadar iyi olur.
- İnşa etmesine izin verin — ajan slaytları web sayfaları olarak üretir ve sunmak için tarayıcıda açar.
- Yineleyin — sade bir dille değişiklik isteyin ("girişi sıkılaştır", "3. slaytı iki sütunlu bir karşılaştırmaya çevir", "daha sıcak bir palet") ve yeniden render alın. Yalnızca CSS olduğu için, istediğiniz her şeyi doğrudan elle de düzenleyebilirsiniz.
- Sunun veya dışa aktarın — tarayıcıdan sunun ya da paylaşmak için PDF'e dışa aktarın.
Neyi iyi yapar (ve dürüst sınırları)
frontend-slides, web-yerli slaytlar ve görünümleri üzerinde tam denetim istediğinizde en iyi halindedir. HTML ve CSS ile rahatsanız, sizinle tasarım arasına hiçbir şey girmez — herhangi bir slaytı açıp elle değiştirebilir, tüm sunumu git ile sürümleyebilir ve bileşenleri sunumlar arasında yeniden kullanabilirsiniz. Geliştiriciler için bütün cazibe budur: özel bir dosya gibi değil, bir kod tabanı gibi davranan slaytlar.
Dürüst sınırlar, bu gücün diğer yüzüdür. Çıktı bir web sayfasıdır, bir .pptx değil — dolayısıyla kuruluşunuzun yerel şekiller içeren düzenlenebilir bir PowerPoint'e ihtiyacı varsa, bu o araç değildir (buna yönelik skill'ler için aşağıdaki karşılaştırma tablosuna bakın). Bir de konfor eşiği vardır: HTML ve CSS'ten uzaklaştıkça "tam denetim" kendini o kadar az satar. Ve herhangi bir tekil skill gibi, frontend-slides bir sunum yapar — markanızı projeler arasında taşımaz, bir tasarım sistemini eşzamanlı tutmaz. Keskin, tek amaçlı bir araçtır ve öyle olduğu konusunda dürüsttür.
frontend-slides diğer Claude PPT skill'lerine karşı
frontend-slides bu kategorideki tek skill değil ve doğru seçim, ihtiyacınız olan çıktıya ve birlikte yaşayabileceğiniz lisansa bağlıdır.
| Araç | Çıktı | Lisans | Şunun için ideal |
|---|---|---|---|
| frontend-slides | HTML web slaytları | MIT | Web-yerli sunumlar, tam CSS denetimi |
| guizang-ppt-skill | HTML (editoryal) | AGPL-3.0 | Özenle işlenmiş, tasarlanmış görünen sunumlar |
| dashiAI | Düzenlenebilir sunum | AGPL-3.0 | Geliştirici olmayanın düzenleyebileceği çıktı |
| Open Design | Markaya uygun düzenlenebilir sunumlar + şablonlar | Apache-2.0 | Bir tasarım sistemine bağlı, çalışma alanı içindeki sunumlar |
Cilalı editoryal görünümü istiyorsanız, kıyaslanacak kardeş guizang-ppt-skill'dir; teslim edeceğiniz iş geliştirici olmayan biri tarafından düzenlenebilir kalmalıysa, dashiAI tam bunun için yapılmıştır. frontend-slides, sunumun tamamen size ait web sayfaları olmasını istediğinizde kazanır.
Open Design nereye oturur
frontend-slides, terminalinizdeki bir sunum için harika, tek amaçlı bir skill'dir. Ama bir skill bir betiktir — markanızı projeler arasında taşımaz, çıktıyı gerçek bir çalışma alanında düzenlenebilir tutmaz ve bir sunumu tasarım işinizin geri kalanıyla eşgüdümlemez.
Open Design, skill'in bir üstündeki katmandır: zaten kullandığınız kodlama ajanının dışında duran, açık kaynaklı (Apache-2.0), yerel-öncelikli, kendi anahtarını getir yöntemiyle çalışan bir Agent-Native Design Workspace'tir. Bir sunum anlatırsınız; ajan onu bir tasarım sistemine göre düzenlenebilir biçimde üretir, böylece her seferinde boş bir sayfadan başlamak yerine markaya uygun kalır — ve Open Design, kendi birinci taraf HTML sunum şablonlarını eklenti kütüphanesinde sunar. Bu, frontend-slides ile aynı fikirdir, ama bir evi olan hali: sizin dosyalarınız, sizin markanız, düzenlenebilir ve kalıcı olarak sizin. Bugün bir kodlama ajanıyla slayt yapıyorsanız, Open Design'ın Claude Code ile nasıl çalıştığına bakın.
Komut satırından hızlı, web-yerli bir sunum istediğinizde frontend-slides'ı kullanın. Sunum markaya uygun, düzenlenebilir ve daha büyük bir tasarım çalışmasının parçası olmalıysa bir çalışma alanına uzanın.
SSS
frontend-slides ücretsiz mi? Evet. MIT lisansı altında açık kaynak ve kullanımı ücretsizdir — kendi model API anahtarınızı siz sağlarsınız. MIT hoşgörülü bir lisanstır, dolayısıyla ticari kullanıma da dostudur.
frontend-slides'ı nasıl kullanırım? Skill'i kodlama ajanınızın skill dizinine kurun, ardından sunumu (konu, hedef kitle, uzunluk) anlatın. Ajan slaytları web sayfaları olarak inşa eder; sade bir dille yineleyin ve tarayıcıdan sunun.
frontend-slides PowerPoint'e dışa aktarır mı? Hayır — tarayıcıda sunduğunuz web slaytları (HTML/CSS) üretir ve paylaşmak için PDF'e dışa aktarabilirsiniz. Yerel şekiller içeren düzenlenebilir bir .pptx'e ihtiyacınız varsa, frontend-slides yerine o çıktı için yapılmış bir skill'e bakın.
frontend-slides en çok kime uygun? Web-yerli slaytlar ve tam CSS denetimi isteyen geliştiricilere — web platformunda rahatça yaşayan, bir sunum uygulaması açmaktansa sunumu git ile sürümlemeyi yeğleyen kişilere.
Skill mi tasarım çalışma alanı mı — hangisini kullanmalıyım? frontend-slides gibi bir skill, hızlı ve tek seferlik bir sunum için idealdir. Open Design gibi bir Agent-Native Design Workspace ise, tasarım işinizin geri kalanıyla birlikte yaşayan markaya uygun, düzenlenebilir sunumlara ihtiyaç duyduğunuzda daha iyi oturur.
Özet
frontend-slides, bir kodlama ajanıyla slayt yapmanın en çok yıldız alan yoludur ve bunu hak eder: web-yerli sunumlar, tam CSS denetimi, MIT lisansı, hepsi zaten çalıştığınız terminalden yönetilir. Hızlı, tarayıcı-öncelikli bir sunum istiyorsanız ve HTML ile CSS'te rahatsanız, kurun ve gönül rahatlığıyla yönlendirin. Bir sunum, düzenlenebilir kalması ve bir tasarım sistemine bağlı olması gereken, sürekli ve markaya uygun bir çalışmaya dönüştüğünde — işte orada bir Agent-Native Design Workspace devri devralır.