ทักษะตัวแทนการ์ดโซเชียล

สกิลเอเจนต์สำหรับ Claude Code, Codex และสภาพแวดล้อมของเอเจนต์การเขียนโค้ดที่คล้ายกัน มันสร้าง ภาพคาร์รูเซลสำหรับ Xiaohongshu / Rednote และ คู่ปก WeChat ขนาด 21:9 + 1:1 จากบทความ ข้อความ ภาพหน้าจอ โน้ตผลิตภัณฑ์ คำบรรยาย หรือรูปถ่าย

ระบบภาพสองระบบใช้เวิร์กโฟลว์เดียวกัน:

• Editorial เลย์เอาต์ที่เรียบง่ายในสไตล์ของ Monocle / Kinfolk / Cereal เหมาะสำหรับการเล่าเรื่อง ไลฟ์สไตล์ การเดินทาง การอ่าน ภาพยนตร์ และข้อสังเกตส่วนตัว
• Swiss International เน้นกริด สีหลักเพียงสีเดียว เส้นคมชัด คอนทราสต์ของตัวอักษรสูงมาก เหมาะสำหรับรีวิวผลิตภัณฑ์ ข้อมูล เฟรมเวิร์ก ทูเทอเรียล และเครื่องมือ AI

โปรเจกต์คู่กับ guizang-ppt-skill ใช้ภาษาภาพร่วมกัน แยกการบำรุงรักษา PPT แก้ปัญหา "สไลด์นำเสนอแนวนอน" ส่วนอันนี้แก้ปัญหา "รูปภาพแบบคงที่สำหรับฟีด"

เริ่มต้นใน 30 วินาที

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

หรือวางคำสั่งนี้ให้กับเอเจนต์ AI ที่มีสิทธิ์เข้าถึง 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.

ถ้าคุณติดตั้งไปแล้ว อัปเดตด้วย:

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

จากนั้นขอให้เอเจนต์ของคุณ:

ทำคาร์รูเซล Xiaohongshu / Rednote ให้ฉัน

คำสั่งที่มีประโยชน์อื่นๆ:

ทำการ์ด Rednote ให้ฉัน
สร้างคู่ปก WeChat 21:9 + 1:1
สร้างการ์ดโซเชียล / การ์ดในสไตล์นิตยสาร
เปลี่ยนบทความนี้เป็นคาร์รูเซลทูเทอเรียล
สร้างรีวิว Xiaohongshu ในสไตล์ Swiss / การ์ดในสไตล์ IKB

สิ่งที่คุณจะได้รับ

• 🖋 ระบบภาพสองระบบ: Editorial สำหรับบรรยากาศและการเล่าเรื่อง, Swiss สำหรับข้อเท็จจริงและโครงสร้าง ใช้เวิร์กโฟลว์เดียวกัน
• 📐 ขนาดแคนวาส 3 แบบ: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 โครงสร้างเลย์เอาต์ 28 แบบ: 16 Editorial (M01-M16 รวมถึง Image-Led Cover, Pipeline, Before/After) + 12 Swiss (S01-S12 รวมถึง KPI Tower, H-Bar Chart, Matrix + Hero)
• 🎨 ธีมพรีเซ็ต 10 แบบ: 6 Editorial (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, Midnight Ink โหมดมืด) + 4 Swiss สีหลัก (IKB Klein Blue, Lemon, Lemon Green, Safety Orange)
• 🖼 เวิร์กโฟลว์การจัดหาภาพ: ใช้ภาพจากผู้ใช้ก่อน; ถ้าไม่มีจะต่อด้วย Unsplash → Pexels → Flickr CC → Wallhaven → ค้นหาโดยตรง ดาวน์โหลดในเครื่องพร้อม SOURCES.md ที่สร้างอัตโนมัติ
• 🌫 พื้นหลังหมึกไหล WebGL: เพจฮีโร่ของ Editorial สามารถมีภาพเคลื่อนไหวหมึกสดได้; สามารถปิดสำหรับอุปกรณ์ที่ใช้พลังงานต่ำหรือโหมดภาพหน้าจอ
• 🪧 การซ้อนภาพ + ความปลอดภัยของใบหน้า: รูปภาพเต็มพื้นที่จะต้องมีหน้ากาก; พื้นที่วางข้อความต้องหลีกเลี่ยงตัวแบบ กฎแน่นอนใน references/image-overlay.md
• 🧰 แอสเสทสำหรับตกแต่งภาพหน้าจอ: พื้นหลัง WebP ภาพเนื้อสัมผัสจริง 9 แบบ (5 Editorial / 4 Swiss) มาพร้อมยูทิลิตี้ .frame-shot / .device-browser / .device-phone
• 🗺 ส่วนประกอบแผนที่: MapLibre + OSM ภาพจริง, หมุดหลายอัน + เส้นเชื่อม, ทำขึ้นสำหรับคู่มือการเดินทาง
• ✅ เครื่องมือตรวจสอบความถูกต้อง: validate-social-deck.mjs ตรวจจับอัตโนมัติการล้น, การละเมิดขีดจำกัดตัวอักษร, ช่องว่างความหนาแน่น 4 แบนด์ และการชนกันของส่วนท้าย
• 📄 HTML ไฟล์เดี่ยว + Playwright เรนเดอร์: ไม่มี build pipeline ฟร้อนท์เอนด์; node render.mjs สร้าง PNG โดยตรง

เหมาะสม / ไม่เหมาะสม

✅ เหมาะสม: คาร์รูเซล Xiaohongshu / คู่ปก WeChat / ปก Moments / ปก Channels / ภาพประกอบบทความ / หน้าทูเทอเรียล / สรุปข้อมูล / คู่มือการเดินทาง / รีวิวผลิตภัณฑ์ / ภาพหน้าจออธิบาย

❌ ไม่เหมาะสม: สไลด์แนวนอน (ใช้ guizang-ppt-skill) / การสร้างวิดีโอแบบยาว / การปรับแต่งภาพถ่ายล้วนๆ / การแก้ไขข้อความธรรมดาที่ไม่มีเลย์เอาต์

11 หมวดหมู่ Xiaohongshu

จัดระดับตาม "ขอบเขตความสามารถ" — ดู references/category-cookbook.md:

เก่งแบบครบวงจร (ครอบคลุมทั้งข้อความ / โครงสร้าง / ภาพ):

• การเดินทาง, การงาน, คำแนะนำ (หลังจากระบุหมวดย่อย)

เก่งด้านข้อความและโครงสร้าง ภาพขึ้นอยู่กับผู้ใช้หรือภาพที่หาได้:

• เกม, ภาพยนตร์, อาหาร (เน้นสูตร), การแต่งหน้า (เน้นการแนะนำ), ฟิตเนส, บ้าน, แฟชั่น (เลือกคัด)

นอกขอบเขต แจ้งล่วงหน้า (จะไม่พยายามบังคับ):

• ภาพถ่ายสด OOTD / dreamcore / การปรับสีเลียนแบบฟิล์ม / การแต่งหน้าที่ใช้สภาพผิวจริง — อะไรก็ตามที่ขึ้นอยู่กับการถ่ายภาพหรือการประมวลผลหลังถ่ายอย่างมาก

กรณีการใช้งานทั่วไป

ทำไมต้อง HTML ไฟล์เดี่ยวเป็น PNG

• เป็นมิตรกับเอเจนต์: HTML + CSS เป็นข้อความ — เอเจนต์สามารถเขียน อ่าน แก้ไข และตรวจสอบได้โดยตรง
• ความแม่นยำของเลย์เอาต์: CSS Grid + กฎตัวอักษร/ระยะขอบ/กริดที่เข้มงวด เกินความสามารถของ Markdown ในการจัดวาง
• การหาภาพจากแหล่งเปิด: เชื่อมต่อกับ Unsplash / Pexels / Wallhaven / Mapbox / OSM / แหล่งข้อมูลเว็บใดๆ
• ตรวจสอบคุณภาพได้: validate-social-deck.mjs วัดผล DOM ด้วย Playwright ไม่ใช่การเดา
• ส่งมอบง่าย: output/*.png ส่งได้เลย — ไม่ต้องดีพลอย ไม่ต้องใช้เครื่องมือส่งออก

การรองรับแพลตฟอร์ม

ติดตั้ง

ตัวเลือก 1: ติดตั้งด้วยคำสั่งเดียว (แนะนำ)

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

ตัวเลือก 2: วางข้อความนี้ให้ AI

ติดตั้ง guizang-social-card-skill Claude Code skill ให้ฉัน ขั้นตอน:

1. ตรวจสอบว่า ~/.claude/skills/ มีอยู่ (ถ้าไม่มีให้สร้าง)
2. รัน git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
3. ตรวจสอบ: ls ~/.claude/skills/guizang-social-card-skill/ ควรเห็น SKILL.md, assets/, references/
4. แจ้งฉันเมื่อเสร็จ เมื่อหลังจากนั้นการพูดว่า "ทำคาร์รูเซล Xiaohongshu" จะเรียกสกิลนี้

วางข้อความข้างต้นลงใน Claude Code / Cursor / เอเจนต์ AI ใดๆ ที่มีสิทธิ์เข้าถึง shell

ตัวเลือก 3: ติดตั้งด้วย CLI เอง

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

วิธีเรียกใช้

เมื่อติดตั้งแล้ว Claude Code จะตรวจจับสกิลโดยอัตโนมัติ วลีที่ใช้เรียก:

• "ทำคาร์รูเซล Xiaohongshu / Rednote ให้ฉัน"
• "ทำการ์ด Rednote ให้ฉัน"
• "สร้างคู่ปก WeChat 21:9 + 1:1"
• "สร้างการ์ดโซเชียล / การ์ดในสไตล์นิตยสาร"
• "เปลี่ยนบทความนี้เป็นคาร์รูเซลทูเทอเรียล"
• "สร้างรีวิว Xiaohongshu ในสไตล์ Swiss / การ์ดในสไตล์ IKB"

เวิร์กโฟลว์

สกิลนี้เป็นเวิร์กโฟลว์ที่มีโครงสร้าง เอเจนต์จะดำเนินการ 7 ขั้นตอน:

1. เริ่มต้น — เก็บ 4 สิ่ง: แพลตฟอร์มเป้าหมาย / สไตล์ / เนื้อหาต้นฉบับ / ภาพจากผู้ใช้ เมื่อไม่มีภาพพร้อม แสดงตัวเลือก A/B/C ครั้งเดียว (ถ่ายเอง / AI สร้าง / หาจากออนไลน์); อย่าเสนอซ้ำ
2. สไตล์ & ธีม — เลือก Editorial หรือ Swiss จากนั้นเลือก 1 ใน 10 ธีมพรีเซ็ต ห้ามใช้ค่า hex กำหนดเอง
3. เลือกเลย์เอาต์ — เลือก / วาง / ปรับแต่งเนื้อหาจากโครงสร้างเลย์เอาต์ 28 แบบ 16 Editorial / 12 Swiss
4. เตรียมแอสเสท — หาภาพ (Unsplash / Pexels / Flickr CC / Wallhaven / ค้นหาโดยตรง) ดาวน์โหลดในเครื่อง + เขียน SOURCES.md; ถามว่าต้องการให้เครดิตแหล่งที่มาหรือไม่
5. ประกอบ & เรนเดอร์ — คัดลอกเทมเพลตเริ่มต้น → แทนที่ <!-- POSTERS_HERE --> → node render.mjs
6. ส่งมอบ & รีวิว — แสดง PNG ก่อน ถามว่า "ดูเอง หรือต้องการให้ฉันรันตัวตรวจสอบ?" — ไม่ตรวจสอบอัตโนมัติ
7. ทำซ้ำ — นำข้อเสนอแนะของผู้ใช้มาปรับแต่ง, ปรับสไตล์ภายในหรือสลับเลย์เอาต์/ภาพ, เรนเดอร์ใหม่

ข้อกำหนดฉบับเต็มใน SKILL.md รายละเอียดเชิงลึกใน references/*.md ที่เกี่ยวข้อง

ตัวตรวจสอบ

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

กฎ 6 ข้อ จากการวัดผลแบบเรนเดอร์จริงด้วย Playwright ไม่ใช่การสแกนแบบคงที่:

• R1 การล้น — ส่วนใดๆ ที่ล้น .poster จะล้มเหลวทันที
• R2 ขีดจำกัดตัวอักษร — การรวมขนาดและน้ำหนักของ .h-xl / .h-display ที่เกินกว่าที่กำหนดในต้นฉบับ
• R3 การชนกันของส่วนท้าย — เนื้อหาดันเข้าไปในส่วนท้ายหรือหมายเลขหน้าด้านล่าง
• R4 ความหนาแน่น 4 แบนด์ — แคนวาสสูง 1440 แบ่งเป็น 4 แถบแนวนอน; แต่ละแถบต้องมีเนื้อหาหรือมีเหตุผลที่ระบุถึงพื้นที่ว่าง
• R5 การล้นของกรอบ — ลูกของ .frame-img / .frame-shot ล้นกรอบ
• R6 เอกลักษณ์ Swiss — เทมเพลต Swiss ที่มี font-weight >= 700 ในบรรทัดจะเตือน (ละเมิดหลักการ "ใหญ่กว่าควรบางกว่า")

ขั้นตอนที่ 7 ใน SKILL.md ระบุอย่างชัดเจนว่า ตัวตรวจสอบไม่ทำงานโดยอัตโนมัติ — รอให้ผู้ใช้ดูภาพก่อน ประหยัดเวลาหลายสิบวินาทีต่อรอบ

ธีมพรีเซ็ต

เลือกจาก references/theme-presets.md ห้ามใช้ค่า hex กำหนดเอง — การปกป้องความสวยงามสำคัญกว่าอิสระในการเลือก

Editorial (6 แบบ)

Swiss (4 แบบ)

หากต้องการเปลี่ยนธีม เพียงเปลี่ยนแอตทริบิวต์ <section class="poster" data-theme="..."> บนเทมเพลตเริ่มต้น; CSS ทั้งหมดจะปรับตาม var(--...)

โครงสร้างไดเรกทอรี

guizang-social-card-skill/
├── SKILL.md                              ← ไฟล์สกิลหลัก: เวิร์กโฟลว์ 7 ขั้นตอน
├── README.md                             ← README ภาษาจีน
├── README.en.md                          ← ไฟล์นี้
├── HANDOFF.md                            ← เอกสารการส่งมอบ: ข้อเท็จจริง + ประวัติเวอร์ชัน
├── PRODUCT.md                            ← เอกสารผลิตภัณฑ์: กระบวนการคิด + การตัดสินใจ + แผนงาน
├── validate-social-deck.mjs              ← ตัวตรวจสอบเลย์เอาต์ด้วย Playwright
├── assets/
│   ├── template-editorial-card.html      ← เทมเพลตเริ่มต้น Editorial (6 ธีม / 3 แคนวาส)
│   ├── template-swiss-card.html          ← เทมเพลตเริ่มต้น Swiss (4 สีเน้น / 3 แคนวาส)
│   ├── magazine-bg-webgl.js              ← พื้นหลังหมึกไหล WebGL
│   └── screenshot-backgrounds/           ← พื้นหลังสำหรับภาพหน้าจอ 9 แบบ (WebP)
│       ├── style-a/                      ←   5 Editorial
│       └── style-b/                      ←   4 Swiss
└── references/
    ├── platform-specs.md                 ← ข้อมูลจำเพาะแพลตฟอร์ม × ความละเอียด × การตั้งชื่อ
    ├── style-system.md                   ← กฎแน่นอนและรูปแบบที่ควรหลีกเลี่ยงสำหรับทั้งสองสไตล์
    ├── theme-presets.md                  ← รายละเอียดพาเล็ตสีทั้งหมด 10 แบบ
    ├── layout-recipes.md                 ← โครงสร้างเลย์เอาต์ 28 แบบ (M01-M16 + S01-S12)
    ├── components.md                     ← ตัวอักษร / การ์ด / ระยะห่าง / ไอคอน
    ├── background-systems.md             ← หมึกไหล / กริด / เลเยอร์กระดาษ
    ├── portrait-fill.md                  ← กลยุทธ์พื้นที่ว่างสำหรับกระดาน 3:4
    ├── content-planning.md               ← การวางแผนเนื้อหา: การดึงดูด / การแบ่งหน้า / การบีบอัดข้อความ
    ├── category-cookbook.md              ← ตารางการจัดเส้นทาง 11 หมวดหมู่ Xiaohongshu
    ├── image-overlay.md                  ← หน้ากากภาพเต็มพื้น + กฎความปลอดภัยใบหน้า
    ├── screenshot-treatment.md           ← ยูทิลิตี้ `.frame-shot` + การตกแต่งภาพหน้าจอ
    ├── map-component.md                  ← แผนที่ `.map-block` MapLibre
    ├── title-shortener.md                ← กลยุทธ์การตั้งชื่อย่อสำหรับปก 1:1
    ├── production-workflow.md            ← Pipeline การเรนเดอร์ด้วย Playwright
    └── qa-checklist.md                   ← รายการตรวจสอบคุณภาพ

หลักการออกแบบหลัก

1. ความเรียบง่ายเหนือความดัง — พาเล็ตสีที่เรียบจะโดดเด่นในฟีดที่อัดแน่น
2. โครงสร้างเหนือการตกแต่ง — ตัวอักษร / คอนทราสต์ / กริดสร้างลำดับชั้น ไม่ใช่เงาหรือการ์ด
3. เลย์เอาต์เหนืออิสระ — เลือกก่อน ปรับทีหลัง ห้ามสร้างหน้านอกโครงสร้าง 28 แบบ
4. ภาพจากผู้ใช้มาก่อน — ในการเริ่มต้น เสนอตัวเลือก A/B/C ครั้งเดียว อย่าเสนอให้ถ่ายเองซ้ำ
5. หน้ากาก + หลีกเลี่ยง — ภาพเต็มพื้นจะมีหน้ากากเสมอ; พื้นที่วางข้อความต้องหลีกเลี่ยงตัวแบบ (ใบหน้า / ผลิตภัณฑ์ / บริเวณที่มีข้อความหนาแน่น)
6. ใหญ่กว่าควรบางกว่า — Swiss .h-xl ขนาดใหญ่ขึ้น → น้ำหนักต้องลดลง Editorial ใช้กฎเดียวกัน
7. ไม่ตรวจสอบอัตโนมัติ — ให้ผู้ใช้ดูก่อน แล้วถามก่อนตรวจสอบ; ประหยัดเวลาหลายสิบวินาทีต่อรอบ
8. สกิลคือผลิตภัณฑ์ ไม่ใช่แค่คำสั่ง — มี PRODUCT.md, หมายเลขเวอร์ชัน, CHANGELOG, ขอบเขตความสามารถ
9. การทดสอบในเครื่องอยู่นอก git — การสาธิตและการทดสอบเบื้องต้นอยู่ภายใต้ local-tests/ และถูก gitignore

ข้อมูลอ้างอิงด้านภาพ

• เลย์เอาต์นิตยสารและระยะห่างตัวอักษรของ Monocle / Kinfolk / Cereal
• ระบบกริดของ Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style
• อัตราส่วนภาพต่อข้อความและภาพบุคคลของ Apartamento / The Gentlewoman
• ตัวอย่างจาก Xiaohongshu / Rednote ที่ความเรียบชนะฟีด
• การฝึกฝนการ์ดโซเชียลของ Guizang

แผนงาน

• เพิ่มการทดสอบเบื้องต้นสำหรับกรณีขีดจำกัดตัวอักษรภายใต้เนื้อหา Editorial ที่มีความยาวมาก
• เพิ่มเลย์เอาต์ข้อมูล Swiss (โครงสร้างแผนภูมิเพิ่มเติม)
• หลังจากสร้างภาพ: ถามผู้ใช้อย่างกระตือรือร้นว่าต้องการแก้ไขเฉพาะจุดหรือสร้างภาพใหม่ทั้งหมด
• แพ็คเลย์เอาต์แนะนำตามหมวดหมู่เพิ่ม (ปัจจุบัน 7 จาก 11 หมวดแข็งแกร่งแบบครบวงจร)
• เวอร์ชัน WorkBuddy ที่พร้อมสำหรับตลาด

การร่วมพัฒนา

บั๊ก, ปัญหาเลย์เอาต์, การขอเลย์เอาต์ใหม่ — ยินดีต้อนรับ Issues และ PRs ลำดับความสำคัญสำหรับการเปลี่ยนแปลง:

• เมื่อแก้ไขเทมเพลตเริ่มต้น ต้องอัปเดตตารางความสัมพันธ์ใน references/components.md (ขนาด / ระยะห่าง / น้ำหนัก) ด้วย
• เมื่อเพิ่มเลย์เอาต์ ต้องเพิ่มสูตรเต็มลงใน references/layout-recipes.md (ขีดจำกัดข้อความ + ความหนาแน่นขั้นต่ำ)
• เมื่อเพิ่มสีธีม ต้องอัปเดตบล็อก [data-theme="..."] ในเทมเพลตเริ่มต้น + references/theme-presets.md ด้วย
• เมื่อเพิ่มกฎ Swiss ต้องอัปเดตกฎที่เกี่ยวข้องใน validate-social-deck.mjs ด้วย
• ข้อผิดพลาดที่คุณเจอใส่ลงใน references/qa-checklist.md
• การทดสอบและการสาธิตอยู่ภายใต้ local-tests/ — อย่าทำให้ไดเรกทอรีหลักของสกิลรก

ใบอนุญาต

AGPL-3.0 © 2026 op7418

โปรเจกต์นี้ได้รับอนุญาตภายใต้ GNU AGPL-3.0 ประเด็นสำคัญ:

1. ต้องระบุแหล่งที่มา — เก็บรักษาประกาศลิขสิทธิ์
2. งานดัดแปลงต้องเปิดเผยซอร์ส — เวอร์ชันที่แก้ไข, fork, หรือการแจกจ่ายต่อ ต้องเผยแพร่ภายใต้ AGPL-3.0 (หรือใบอนุญาตที่เข้ากันได้) พร้อมซอร์สโค้ดทั้งหมด
3. การใช้งานผ่านเครือข่ายถือเป็นการแจกจ่าย — แม้ว่าคุณจะเพียงรันเวอร์ชันที่แก้ไขในรูปแบบ SaaS / บริการเว็บโดยไม่แจกจ่ายโค้ด คุณก็ยังต้องเผยแพร่ซอร์ส (นี่คือสิ่งที่ทำให้ AGPL เข้มงวดกว่า GPL)
4. ห้ามแจกจ่ายแบบปิด, เป็นกรรมสิทธิ์ส่วนตัว, หรือแบบจ่ายเงินเท่านั้น

ข้อกำหนดฉบับเต็มใน LICENSE.