# Guizang HTML PPT Aracı Becerisi
> Bu PPT Aracı Becerisi ile iki farklı görsel stilde HTML sunumları oluşturun, görsel oluşturma ve çok platformlu kapak oluşturma ile birlikte. Saniyeler içinde profesyonel ve görsel açıdan çekici sunumlar hazırlayın.
- Canonical: https://nanoskill.ai/tr/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/tr/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: tr
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
Guizang HTML PPT Aracı Becerisi, yapay zeka aracılarının profesyonel, tek dosyalı HTML sunumlarını kolaylıkla oluşturmasını sağlar. Claude Code ve Codex gibi platformlar için tasarlanan bu beceri, görsel olarak ilgi çekici içerik üretimini kolaylaştırır ve iki farklı estetik sistem sunar: anlatım odaklı Elektronik Dergi stili ve veri odaklı İsviçre Uluslararasıcılığı stili. Kullanıcılar, makaleleri etkileyici sunum destelerine dönüştürebilir, ayrıntılı ürün analizleri üretebilir ve çok platformlu tutarlı kapaklar oluşturabilir; bunların hepsi yüksek görsel kaliteyi koruyarak yapılır.
Bu beceri, karmaşık kurulumlara gerek kalmadan paylaşılması ve görüntülenmesi kolay, hafif HTML çıktısı sunmasıyla öne çıkar. Codex içindeki GPT-Image 2.0 / GPT-M 2.0 aracılığıyla yapay zeka destekli görüntü oluşturma gibi gelişmiş yetenekleri entegre ederek bağlama duyarlı görseller ve infografikler sağlar. Ayrıca, özellikle İsviçre stili için yapılandırılmış düzenler ve katı tasarım ilkeleri sunarak, slaytlardan sosyal medya kapaklarına kadar tüm oluşturulan içerikte cilalı ve tutarlı bir görünüm sağlar.
Dahili konuşmalar ve ürün lansmanlarından kişisel paylaşım ve yöntem sunumlarına kadar çeşitli senaryolar için ideal olan Guizang HTML PPT Aracı Becerisi, içerik oluşturma iş akışlarını basitleştirir. Kullanıcıların uzun biçimli içeriği özlü sunumlara dönüştürmesine, ürün ekran görüntülerini belirli şablon oranlarına uyacak şekilde geliştirmesine ve tüm iletişim kanallarında tutarlı bir görsel kimlik sağlamasına olanak tanır. Becerinin yapılandırılmış iş akışlarına ve önceden tanımlanmış görsel kurallara odaklanması, minimum çabayla yüksek kaliteli, estetik açıdan hoş sonuçlar elde edilmesini sağlar.
## Key features
- **Çift Görsel Sistem**: Anlatı ve kişisel ifade için 'Stil A: Elektronik Dergi × E-mürekkep' veya gerçekler, ürün analizi ve metodolojiler için 'Stil B: İsviçre Uluslararasıcılığı' arasından seçim yaparak mesajınızın etkili bir şekilde iletilmesini sağlayın.
- **Tek Dosya HTML Çıktısı**: Herhangi bir derleme işlemi veya sunucu gerektirmeyen, hafif, kendi kendine yeten HTML sunumları oluşturun; böylece bunları doğrudan herhangi bir web tarayıcısında açmak, paylaşmak ve göstermek kolay olur.
- **AI Ajan Uyumluluğu**: Claude Code, Codex ve kabuk erişimine sahip diğer AI Ajanlar için tasarlanmıştır; doğal dil komutlarıyla HTML PPT'lerin sorunsuz bir şekilde oluşturulmasını, değiştirilmesini ve yinelenmesini sağlar.
- **Codex Görüntü Oluşturma**: Slaytlarınıza mükemmel şekilde ölçeklendirilmiş ve eklenmiş yüksek kaliteli, bağlama duyarlı görüntüler, infografikler ve UI senaryoları oluşturmak için Codex içinde GPT-Image 2.0 / GPT-M 2.0'ı entegre edin.
- **Çoklu Platform Kapak Oluşturma**: Sunumunuzun temel içeriğine dayanarak WeChat Resmi Hesapları (21:9, 1:1), Xiaohongshu (3:4) ve Video Hesapları (16:9) gibi çeşitli platformlar için otomatik olarak tutarlı, görsel olarak birleşik kapaklar oluşturun.
## Use cases
- **Makaleleri Sunumlara Dönüştürün**: Uzun makaleleri veya belgeleri, konuşmalar, dahili konuşmalar veya özel paylaşım oturumları için özlü, ilgi çekici HTML PPT'lere dönüştürün; temel fikirleri çıkarın ve bunları etkileyici bir anlatı halinde yapılandırın.
- **Profesyonel Ürün Analizleri Oluşturun**: Ürün analizlerini, metodolojileri veya AI ürün lansmanlarını gerçeklere, verilere ve net görsel iletişime odaklanarak sunmak için yapılandırılmış 'Stil B: İsviçre Uluslararasıcılığı'nı kullanın.
- **Tutarlı Çoklu Platform İçeriği Tasarlayın**: Sunumunuz, eşlik eden görseller ve çeşitli sosyal medya kapakları arasında birleşik bir görsel kimlik oluşturarak tüm iletişim kanallarınızda marka tutarlılığı ve etki sağlayın.
- **PPT'ler için Ekran Görüntülerini Geliştirin**: Ürün ekran görüntülerini sunum şablonlarına uyacak şekilde yeniden tasarlayın ve uyarlayın; ana bilgileri korurken profesyonel HTML PPT'lere uygun tutarlı bir görsel stil elde edin.
## Result preview
Bu Aracı Becerisi tarafından bir makaleden oluşturulmuş gerçek bir PPT'yi görün.
## Result walkthrough
### Adım 1：Yükle
Beceriyi aracınıza ekleyin.
### Adım 2：İçerik Sağlayın
Bir konu, notlar girin veya mevcut materyali yükleyin (ör. rapor, taslak, fikirler).
### Adım 3：PPT'nizi alın
Doğrudan kullanabileceğiniz HTML sunumunu inceleyin.
## Skill definition
Claude Code, Codex ve benzeri kodlama ajanı ortamları için bir ajan becerisi. **Tek dosyalı HTML yatay kaydırmalı slayt desteleri**, deste görselleri ve sosyal kapak sayfaları oluşturur.
İki görsel sistemle birlikte gelir:
- **Stil A: editoryal dergi × elektronik mürekkep**. İçine kod işlenmiş *Monocle*'ı hayal edin. Anlatı odaklı konuşmalar, fikirler, salonlar ve kişisel ses için en iyisi.
- **Stil B: İsviçre Uluslararası Tipografik Stili**. Izgara öncelikli, tek bir yüksek doygunlukta ana renk, keskin dikdörtgenler, incecik çizgiler ve aşırı tip kontrastı. Gerçekler, ürünler, analiz ve çerçeveler için en iyisi.
> [Guizang](https://x.com/op7418) tarafından "Tek Kişilik Şirket: Yapay Zeka ile Katlanan Organizasyonlar" ve "Yeni Bir Çalışma Biçimi" gibi çevrimdışı konuşmalardan damıtılmıştır. O destelerde karşılaşılan her tuzak `checklist.md` dosyasına kaydedilmiştir.
**Eski Tema · Stil A Editoryal Dergi**
**Yeni Tema · Stil B İsviçre Uluslararası**
## 30 saniyede başlangıç
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
Veya shell erişimi olan bir yapay zeka ajanına şunu yapıştırın:
```text
Benim için guizang-ppt-skill'i yükle. https://github.com/op7418/guizang-ppt-skill deposunu ~/.claude/skills/guizang-ppt-skill konumuna klonla, ardından SKILL.md, assets/ ve references/ dosyalarının var olduğunu doğrula.
```
Eğer zaten yüklüyse, şu komutla güncelleyin:
```text
Benim için guizang-ppt-skill'i güncelle. ~/.claude/skills/guizang-ppt-skill konumuna git, git pull komutunu çalıştır, sonra bana en son commit'i söyle.
```
Ardından ajanınıza sorun:
```text
Bu makaleden yaklaşık 7 slaytlı, 2-3 oluşturulmuş görsel içeren İsviçre tarzı bir deste oluştur.
```
Diğer kullanışlı komutlar:
```text
Bu Markdown dosyasını editoryal dergi tarzı bir sunuma dönüştür.
Bu destenin ana fikrinden bir 21:9 sosyal kapak oluştur.
Bu ürün ekran görüntüsünü 16:10 slayt görseli olarak yeniden tasarla.
```
## Ne alırsınız
- 🖋 **İki görsel sistem**: Stil A için editoryal hikaye anlatımı, Stil B için olgusal İsviçre yapısı
- 📐 **Yatay kaydırma navigasyonu**: ← → ok tuşları / fare tekerleği / dokunmatik kaydırma / alt noktalar / dizin için ESC
- 🧩 **Stil A 10 düzen**: kapak, ayraç, büyük sayılar, resim/metin, resim ızgarası, iş akışı, karşılaştırma ve daha fazlası
- 🧱 **Stil B 22 kilitli düzen**: Kapak, Açıklama, KPI Kulesi, Döngü Diyagramı, İkili Karşılaştırma, Görsel Kahraman, Kapanış Manifestosu ve daha fazlası
- 🎨 **Seçilmiş tema ön ayarları**: Stil A için 5 elektronik mürekkep teması, Stil B için 4 İsviçre ana renk teması
- 🖼 **İsteğe bağlı Codex görsel akışı**: GPT-Image 2.0 / GPT-M 2.0 ile belgesel fotoğrafları, bilgi grafikleri, akış diyagramları, sistem haritaları ve UI sahneleri oluşturun, ardından şablon güvenli oranlarda ekleyin
- 📰 **Sosyal kapaklar**: 21:9 WeChat kapak görselleri, 1:1 paylaşım kartları, 3:4 Xiaohongshu kapakları, video küçük resimleri ve ilgili varyantlar oluşturun
- 📴 **Düşük güç statik modu**: WebGL / canvas animasyonunu statik görsellere dönüştürmek için `B` tuşuna basın
- 📄 **Tek HTML dosyası** — derleme yok, sunucu yok, doğrudan tarayıcıda açın
## Uyan / Uymayan
**✅ Uyan**: çevrimdışı konuşmalar, sektör açılış konuşmaları, özel salonlar, yapay zeka ürün lansmanları, demo günü, güçlü kişisel sese sahip sunumlar
**❌ Uymayan**: veri ağırlıklı tablolar, eğitim desteleri (yoğunluk çok düşük), çok kullanıcılı işbirliğine dayalı düzenleme (statik HTML)
## Yaygın kullanım durumları
| Görev | Önerilen akış |
|------|------------------|
| Uzun makaleyi konuşma destesine dönüştürme | Temel argümanı çıkarın, ardından 6-10 slaytlık bir ritim oluşturun |
| Çerçeve / ürün analizi | Kilitli düzenler ve 21:9 kahraman görselleri ile Stil B İsviçre kullanın |
| Kişisel konuşma / fikir yazısı | Daha güçlü bir anlatı ritmi için Stil A editoryal dergiyi kullanın |
| Deste görselleri | Codex'te fotoğraflar, bilgi grafikleri, akış diyagramları, sistem haritaları veya UI sahneleri oluşturun |
| Sosyal kapaklar | Aynı fikirden 21:9 ana kapaklar, 1:1 paylaşım kartları, 3:4 dikey kapaklar ve video küçük resimleri oluşturun |
| Ekran görüntüsü normalizasyonu | Ham ekran görüntülerini slaytlara eklemeden önce şablon güvenli oranlara yeniden tasarlayın |
## Neden HTML desteleri
- **Ajan-doğal düzenleme**: HTML / CSS düz metindir, bu nedenle ajanlar doğrudan okuyabilir, düzenleyebilir ve doğrulayabilir.
- **Markdown'dan daha yüksek görsel yoğunluk**: hassas düzen, konumlandırma, hareket, etkileşim ve kapak formatları.
- **Hafif teslimat**: bir HTML dosyası açılabilir, sunulabilir, gönderilebilir, ekran görüntüsü alınabilir veya kaydedilebilir.
- **Daha iyi kalite kontrolleri**: İsviçre doğrulayıcısı düzen kaymasını, güvensiz görüntü yerleşimini, ortalanmış gövde başlıklarını ve SVG metin tuzaklarını yakalayabilir.
- **Çıktılar arasında tek bir görsel sistem**: desteler, oluşturulan görseller, kapaklar ve ekran görüntüsü yeniden tasarımları aynı stil kurallarını paylaşabilir.
## Platform desteği
| Platform | Durum | Notlar |
|----------|--------|-------|
| Claude Code | Destekleniyor | HTML deste oluşturma ve yineleme için yerel Beceri iş akışı |
| Codex | Destekleniyor | Deste oluşturma, görüntü oluşturma ve tarayıcı tabanlı görsel QA için iyi |
| Cursor / diğer yerel ajanlar | Çalışır | Dosya sistemi erişimi ve shell yürütme gerektirir |
| WorkBuddy | Uyarlanıyor | Pazar yeri için hazır sürüm ayrıca hazırlanıyor |
| Düz sohbet robotu | Önerilmez | Dosya sistemi ve tarayıcı önizlemesi olmadan, tam deste oluşturmayı stabilize etmek zordur |
## Yükleme
### Seçenek 1: Tek satırda yükleme (önerilir)
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
### Seçenek 2: Bunu bir yapay zekaya yapıştırın
> Benim için `guizang-ppt-skill` Claude Code becerisini yükle. Adımlar:
>
> 1. `~/.claude/skills/` dizininin var olduğundan emin olun (yoksa oluşturun)
> 2. `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill` komutunu çalıştırın
> 3. Doğrulayın: `ls ~/.claude/skills/guizang-ppt-skill/` çıktısı `SKILL.md`, `assets/`, `references/` göstermelidir
> 4. Tamamlandığında bana haber verin. Daha sonra "bana dergi tarzı bir deste yap" gibi şeyler söylemek bu beceriyi tetikleyecektir.
Yukarıdaki bloğu Claude Code / Cursor / shell erişimi olan herhangi bir yapay zeka ajanına yapıştırın ve yüklemeyi o halledecektir.
### Seçenek 3: Manuel CLI
```bash
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
```
### Nasıl tetiklenir
Yüklendikten sonra, Claude Code beceriyi otomatik olarak algılar. Tetikleyici ifadeler:
- "Bana dergi tarzı bir deste yap"
- "Bana İsviçre tarzı bir deste yap"
- "Yatay kaydırmalı bir deste oluştur"
- "Editoryal dergi tarzı sunum"
- "Konuşmam için elektronik mürekkep slaytları"
- "Bu makaleden bir 21:9 WeChat kapağı oluştur"
- "Bu desteden bir 1:1 paylaşım kartı oluştur"
## İş Akışı
Beceri yapılandırılmış bir iş akışıdır; ajan sizi her adımda yönlendirir:
1. **Stili seçin** — Stil A editoryal dergi veya Stil B İsviçre Uluslararası
2. **Amacı netleştirin** — 7 soruluk kontrol listesi: stil, hedef kitle, süre, kaynak materyal, görseller/ekran görüntüleri, tema, katı kısıtlamalar
3. **Şablonu kopyalayın** — Stil A `assets/template.html` kullanır; Stil B `assets/template-swiss.html` kullanır
4. **İçeriği doldurun** — bir ritim planı oluşturun, ardından eşleşen düzen iskeletlerini seçin ve uyarlayın
5. **İsteğe bağlı görüntü oluşturma** — Codex'te, GPT-Image 2.0 / GPT-M 2.0 görüntülerini kullanıp kullanmayacağınızı sorun, ardından sayfaya uygun oranlarda ekleyin
6. **Kendi kendine kontrol** — `references/checklist.md` ile karşılaştırın; P0 sorunlarının tümü geçmelidir; İsviçre desteleri ayrıca düzen doğrulayıcıyı geçmelidir
7. **Önizleme** — HTML'i tarayıcıda açın
8. **Yineleyin** — yazı tipi boyutunu, yüksekliği, boşluğu ayarlamak için satır içi stilleri kullanın
Tam özellikler [`SKILL.md`](./SKILL.md) dosyasında.
## Stil B İsviçre
İsviçre teması, sadece bir CSS kaplaması değil, katı bir düzen sistemidir.
- **22 adlandırılmış düzen**: gövde slaytları `S01` ile `S22` arasını kullanmalıdır; yeni yapılar icat etmeyin
- **4 ana renk**: Uluslararası Klein Mavisi, limon sarısı, limon yeşili, güvenlik turuncusu
- **Izgara kilidi**: 16 sütunlu ızgara, keskin dikdörtgenler, 1px ince çizgiler, gölge yok, degrade yok, yuvarlak kart yok
- **Çince başlık ölçeklendirme**: tamamen Çince başlıklar, içerik ve görüntüler için alan korumak amacıyla bir kademe daha küçük olmalıdır
- **Görüntü/metin alt hizalama**: metin ve görüntü blokları, sol/sağ görüntü düzenlerinde, sayfalama kontrollerinden uzak kalarak altta hizalanmalıdır
- **Görüntü yuvaları**: görüntüler, şablon tanımlı `data-image-slot` bölgelerine yerleştirilmelidir, genellikle 21:9 veya 16:10 oranında oluşturulur
- **Sert doğrulama**: doğrulayıcı, ortalanmış gövde başlıklarını, deneysel düzenleri, görünür SVG metnini ve yuvaların dışına yerleştirilmiş görüntüleri yakalar
İsviçre doğrulaması:
```bash
node scripts/validate-swiss-deck.mjs path/to/index.html
```
## Codex Görüntü Akışı
Codex'te, ilk deste taslağı hazır olduktan sonra, ajan kullanıcının oluşturulmuş görseller isteyip istemediğini sorabilir. Onaylandıktan sonra, bir görüntü türü veya stili seçin. Yaygın türler şunlardır:
- Belgesel fotoğrafları: insan dokusu katan Fuji / Leica benzeri gerçek dünya sahneleri
- Bilgi grafikleri / akış diyagramları / karşılaştırma grafikleri / sistem haritaları: fotoğraflarla iyi açıklanamayan kavramlar için
- Ekran görüntüsü çerçeveleme / ekran görüntüsü yeniden tasarımları: önce ham ekran görüntülerini paketlenmiş arka plan varlıkları ve CleanShot X tarzı bir tuval ile koruyun; UI sahne oluşturmayı yalnızca ekran görüntüsünün yeniden yapılandırılması gerektiğinde kullanın
- Veri posterleri / grafikler: anahtar sayıları eklemeye hazır görsel varlıklara dönüştürün
- Çoklu görüntü kompozisyonları: birbiriyle ilgisiz üç 16:9 görüntünün ızgarayı bozacağı ultra geniş yuvalar için kullanışlıdır
Oluşturulan görüntüler dört temel kurala uymalıdır:
- Görüntüyü bağımsız bir slayt olarak değil, gömülü bir varlık olarak ele alın: alt bilgi, sayfa altı, başlık, sayfa numarası, köşe işareti, imza veya dekoratif kenarlık olmamalıdır
- Deste diline uyun: Çince desteler bilgi grafiklerinde Çince etiketler kullanır, İngilizce desteler İngilizce etiketler kullanır
- Oluşturmadan önce yuva oranına uyun: birçok İsviçre kahraman yuvası için 21:9, yaygın ana görseller için 16:9 / 16:10, UI sahneleri için 16:10, görüntü ızgaraları için sabit eşit yükseklikler
- Ham bir ekran görüntüsü sadık kalması gerektiğinde, önce `references/screenshot-framing.md` dosyasını okuyun ve varsayılan olarak ekran görüntüsünü yeniden çizmek yerine paketlenmiş `assets/screenshot-backgrounds/` arka planlarını ve programatik ölçeklendirme, dolgu ve hizalamayı kullanın
Görüntü yönlendirmeleri [`references/image-prompts.md`](./references/image-prompts.md) dosyasında bulunur. Ekran görüntüsü çerçeveleme ise [`references/screenshot-framing.md`](./references/screenshot-framing.md) dosyasındadır.
## Kapak Oluşturma
Beceri ayrıca bir makaleyi veya deste fikrini platform kapaklarına dönüştürebilir:
- **WeChat ana kapağı**: 21:9, başlık öncelikli, bir görsel çapa ile
- **WeChat paylaşım kartı**: 1:1, 21:9 kapakla görsel olarak eşleşir
- **Xiaohongshu kapağı / karusel**: 3:4, büyük başlık, bir parti boyunca tutarlı tip ölçeği
- **Video küçük resmi**: 16:9, başlık + alt başlık + bir odak görseli
Aynı kural geçerlidir: birkaç güçlü anahtar kelime kullanın, başlığı görsel merkez olarak koruyun ve tuvali gövde metniyle doldurmayın.
## Örnek komutlar
Bu komutlardan herhangi birini ajanınıza kopyalayın, ardından makalenizi, Markdown dosyanızı veya görüntü varlıklarınızı ekleyin:
```text
Bu makaleden, şablon görüntü yuvalarına uyan 3 oluşturulmuş görsel içeren 8 slaytlı İsviçre tarzı bir deste oluştur.
```
```text
Bu ürün analizi belgesini güçlü bir anlatı ritmine sahip editoryal dergi tarzı bir desteye dönüştür.
```
```text
Bu destenin ana fikrinden iki kapak oluştur: bir 21:9 ana kapak ve görsel olarak eşleşen bir 1:1 paylaşım kartı.
```
```text
Bu ürün ekran görüntülerini tutarlı 16:10 slayt görsellerine yeniden tasarlayın. Anahtar UI bilgilerini koruyun; görüntülerin içine slayt başlığı veya alt bilgi eklemeyin.
```
## Dizin
```
guizang-ppt-skill/
├── SKILL.md ← ana beceri dosyası: iş akışı, prensipler, yaygın hatalar
├── README.md ← Çince BENİOKU
├── README.en.md ← bu dosya
├── assets/
│ ├── template.html ← Stil A editoryal dergi şablonu
│ ├── template-swiss.html ← Stil B İsviçre şablonu
│ └── screenshot-backgrounds/ ← paketlenmiş WebP ekran görüntüsü arka planları: 5 stil-a / 4 stil-b
├── scripts/
│ └── validate-swiss-deck.mjs ← İsviçre düzen doğrulayıcısı
└── references/
├── components.md ← bileşen kataloğu (tür, renk, ızgara, simgeler, belirtme, istatistik, iş akışı)
├── layouts.md ← 10 düzen iskeleti (yapıştırmaya hazır)
├── layouts-swiss.md ← 22 kilitli İsviçre düzeni
├── swiss-layout-lock.md ← İsviçre aslına uygunluk ve düzen katı kuralları
├── themes.md ← 5 tema ön ayarı (seçin, özelleştirmeyin)
├── themes-swiss.md ← 4 İsviçre ana renk teması
├── image-prompts.md ← GPT-Image 2.0 / GPT-M 2.0 görüntü türleri, oranlar ve temel yönlendirmeler
├── screenshot-framing.md ← CleanShot X tarzı ekran görüntüsü çerçeveleme semantiği
└── checklist.md ← kalite kontrol listesi (P0 / P1 / P2 / P3 seviyeleri)
```
## Tema ön ayarları
`references/themes.md` dosyasından seçin. **Özel hex değerlerine izin verilmez** — estetiği korumak seçim özgürlüğünden daha önemlidir.
### Stil A Editoryal Temalar
| Önizleme | Tema | Ana renkler ve en iyisi için |
|---------|-------|--------------------------|
| 
| 🖋 **Mürekkep Klasik** | `#0a0a0b` / `#f1efea`. Genel varsayılan, ticari lansmanlar, şüphede kalındığında. |
| 
| 🌊 **İndigo Porselen** | `#0a1f3d` / `#f1f3f5`. Teknoloji, araştırma, yapay zeka, teknik açılış konuşmaları. |
| 
| 🌿 **Orman Mürekkebi** | `#1a2e1f` / `#f5f1e8`. Doğa, sürdürülebilirlik, kültür, kurgu dışı. |
| 
| 🍂 **Kraft Kağıt** | `#2a1e13` / `#eedfc7`. Nostaljik, hümanist, edebi, bağımsız dergiler. |
| 
| 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Sanat, tasarım, yaratıcı, moda, galeri benzeri desteler. |
Temaları değiştirmek yalnızca `template.html` dosyasının `:root{}` bloğunun üst kısmındaki 6 değişkeni değiştirmeyi gerektirir — diğer tüm CSS `var(--...)` üzerinden akar.
### Stil B İsviçre Temaları
`references/themes-swiss.md` dosyasından seçin. Burada da **özel hex değerlerine izin verilmez**.
| Önizleme | Tema | Ana renk ve en iyisi için |
|---------|-------|---------------------------|
| 
| 🔵 **Uluslararası Klein Mavisi** | `#002FA7`. Varsayılan, ticari lansmanlar, yapay zeka ürünleri, çerçeveler. |
| 
| 🟡 **Limon Sarısı** | `#FFD500`. Gençlik, spor, perakende, tüketim malları, Y2K retro. |
| 
| 🟢 **Limon Yeşili** | `#C5E803`. Ekoloji, sürdürülebilirlik, sağlık, Z kuşağı markaları. |
| 
| 🟠 **Güvenlik Turuncusu** | `#FF6B35`. Uyarılar, haberler, endüstriyel konular, spor, enerjik temalar. |
Kullanıcı renk belirtmeden İsviçre tarzı bir deste isterse, varsayılan olarak Uluslararası Klein Mavisi kullanın.
## Temel tasarım prensipleri
1. **Şatafat yerine ölçülülük** — WebGL arka planlar yalnızca kahraman sayfalarında hafifçe görünür
2. **Süsleme yerine yapı** — bilgi hiyerarşisi yazı tipi boyutu + yazı tipi + ızgara boşluğu ile, gölgeler veya yüzen kartlarla değil
3. **Görseller birinci sınıf vatandaşlardır** — onları gövde içerik alanıyla hizalayın, oranları sabit tutun, yalnızca alttan kırpın ve üst/yanları koruyun
4. **Oluşturulan görseller varlıklardır** — yalnızca ana fotoğrafı / grafiği / UI'yi tutun; görüntünün içinde slayt başlığı, alt bilgi veya köşe işareti işlemeyin
5. **Ritim kahraman sayfalarında yaşar** — kahraman / kahraman olmayan değişimi gözün yorulmasını önler
6. **Dinamik efektler isteğe bağlı olmalıdır** — `B` tuşu statik modu açar, böylece animasyon asla bir okuma yükü haline gelmez
7. **Terimler tutarlı kalır** — Skills, Skills'tir; karışık çevirilere izin verilmez
8. **İsviçre düzenleri kilitli kalır** — Stil B, ilgisiz sayfalar icat etmek yerine orijinal 22 sayfalık düzen sistemini geri yüklemeli ve yeniden kullanmalıdır
## Görsel referanslar
- [*Monocle*](https://monocle.com) dergi düzenleri
- YC Garry Tan — "Thin Harness, Fat Skills"
- Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style
- Guizang'ın çevrimdışı konuşma deste serisi
## Yol haritası
- Daha fazla gerçek dünya örneği ve açılabilir HTML deste demosu ekleyin
- Daha fazla yayın platformu için kapak formatlarını genişletin
- Daha fazla İsviçre düzen doğrulama kuralı ekleyin
- Ekran görüntüsü yeniden tasarımı ve bilgi grafiği oluşturma iş akışlarını iyileştirin
- WorkBuddy gibi pazar yeri odaklı varyantları hazırlayın
- Özel renkleri kısıtlı tutarken daha fazla seçilmiş tema paketi ekleyin
## SSS
**PPTX'e aktarabilir mi?**
Ana çıktı HTML'dir. Bir tarayıcıda sunabilir, ekran görüntüsü alabilir veya kaydedebilirsiniz. PPTX dönüşümü ayrı bir iş akışı olarak yapılabilir, ancak şu anda ana yol değildir.
**Neden özel renklere izin verilmiyor?**
Beceri istikrarlı görsel çıktı için tasarlanmıştır. Rastgele renkler genellikle sistemi bozar, bu nedenle desteler seçilmiş ön ayarları kullanmalıdır.
**Kendi düzenimi ekleyebilir miyim?**
Evet. Stil A düzenleri `references/layouts.md` dosyasında genişletilebilir. Stil B daha katıdır: `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` ve doğrulayıcıyı birlikte güncelleyin.
**Codex görüntü oluşturma zorunlu mu?**
Hayır. Desteler oluşturulmuş görüntüler olmadan çalışır. Görüntü akışı yalnızca fotoğraflara, bilgi grafiklerine, UI sahnelerine veya kapaklara ihtiyacınız olduğunda kullanılır.
**Beceriyi nasıl güncellerim?**
Yükleme komutunu tekrar çalıştırın veya yerel beceri dizininizde `git pull` komutunu çalıştırın.
## Katkıda bulunma
Hatalar, düzen sorunları, yeni düzen talepleri — Issue ve PR'lar memnuniyetle karşılanır. Önceliklendirin:
- `template.html` dosyasına önce yeni sınıflar ekleyin; `layouts.md` dosyasının tanımsız sınıflara atıfta bulunmasına izin vermeyin
- `template-swiss.html` dosyasını değiştirirken, `layouts-swiss.md` ve `swiss-layout-lock.md` dosyalarını birlikte güncelleyin
- İsviçre kuralları eklerken, `scripts/validate-swiss-deck.mjs` dosyasını güncelleyin
- Karşılaşılan tuzakları karşılık gelen P0 / P1 / P2 / P3 seviyesinde `checklist.md` dosyasına kaydedin
- Yeni tema renkleri, önerilen bir kullanım durumu ile birlikte `themes.md` dosyasına gider
## Lisans
MIT © 2026 [op7418](https://github.com/op7418)
## FAQ
### Guizang HTML PPT Ajan Becerisi nedir?
Guizang HTML PPT Becerisi, tek dosya halinde HTML sunumları, eşlik eden görseller ve çoklu platform kapakları oluşturmak için tasarlanmış, AI Ajan uyumlu bir araçtır. İki farklı görsel stil sunar: Elektronik Dergi ve İsviçre Uluslararasıcılığı.
### Guizang HTML PPT Ajan Becerisini nasıl yüklerim?
Bunu, terminalinizde \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` komutunu çalıştırarak veya kabuk erişimli bir AI Ajana depoyu beceriler dizininize kopyalamasını söyleyerek yükleyebilirsiniz.
### HTML PPT'mde renkleri özelleştirebilir miyim?
Hayır, özel HEX değerlerine izin verilmez. Beceri, estetik tutarlılık ve kaliteli çıktı sağlamak için hem Stil A (Elektronik Dergi) hem de Stil B (İsviçre Uluslararasıcılığı) için önceden ayarlanmış tema seçenekleri sunar.
### Sunulan iki görsel stil nedir?
Stil A, 'Elektronik Dergi × E-mürekkep', hikaye anlatımı, görüşler ve kişisel ifade için idealdir. Stil B, 'İsviçre Uluslararasıcılığı', ızgara tabanlı, minimalist bir tasarımla gerçekleri, ürün analizlerini ve metodolojileri sunmak için en uygun olanıdır.
### HTML PPT'yi PPTX formatına aktarmak mümkün müdür?
Temel çıktı HTML'dir, bu bir tarayıcıda doğrudan gösterilebilir, ekran görüntüsü alınabilir veya kaydedilebilir. Doğrudan PPTX aktarımı birincil bir özellik olmasa da, gerekirse HTML sayfalarını dönüştürme için görsel taslaklar olarak kullanabilirsiniz.
### Beceri, HTML PPT'm için görüntü oluşturmayı destekliyor mu?
Evet, Codex ortamında kullanıldığında, beceri çeşitli türde görüntüler, infografikler ve UI senaryoları oluşturmak için GPT-Image 2.0 / GPT-M 2.0'dan yararlanabilir; bunlar daha sonra şablon oranlarına göre sunumunuza eklenir.