Keterampilan Agen PPT HTML Guizang

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

Tema Baru · Gaya B Swiss Internasional

Mulai dalam 30 detik

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Atau tempelkan ini ke agen AI dengan akses shell:

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:

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:

Buat dek gaya Swiss dari artikel ini, sekitar 7 slide, dengan 2-3 visual yang dihasilkan.

Perintah berguna lainnya:

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

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

Instalasi

Opsi 1: Instal satu baris (disarankan)

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

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.

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:

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. Pembingkaian tangkapan layar ada di 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:

Buat dek gaya Swiss 8 slide dari artikel ini, dengan 3 visual yang dihasilkan cocok dengan slot gambar templat.

Ubah dokumen analisis produk ini menjadi dek gaya majalah editorial dengan ritme naratif yang kuat.

Dari ide inti dek ini, buat dua sampul: sampul utama 21:9 dan kartu bagikan 1:1 yang dipasangkan secara visual.

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

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.

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