# กุยซาง ทักษะเอเจนต์ HTML PPT
> สร้างงานนำเสนอ HTML ด้วยสไตล์ภาพสองแบบที่แตกต่างด้วยทักษะเอเจนต์ PPT นี้ พร้อมด้วยการสร้างภาพและการสร้างปกหลายแพลตฟอร์ม สร้างงานนำเสนอระดับมืออาชีพและน่าดึงดูดในไม่กี่วินาที
- Canonical: https://nanoskill.ai/th/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/th/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: th
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
ทักษะเอเจนต์ HTML PPT กุยซาง ช่วยให้เอเจนต์ AI สร้างงานนำเสนอ HTML แบบไฟล์เดียวระดับมืออาชีพได้อย่างง่ายดาย ออกแบบมาสำหรับแพลตฟอร์มอย่างเช่น คล้อดโค้ด และ โคเด็กซ์ ทักษะนี้ทำให้การสร้างเนื้อหาที่ดึงดูดสายตาเป็นไปอย่างราบรื่น นำเสนอระบบความงามสองแบบที่แตกต่าง: สไตล์นิตยสารอิเล็กทรอนิกส์ที่เน้นเรื่องเล่า และสไตล์ลัทธิสากลนิยมสวิสที่ขับเคลื่อนด้วยข้อเท็จจริง ผู้ใช้สามารถเปลี่ยนบทความเป็นสไลด์ที่น่าสนใจ สร้างการวิเคราะห์ผลิตภัณฑ์โดยละเอียด และสร้างปกหลายแพลตฟอร์มที่สอดคล้องกัน ทั้งหมดนี้ขณะที่รักษาคุณภาพของภาพในระดับสูง
ทักษะนี้โดดเด่นด้วยการส่งออก HTML ที่มีน้ำหนักเบา ง่ายต่อการแชร์และดูโดยไม่ต้องตั้งค่าซับซ้อน มันรวมความสามารถขั้นสูง เช่น การสร้างภาพด้วย AI ผ่าน GPT-Image 2.0 / GPT-M 2.0 ภายใน โคเด็กซ์ ทำให้สามารถสร้างภาพและอินโฟกราฟิกที่เข้าใจบริบทได้ นอกจากนี้ มันยังมีเค้าโครงที่มีโครงสร้างและหลักการออกแบบที่เข้มงวด โดยเฉพาะสำหรับสไตล์สวิส ทำให้มั่นใจได้ถึงรูปลักษณ์ที่ประณีตและสอดคล้องกันในเนื้อหาทั้งหมดที่สร้างขึ้น ตั้งแต่สไลด์ไปจนถึงปกโซเชียลมีเดีย
เหมาะสำหรับสถานการณ์ต่างๆ ตั้งแต่การพูดภายใน การเปิดตัวผลิตภัณฑ์ ไปจนถึงการแชร์ส่วนตัวและการนำเสนอวิธีการ ทักษะเอเจนต์ HTML PPT กุยซาง ทำให้ขั้นตอนการสร้างเนื้อหาง่ายขึ้น ช่วยให้ผู้ใช้แปลงเนื้อหาขนาดยาวเป็นงานนำเสนอที่กระชับ ปรับปรุงภาพหน้าจอผลิตภัณฑ์ให้พอดีกับอัตราส่วนเทมเพลตเฉพาะ และรับประกันเอกลักษณ์ทางภาพที่สอดคล้องกันในทุกช่องทางการสื่อสาร การเน้นที่ขั้นตอนการทำงานที่มีโครงสร้างและกฎการมองเห็นที่กำหนดไว้ล่วงหน้าของทักษะนี้ ทำให้มั่นใจได้ถึงผลลัพธ์คุณภาพสูงที่สวยงาม โดยใช้ความพยายามเพียงเล็กน้อย
## Key features
- **ระบบภาพสองแบบ**: เลือกใช้ระหว่าง 'สไตล์ A: นิตยสารอิเล็กทรอนิกส์ × E-ink' สำหรับการเล่าเรื่องและการแสดงออกส่วนบุคคล หรือ 'สไตล์ B: Swiss Internationalism' สำหรับข้อเท็จจริง การวิเคราะห์ผลิตภัณฑ์ และวิธีการ เพื่อให้แน่ใจว่าข้อความของคุณถูกถ่ายทอดอย่างมีประสิทธิภาพ
- **ผลลัพธ์ HTML แบบไฟล์เดียว**: สร้างงานนำเสนอ HTML ที่มีน้ำหนักเบาและครบถ้วนในตัว โดยไม่ต้องมีกระบวนการสร้างหรือเซิร์ฟเวอร์ ทำให้ง่ายต่อการเปิด แชร์ และแสดงผลได้โดยตรงในเว็บเบราว์เซอร์ใดๆ
- **ความเข้ากันได้กับ AI Agent**: ออกแบบมาสำหรับ Claude Code, Codex และ AI Agent อื่นๆ ที่มีการเข้าถึงเชลล์ ช่วยให้สามารถสร้าง แก้ไข และวนซ้ำ HTML PPT ได้อย่างราบรื่นผ่านคำสั่งภาษาธรรมชาติ
- **การสร้างภาพด้วย Codex**: ผสานรวม GPT-Image 2.0 / GPT-M 2.0 ภายใน Codex เพื่อสร้างภาพคุณภาพสูงที่รับรู้บริบท อินโฟกราฟิก และสถานการณ์ UI ซึ่งถูกปรับสเกลและแทรกลงในสไลด์ของคุณอย่างสมบูรณ์แบบ
- **การสร้างปกหลายแพลตฟอร์ม**: สร้างปกที่สม่ำเสมอและเป็นอันหนึ่งเดียวกันในด้านภาพสำหรับแพลตฟอร์มต่างๆ โดยอัตโนมัติ เช่น บัญชีทางการ WeChat (21:9, 1:1), เสี่ยวหงซู (3:4) และบัญชีวิดีโอ (16:9) โดยอิงจากเนื้อหาหลักของงานนำเสนอของคุณ
## Use cases
- **เปลี่ยนบทความเป็นงานนำเสนอ**: แปลงบทความหรือเอกสารขนาดยาวให้เป็น HTML PPT ที่กระชับและน่าสนใจ สำหรับการกล่าวสุนทรพจน์ การพูดคุยภายใน หรือเซสชันการแบ่งปันส่วนตัว โดยดึงแนวคิดหลักและจัดโครงสร้างให้เป็นเรื่องราวที่น่าดึงดูด
- **สร้างการวิเคราะห์ผลิตภัณฑ์แบบมืออาชีพ**: ใช้โครงสร้าง 'สไตล์ B: Swiss Internationalism' เพื่อนำเสนอการวิเคราะห์ผลิตภัณฑ์ วิธีการ หรือการเปิดตัวผลิตภัณฑ์ AI โดยเน้นที่ข้อเท็จจริง ข้อมูล และการสื่อสารด้วยภาพที่ชัดเจน
- **ออกแบบเนื้อหาหลายแพลตฟอร์มที่สม่ำเสมอ**: สร้างเอกลักษณ์ทางภาพที่เป็นหนึ่งเดียวทั่วทั้งงานนำเสนอ ภาพประกอบ และปกโซเชียลมีเดียต่างๆ ของคุณ เพื่อให้แน่ใจว่ามีความสม่ำเสมอของแบรนด์และผลกระทบในทุกช่องทางการสื่อสารของคุณ
- **ปรับปรุงภาพหน้าจอสำหรับ PPT**: ออกแบบใหม่และปรับภาพหน้าจอผลิตภัณฑ์ให้เข้ากับเทมเพลตงานนำเสนอ โดยยังคงข้อมูลสำคัญไว้ ในขณะที่ได้สไตล์ภาพที่สม่ำเสมอเหมาะสำหรับ HTML PPT แบบมืออาชีพ
## Result preview
ดูงานนำเสนอ PPT จริงที่สร้างจากบทความโดยทักษะเอเจนต์นี้
## Result walkthrough
### ขั้นตอนที่ 1: ติดตั้ง
เพิ่มทักษะให้กับเอเจนต์ของคุณ
### ขั้นตอนที่ 2: ให้เนื้อหา
ป้อนหัวข้อ บันทึก หรืออัปโหลดเนื้อหาที่มีอยู่ (เช่น รายงาน โครงร่าง ไอเดีย)
### ขั้นตอนที่ 3:รับ PPT ของคุณ
ตรวจสอบงานนำเสนอ HTML ที่คุณสามารถใช้งานได้โดยตรง
## Skill definition
ทักษะตัวแทนสำหรับ Claude Code, Codex และสภาพแวดล้อมตัวแทนเขียนโค้ดที่คล้ายกัน สร้าง **ไฟล์ HTML เดี่ยวแบบดาดฟ้าปัดแนวนอน** วิชวลของดาดฟ้า และหน้าปกโซเชียล
มาพร้อมระบบภาพสองระบบ:
- **สไตล์ A: นิตยสารบรรณาธิการ × หมึกอิเล็กทรอนิกส์** เหมือน *Monocle* ที่มีโค้ดเย็บติดอยู่ เหมาะสำหรับการพูดเล่าเรื่อง ความคิดเห็น ห้องรับแขก และเสียงส่วนบุคคล
- **สไตล์ B: สไตล์ตัวพิมพ์สากลแบบสวิส** กริดเป็นหลัก หนึ่งสีหลักอิ่มสูง สี่เหลี่ยมคม เส้นขีดละเอียด และความแตกต่างของตัวพิมพ์เกินจริง เหมาะสำหรับข้อเท็จ ผลิตภัณฑ์ การวิเคราะห์ และกรอบงาน
> กลั่นโดย [Guizang](https://x.com/op7418) จากการพูดออฟไลน์เช่น "บริษัทคนเดียว: องค์กรที่ถูกพับด้วย AI" และ "วิถีการทำงานใหม่" ทุกหลุมพรางที่เจอระหว่างการทำดาดฟ้าเหล่านั้นถูกบันทึกใน `checklist.md`
**ธีมเก่า · สไตล์ A นิตยสารบรรณาธิการ**
**ธีมใหม่ · สไตล์ B สวิสสากล**
## เริ่มต้นใน 30 วินาที
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
หรือวางนี่ให้ตัวแทน AI ที่มีสิทธิ์เข้าถึงเชลล์:
```text
ติดตั้ง guizang-ppt-skill ให้ฉัน โคลน https://github.com/op7418/guizang-ppt-skill ไปยัง ~/.claude/skills/guizang-ppt-skill จากนั้นตรวจสอบว่า SKILL.md, assets/ และ references/ มีอยู่
```
หากคุณติดตั้งแล้ว อัปเดตด้วย:
```text
อัปเดต guizang-ppt-skill ให้ฉัน ไปที่ ~/.claude/skills/guizang-ppt-skill รัน git pull แล้วบอกคอมมิตล่าสุดให้ฉัน
```
จากนั้นถามตัวแทนของคุณ:
```text
สร้างดาดฟ้าสไตล์สวิสจากบทความนี้ ประมาณ 7 สไลด์ พร้อมวิชวลที่สร้างขึ้น 2-3 ชิ้น
```
พรอมต์ที่มีประโยชน์อื่นๆ:
```text
เปลี่ยนไฟล์ Markdown นี้เป็นงานนำเสนอสไตล์นิตยสารบรรณาธิการ
สร้างปกโซเชียล 21:9 จากแนวคิดหลักของดาดฟ้านี้
ออกแบบภาพหน้าจอผลิตภัณฑ์นี้ใหม่เป็นวิชวลสไลด์ 16:10
```
## สิ่งที่คุณจะได้
- 🖋 **ระบบภาพสองระบบ**: การเล่าเรื่องแบบบรรณาธิการสำหรับสไตล์ A, โครงสร้างสวิสตามข้อเท็จจริงสำหรับสไตล์ B
- 📐 **การนำทางปัดแนวนอน**: ปุ่มลูกศร ← → / ล้อเลื่อน / ปัดสัมผัส / จุดด้านล่าง / ESC สำหรับดัชนี
- 🧩 **สไตล์ A 10 เลย์เอาต์**: หน้าปก, ตัวแบ่ง, ตัวเลขใหญ่, ภาพ/ข้อความ, ตารางภาพ, ไปป์ไลน์, การเปรียบเทียบ และอื่นๆ
- 🧱 **สไตล์ B 22 เลย์เอาต์ที่ถูกล็อก**: หน้าปก, แถลงการณ์, หอคอย KPI, แผนภาพวน, เปรียบเทียบคู่, ภาพฮีโร่, แถลงการณ์ปิด และอีกมากมาย
- 🎨 **ชุดธีมที่คัดสรร**: 5 ธีมหมึกอิเล็กทรอนิกส์สำหรับสไตล์ A, 4 ธีมสีหลักสวิสสำหรับสไตล์ B
- 🖼 **โฟลว์ภาพ Codex ที่เลือกได้**: สร้างภาพถ่ายสารคดี, อินโฟกราฟิก, แผนภาพกระแส, แผนที่ระบบ และฉาก UI ด้วย GPT-Image 2.0 / GPT-M 2.0 แล้วแทรกในอัตราส่วนที่ปลอดภัยกับเทมเพลต
- 📰 **ปกโซเชียล**: สร้างภาพปก WeChat 21:9, การ์ดแชร์ 1:1, ปก Xiaohongshu 3:4, ภาพปกย่อวิดีโอ และรูปแบบที่เกี่ยวข้อง
- 📴 **โหมดประหยัดพลังงาน**: กด `B` เพื่อเปลี่ยนแอนิเมชัน WebGL / canvas เป็นภาพนิ่ง
- 📄 **ไฟล์ HTML เดี่ยว** — ไม่ต้องสร้าง, ไม่ต้องเซิร์ฟเวอร์, เปิดตรงในเบราว์เซอร์
## เหมาะ / ไม่เหมาะ
**✅ เหมาะ**: การพูดออฟไลน์, ปาฐกถาหลักของอุตสาหกรรม, ห้องรับแขกส่วนตัว, การเปิดตัวผลิตภัณฑ์ AI, วันเดโม, งานนำเสนอที่มีเสียงส่วนบุคคลที่แข็งแกร่ง
**❌ ไม่เหมาะ**: ตารางที่เน้นข้อมูลหนัก, ดาดฟ้าฝึกอบรม (ความหนาแน่นต่ำเกินไป), การแก้ไขร่วมกันหลายคน (HTML แบบคงที่)
## กรณีการใช้งานทั่วไป
| ภาระกิจ | โฟลว์แนะนำ |
|------|------------------|
| บทความยาวเป็นดาดฟ้าพูด | สกัดข้อโต้แย้งหลัก จากนั้นสร้างจังหวะ 6-10 สไลด์ |
| การวิเคราะห์กรอบงาน / ผลิตภัณฑ์ | ใช้สไตล์ B สวิส พร้อมเลย์เอาต์ที่ถูกล็อกและภาพฮีโร่ 21:9 |
| การพูดส่วนตัว / บทความความเห็น | ใช้สไตล์ A นิตยสารบรรณาธิการเพื่อจังหวะการเล่าเรื่องที่แข็งแกร่งขึ้น |
| วิชวลของดาดฟ้า | ใน Codex, สร้างภาพถ่าย, อินโฟกราฟิก, แผนภาพกระแส, แผนที่ระบบ หรือฉาก UI |
| ปกโซเชียล | สร้างปกหลัก 21:9, การ์ดแชร์ 1:1, ปกแนวตั้ง 3:4, และภาพปกย่อวิดีโอจากไอเดียเดียวกัน |
| การปรับภาพหน้าจอให้เป็นมาตรฐาน | ออกแบบภาพหน้าจอดิบใหม่ในอัตราส่วนที่ปลอดภัยกับเทมเพลตก่อนแทรกลงสไลด์ |
## ทำไมต้องดาดฟ้า HTML
- **การแก้ไขโดยตัวแทน**: HTML / CSS เป็นข้อความธรรมดา ตัวแทนจึงอ่าน แก้ไข และตรวจสอบได้โดยตรง
- **ความหนาแน่นทางภาพสูงกว่า Markdown**: เลย์เอาต์ที่แม่นยำ, การวางตำแหน่ง, การเคลื่อนไหว, การโต้ตอบ และรูปแบบปก
- **การส่งมอบที่เบา**: ไฟล์ HTML หนึ่งไฟล์สามารถเปิด, นำเสนอ, ส่ง, จับภาพหน้าจอ หรือบันทึกได้
- **เกตคุณภาพที่ดีกว่า**: ตัวตรวจสอบสวิสสามารถจับการเลื่อนของเลย์เอาต์, การวางภาพไม่ปลอดภัย, ชื่อเรื่องกลาง, และกับดักข้อความ SVG
- **ระบบภาพเดียวข้ามผลลัพธ์**: ดาดฟ้า, วิชวลที่สร้างขึ้น, ปก, และการออกแบบภาพหน้าจอใหม่สามารถใช้กฎสไตล์เดียวกัน
## การสนับสนุนแพลตฟอร์ม
| แพลตฟอร์ม | สถานะ | หมายเหตุ |
|----------|--------|-------|
| Claude Code | รองรับ | เวิร์กโฟลว์ทักษะเนทีฟสำหรับการสร้างและแก้ไขดาดฟ้า HTML |
| Codex | รองรับ | ดีสำหรับการสร้างดาดฟ้า, สร้างภาพ, และ QA ภาพในเบราว์เซอร์ |
| Cursor / ตัวแทนท้องถิ่นอื่นๆ | ทำงานได้ | ต้องการการเข้าถึงระบบไฟล์และการเรียกใช้เชลล์ |
| WorkBuddy | กำลังปรับแต่ง | เวอร์ชันพร้อมสำหรับมาร์เก็ตเพลสกำลังถูกเตรียมแยกต่างหาก |
| แชทบอทธรรมดา | ไม่แนะนำ | หากไม่มีระบบไฟล์และการดูตัวอย่างเบราว์เซอร์ การสร้างดาดฟ้าเต็มรูปแบบยากที่จะเสถียร |
## ติดตั้ง
### ทางเลือกที่ 1: ติดตั้งบรรทัดเดียว (แนะนำ)
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
### ทางเลือกที่ 2: วางนี่ให้ AI
> ติดตั้งทักษะ `guizang-ppt-skill` Claude Code ให้ฉัน ขั้นตอน:
>
> 1. ตรวจสอบให้แน่ใจว่า `~/.claude/skills/` มีอยู่ (สร้างถ้าไม่มี)
> 2. รัน `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill`
> 3. ตรวจสอบ: `ls ~/.claude/skills/guizang-ppt-skill/` ควรแสดง `SKILL.md`, `assets/`, `references/`
> 4. บอกฉันเมื่อเสร็จ หลังจากนั้น การพูดว่า "สร้างดาดฟ้าสไตล์นิตยสารให้ฉัน" จะเปิดใช้งานทักษะนี้
วางบล็อกข้างต้นลงใน Claude Code / Cursor / ตัวแทน AI ใดๆ ที่มีสิทธิ์เข้าถึงเชลล์ และมันจะจัดการการติดตั้ง
### ทางเลือกที่ 3: CLI ด้วยตนเอง
```bash
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
```
### วิธีเรียกใช้
เมื่อติดตั้งแล้ว Claude Code จะตรวจจับทักษะโดยอัตโนมัติ วลีเรียกใช้:
- "สร้างดาดฟ้าสไตล์นิตยสารให้ฉัน"
- "สร้างดาดฟ้าสไตล์สวิสให้ฉัน"
- "สร้างดาดฟ้าปัดแนวนอน"
- "งานนำเสนอสไตล์นิตยสารบรรณาธิการ"
- "สไลด์หมึกอิเล็กทรอนิกส์สำหรับการพูดของฉัน"
- "สร้างปก WeChat 21:9 จากบทความนี้"
- "สร้างการ์ดแชร์ 1:1 จากดาดฟ้านี้"
## เวิร์กโฟลว์
ทักษะเป็นเวิร์กโฟลว์ที่มีโครงสร้าง ตัวแทนจะนำคุณผ่านแต่ละขั้นตอน:
1. **เลือกสไตล์** — สไตล์ A นิตยสารบรรณาธิการ หรือ สไตล์ B สวิสสากล
2. **ชี้แจงเจตนา** — รายการตรวจสอบ 7 คำถาม: สไตล์, ผู้ฟัง, ระยะเวลา, วัสดุต้นทาง, ภาพ/ภาพหน้าจอ, ธีม, ข้อจำกัดที่เข้มงวด
3. **คัดลอกเทมเพลต** — สไตล์ A ใช้ `assets/template.html`; สไตล์ B ใช้ `assets/template-swiss.html`
4. **เติมเนื้อหา** — สร้างแผนจังหวะ จากนั้นเลือกและปรับโครงร่างเลย์เอาต์ที่ตรงกัน
5. **การสร้างภาพตัวเลือก** — ใน Codex, ถามว่าต้องการใช้ภาพ GPT-Image 2.0 / GPT-M 2.0 หรือไม่ จากนั้นแทรกในอัตราส่วนที่เหมาะสมกับหน้า
6. **ตรวจสอบตนเอง** — จับคู่กับ `references/checklist.md`; ปัญหา P0 ต้องผ่านทั้งหมด; ดาดฟ้าสวิสต้องผ่านตัวตรวจสอบเลย์เอาต์ด้วย
7. **ดูตัวอย่าง** — เปิด HTML ในเบราว์เซอร์
8. **ทำซ้ำ** — ใช้สไตล์อินไลน์เพื่อปรับขนาดฟอนต์, ความสูง, การเว้นวรรค
สเปคเต็มใน [`SKILL.md`](./SKILL.md).
## สไตล์ B สวิส
ธีมสวิสเป็นระบบเลย์เอาต์ที่เข้มงวด ไม่ใช่แค่สกิน CSS
- **22 เลย์เอาต์ที่มีชื่อ**: สไลด์เนื้อหาต้องใช้ `S01` ถึง `S22`; อย่าสร้างโครงสร้างใหม่
- **4 สีหลัก**: น้ำเงินเคลนสากล, เหลืองเลมอน, เขียวเลมอน, ส้มปลอดภัย
- **ล็อกกริด**: กริด 16 คอลัมน์, สี่เหลี่ยมคม, เส้นขีด 1px, ไม่มีเงา, ไม่มีการไล่ระดับ, ไม่มีการ์ดมน
- **การปรับขนาดชื่อภาษาจีน**: หัวเรื่องที่เป็นภาษาจีนทั้งหมดควรเล็กกว่าหนึ่งขั้นเพื่อรักษาพื้นที่สำหรับเนื้อหาและรูปภาพ
- **การจัดวางด้านล่างของภาพ/ข้อความ**: บล็อกข้อความและรูปภาพควรจัดชิดด้านล่างในเลย์เอาต์ภาพซ้าย/ขวา ในขณะที่หลีกเลี่ยงการควบคุมการแบ่งหน้า
- **ช่องภาพ**: รูปภาพต้องอยู่ในพื้นที่ `data-image-slot` ที่เทมเพลตกำหนด ซึ่งมักสร้างที่ 21:9 หรือ 16:10
- **การตรวจสอบแบบเข้มงวด**: ตัวตรวจสอบจะจับชื่อเรื่องกลาง, เลย์เอาต์ทดลอง, ข้อความ SVG ที่มองเห็นได้, และรูปภาพที่วางนอกช่อง
การตรวจสอบสวิส:
```bash
node scripts/validate-swiss-deck.mjs path/to/index.html
```
## โฟลว์ภาพ Codex
ใน Codex, หลังจากร่างดาดฟ้าแรกพร้อม ตัวแทนสามารถถามผู้ใช้ว่าต้องการวิชวลที่สร้างขึ้นหรือไม่ เมื่อยืนยัน เลือกประเภทภาพหรือสไตล์ ประเภททั่วไปได้แก่:
- ภาพถ่ายสารคดี: ฉากโลกจริงแบบ Fuji / Leica ที่เพิ่มเท็กซ์เจอร์มนุษย์
- อินโฟกราฟิก / แผนภาพกระแส / แผนภูมิเปรียบเทียบ / แผนที่ระบบ: สำหรับแนวคิดที่ไม่สามารถอธิบายได้ดีด้วยรูปภาพ
- การจัดกรอบภาพหน้าจอ / การออกแบบภาพหน้าจอใหม่: เก็บภาพหน้าจอดิบด้วยสินทรัพย์พื้นหลังที่รวมมาและแคนวาสสไตล์ CleanShot X ก่อน; ใช้การสร้างฉาก UI เฉพาะเมื่อจำเป็นต้องสร้างภาพหน้าจอใหม่
- โปสเตอร์ข้อมูล / แผนภูมิ: เปลี่ยนตัวเลขสำคัญเป็นสินทรัพย์ภาพที่พร้อมแทรก
- การประกอบภาพหลายภาพ: มีประโยชน์สำหรับช่องกว้างพิเศษที่สามภาพ 16:9 ที่ไม่เกี่ยวข้องกันจะทำให้กริดเสีย
ภาพที่สร้างขึ้นต้องปฏิบัติตามกฎหลักสี่ข้อ:
- ถือภาพเป็นสินทรัพย์ฝังตัว ไม่ใช่สไลด์เดี่ยว: ไม่มีส่วนท้าย, ขอบล่างของหน้า, ชื่อเรื่อง, เลขหน้า, เครื่องหมายมุม, ลายเซ็น หรือกรอบตกแต่ง
- จับคู่ภาษาของดาดฟ้า: ดาดฟ้าจีนใช้ป้ายภาษาจีนในอินโฟกราฟิก, ดาดฟ้าอังกฤษใช้ป้ายภาษาอังกฤษ
- จับคู่อัตราส่วนของช่องก่อนสร้าง: 21:9 สำหรับช่องฮีโร่สวิสหลายช่อง, 16:9 / 16:10 สำหรับภาพหลักทั่วไป, 16:10 สำหรับฉาก UI, ความสูงเท่ากันสำหรับตารางภาพ
- เมื่อภาพหน้าจอดิบต้องคงเดิมอย่างซื่อสัตย์, อ่าน `references/screenshot-framing.md` ก่อน และใช้พื้นหลัง `assets/screenshot-backgrounds/` ที่รวมมา พร้อมกับการปรับขนาด, การเสริม, และการจัดตำแหน่งแบบโปรแกรมแทนการวาดภาพหน้าจอใหม่โดยค่าเริ่มต้น
พรอมต์รูปภาพอยู่ใน [`references/image-prompts.md`](./references/image-prompts.md). การจัดกรอบภาพหน้าจออยู่ใน [`references/screenshot-framing.md`](./references/screenshot-framing.md).
## การสร้างปก
ทักษะยังสามารถเปลี่ยนบทความหรือไอเดียดาดฟ้าให้เป็นปกแพลตฟอร์ม:
- **ปกหลัก WeChat**: 21:9, เน้นหัวเรื่อง, พร้อมภาพหลักหนึ่งภาพ
- **การ์ดแชร์ WeChat**: 1:1, จับคู่ทางสายตากับปก 21:9
- **ปก Xiaohongshu / คารูเซล**: 3:4, หัวเรื่องใหญ่, ขนาดตัวพิมพ์สม่ำเสมอข้ามชุด
- **ภาพปกย่อวิดีโอ**: 16:9, ชื่อเรื่อง + คำบรรยาย + ภาพโฟกัสหนึ่งภาพ
กฎเดียวกันนี้ใช้: ใช้คำหลักที่แข็งแรงไม่กี่คำ, รักษาชื่อเรื่องเป็นศูนย์กลางภาพ, และอย่าเติมแคนวาสด้วยเนื้อหาย่อย
## ตัวอย่างพรอมต์
คัดลอกพรอมต์ใดๆ เหล่านี้ลงในตัวแทนของคุณ จากนั้นแนบบทความ, ไฟล์ Markdown, หรือสินทรัพย์รูปภาพของคุณ:
```text
สร้างดาดฟ้าสวิส 8 สไลด์จากบทความนี้ พร้อมวิชวลที่สร้างขึ้น 3 ชิ้นที่ตรงกับช่องภาพของเทมเพลต
```
```text
เปลี่ยนเอกสารการวิเคราะห์ผลิตภัณฑ์นี้เป็นดาดฟ้าสไตล์นิตยสารบรรณาธิการที่มีจังหวะการเล่าเรื่องที่แข็งแกร่ง
```
```text
จากแนวคิดหลักของดาดฟ้านี้, สร้างปกสองแบบ: ปกหลัก 21:9 และการ์ดแชร์ 1:1 ที่จับคู่ทางสายตา
```
```text
ออกแบบภาพหน้าจอผลิตภัณฑ์เหล่านี้ใหม่เป็นวิชวลสไลด์ 16:10 ที่สม่ำเสมอ รักษาข้อมูล UI สำคัญ; อย่าเพิ่มชื่อสไลด์หรือส่วนท้ายภายในภาพ
```
## ไดเรกทอรี
```
guizang-ppt-skill/
├── SKILL.md ← ไฟล์ทักษะหลัก: เวิร์กโฟลว์, หลักการ, ข้อผิดพลาดทั่วไป
├── README.md ← README ภาษาจีน
├── README.en.md ← ไฟล์นี้
├── assets/
│ ├── template.html ← เทมเพลตสไตล์ A นิตยสารบรรณาธิการ
│ ├── template-swiss.html ← เทมเพลตสไตล์ B สวิส
│ └── screenshot-backgrounds/ ← พื้นหลังภาพหน้าจอ WebP ที่รวมมา: 5 style-a / 4 style-b
├── scripts/
│ └── validate-swiss-deck.mjs ← ตัวตรวจสอบเลย์เอาต์สวิส
└── references/
├── components.md ← แค็ตตาล็อกส่วนประกอบ (ประเภท, สี, กริด, ไอคอน, คำบรรยาย, สถิติ, ไปป์ไลน์)
├── layouts.md ← 10 โครงร่างเลย์เอาต์ (พร้อมวาง)
├── layouts-swiss.md ← 22 เลย์เอาต์สวิสที่ถูกล็อก
├── swiss-layout-lock.md ← ความเชื่อถือและกฎเข้มงวดของเลย์เอาต์สวิส
├── themes.md ← 5 ชุดธีม (เลือก, ห้ามปรับแต่งเอง)
├── themes-swiss.md ← 4 ธีมสีหลักสวิส
├── image-prompts.md ← ประเภทภาพ, อัตราส่วน, และพรอมต์พื้นฐานสำหรับ GPT-Image 2.0 / GPT-M 2.0
├── screenshot-framing.md ← ความหมายการจัดกรอบภาพหน้าจอสไตล์ CleanShot X
└── checklist.md ← รายการตรวจสอบคุณภาพ (ระดับ P0 / P1 / P2 / P3)
```
## ชุดธีม
เลือกจาก `references/themes.md`. **ไม่อนุญาตให้ใช้ค่า hex กำหนดเอง** — การปกป้องสุนทรียภาพสำคัญกว่าเสรีภาพในการเลือก
### ธีมบรรณาธิการสไตล์ A
| พรีวิว | ธีม | สีหลักและเหมาะสำหรับ |
|---------|-------|--------------------------|
| 
| 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. ค่าเริ่มต้นทั่วไป, การเปิดตัวเชิงพาณิชย์, เมื่อไม่แน่ใจ |
| 
| 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. เทคโนโลยี, วิจัย, AI, ปาฐกถาหลักทางเทคนิค |
| 
| 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. ธรรมชาติ, ความยั่งยืน, วัฒนธรรม, สารคดี |
| 
| 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. คิดถึงอดีต, มนุษยนิยม, วรรณกรรม, นิตยสารอิสระ |
| 
| 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. ศิลปะ, การออกแบบ, ความคิดสร้างสรรค์, แฟชั่น, ดาดฟ้าเหมือนแกลเลอรี |
การเปลี่ยนธีมเพียงแทนที่ 6 ตัวแปรที่ด้านบนของบล็อก `:root{}` ของ `template.html` — CSS อื่นๆ ทั้งหมดส่งผ่าน `var(--...)`
### ธีมสวิสสไตล์ B
เลือกจาก `references/themes-swiss.md`. **ไม่อนุญาตให้ใช้ค่า hex กำหนดเอง** ที่นี่เช่นกัน
| พรีวิว | ธีม | สีหลักและเหมาะสำหรับ |
|---------|-------|---------------------------|
| 
| 🔵 **International Klein Blue** | `#002FA7`. ค่าเริ่มต้น, การเปิดตัวเชิงพาณิชย์, ผลิตภัณฑ์ AI, กรอบงาน |
| 
| 🟡 **Lemon Yellow** | `#FFD500`. เยาวชน, กีฬา, ค้าปลีก, สินค้าอุปโภคบริโภค, เรโทร Y2K |
| 
| 🟢 **Lemon Green** | `#C5E803`. นิเวศวิทยา, ความยั่งยืน, สุขภาพ, แบรนด์ Gen Z |
| 
| 🟠 **Safety Orange** | `#FF6B35`. การแจ้งเตือน, ข่าว, หัวข้ออุตสาหกรรม, กีฬา, ธีมที่มีพลัง |
หากผู้ใช้ขอให้สร้างดาดฟ้าสไตล์สวิสโดยไม่ระบุสี ให้ใช้ International Klein Blue เป็นค่าเริ่มต้น
## หลักการออกแบบหลัก
1. **การควบคุมเหนือความฉูดฉาด** — พื้นหลัง WebGL ปรากฏผ่านเฉพาะหน้าฮีโร่
2. **โครงสร้างเหนือการตกแต่ง** — ลำดับชั้นข้อมูลผ่านขนาดตัวพิมพ์ + แบบอักษร + พื้นที่ขาวของกริด ไม่ใช่เงาหรือการ์ดลอย
3. **รูปภาพเป็นพลเมืองชั้นหนึ่ง** — จัดตำแหน่งให้ตรงกับพื้นที่เนื้อหา, รักษาอัตราส่วนให้คงที่, ครอบตัดจากด้านล่างเท่านั้น, และรักษาด้านบน/ด้านข้าง
4. **วิชวลที่สร้างเป็นสินทรัพย์** — เก็บเฉพาะภาพถ่าย/แผนภูมิ/UI หลัก; อย่าสร้างชื่อสไลด์, ส่วนท้าย, หรือเครื่องหมายมุมภายในภาพ
5. **จังหวะอยู่บนหน้าฮีโร่** — การสลับหน้าฮีโร่/ไม่ใช่ฮีโร่รักษาสายตาไม่ให้เมื่อยล้า
6. **เอฟเฟกต์ไดนามิกต้องเป็นตัวเลือก** — `B` เปลี่ยนเป็นโหมดคงที่เพื่อให้แอนิเมชันไม่เป็นภาระในการอ่าน
7. **คำศัพท์ยังคงสม่ำเสมอ** — Skills คือ Skills; ไม่มีการแปลที่ผสมกัน
8. **เลย์เอาต์สวิสถูกล็อกไว้** — สไตล์ B ควรกู้คืนและใช้ระบบเลย์เอาต์ 22 หน้าดั้งเดิมแทนที่จะคิดค้นหน้าที่ไม่เกี่ยวข้อง
## ข้อมูลอ้างอิงภาพ
- เลย์เอาต์นิตยสาร [*Monocle*](https://monocle.com)
- YC Garry Tan — "Thin Harness, Fat Skills"
- Massimo Vignelli / Helvetica Forever / สไตล์ตัวพิมพ์สากลแบบสวิส
- ชุดดาดฟ้าพูดออฟไลน์ของ Guizang
## แผนงาน
- เพิ่มตัวอย่างโลกจริงและเดมโมดาดฟ้า HTML ที่เปิดได้มากขึ้น
- ขยายรูปแบบปกสำหรับแพลตฟอร์มเผยแพร่เพิ่มเติม
- เพิ่มกฎการตรวจสอบเลย์เอาต์สวิสมากขึ้น
- ปรับปรุงเวิร์กโฟลว์การออกแบบภาพหน้าจอใหม่และการสร้างอินโฟกราฟิก
- เตรียมรูปแบบเฉพาะสำหรับมาร์เก็ตเพลสเช่น WorkBuddy
- เพิ่มแพ็กธีมที่คัดสรรมากขึ้นในขณะที่ยังคงจำกัดสีที่กำหนดเอง
## คำถามที่พบบ่อย
**สามารถส่งออกเป็น PPTX ได้หรือไม่?**
ผลลัพธ์หลักคือ HTML คุณสามารถนำเสนอในเบราว์เซอร์, จับภาพหน้าจอ, หรือบันทึกได้ การแปลงเป็น PPTX สามารถทำเป็นเวิร์กโฟลว์แยกต่างหาก แต่ไม่ใช่เส้นทางหลักในปัจจุบัน
**ทำไมสีที่กำหนดเองถึงไม่ได้รับอนุญาต?**
ทักษะถูกออกแบบเพื่อผลลัพธ์ภาพที่เสถียร สีตามอำเภอใจมักจะทำลายระบบ ดังนั้นดาดฟ้าต้องใช้ชุดที่คัดสรรแล้ว
**ฉันสามารถเพิ่มเลย์เอาต์ของตัวเองได้หรือไม่?**
ได้ เลย์เอาต์สไตล์ A สามารถขยายได้ใน `references/layouts.md` สไตล์ B เข้มงวดกว่า: อัปเดต `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` และตัวตรวจสอบพร้อมกัน
**การสร้างภาพ Codex จำเป็นหรือไม่?**
ไม่จำเป็น ดาดฟ้าทำงานได้โดยไม่ต้องมีภาพที่สร้างขึ้น โฟลว์ภาพจะใช้เฉพาะเมื่อคุณต้องการภาพถ่าย, อินโฟกราฟิก, ฉาก UI หรือปก
**ฉันจะอัปเดตทักษะได้อย่างไร?**
รันคำสั่งติดตั้งอีกครั้ง หรือรัน `git pull` ภายในไดเรกทอรีทักษะท้องถิ่นของคุณ
## การมีส่วนร่วม
ข้อบกพร่อง, ปัญหาเลย์เอาต์, คำขอเลย์เอาต์ใหม่ — ยินดีรับ Issues และ PRs จัดลำดับความสำคัญ:
- เพิ่มคลาสใหม่ลงใน `template.html` ก่อน; อย่าให้ `layouts.md` อ้างอิงคลาสที่ไม่ได้กำหนด
- เมื่อเปลี่ยน `template-swiss.html`, อัปเดต `layouts-swiss.md` และ `swiss-layout-lock.md` พร้อมกัน
- เมื่อเพิ่มกฎสวิส, อัปเดต `scripts/validate-swiss-deck.mjs`
- บันทึกหลุมพรางลงใน `checklist.md` ในระดับ P0 / P1 / P2 / P3 ที่ตรงกัน
- สีธีมใหม่ใส่ใน `themes.md` พร้อมกรณีการใช้งานที่แนะนำ
## ใบอนุญาต
MIT © 2026 [op7418](https://github.com/op7418)
## FAQ
### ทักษะ Guizang HTML PPT Agent คืออะไร?
ทักษะ Guizang HTML PPT เป็นเครื่องมือที่เข้ากันได้กับ AI Agent ซึ่งออกแบบมาเพื่อสร้างงานนำเสนอ HTML แบบไฟล์เดียว ภาพประกอบ และปกหลายแพลตฟอร์ม มีสไตล์ภาพให้เลือกสองแบบ: นิตยสารอิเล็กทรอนิกส์ และ Swiss Internationalism
### ฉันจะติดตั้งทักษะ Guizang HTML PPT Agent ได้อย่างไร?
คุณสามารถติดตั้งได้โดยการใช้คำสั่ง \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` ในเทอร์มินัลของคุณ หรือโดยการสั่งให้ AI Agent ที่เปิดใช้งานเชลล์ได้โคลนที่เก็บไปยังไดเรกทอรีทักษะของคุณ
### ฉันสามารถปรับแต่งสีของ HTML PPT ได้หรือไม่?
ไม่ ไม่อนุญาตให้ใช้ค่า HEX แบบกำหนดเอง ทักษะนี้มีธีมที่ตั้งไว้ล่วงหน้าให้เลือกสำหรับทั้งสไตล์ A (นิตยสารอิเล็กทรอนิกส์) และสไตล์ B (Swiss Internationalism) เพื่อให้แน่ใจว่าผลลัพธ์มีความสวยงามและมีคุณภาพสม่ำเสมอ
### มีสไตล์ภาพให้เลือกสองแบบอะไรบ้าง?
สไตล์ A 'นิตยสารอิเล็กทรอนิกส์ × E-ink' เหมาะสำหรับการเล่าเรื่อง ความคิดเห็น และการแสดงออกส่วนบุคคล สไตล์ B 'Swiss Internationalism' เหมาะที่สุดสำหรับการนำเสนอข้อเท็จจริง การวิเคราะห์ผลิตภัณฑ์ และวิธีการ ด้วยการออกแบบที่เรียบง่ายและใช้ตารางกริด
### สามารถส่งออก HTML PPT เป็นรูปแบบ PPTX ได้หรือไม่?
สิ่งที่ส่งมอบหลักคือ HTML ซึ่งสามารถแสดงผลได้โดยตรงในเบราว์เซอร์ จับภาพหน้าจอ หรือบันทึกได้ แม้ว่าการส่งออกเป็น PPTX โดยตรงจะไม่ใช่คุณสมบัติหลัก แต่คุณสามารถใช้หน้า HTML เป็นแบบร่างภาพสำหรับการแปลงหากจำเป็น
### ทักษะนี้รองรับการสร้างภาพสำหรับ HTML PPT ของฉันหรือไม่?
ใช่ เมื่อใช้ในสภาพแวดล้อม Codex ทักษะนี้สามารถใช้ประโยชน์จาก GPT-Image 2.0 / GPT-M 2.0 เพื่อสร้างภาพประเภทต่างๆ อินโฟกราฟิก และสถานการณ์ UI ซึ่งจะถูกแทรกเข้าไปในงานนำเสนอของคุณตามอัตราส่วนของเทมเพลต