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

> สร้างการ์ดโซเชียลที่สวยงามตระการตาสำหรับภาพหมุน Xiaohongshu และคู่ปก WeChat จากแหล่งเนื้อหาต่างๆ ใช้ระบบการออกแบบเชิงบรรณาธิการหรือสวิสเพื่อสร้างภาพที่น่าสนใจสำหรับบทความและโพสต์ของคุณ

- Canonical: https://nanoskill.ai/th/skills/social-card-generation
- Markdown: https://nanoskill.ai/th/skills/social-card-generation.md
- Author: op7418
- Published: 2026-06-01T07:18:11.391Z
- Updated: 2026-07-21T18:32:43.637Z
- Language: th
- 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

ทักษะการ์ดโซเชียล Guizang เป็นความสามารถตัวแทนขั้นสูงที่ออกแบบมาเพื่อปรับปรุงการสร้างการ์ดโซเชียลสำหรับแพลตฟอร์มอย่าง Xiaohongshu และ WeChat มันช่วยให้ผู้ใช้สามารถแปลงเนื้อหาที่หลากหลาย – ตั้งแต่บทความและบันทึกผลิตภัณฑ์ไปจนถึงภาพหน้าจอและรูปภาพ – ให้เป็นภาพที่สวยงามและปรับแต่งสำหรับแพลตฟอร์ม ด้วยการนำเสนอระบบการออกแบบบรรณาธิการและสวิสอินเตอร์เนชั่นแนลที่แตกต่าง ทักษะนี้รับประกันว่าไม่ว่าเป้าหมายของคุณคือการเล่าเรื่องแบบเล่าเรื่องหรือการอธิบายตามข้อมูล การ์ดโซเชียลของคุณจะทั้งน่าสนใจและมีความสอดคล้องทางสุนทรียภาพ พร้อมที่จะดึงดูดความสนใจของผู้ชม

ทักษะนี้โดดเด่นด้วยเวิร์กโฟลว์ที่มีโครงสร้าง โดยจัดเตรียมเค้าโครง 28 แบบและค่าที่ตั้งไว้ล่วงหน้าธีม 10 แบบเพื่อเป็นแนวทางในการนำเสนอเนื้อหา มันทำให้การหาแหล่งที่มาของรูปภาพจากแพลตฟอร์มยอดนิยมเป็นอัตโนมัติและรวมตัวตรวจสอบที่ใช้ Playwright ที่แข็งแกร่งเพื่อรักษาคุณภาพของภาพโดยการตรวจจับปัญหาเค้าโครงทั่วไป ผลลัพธ์ถูกส่งเป็นไฟล์ HTML เดียว แสดงผลโดยตรงเป็น PNG ทำให้เข้ากันได้สูงกับสภาพแวดล้อมตัวแทนการเขียนโค้ดเช่น Claude Code และ Codex

ผู้ใช้สามารถใช้ประโยชน์จากทักษะการ์ดโซเชียล Guizang สำหรับกรณีการใช้งานที่หลากหลาย เช่น การสร้างภาพหมุน Xiaohongshu หลายใบจากบทความยาว การออกแบบการ์ดคู่ 21:9 ฮีโร่และ 1:1 แชร์ของ WeChat ที่ดูกลมกลืนกัน หรือการผลิตภาพสอนที่ชัดเจนจากภาพหน้าจอ หลักการออกแบบของมันให้ความสำคัญกับความยับยั้งชั่งใจ โครงสร้าง และการจัดการรูปภาพที่เน้นผู้ใช้เป็นศูนย์กลาง เพื่อให้มั่นใจว่าเนื้อหาโซเชียลมีเดียที่มืออาชีพและมีผลกระทบโดยไม่ต้องใช้ความเชี่ยวชาญด้านการออกแบบอย่างกว้างขวาง

## Key features

- **ระบบภาพสองแบบ**: เลือกระหว่างสไตล์ Editorial สำหรับการเล่าเรื่อง (Monocle, Kinfolk) หรือสไตล์ Swiss International สำหรับข้อมูลและโครงสร้าง (กริดก่อน, เส้นคมกริบ) เพื่อให้เข้ากับโทนเนื้อหาของคุณ
- **ขนาดผืนผ้าใบหลายแบบ**: รองรับ Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) และ WeChat 1:1 (1080x1080) เพื่อการปรากฏตัวบนโซเชียลมีเดียที่หลากหลาย
- **โครงสร้างเลย์เอาต์ที่ครอบคลุม**: เข้าถึงโครงสร้างเลย์เอาต์ที่ออกแบบไว้ล่วงหน้า 28 แบบ (16 แบบ Editorial, 12 แบบ Swiss) รวมถึงปกที่เน้นภาพ, ทาวเวอร์ KPI และแผนภูมิแท่งแนวนอนเพื่อการจัดโครงสร้างเนื้อหาอย่างรวดเร็ว
- **การจัดหาภาพอัตโนมัติ**: จัดหาภาพจาก Unsplash, Pexels, Flickr CC, Wallhaven หรือการค้นหาโดยตรงโดยอัตโนมัติ พร้อมดาวน์โหลดไปยังเครื่องพร้อมไฟล์ SOURCES.md ที่สร้างขึ้นอัตโนมัติ
- **ตัวตรวจสอบเลย์เอาต์**: มีตัวตรวจสอบที่ใช้ Playwright เพื่อตรวจจับการล้น, การละเมิดขีดจำกัดตัวอักษร, ช่องว่างความหนาแน่น และการชนกันของส่วนท้าย เพื่อให้มั่นใจว่าการสร้างการ์ดโซเชียลมีคุณภาพสูง

## Use cases

- **สร้างภาพหมุน Xiaohongshu**: แปลงบทความยาว, รีวิวผลิตภัณฑ์ หรือคู่มือการเดินทางให้เป็นภาพหมุนหลายการ์ดที่น่าสนใจสำหรับ Xiaohongshu โดยใช้การออกแบบแบบ Editorial หรือ Swiss
- **ออกแบบคู่ปก WeChat**: สร้างภาพฮีโร่ 21:9 และการ์ดแชร์ 1:1 ที่มีความสอดคล้องทางสายตาสำหรับ WeChat Moments และ Channels จากแหล่งเนื้อหาใดๆ
- **สร้างภาพบทช่วยสอน**: แปลงบทช่วยสอนที่เป็นภาพหน้าจอ, คู่มือเกม หรือการแนะนำเครื่องมือให้เป็นการ์ดโซเชียลที่มีโครงสร้างพร้อมภาพหน้าจอที่สวยงามและเลย์เอาต์ที่ชัดเจน
- **สรุปข้อมูลและรีวิว**: นำเสนอรีวิวผลิตภัณฑ์, สรุปข้อมูล หรือเนื้อหาสรุปประจำปีโดยใช้เลย์เอาต์สไตล์ Swiss พร้อมแผนภูมิและเมทริกซ์เพื่อการสื่อสารที่ชัดเจน

## Result preview

สำรวจภาพหมุนโซเชียลมีเดียแบบมืออาชีพที่ขับเคลื่อนโดยทักษะนี้

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

### ติดตั้ง

เพิ่มทักษะการสร้างการ์ดโซเชียลไปยังตัวแทน AI ของคุณ

![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)

### อธิบายเนื้อหา

ระบุเนื้อหา หัวข้อ หรือข้อความสำคัญที่คุณต้องการแปลงเป็นการ์ดโซเชียลมีเดีย

![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)

### สร้างการ์ดโซเชียล

สร้างการออกแบบการ์ดที่ดึงดูดสายตา ปรับแต่งสำหรับแพลตฟอร์ม ด้วยลำดับชั้นของข้อมูลที่ชัดเจน กระแสการเล่าเรื่องที่แข็งแกร่ง และเค้าโครงที่พร้อมสำหรับการเผยแพร่

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

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

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

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

> โปรเจกต์คู่กับ [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill) ใช้ภาษาภาพร่วมกัน แยกการบำรุงรักษา PPT แก้ปัญหา "สไลด์นำเสนอแนวนอน" ส่วนอันนี้แก้ปัญหา "รูปภาพแบบคงที่สำหรับฟีด"

![Guizang Social Card Skill preview](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png)

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

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

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

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

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

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

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

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

```text
ทำการ์ด 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](https://github.com/op7418/guizang-ppt-skill)) / การสร้างวิดีโอแบบยาว / การปรับแต่งภาพถ่ายล้วนๆ / การแก้ไขข้อความธรรมดาที่ไม่มีเลย์เอาต์

## 11 หมวดหมู่ Xiaohongshu

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

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

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

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

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

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

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

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

| งาน | เวิร์กโฟลว์แนะนำ |
|------|------------------|
| บทความยาว → คาร์รูเซล Xiaohongshu | แยกประเด็นหลักออกมา; Editorial สำหรับการลำดับเรื่องราว, Swiss สำหรับการแจกแจงข้อมูล |
| รีวิวผลิตภัณฑ์ / สรุปเครื่องมือ | Swiss + IKB blue, ชอบ `S09 KPI Tower` / `S10 H-Bar Chart` |
| การเดินทาง / ไลฟ์สไตล์ | Editorial + Midnight Ink หรือ Dune, `M16 Image-Led Cover` สำหรับภาพฮีโร่เต็ม |
| คู่ปก WeChat | เรนเดอร์เนื้อหาเดียวกันสองครั้ง: `.poster.wide` 21:9 + `.poster.square` 1:1, ให้มีความสม่ำเสมอทางภาพ |
| ทูเทอเรียลภาพหน้าจอ / การแนะนำเครื่องมือ | `.frame-shot` + `.device-browser`, ชอบใช้กริด Swiss เป็นฐาน |
| คู่มือเกม / สรุปภาพยนตร์ | Editorial + Midnight Ink, ดึงภาพเกมจาก Wallhaven สำหรับภาพฮีโร่เต็ม |
| สรุปข้อมูล / สรุปประจำปี | Swiss + Lemon หรือ Safety Orange, ใช้คู่ผสม matrix + ledger |

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

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

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

| แพลตฟอร์ม | สถานะ | หมายเหตุ |
|----------|--------|-------|
| Claude Code | รองรับ | เวิร์กโฟลว์ Skill ในตัว เหมาะสำหรับสร้างและปรับแต่งการ์ด |
| Codex | รองรับ | เหมาะสำหรับการสร้างการ์ดแบบยาว, จัดหาภาพ, ตรวจสอบคุณภาพภาพ |
| Cursor / เอเจนต์ในเครื่องอื่นๆ | ใช้งานได้ | ต้องการการอ่าน/เขียนระบบไฟล์ + การเรียกใช้ shell |
| แชทบอทธรรมดา | ไม่แนะนำ | หากไม่มีระบบไฟล์และ pipeline การเรนเดอร์ จะไม่สามารถส่งภาพได้อย่างน่าเชื่อถือ |

## ติดตั้ง

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

```bash
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 เอง

```bash
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`](./SKILL.md) รายละเอียดเชิงลึกใน `references/*.md` ที่เกี่ยวข้อง

## ตัวตรวจสอบ

```bash
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`](./references/theme-presets.md) **ห้ามใช้ค่า hex กำหนดเอง** — การปกป้องความสวยงามสำคัญกว่าอิสระในการเลือก

### Editorial (6 แบบ)

| ธีม | โทนสี | เหมาะสำหรับ |
|-------|-------|----------|
| 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea` | ตัวเลือกทั่วไปสำหรับเรื่องการค้า เมื่อไม่แน่ใจ |
| 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5` | เทคโนโลยี, งานวิจัย, AI, การเขียนเชิงเทคนิค |
| 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8` | ธรรมชาติ, ความยั่งยืน, กิจกรรมกลางแจ้ง, สารคดี |
| 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7` | ความรำลึกถึงอดีต, มนุษยศาสตร์, การอ่าน, วรรณกรรม |
| 🌙 **Dune** | `#1f1a14` / `#f0e6d2` | ศิลปะ, ดีไซน์, ครีเอทีฟ, แฟชั่น |
| ⚫ **Midnight Ink** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | คีย์อาร์ตเกม / ฉากกลางคืน / ปกแบบภาพยนตร์ / ธีมมืดสไตล์ Black Myth · Elden Ring |

### Swiss (4 แบบ)

| ธีม | สีหลัก | เหมาะสำหรับ |
|-------|--------|----------|
| 🔵 **IKB Klein Blue** | `#002FA7` | ตัวเลือกทั่วไป, การเปิดตัวสินค้า, ผลิตภัณฑ์ AI, เฟรมเวิร์ก |
| 🟡 **Lemon** | `#FFD500` | วัยรุ่น, กีฬา, ค้าปลีก, ผู้บริโภค, Y2K |
| 🟢 **Lemon Green** | `#C5E803` | สิ่งแวดล้อม, สุขภาพ, Gen Z, แบรนด์สีเขียว |
| 🟠 **Safety Orange** | `#FF6B35` | การแจ้งเตือน, ข่าว, อุตสาหกรรม, ธีมที่มีพลัง |

หากต้องการเปลี่ยนธีม เพียงเปลี่ยนแอตทริบิวต์ `<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](https://github.com/op7418)

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

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

ข้อกำหนดฉบับเต็มใน [`LICENSE`](./LICENSE).

## FAQ

### Guizang Social Card Skill คืออะไร?

Guizang Social Card Skill เป็นทักษะเอเจนต์สำหรับ Claude Code, Codex และสภาพแวดล้อมโค้ดดิ้งเอเจนต์ที่คล้ายกัน ซึ่งสร้างภาพหมุน Xiaohongshu และคู่ปก WeChat จากข้อมูลเนื้อหาต่างๆ เช่น บทความ, โน้ต, หรือรูปภาพ โดยใช้ระบบการออกแบบภาพที่โดดเด่น

### ฉันสามารถใช้เนื้อหาประเภทใดเพื่อสร้างการ์ดโซเชียล?

คุณสามารถใช้บทความ, ข้อความโฆษณา, ภาพหน้าจอ, โน้ตผลิตภัณฑ์, คำบรรยาย หรือรูปภาพเป็นเนื้อหาต้นฉบับสำหรับการสร้างการ์ดโซเชียล ทักษะนี้ปรับให้เข้ากับข้อมูลนำเข้าที่หลากหลายเพื่อสร้างผลลัพธ์ที่ดึงดูดสายตา

### มีระบบการออกแบบภาพสองแบบอะไรบ้างสำหรับการสร้างการ์ดโซเชียล?

ทักษะนี้มีระบบภาพสองแบบ: 'Editorial' สำหรับการเล่าเรื่อง, ไลฟ์สไตล์ และเนื้อหาการเล่าเรื่อง และ 'Swiss International' สำหรับรีวิวผลิตภัณฑ์, ข้อมูล, เฟรมเวิร์ก และบทช่วยสอน ซึ่งมีลักษณะเด่นคือแนวทางกริดก่อน

### ฉันสามารถใช้สีที่กำหนดเองสำหรับการ์ดโซเชียลของฉันได้หรือไม่?

ไม่ ไม่อนุญาตให้ใช้ค่าสี hex ที่กำหนดเอง ทักษะนี้มีชุดรูปแบบที่ตั้งไว้ล่วงหน้า 10 แบบ (6 แบบ Editorial, 4 แบบ Swiss) เพื่อรักษาความเป็นอันหนึ่งอันเดียวกันและคุณภาพของภาพ คุณสามารถเปลี่ยนรูปแบบได้โดยอัปเดตแอตทริบิวต์ data-theme บนเทมเพลตเริ่มต้น

### ฉันจะติดตั้ง Guizang Social Card Skill ได้อย่างไร?

คุณสามารถติดตั้งได้โดยใช้คำสั่ง \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` หรือโดยการโคลนที่เก็บไปยังไดเรกทอรีทักษะของเอเจนต์ของคุณ

### ทักษะนี้รองรับเนื้อหาภาษาอังกฤษหรือไม่?

ใช่ ทักษะนี้รองรับเนื้อหาภาษาอังกฤษ ฟอนต์ทั้งแบบ Editorial (Playfair Display + Noto Serif) และ Swiss (Inter + Helvetica) ครอบคลุมทั้งภาษาจีนและอังกฤษ และโครงสร้างเลย์เอาต์ไม่ขึ้นกับภาษา