Keterampilan Agen Kartu Sosial

Skill agen untuk Claude Code, Codex, dan lingkungan agen koding serupa. Skill ini menghasilkan gambar carousel Xiaohongshu / Rednote dan pasangan sampul WeChat 21:9 + 1:1 dari artikel, teks, tangkapan layar, catatan produk, subtitle, atau foto.

Dua sistem visual berbagi satu alur kerja:

• Editorial. Tata letak yang terkendali dengan semangat Monocle / Kinfolk / Cereal. Cocok untuk bercerita, gaya hidup, perjalanan, membaca, film, dan observasi pribadi.
• Swiss International. Berbasis grid, satu warna jangkar, garis tipis tajam, kontras tipe ekstrem. Cocok untuk ulasan produk, data, kerangka kerja, tutorial, dan alat AI.

Proyek saudara dari guizang-ppt-skill. Bahasa visual bersama, pemeliharaan terpisah. PPT memecahkan "presentasi geser horizontal"; skill ini memecahkan "gambar feed statis."

Mulai dalam 30 detik

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

Atau tempelkan ini ke agen AI dengan akses shell:

Install guizang-social-card-skill for me. Clone https://github.com/op7418/guizang-social-card-skill into ~/.claude/skills/guizang-social-card-skill, then verify that SKILL.md, assets/, and references/ exist.

Jika Anda sudah menginstalnya, perbarui dengan:

Update guizang-social-card-skill for me. Go to ~/.claude/skills/guizang-social-card-skill, run git pull, then tell me the latest commit.

Kemudian minta agen Anda:

Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue.

Prompt berguna lainnya:

Make me a 3:4 Xiaohongshu set from this product review, with editorial-style titles.
Turn this article into a WeChat cover pair: 21:9 hero + 1:1 share card, visually consistent.
I have 3 camping photos — make me an image-led Xiaohongshu carousel.
Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallhaven.

Apa yang Anda dapatkan

• 🖋 Dua sistem visual: Editorial untuk atmosfer dan narasi, Swiss untuk fakta dan struktur, berbagi satu alur kerja
• 📐 3 ukuran kanvas: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 kerangka tata letak: 16 Editorial (M01-M16, termasuk Sampul Berbasis Gambar, Pipeline, Sebelum/Sesudah) + 12 Swiss (S01-S12, termasuk Menara KPI, Diagram Batang H, Matriks + Pahlawan)
• 🎨 10 preset tema: 6 Editorial (Klasik Tinta, Porselen Indigo, Tinta Hutan, Kertas Kraft, Bukit Pasir, Tinta Tengah Malam gelap) + 4 warna jangkar Swiss (Biru Klein IKB, Lemon, Hijau Lemon, Oranye Keselamatan)
• 🖼 Alur kerja sumber gambar: gambar pengguna terlebih dahulu; jika tidak, lakukan waterfall melalui Unsplash → Pexels → Flickr CC → Wallhaven → pencarian langsung, diunduh secara lokal dengan SOURCES.md yang dibuat otomatis
• 🌫 Latar belakang aliran tinta WebGL: halaman pahlawan editorial dapat menyertakan animasi tinta langsung; dapat dinonaktifkan untuk perangkat berdaya rendah atau mode tangkapan layar
• 🪧 Overlay gambar + keamanan wajah: gambar penuh harus membawa masker; zona penurunan teks harus menghindari subjek. Aturan keras di references/image-overlay.md
• 🧰 Aset beautifikasi tangkapan layar: 9 latar belakang WebP tekstur nyata (5 Editorial / 4 Swiss), dipasangkan dengan utilitas .frame-shot / .device-browser / .device-phone
• 🗺 Komponen peta: MapLibre + ubin nyata OSM, multi-pin + konektor, dibuat untuk panduan perjalanan
• ✅ Validator: validate-social-deck.mjs mendeteksi otomatis overflow, pelanggaran batas tipe, kesenjangan kepadatan 4-band, dan tabrakan footer
• 📄 HTML file tunggal + rendering Playwright: tanpa pipeline build frontend; node render.mjs menghasilkan PNG langsung

Cocok / Tidak cocok

✅ Cocok: carousel Xiaohongshu / pasangan sampul WeChat / sampul Moments / sampul Channels / visual artikel / halaman tutorial / rekap data / panduan perjalanan / ulasan produk / penjelas tangkapan layar

❌ Tidak cocok: Deck geser horizontal (gunakan guizang-ppt-skill) / pembuatan video bentuk panjang / retouching foto murni / pengeditan teks biasa tanpa tata letak

11 kategori Xiaohongshu

Berdasarkan "lingkaran kompetensi" — lihat references/category-cookbook.md:

Kuat end-to-end (teks / struktur / gambar semua dalam cakupan):

• Perjalanan, karier, rekomendasi (setelah menentukan sub-genre)

Teks dan struktur kuat, gambar bergantung pada pengguna atau seni bersumber:

• Permainan, film, makanan (berorientasi resep), tata rias (berorientasi tutorial), kebugaran, rumah, mode (pilihan kurasi)

Di luar cakupan, dinyatakan di awal (tidak akan dipaksakan):

• Tembakan langsung OOTD / dreamcore / penilaian emulasi film / tata rias uji kulit nyata — apa pun yang sangat bergantung pada fotografi atau pasca-produksi

Skenario umum

Mengapa HTML file tunggal ke PNG

• Ramah agen: HTML + CSS adalah teks — agen dapat menulis, membaca, mengedit, dan memvalidasi langsung
• Presisi tata letak: CSS Grid + aturan tipe / margin / grid yang ketat jauh melampaui jangkauan tata letak Markdown
• Sumber gambar terbuka: terhubung ke Unsplash / Pexels / Wallhaven / Mapbox / OSM / sumber daya web apa pun
• Kualitas terverifikasi: validate-social-deck.mjs menjalankan pengukuran DOM Playwright, bukan tebakan
• Pengiriman sederhana: output/*.png dikirim langsung — tanpa deploy, tanpa alat ekspor

Dukungan platform

Instal

Opsi 1: Instal satu baris (disarankan)

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

Opsi 2: Tempelkan ini ke AI

Instal skill Claude Code guizang-social-card-skill untuk saya. Langkah-langkah:

1. Pastikan ~/.claude/skills/ ada (buat jika belum)
2. Jalankan git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
3. Verifikasi: ls ~/.claude/skills/guizang-social-card-skill/ harus menampilkan SKILL.md, assets/, references/
4. Beri tahu saya setelah selesai. Nanti, mengatakan hal-hal seperti "buatkan saya carousel Xiaohongshu" akan memicu skill ini.

Tempelkan blok di atas ke Claude Code / Cursor / agen AI apa pun dengan akses shell.

Opsi 3: CLI manual

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Cara memicunya

Setelah diinstal, Claude Code mendeteksi skill secara otomatis. Frasa pemicu:

• "Buatkan saya carousel Xiaohongshu / Rednote"
• "Buatkan saya kartu Rednote"
• "Buat pasangan sampul WeChat 21:9 + 1:1"
• "Hasilkan kartu sosial / kartu sosial bergaya majalah"
• "Ubah artikel ini menjadi carousel tutorial"
• "Buat ulasan Xiaohongshu bergaya Swiss / kartu bergaya IKB"

Alur kerja

Skill ini adalah alur kerja terstruktur. Agen berjalan melalui 7 langkah:

1. Intake — tangkap 4 hal: platform target / gaya / konten sumber / gambar pengguna. Jika tidak ada gambar, presentasikan A/B/C sekali (ambil sendiri / hasilkan AI / sumber daring); jangan tawarkan lagi
2. Gaya & Tema — pilih Editorial atau Swiss, lalu pilih salah satu dari 10 preset tema. Nilai hex kustom tidak diizinkan
3. Pemilihan Tata Letak — pilih / tempel / adaptasi teks dari 28 kerangka tata letak. 16 Editorial / 12 Swiss
4. Persiapan Aset — sumber gambar (Unsplash / Pexels / Flickr CC / Wallhaven / pencarian langsung), unduh secara lokal + tulis SOURCES.md; tanyakan apakah akan mencantumkan sumber
5. Susun & Render — salin template benih → ganti <!-- POSTERS_HERE --> → node render.mjs
6. Kirim & Tinjau — tampilkan PNG terlebih dahulu, tanyakan "lihat sendiri, atau ingin saya jalankan validator?" — tidak melakukan validasi otomatis
7. Iterasi — terapkan umpan balik pengguna, sesuaikan gaya inline atau tukar tata letak / gambar, render ulang

Spesifikasi lengkap di SKILL.md. Detail mendalam di references/*.md yang cocok.

Validator

node validate-social-deck.mjs path/to/task-dir

6 aturan, berdasarkan pengukuran render nyata Playwright, bukan pemindaian statis:

• R1 Overflow — setiap bagian yang melampaui .poster langsung gagal
• R2 Batas Tipe — kombinasi ukuran + bobot .h-xl / .h-display yang melebihi definisi benih
• R3 Tabrakan Footer — konten menekan ke footer / nomor halaman bawah
• R4 Kepadatan 4-Band — kanvas setinggi 1440 dibagi menjadi 4 pita horizontal; masing-masing harus berisi konten atau memiliki alasan yang dinyatakan untuk ruang kosong
• R5 Frame Overflow — anak .frame-img / .frame-shot melampaui frame
• R6 Identitas Swiss — template Swiss dengan font-weight >= 700 inline memperingatkan (melanggar "lebih besar berarti lebih tipis")

SKILL.md Langkah 7 secara eksplisit menyatakan validator tidak berjalan otomatis — tunggu pengguna melihat gambar terlebih dahulu, menghemat puluhan detik per putaran.

Preset tema

Pilih dari references/theme-presets.md. Nilai hex kustom tidak diizinkan — melindungi estetika lebih penting daripada kebebasan memilih.

Editorial (6)

Swiss (4)

Untuk mengganti tema, cukup ganti atribut <section class="poster" data-theme="..."> pada template benih; semua CSS diselesaikan melalui var(--...).

Direktori

guizang-social-card-skill/
├── SKILL.md                              ← File skill utama: alur kerja 7 langkah
├── README.md                             ← README bahasa Indonesia
├── README.en.md                          ← File ini
├── HANDOFF.md                            ← Dokumen serah terima: fakta + riwayat versi
├── PRODUCT.md                            ← Dokumen produk: pemikiran + keputusan + peta jalan
├── validate-social-deck.mjs              ← Validator tata letak Playwright
├── assets/
│   ├── template-editorial-card.html      ← Benih Editorial (6 tema / 3 kanvas)
│   ├── template-swiss-card.html          ← Benih Swiss (4 aksen / 3 kanvas)
│   ├── magazine-bg-webgl.js              ← Latar belakang aliran tinta WebGL
│   └── screenshot-backgrounds/           ← 9 latar belakang panggung tangkapan layar (WebP)
│       ├── style-a/                      ←   5 Editorial
│       └── style-b/                      ←   4 Swiss
└── references/
    ├── platform-specs.md                 ← Platform × resolusi × penamaan
    ├── style-system.md                   ← Aturan keras dan anti-pola untuk kedua gaya
    ├── theme-presets.md                  ← Semua 10 palet secara detail
    ├── layout-recipes.md                 ← 28 kerangka tata letak (M01-M16 + S01-S12)
    ├── components.md                     ← Tipe / kartu / spasi / ikon
    ├── background-systems.md             ← Aliran tinta / grid / lapisan kertas
    ├── portrait-fill.md                  ← Strategi ruang kosong untuk papan 3:4
    ├── content-planning.md               ← Kait / pemisahan halaman / kompresi teks
    ├── category-cookbook.md              ← Tabel rute 11 kategori Xiaohongshu
    ├── image-overlay.md                  ← Aturan masker gambar penuh + keamanan wajah
    ├── screenshot-treatment.md           ← Utilitas `.frame-shot` + beautifikasi tangkapan layar
    ├── map-component.md                  ← Peta MapLibre `.map-block`
    ├── title-shortener.md                ← Strategi judul pendek untuk sampul 1:1
    ├── production-workflow.md            ← Pipeline render Playwright
    └── qa-checklist.md                   ← Daftar periksa kualitas

Prinsip desain inti

1. Kendali diri lebih baik daripada kebisingan — palet yang terkendali menonjol di feed yang jenuh
2. Struktur lebih penting daripada dekorasi — tipe / kontras / grid membawa hierarki, bukan bayangan atau kartu
3. Tata letak lebih penting daripada kebebasan — pilih dulu, adaptasi kemudian; jangan menciptakan halaman di luar 28 kerangka
4. Gambar pengguna diutamakan — saat intake, presentasikan A/B/C sekali; jangan tawarkan lagi untuk mengambil sendiri
5. Masker + hindari — gambar penuh selalu membawa masker; zona penurunan teks harus membersihkan subjek (wajah / produk / area padat teks)
6. Lebih besar berarti lebih tipis — ukuran .h-xl Swiss naik → bobot harus turun. Editorial mengikuti aturan yang sama
7. Tidak ada validasi otomatis — biarkan pengguna melihat dulu, lalu tanyakan sebelum memvalidasi; menghemat puluhan detik per putaran
8. Skill adalah produk, bukan prompt — memiliki PRODUCT.md, nomor versi, CHANGELOG, batasan kemampuan
9. Tes lokal tidak masuk git — semua demo / tes asap berada di bawah local-tests/, di-gitignore

Referensi visual

• Tata letak dan spasi huruf majalah Monocle / Kinfolk / Cereal
• Sistem grid Massimo Vignelli / Helvetica Forever / Gaya Tipografi Internasional Swiss
• Rasio gambar-ke-teks Apartamento / The Gentlewoman dan potret manusia
• Sampel "kendali-menang-feed" dari Xiaohongshu / Rednote
• Praktik kartu sosial Guizang

Peta jalan

• Lebih banyak tes asap untuk kasus tepi batas tipe di bawah konten Editorial panjang
• Lebih banyak tata letak data Swiss (kerangka bagan tambahan)
• Pasca-generasi gambar: tanyakan secara aktif apakah akan melakukan perbaikan lokal / menghasilkan ulang seluruh gambar
• Lebih banyak paket tata letak yang direkomendasikan khusus kategori (saat ini 7 dari 11 kuat end-to-end)
• Versi WorkBuddy siap pasar

Berkontribusi

Bug, masalah tata letak, permintaan tata letak baru — Issue dan PR diterima. Prioritas untuk perubahan:

• Saat mengedit template benih, perbarui juga tabel korespondensi references/components.md (ukuran / spasi / bobot)
• Saat menambahkan tata letak, tambahkan resep lengkap ke references/layout-recipes.md (batas salin + kepadatan minimum)
• Saat menambahkan warna tema, perbarui juga blok [data-theme="..."] template benih + references/theme-presets.md
• Saat menambahkan aturan Swiss, perbarui juga aturan yang cocok di validate-social-deck.mjs
• Kesalahan yang Anda temui dimasukkan ke references/qa-checklist.md
• Tes dan demo berada di bawah local-tests/ — jangan mencemari root skill

Lisensi

AGPL-3.0 © 2026 op7418

Proyek ini dilisensikan di bawah GNU AGPL-3.0. Poin penting:

1. Atribusi diperlukan — Pertahankan pemberitahuan hak cipta
2. Turunan harus bersumber terbuka — Setiap versi modifikasi, fork, atau redistribusi harus dirilis di bawah AGPL-3.0 (atau lisensi yang kompatibel), dengan kode sumber lengkap tersedia
3. Penggunaan jaringan adalah distribusi — Bahkan jika Anda hanya menjalankan versi modifikasi sebagai SaaS / layanan web tanpa mendistribusikan kode, Anda tetap harus mempublikasikan sumbernya (ini yang membuat AGPL lebih ketat daripada GPL)
4. Tidak ada distribusi sumber tertutup, berpemilik, atau hanya berbayar

Ketentuan lengkap di LICENSE.