# Keterampilan Agen PPT HTML Guizang > Hasilkan presentasi HTML dengan dua gaya visual berbeda menggunakan Keterampilan Agen PPT ini, lengkap dengan pembuatan gambar dan pembuatan sampul multi-platform. Buat presentasi profesional dan menarik secara visual dalam hitungan detik. - Canonical: https://nanoskill.ai/id/skills/ppt-agent-skill - Markdown: https://nanoskill.ai/id/skills/ppt-agent-skill.md - Author: op7418 - Published: 2026-05-22T08:33:57.477Z - Updated: 2026-07-25T04:34:45.899Z - Language: id - 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 Keterampilan Agen PPT HTML Guizang memberdayakan Agen AI untuk menghasilkan presentasi HTML profesional satu file dengan mudah. Dirancang untuk platform seperti Claude Code dan Codex, keterampilan ini menyederhanakan pembuatan konten yang menarik secara visual, menawarkan dua sistem estetika berbeda: gaya Majalah Elektronik yang berfokus pada narasi dan gaya Internasionalisme Swiss yang didorong oleh fakta. Pengguna dapat dengan cepat mengubah artikel menjadi dek yang menarik, menghasilkan analisis produk terperinci, dan membuat sampul multi-platform yang konsisten, semuanya dengan tetap menjaga kualitas visual yang tinggi. Keterampilan ini menonjol dengan memberikan output HTML ringan yang mudah dibagikan dan dilihat tanpa pengaturan rumit. Ini mengintegrasikan kemampuan canggih seperti pembuatan gambar bertenaga AI melalui GPT-Image 2.0 / GPT-M 2.0 di dalam Codex, memungkinkan visual dan infografis yang sadar konteks. Lebih lanjut, ini menyediakan tata letak terstruktur dan prinsip desain yang ketat, terutama untuk gaya Swiss, memastikan tampilan yang halus dan konsisten di semua konten yang dihasilkan, dari slide hingga sampul media sosial. Ideal untuk berbagai skenario, dari presentasi internal dan peluncuran produk hingga berbagi pribadi dan presentasi metode, Keterampilan Agen PPT HTML Guizang menyederhanakan alur kerja pembuatan konten. Ini memungkinkan pengguna mengonversi konten panjang menjadi presentasi ringkas, menyempurnakan tangkapan layar produk agar sesuai dengan rasio templat tertentu, dan memastikan identitas visual yang kohesif di semua saluran komunikasi. Fokus keterampilan pada alur kerja terstruktur dan aturan visual yang telah ditentukan memastikan hasil berkualitas tinggi dan estetis dengan upaya minimal. ## Key features - **Sistem Visual Ganda**: Pilih antara 'Gaya A: Majalah Elektronik × E-ink' untuk narasi dan ekspresi pribadi, atau 'Gaya B: Internasionalisme Swiss' untuk fakta, analisis produk, dan metodologi, memastikan pesan Anda tersampaikan secara efektif. - **Output HTML Satu File**: Hasilkan presentasi HTML ringan dan mandiri yang tidak memerlukan proses build atau server, sehingga mudah dibuka, dibagikan, dan ditampilkan langsung di browser web apa pun. - **Kompatibilitas Agen AI**: Dirancang untuk Claude Code, Codex, dan Agen AI lainnya dengan akses shell, memungkinkan pembuatan, modifikasi, dan iterasi PPT HTML tanpa hambatan melalui perintah bahasa alami. - **Pembuatan Gambar Codex**: Integrasikan GPT-Image 2.0 / GPT-M 2.0 dalam Codex untuk menghasilkan gambar, infografis, dan skenario UI berkualitas tinggi dan sadar konteks, dengan skala sempurna dan dimasukkan ke dalam slide Anda. - **Pembuatan Sampul Multi-Platform**: Secara otomatis membuat sampul yang konsisten dan terpadu secara visual untuk berbagai platform seperti Akun Resmi WeChat (21:9, 1:1), Xiaohongshu (3:4), dan Akun Video (16:9) berdasarkan konten inti presentasi Anda. ## Use cases - **Ubah Artikel menjadi Presentasi**: Konversi artikel atau dokumen panjang menjadi PPT HTML yang ringkas dan menarik untuk pidato, ceramah internal, atau sesi berbagi pribadi, mengekstrak ide inti dan menyusunnya menjadi narasi yang memikat. - **Buat Analisis Produk Profesional**: Manfaatkan 'Gaya B: Internasionalisme Swiss' yang terstruktur untuk menyajikan analisis produk, metodologi, atau peluncuran produk AI dengan fokus pada fakta, data, dan komunikasi visual yang jelas. - **Desain Konten Multi-Platform yang Konsisten**: Hasilkan identitas visual yang terpadu di seluruh presentasi Anda, gambar pendukung, dan berbagai sampul media sosial, memastikan konsistensi merek dan dampak di semua saluran komunikasi Anda. - **Tingkatkan Tangkapan Layar untuk PPT**: Desain ulang dan sesuaikan tangkapan layar produk agar sesuai dengan template presentasi, menjaga informasi kunci sambil mencapai gaya visual yang konsisten yang cocok untuk PPT HTML profesional. ## Result preview Lihat PPT nyata yang dihasilkan dari sebuah artikel oleh Keterampilan Agen ini. ![guizang-ppt-demo01](https://file.nanoskill.ai/guizang-ppt-demo01) ![guizang-ppt-demo02](https://file.nanoskill.ai/guizang-ppt-demo02) ![guizang-ppt-demo-03](https://file.nanoskill.ai/guizang-ppt-demo-03) ## Result walkthrough ### Langkah 1：Instal Tambahkan keterampilan ke agen Anda. ![guizang-ppt-step-1](https://file.nanoskill.ai/guizang-ppt-step-1) ### Langkah 2：Berikan Konten Masukkan topik, catatan, atau unggah materi yang sudah ada (mis., laporan, kerangka, ide). ![guizang-ppt-step-2](https://file.nanoskill.ai/guizang-ppt-step-2) ### Langkah 3：Dapatkan PPT Anda Tinjau presentasi HTML yang dapat langsung Anda gunakan. ![guizang-ppt-step-03](https://file.nanoskill.ai/guizang-ppt-step-03) ## Skill definition Sebuah keterampilan agen untuk Claude Code, Codex, dan lingkungan agen pengkodean serupa. Ini menghasilkan **dek geser horizontal HTML berkas tunggal**, visual dek, dan halaman sampul sosial. Ini dilengkapi dengan dua sistem visual: - **Gaya A: majalah editorial × tinta elektronik**. Bayangkan *Monocle* dengan kode yang terjalin. Cocok untuk ceramah naratif, opini, salon, dan suara pribadi. - **Gaya B: Gaya Tipografi Internasional Swiss**. Berbasis kisi, satu warna jangkar saturasi tinggi, persegi panjang tajam, garis rambut, dan kontras tipe ekstrem. Cocok untuk fakta, produk, analisis, dan kerangka kerja. > Disaring oleh [Guizang](https://x.com/op7418) dari ceramah luring seperti "Perusahaan Satu Orang: Organisasi yang Dilipat oleh AI" dan "Cara Kerja Baru." Setiap jebakan yang ditemui selama pembuatan dek tersebut dicatat dalam `checklist.md`. **Tema Lama · Gaya A Majalah Editorial** ![Pratinjau Gaya A Majalah Editorial](https://file.nanoskill.ai/5dc316a2-401c-4e37-9123-ea081b6ae470-19.png) **Tema Baru · Gaya B Swiss Internasional** ![Pratinjau Gaya B Swiss Internasional](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-20.png) ## Mulai dalam 30 detik ```bash npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill ``` Atau tempelkan ini ke agen AI dengan akses shell: ```text Pasang guizang-ppt-skill untuk saya. Klon https://github.com/op7418/guizang-ppt-skill ke ~/.claude/skills/guizang-ppt-skill, lalu verifikasi bahwa SKILL.md, assets/, dan references/ ada. ``` Jika Anda sudah memasangnya, perbarui dengan: ```text Perbarui guizang-ppt-skill untuk saya. Buka ~/.claude/skills/guizang-ppt-skill, jalankan git pull, lalu beritahu saya komit terbaru. ``` Kemudian tanyakan ke agen Anda: ```text Buat dek gaya Swiss dari artikel ini, sekitar 7 slide, dengan 2-3 visual yang dihasilkan. ``` Perintah berguna lainnya: ```text Ubah berkas Markdown ini menjadi presentasi gaya majalah editorial. Buat sampul sosial 21:9 dari ide inti dek ini. Desain ulang tangkapan layar produk ini sebagai visual slide 16:10. ``` ## Apa yang Anda dapatkan - 🖋 **Dua sistem visual**: penceritaan editorial untuk Gaya A, struktur Swiss faktual untuk Gaya B - 📐 **Navigasi geser horizontal**: panah ← → / roda gulir / gesek sentuh / titik bawah / ESC untuk indeks - 🧩 **10 tata letak Gaya A**: sampul, pemisah, angka besar, teks/gambar, kisi gambar, alur, perbandingan, dan lainnya - 🧱 **22 tata letak terkunci Gaya B**: Sampul, Pernyataan, Menara KPI, Diagram Lingkar, Perbandingan Duo, Pahlawan Gambar, Manifesto Penutup, dan lainnya - 🎨 **Preset tema kurasi**: 5 tema tinta elektronik untuk Gaya A, 4 tema warna jangkar Swiss untuk Gaya B - 🖼 **Alur gambar Codex opsional**: hasilkan foto dokumenter, infografis, diagram alur, peta sistem, dan adegan UI dengan GPT-Image 2.0 / GPT-M 2.0, lalu sisipkan pada rasio aman templat - 📰 **Sampul sosial**: hasilkan gambar sampul WeChat 21:9, kartu bagikan 1:1, sampul Xiaohongshu 3:4, gambar mini video, dan varian terkait - 📴 **Mode statis daya rendah**: tekan `B` untuk mengubah animasi WebGL / canvas menjadi visual statis - 📄 **Berkas HTML tunggal** — tanpa build, tanpa server, buka langsung di peramban ## Cocok / Tidak cocok **✅ Cocok**: ceramah luring, pidato utama industri, salon pribadi, peluncuran produk AI, hari demo, presentasi dengan suara pribadi yang kuat **❌ Tidak cocok**: tabel data berat, dek pelatihan (kepadatan terlalu rendah), pengeditan kolaboratif multi-pengguna (HTML statis) ## Kasus penggunaan umum | Tugas | Alur yang direkomendasikan | |------|------------------| | Artikel panjang ke dek ceramah | Ekstrak argumen inti, lalu bangun ritme 6-10 slide | | Kerangka kerja / analisis produk | Gunakan Gaya B Swiss dengan tata letak terkunci dan visual pahlawan 21:9 | | Ceramah pribadi / opini | Gunakan Gaya A majalah editorial untuk ritme naratif yang lebih kuat | | Visual dek | Di Codex, hasilkan foto, infografis, diagram alur, peta sistem, atau adegan UI | | Sampul sosial | Hasilkan sampul utama 21:9, kartu bagikan 1:1, sampul vertikal 3:4, dan gambar mini video dari ide yang sama | | Normalisasi tangkapan layar | Desain ulang tangkapan layar mentah ke rasio aman templat sebelum disisipkan ke slide | ## Mengapa dek HTML - **Pengeditan asli agen**: HTML / CSS adalah teks biasa, sehingga agen dapat membaca, mengedit, dan memvalidasi secara langsung. - **Kepadatan visual lebih tinggi daripada Markdown**: tata letak, posisi, gerak, interaktivitas, dan format sampul yang presisi. - **Pengiriman ringan**: satu berkas HTML dapat dibuka, dipresentasikan, dikirim, ditangkapan layar, atau direkam. - **Gerbang kualitas yang lebih baik**: validator Swiss dapat menangkap penyimpangan tata letak, penempatan gambar yang tidak aman, judul tubuh terpusat, dan jebakan teks SVG. - **Satu sistem visual di seluruh keluaran**: dek, visual yang dihasilkan, sampul, dan desain ulang tangkapan layar dapat berbagi aturan gaya yang sama. ## Dukungan platform | Platform | Status | Catatan | |----------|--------|-------| | Claude Code | Didukung | Alur kerja Keterampilan asli untuk membuat dan mengiterasi dek HTML | | Codex | Didukung | Baik untuk pembuatan dek, pembuatan gambar, dan QA visual berbasis peramban | | Cursor / agen lokal lainnya | Bekerja | Memerlukan akses sistem berkas dan eksekusi shell | | WorkBuddy | Dalam adaptasi | Versi siap-pasar sedang disiapkan secara terpisah | | Chatbot biasa | Tidak disarankan | Tanpa sistem berkas dan pratinjau peramban, pembuatan dek penuh sulit distabilkan | ## Instalasi ### Opsi 1: Instal satu baris (disarankan) ```bash npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill ``` ### Opsi 2: Tempelkan ini ke AI > Instal keterampilan `guizang-ppt-skill` Claude Code untuk saya. Langkah-langkah: > > 1. Pastikan `~/.claude/skills/` ada (buat jika belum) > 2. Jalankan `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill` > 3. Verifikasi: `ls ~/.claude/skills/guizang-ppt-skill/` seharusnya menampilkan `SKILL.md`, `assets/`, `references/` > 4. Beritahu saya setelah selesai. Nantinya, mengatakan hal seperti "buatkan saya dek gaya majalah" akan memicu keterampilan ini. Tempelkan blok di atas ke Claude Code / Cursor / agen AI apa pun dengan akses shell dan itu akan menangani instalasi. ### Opsi 3: CLI manual ```bash git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill ``` ### Cara memicunya Setelah terinstal, Claude Code secara otomatis mendeteksi keterampilan ini. Frasa pemicu: - "Buatkan saya dek gaya majalah" - "Buatkan saya dek gaya Swiss" - "Hasilkan dek geser horizontal" - "Presentasi gaya majalah editorial" - "Slide tinta elektronik untuk ceramah saya" - "Buat sampul WeChat 21:9 dari artikel ini" - "Buat kartu bagikan 1:1 dari dek ini" ## Alur kerja Keterampilan ini adalah alur kerja terstruktur; agen akan memandu Anda melalui setiap langkah: 1. **Pilih gaya** — Gaya A majalah editorial, atau Gaya B Swiss Internasional 2. **Perjelas maksud** — daftar periksa 7 pertanyaan: gaya, audiens, durasi, bahan sumber, gambar/tangkapan layar, tema, batasan keras 3. **Salin templat** — Gaya A menggunakan `assets/template.html`; Gaya B menggunakan `assets/template-swiss.html` 4. **Isi konten** — buat rencana ritme, lalu pilih dan sesuaikan kerangka tata letak yang cocok 5. **Pembuatan gambar opsional** — di Codex, tanyakan apakah akan menggunakan gambar GPT-Image 2.0 / GPT-M 2.0, lalu sisipkan pada rasio yang sesuai halaman 6. **Periksa sendiri** — cocokkan dengan `references/checklist.md`; masalah P0 harus semua lulus; dek Swiss juga harus lulus validator tata letak 7. **Pratinjau** — buka HTML di peramban 8. **Iterasi** — gunakan gaya inline untuk menyetel ukuran font, tinggi, spasi Spesifikasi lengkap di [`SKILL.md`](./SKILL.md). ## Gaya B Swiss Tema Swiss adalah sistem tata letak ketat, bukan hanya kulit CSS. - **22 tata letak bernama**: slide isi harus menggunakan `S01` hingga `S22`; jangan menciptakan struktur baru - **4 warna jangkar**: Biru Klein Internasional, kuning lemon, hijau lemon, oranye keselamatan - **Kunci kisi**: kisi 16 kolom, persegi panjang tajam, garis rambut 1px, tanpa bayangan, tanpa gradien, tanpa kartu bulat - **Skala judul Cina**: judul berbahasa Cina harus satu langkah lebih kecil untuk menjaga ruang bagi konten dan gambar - **Perataan bawah teks/gambar**: blok teks dan gambar harus sejajar di bagian bawah pada tata letak gambar kiri/kanan, sambil menjauh dari kontrol penomoran halaman - **Slot gambar**: gambar harus berada di area `data-image-slot` yang ditentukan templat, sering dihasilkan pada 21:9 atau 16:10 - **Validasi keras**: validator menangkap judul tubuh terpusat, tata letak eksperimental, teks SVG yang terlihat, dan gambar yang ditempatkan di luar slot Validasi Swiss: ```bash node scripts/validate-swiss-deck.mjs path/to/index.html ``` ## Alur Gambar Codex Di Codex, setelah draf dek pertama siap, agen dapat bertanya apakah pengguna ingin visual yang dihasilkan. Setelah dikonfirmasi, pilih jenis atau gaya gambar. Jenis umum meliputi: - Foto dokumenter: adegan dunia nyata bergaya Fuji / Leica yang menambah tekstur manusia - Infografis / diagram alur / grafik perbandingan / peta sistem: untuk konsep yang tidak dapat dijelaskan dengan baik melalui foto - Pembingkaian tangkapan layar / desain ulang tangkapan layar: pertahankan tangkapan layar mentah dengan aset latar belakang bundel dan kanvas gaya CleanShot X terlebih dahulu; gunakan generasi adegan UI hanya jika tangkapan layar perlu direkonstruksi - Poster data / grafik: ubah angka kunci menjadi aset visual yang siap disisipkan - Komposisi multi-gambar: berguna untuk slot ultra-lebar di mana tiga gambar 16:9 yang tidak terkait akan merusak kisi Gambar yang dihasilkan harus mengikuti empat aturan inti: - Perlakukan gambar sebagai aset tertanam, bukan slide mandiri: tanpa footer, bagian bawah halaman, judul, nomor halaman, tanda sudut, tanda tangan, atau batas dekoratif - Sesuaikan bahasa dek: dek Cina menggunakan label Cina di dalam infografis, dek Inggris menggunakan label Inggris - Sesuaikan rasio slot sebelum pembuatan: 21:9 untuk banyak slot pahlawan Swiss, 16:9 / 16:10 untuk visual utama umum, 16:10 untuk adegan UI, tinggi sama tetap untuk kisi gambar - Ketika tangkapan layar mentah harus tetap setia, baca `references/screenshot-framing.md` terlebih dahulu dan gunakan latar belakang `assets/screenshot-backgrounds/` yang dibundel beserta penskalaan, padding, dan perataan terprogram alih-alih menggambar ulang tangkapan layar secara default Perintah gambar ada di [`references/image-prompts.md`](./references/image-prompts.md). Pembingkaian tangkapan layar ada di [`references/screenshot-framing.md`](./references/screenshot-framing.md). ## Pembuatan Sampul Keterampilan ini juga dapat mengubah artikel atau ide dek menjadi sampul platform: - **Sampul utama WeChat**: 21:9, mengutamakan judul, dengan satu jangkar visual - **Kartu bagikan WeChat**: 1:1, dipasangkan secara visual dengan sampul 21:9 - **Sampul / korsel Xiaohongshu**: 3:4, judul besar, skala tipe konsisten di seluruh kelompok - **Gambar mini video**: 16:9, judul + subjudul + satu visual fokus Aturan yang sama berlaku: gunakan beberapa kata kunci kuat, jadikan judul sebagai pusat visual, dan jangan isi kanvas dengan teks tubuh. ## Contoh perintah Salin salah satu perintah ini ke agen Anda, lalu lampirkan artikel, berkas Markdown, atau aset gambar Anda: ```text Buat dek gaya Swiss 8 slide dari artikel ini, dengan 3 visual yang dihasilkan cocok dengan slot gambar templat. ``` ```text Ubah dokumen analisis produk ini menjadi dek gaya majalah editorial dengan ritme naratif yang kuat. ``` ```text Dari ide inti dek ini, buat dua sampul: sampul utama 21:9 dan kartu bagikan 1:1 yang dipasangkan secara visual. ``` ```text Desain ulang tangkapan layar produk ini menjadi visual slide 16:10 yang konsisten. Pertahankan informasi UI kunci; jangan tambahkan judul slide atau footer di dalam gambar. ``` ## Direktori ``` guizang-ppt-skill/ ├── SKILL.md ← berkas keterampilan utama: alur kerja, prinsip, kesalahan umum ├── README.md ← README bahasa Cina ├── README.en.md ← berkas ini ├── assets/ │ ├── template.html ← templat Gaya A majalah editorial │ ├── template-swiss.html ← templat Gaya B Swiss │ └── screenshot-backgrounds/ ← latar belakang tangkapan layar WebP yang dibundel: 5 gaya-a / 4 gaya-b ├── scripts/ │ └── validate-swiss-deck.mjs ← validator tata letak Swiss └── references/ ├── components.md ← katalog komponen (tipe, warna, kisi, ikon, panggilan, stat, alur) ├── layouts.md ← 10 kerangka tata letak (siap tempel) ├── layouts-swiss.md ← 22 tata letak Swiss terkunci ├── swiss-layout-lock.md ← aturan keras tata letak dan kesetiaan Swiss ├── themes.md ← 5 preset tema (pilih, jangan kustomisasi) ├── themes-swiss.md ← 4 tema warna jangkar Swiss ├── image-prompts.md ← jenis gambar GPT-Image 2.0 / GPT-M 2.0, rasio, dan perintah dasar ├── screenshot-framing.md ← semantik pembingkaian tangkapan layar gaya CleanShot X └── checklist.md ← daftar periksa kualitas (tingkat P0 / P1 / P2 / P3) ``` ## Preset tema Pilih dari `references/themes.md`. **Nilai heks kustom tidak diizinkan** — melindungi estetika lebih penting daripada kebebasan memilih. ### Tema Editorial Gaya A | Pratinjau | Tema | Warna inti dan cocok untuk | |---------|-------|--------------------------| | Pratinjau tema Tinta Klasik | 🖋 **Tinta Klasik** | `#0a0a0b` / `#f1efea`. Default umum, peluncuran komersial, saat ragu. | | Pratinjau tema Porselen Indigo | 🌊 **Porselen Indigo** | `#0a1f3d` / `#f1f3f5`. Teknologi, riset, AI, pidato utama teknis. | | Pratinjau tema Tinta Hutan | 🌿 **Tinta Hutan** | `#1a2e1f` / `#f5f1e8`. Alam, keberlanjutan, budaya, non-fiksi. | | Pratinjau tema Kertas Kraft | 🍂 **Kertas Kraft** | `#2a1e13` / `#eedfc7`. Nostalgia, humanis, sastra, zine indie. | | Pratinjau tema Dune | 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Seni, desain, kreatif, mode, dek seperti galeri. | Mengganti tema hanya memerlukan penggantian 6 variabel di bagian atas blok `:root{}` `template.html` — semua CSS lainnya mengalir melalui `var(--...)`. ### Tema Swiss Gaya B Pilih dari `references/themes-swiss.md`. **Nilai heks kustom tidak diizinkan** di sini juga. | Pratinjau | Tema | Warna jangkar dan cocok untuk | |---------|-------|---------------------------| | Pratinjau tema Swiss Biru Klein Internasional | 🔵 **Biru Klein Internasional** | `#002FA7`. Default, peluncuran komersial, produk AI, kerangka kerja. | | Pratinjau tema Swiss Kuning Lemon | 🟡 **Kuning Lemon** | `#FFD500`. Anak muda, olahraga, ritel, barang konsumen, retro Y2K. | | Pratinjau tema Swiss Hijau Lemon | 🟢 **Hijau Lemon** | `#C5E803`. Ekologi, keberlanjutan, kesehatan, merek Gen Z. | | Pratinjau tema Swiss Oranye Keselamatan | 🟠 **Oranye Keselamatan** | `#FF6B35`. Peringatan, berita, topik industri, olahraga, tema energik. | Jika pengguna meminta dek gaya Swiss tanpa menentukan warna, default ke Biru Klein Internasional. ## Prinsip desain inti 1. **Pengekangan daripada kilau** — latar belakang WebGL hanya tembus pada halaman pahlawan 2. **Struktur daripada dekorasi** — hierarki informasi melalui ukuran tipe + jenis huruf + spasi putih kisi, bukan bayangan atau kartu mengambang 3. **Gambar adalah warga kelas satu** — sejajarkan dengan area konten tubuh, jaga rasio stabil, potong hanya dari bawah, dan pertahankan atas/samping 4. **Visual yang dihasilkan adalah aset** — hanya simpan foto / bagan / UI inti; jangan render judul slide, footer, atau tanda sudut di dalam gambar 5. **Ritme hidup pada halaman pahlawan** — pergantian pahlawan / non-pahlawan menjaga mata tidak lelah 6. **Efek dinamis harus opsional** — `B` mengalihkan mode statis sehingga animasi tidak pernah menjadi beban bacaan 7. **Istilah tetap konsisten** — Skills tetaplah Skills; tidak ada terjemahan campur aduk 8. **Tata letak Swiss tetap terkunci** — Gaya B harus mengembalikan dan menggunakan kembali sistem tata letak 22 halaman asli alih-alih menciptakan halaman yang tidak terkait ## Referensi visual - Tata letak majalah [*Monocle*](https://monocle.com) - YC Garry Tan — "Harness Tipis, Keterampilan Gemuk" - Massimo Vignelli / Helvetica Forever / Gaya Tipografi Internasional Swiss - Seri dek ceramah luring Guizang ## Peta jalan - Tambahkan lebih banyak contoh dunia nyata dan demo dek HTML yang dapat dibuka - Perluas format sampul untuk lebih banyak platform penerbitan - Tambahkan lebih banyak aturan validasi tata letak Swiss - Tingkatkan alur kerja desain ulang tangkapan layar dan pembuatan infografis - Siapkan varian khusus pasar seperti WorkBuddy - Tambahkan lebih banyak paket tema kurasi sambil tetap membatasi warna kustom ## FAQ **Bisakah mengekspor ke PPTX?** Keluaran utama adalah HTML. Anda dapat mempresentasikannya di peramban, menangkap layarnya, atau merekamnya. Konversi PPTX dapat dilakukan sebagai alur kerja terpisah, tetapi bukan jalur inti saat ini. **Mengapa warna kustom tidak diizinkan?** Keterampilan ini dirancang untuk keluaran visual yang stabil. Warna sembarang sering merusak sistem, jadi dek harus menggunakan preset kurasi. **Bisakah saya menambahkan tata letak sendiri?** Ya. Tata letak Gaya A dapat diperluas di `references/layouts.md`. Gaya B lebih ketat: perbarui `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md`, dan validator bersama-sama. **Apakah pembuatan gambar Codex diperlukan?** Tidak. Dek berfungsi tanpa gambar yang dihasilkan. Alur gambar hanya digunakan saat Anda membutuhkan foto, infografis, adegan UI, atau sampul. **Bagaimana cara memperbarui keterampilan?** Jalankan perintah instalasi lagi, atau jalankan `git pull` di dalam direktori keterampilan lokal Anda. ## Berkontribusi Bug, masalah tata letak, permintaan tata letak baru — Terbuka untuk Masalah dan PR. Prioritaskan: - Tambahkan kelas baru ke `template.html` terlebih dahulu; jangan biarkan `layouts.md` merujuk kelas yang tidak terdefinisi - Saat mengubah `template-swiss.html`, perbarui `layouts-swiss.md` dan `swiss-layout-lock.md` bersama-sama - Saat menambahkan aturan Swiss, perbarui `scripts/validate-swiss-deck.mjs` - Catat jebakan ke dalam `checklist.md` pada tingkat P0 / P1 / P2 / P3 yang sesuai - Warna tema baru dimasukkan ke `themes.md` dengan kasus penggunaan yang direkomendasikan ## Lisensi MIT © 2026 [op7418](https://github.com/op7418) ## FAQ ### Apa itu Keahlian Agen PPT HTML Guizang? Keahlian PPT HTML Guizang adalah alat yang kompatibel dengan Agen AI yang dirancang untuk menghasilkan presentasi HTML satu file, gambar pendukung, dan sampul multi-platform. Ini menawarkan dua gaya visual berbeda: Majalah Elektronik dan Internasionalisme Swiss. ### Bagaimana cara menginstal Keahlian Agen PPT HTML Guizang? Anda dapat menginstalnya dengan menjalankan \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` di terminal Anda, atau dengan menginstruksikan Agen AI berakses shell untuk mengkloning repositori ke direktori keahlian Anda. ### Dapatkah saya menyesuaikan warna PPT HTML saya? Tidak, nilai HEX kustom tidak diizinkan. Keahlian ini menyediakan pilihan tema prasetel untuk Gaya A (Majalah Elektronik) dan Gaya B (Internasionalisme Swiss) untuk memastikan konsistensi estetika dan kualitas output. ### Apa dua gaya visual yang ditawarkan? Gaya A, 'Majalah Elektronik × E-ink,' ideal untuk bercerita, opini, dan ekspresi pribadi. Gaya B, 'Internasionalisme Swiss,' paling cocok untuk menyajikan fakta, analisis produk, dan metodologi dengan desain berbasis grid dan minimalis. ### Apakah mungkin untuk mengekspor PPT HTML ke format PPTX? Pengiriman intinya adalah HTML, yang dapat ditampilkan langsung di browser, di-screenshot, atau direkam. Meskipun ekspor PPTX langsung bukan fitur utama, Anda dapat menggunakan halaman HTML sebagai draf visual untuk konversi jika diperlukan. ### Apakah keahlian ini mendukung pembuatan gambar untuk PPT HTML saya? Ya, ketika digunakan di lingkungan Codex, keahlian ini dapat memanfaatkan GPT-Image 2.0 / GPT-M 2.0 untuk menghasilkan berbagai jenis gambar, infografis, dan skenario UI, yang kemudian dimasukkan ke dalam presentasi Anda sesuai dengan rasio template.