# Keterampilan Agen Kartu Sosial > Buat kartu sosial yang memukau secara visual untuk carousel Xiaohongshu dan pasangan sampul WeChat dari berbagai sumber konten. Manfaatkan sistem desain editorial atau Swiss untuk menciptakan visual yang menarik untuk artikel dan postingan Anda. - Canonical: https://nanoskill.ai/id/skills/social-card-generation - Markdown: https://nanoskill.ai/id/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: id - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About Keterampilan Kartu Sosial Guizang adalah kemampuan agen tingkat lanjut yang dirancang untuk menyederhanakan pembuatan kartu sosial untuk platform seperti Xiaohongshu dan WeChat. Ini memberdayakan pengguna untuk mengubah konten yang beragam – dari artikel dan catatan produk hingga tangkapan layar dan foto – menjadi visual yang dipoles dan dioptimalkan untuk platform. Dengan menawarkan sistem desain Editorial dan Swiss International yang berbeda, keterampilan ini memastikan bahwa baik tujuan Anda adalah bercerita naratif atau penjelasan berbasis data, kartu sosial Anda akan menarik dan konsisten secara estetika, siap untuk menarik perhatian audiens. Keterampilan ini menonjol dengan alur kerja terstruktur, menyediakan 28 kerangka tata letak dan 10 preset tema untuk memandu presentasi konten. Ini mengotomatisasi pencarian gambar dari platform populer dan menyertakan validator berbasis Playwright yang tangguh untuk menjaga kualitas visual dengan mendeteksi masalah tata letak umum. Output dikirimkan sebagai HTML satu file, dirender langsung ke PNG, membuatnya sangat kompatibel dengan lingkungan agen pengkodean seperti Claude Code dan Codex. Pengguna dapat memanfaatkan Keterampilan Kartu Sosial Guizang untuk berbagai kasus penggunaan, seperti membuat carousel multi-kartu Xiaohongshu dari artikel panjang, mendesain pasangan kartu sampul 21:9 dan kartu berbagi 1:1 WeChat yang harmonis secara visual, atau menghasilkan visual tutorial yang jelas dari tangkapan layar. Prinsip desainnya mengutamakan pengekangan, struktur, dan penanganan gambar yang berpusat pada pengguna, memastikan konten media sosial yang profesional dan berdampak tanpa memerlukan keahlian desain yang luas. ## Key features - **Sistem Visual Ganda**: Pilih antara gaya Editorial untuk bercerita (Monocle, Kinfolk) atau gaya Swiss International untuk data dan struktur (grid-pertama, garis rambut tajam) untuk menyesuaikan dengan nada konten Anda. - **Berbagai Ukuran Kanvas**: Mendukung Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900), dan WeChat 1:1 (1080x1080) untuk kehadiran media sosial yang serbaguna. - **Kerangka Tata Letak yang Luas**: Akses 28 kerangka tata letak yang telah dirancang sebelumnya (16 Editorial, 12 Swiss) termasuk sampul berbasis gambar, menara KPI, dan grafik batang H untuk penataan konten yang cepat. - **Pengambilan Gambar Otomatis**: Secara otomatis mencari gambar dari Unsplash, Pexels, Flickr CC, Wallhaven, atau pencarian langsung, mengunduhnya secara lokal dengan file SOURCES.md yang dihasilkan secara otomatis. - **Validator Tata Letak**: Termasuk validator berbasis Playwright untuk mendeteksi overflow, pelanggaran batas jenis, celah kepadatan, dan tabrakan footer, memastikan pembuatan kartu sosial berkualitas tinggi. ## Use cases - **Buat Korsel Xiaohongshu**: Ubah artikel panjang, ulasan produk, atau panduan perjalanan menjadi korsel multi-kartu yang menarik untuk Xiaohongshu, menggunakan desain Editorial atau Swiss. - **Desain Pasangan Sampul WeChat**: Hasilkan gambar pahlawan 21:9 yang konsisten secara visual dan kartu berbagi 1:1 untuk WeChat Moments dan Channels dari sumber konten apa pun. - **Hasilkan Visual Tutorial**: Ubah tutorial tangkapan layar, panduan game, atau panduan alat menjadi kartu sosial terstruktur dengan tangkapan layar yang dipercantik dan tata letak yang jelas. - **Ringkasan Data dan Ulasan**: Sajikan ulasan produk, rekapan data, atau konten tinjauan tahunan menggunakan tata letak gaya Swiss dengan grafik dan matriks untuk komunikasi yang jelas. ## Result preview Jelajahi carousel media sosial profesional yang didukung oleh Keterampilan ini. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Instal Tambahkan Keterampilan Pembuatan Kartu Sosial ke agen AI Anda. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Deskripsikan Konten Berikan konten, topik, atau pesan utama yang ingin Anda ubah menjadi kartu media sosial. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Hasilkan Kartu Sosial Buat desain kartu yang menarik secara visual dan dioptimalkan untuk platform dengan hierarki informasi yang jelas, alur bercerita yang kuat, dan tata letak siap publikasi. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition 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](https://github.com/op7418/guizang-ppt-skill). Bahasa visual bersama, pemeliharaan terpisah. PPT memecahkan "presentasi geser horizontal"; skill ini memecahkan "gambar feed statis." ![Pratinjau Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## Mulai dalam 30 detik ```bash 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: ```text 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: ```text 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: ```text Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue. ``` Prompt berguna lainnya: ```text 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](https://github.com/op7418/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`](./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 | Tugas | Alur yang disarankan | |------|------------------| | Artikel panjang → carousel Xiaohongshu | Ekstrak intisari; Editorial untuk tempo naratif, Swiss untuk pemecahan data | | Ulasan produk / rangkuman alat | Swiss + biru IKB, lebih suka `S09 Menara KPI` / `S10 Diagram Batang H` | | Perjalanan / gaya hidup | Editorial + Tinta Tengah Malam atau Bukit Pasir, `M16 Sampul Berbasis Gambar` untuk pahlawan penuh | | Pasangan sampul WeChat | Render konten yang sama dua kali: `.poster.wide` 21:9 + `.poster.square` 1:1, konsisten secara visual | | Tutorial tangkapan layar / panduan alat | `.frame-shot` + `.device-browser`, lebih suka dasar grid Swiss | | Panduan permainan / rekap film | Editorial + Tinta Tengah Malam, ambil seni game dari Wallhaven untuk pahlawan penuh | | Rekap data / tinjauan tahun | Swiss + Lemon atau Oranye Keselamatan, kombinasi matriks + buku besar | ## 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 | Platform | Status | Catatan | |----------|--------|-------| | Claude Code | Didukung | Alur kerja Skill asli, ideal untuk menghasilkan + mengiterasi kartu | | Codex | Didukung | Baik untuk generasi kartu bentuk panjang, sumber gambar, QA visual | | Cursor / agen lokal lainnya | Berfungsi | Membutuhkan baca/tulis sistem file + eksekusi shell | | Chatbot biasa | Tidak disarankan | Tanpa sistem file dan pipeline rendering, tidak dapat mengirim gambar dengan andal | ## Instal ### Opsi 1: Instal satu baris (disarankan) ```bash 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 ```bash 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 `` → `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`](./SKILL.md). Detail mendalam di `references/*.md` yang cocok. ## Validator ```bash 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`](./references/theme-presets.md). **Nilai hex kustom tidak diizinkan** — melindungi estetika lebih penting daripada kebebasan memilih. ### Editorial (6) | Tema | Nada | Cocok untuk | |-------|-------|----------| | 🖋 **Klasik Tinta** | `#0a0a0b` / `#f1efea` | Default umum, topik komersial, saat ragu | | 🌊 **Porselen Indigo** | `#0a1f3d` / `#f1f3f5` | Teknologi, riset, AI, penulisan teknis | | 🌿 **Tinta Hutan** | `#1a2e1f` / `#f5f1e8` | Alam, keberlanjutan, luar ruangan, non-fiksi | | 🍂 **Kertas Kraft** | `#2a1e13` / `#eedfc7` | Nostalgia, humaniora, membaca, sastra | | 🌙 **Bukit Pasir** | `#1f1a14` / `#f0e6d2` | Seni, desain, kreatif, mode | | ⚫ **Tinta Tengah Malam** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Seni kunci game / adegan malam / sampul sinematik / tema gelap bergaya Black Myth · Elden Ring | ### Swiss (4) | Tema | Jangkar | Cocok untuk | |-------|--------|----------| | 🔵 **Biru Klein IKB** | `#002FA7` | Default umum, peluncuran komersial, produk AI, kerangka kerja | | 🟡 **Lemon** | `#FFD500` | Anak muda, olahraga, ritel, konsumen, Y2K | | 🟢 **Hijau Lemon** | `#C5E803` | Ramah lingkungan, kesehatan, Gen Z, merek hijau | | 🟠 **Oranye Keselamatan** | `#FF6B35` | Peringatan, berita, industri, tema energetik | Untuk mengganti tema, cukup ganti atribut `
` 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](https://github.com/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`](./LICENSE). ## FAQ ### Apa itu Keterampilan Kartu Sosial Guizang? Keterampilan Kartu Sosial Guizang adalah keterampilan agen untuk Kode Claude, Kodeks, dan lingkungan agen pengkodean serupa yang menghasilkan korsel Xiaohongshu dan pasangan sampul WeChat dari berbagai masukan konten seperti artikel, catatan, atau foto, menggunakan sistem desain visual yang berbeda. ### Jenis konten apa yang dapat saya gunakan untuk menghasilkan kartu sosial? Anda dapat menggunakan artikel, salinan, tangkapan layar, catatan produk, subtitle, atau foto sebagai konten sumber untuk menghasilkan kartu sosial. Keterampilan ini beradaptasi dengan berbagai masukan untuk menciptakan keluaran yang menarik secara visual. ### Apa dua sistem visual yang tersedia untuk pembuatan kartu sosial? Keterampilan ini menawarkan dua sistem visual: 'Editorial' untuk konten bercerita, gaya hidup, dan naratif, dan 'Swiss International' untuk ulasan produk, data, kerangka kerja, dan tutorial, yang dicirikan oleh pendekatan grid-pertama. ### Dapatkah saya menggunakan warna khusus untuk kartu sosial saya? Tidak, nilai hex kustom tidak diizinkan. Keterampilan ini menyediakan 10 preset tema (6 Editorial, 4 Swiss) untuk menjaga kohesi visual dan kualitas. Anda dapat mengganti tema dengan memperbarui atribut data-theme pada template benih. ### Bagaimana cara menginstal Keterampilan Kartu Sosial Guizang? Anda dapat menginstalnya menggunakan \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` atau dengan mengkloning repositori ke direktori keterampilan agen Anda. ### Apakah keterampilan ini mendukung konten bahasa Inggris? Ya, keterampilan ini mendukung konten bahasa Inggris. Kedua font Editorial (Playfair Display + Noto Serif) dan Swiss (Inter + Helvetica) mencakup bahasa Mandarin dan Inggris, dan kerangka tata letaknya tidak bergantung pada bahasa.