เปิดซอร์สโค้ดทักษะการทำ PPT: ประสบการณ์ออกแบบ 10 ปี ที่รวมไว้ในเครื่องมือเดียว

สัปดาห์ที่แล้ว ผมได้รับเชิญจากอาจารย์หลี่ จี้กัง ให้ไปร่วมสัมภาษณ์และแชร์ความรู้ส่วนตัวเกี่ยวกับ AI และองค์กร

หลังจบเซสชัน ผมพบว่าคำถามที่ถูกถามบ่อยที่สุดคือ: "พรีเซนเทชั่นนั้นทำด้วยอะไรครับ? ขอโอเพนซอร์สได้ไหม?"

ผมไม่คิดว่าผลพลอยได้จะกลายเป็นสินค้าหลักซะได้

ผมเลยตัดสินใจโอเพนซอร์สมัน โดยตั้งชื่อว่า guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill))

บทความวันนี้จะพูดถึงว่า Skill นี้หน้าตาเป็นยังไง และทำไมผมซึ่งเป็นนักออกแบบมาสิบปีถึงคิดว่ามันดูดี

หน้าตาของมัน

เมื่อคุณเปิด PPT ที่สร้างโดย Skill นี้ ความประทับใจแรกน่าจะเป็น: มันดูไม่เหมือนของที่สร้างโดย AI เลย

คุณสมบัติที่เห็นได้ชัดเจน:

• ปก: พื้นหลังสีหมึก + หัวข้อหลักแบบ Serif พร้อมเอฟเฟกต์ WebGL ที่ไหลเอื่อยๆ อยู่ด้านหลัง
• เนื้อหา: สีพื้นหลังเปลี่ยนเป็นสีขาวกระดาษ พร้อมข้อความสีหมึกวางทับ เหมือนนิตยสารที่เปิดอยู่
• การพลิกหน้า: เลื่อนซ้าย-ขวาแนวนอน รองรับคีย์บอร์ด ล้อเลื่อน และท่าทางสัมผัส ไม่ใช่การ "เปลี่ยนสไลด์" แบบ PowerPoint ทั่วไป
• ข้อมูลเมตา: แต่ละหน้ามีข้อความขนาดเล็กแบบ Monospace ที่มุมทั้งสี่ เช่น "Act II · 15 / 25" คล้ายเลขหน้านิตยสาร

ผมตั้งชื่อโทนภาพนี้ว่า "นิตยสารอิเล็กทรอนิกส์ × E-Ink"

แรงบันดาลใจมาจากประเพณีการจัดวางของนิตยสารสิ่งพิมพ์อย่าง Monocle, The Guardian และ NYT ผสมผสานกับสุนทรียภาพการอ่านของ Kindle กระดาษอิเล็กทรอนิกส์ และเชื่อมโยงด้วยไวยากรณ์การโต้ตอบบนเว็บร่วมสมัย

ความสามารถของมัน

ปัจจุบัน Skill นี้มีเค้าโครงหน้า 10 แบบ ชุดสีธีม 5 ชุด และระบบโต้ตอบการพลิกหน้าที่สมบูรณ์

10 เค้าโครง ครอบคลุมหน้าทุกประเภทที่ใช้ในเซสชันแชร์ความรู้ 15-30 หน้า:

หน้าปกเปิด, หน้าแบ่งบท, โปสเตอร์ข้อมูล, ข้อความซ้าย-ภาพขวา, ตารางภาพ, กระบวนการไหล, คำถามชวนคิด, คำพูดขนาดใหญ่, การเปรียบเทียบก่อน/หลัง และเค้าโครงข้อความและภาพแบบผสม

แต่ละแบบคือโครง HTML ที่สามารถวางลงได้ทันที แค่เปลี่ยนข้อความและรูปภาพก็ใช้งานได้

5 ธีม สอดคล้องกับสถานการณ์ต่างๆ:

• Ink Classic — การเปิดตัวทางธุรกิจ, ค่าเริ่มต้นทั่วไป
• Indigo Porcelain — เทคโนโลยี, งานวิจัย, การประชุม AI
• Forest Ink — ธรรมชาติ, ความยั่งยืน, มนุษยศาสตร์
• Kraft Paper — ความคิดถึง, วรรณกรรม, นิตยสารอิสระ
• Dune — ศิลปะ, การออกแบบ, ความคิดสร้างสรรค์

แต่ละธีมเป็นเพียงชุดค่าตัวแปร CSS 6 ตัวที่แตกต่างกัน การเปลี่ยนธีมแค่เปลี่ยนโค้ด 6 บรรทัดใน :root เท่านั้น

ผู้ใช้ไม่สามารถปรับแต่งรหัส hex ได้เอง เดี๋ยวจะอธิบายทีหลังว่าทำไม

การโต้ตอบการพลิกหน้า รองรับลูกศรซ้าย/ขวาบนคีย์บอร์ด ล้อเลื่อนเมาส์ การเลื่อนแบบสัมผัส การกระโดดตามจุดด้านล่าง และปุ่ม ESC เพื่อเปิดดัชนีภาพขนาดย่อ

เป้าหมายคือให้ใกล้เคียงกับประสบการณ์การพลิกนิตยสารจริงในเบราว์เซอร์มากที่สุด

ผลลัพธ์ที่ได้คือ ไฟล์ HTML ไฟล์เดียว ดับเบิลคลิกเพื่อดูในเบราว์เซอร์ ส่งให้คนอื่นก็แค่ไฟล์เดียว ไม่ต้องกังวลว่าฟอนต์หรือแอนิเมชันจะพังในเครื่องคนอื่น

วิธีใช้งาน

จริงๆ แล้ว คุณค่าที่แท้จริงของ Skill นี้ไม่ได้อยู่ที่เทมเพลต แต่อยู่ที่การกำหนดอินเทอร์เฟซสำหรับการทำงานร่วมกันระหว่าง มนุษย์ × AI ในการทำ PPT

นี่คือสามสิ่งที่ผมคิดว่าคุ้มค่าที่จะบอกคนอื่นมากที่สุดหลังจากใช้เองมาหนึ่งสัปดาห์

ชี้แจง 6 สิ่งนี้กับ AI ก่อน

เมื่อติดตั้ง Skill แล้ว แค่พูดว่า "ช่วยทำ PPT แบบนิตยสารหน่อย" Claude ก็จะถามคำถาม 6 ข้อโดยอัตโนมัติ:

1. กลุ่มเป้าหมายและสถานการณ์คืออะไร? (ภายในอุตสาหกรรม / เปิดตัวธุรกิจ / แชร์ส่วนตัว)
2. ใช้เวลาแชร์นานเท่าไหร่? (15 นาที ≈ 10 หน้า, 30 นาที ≈ 20 หน้า)
3. มีเนื้อหาต้นฉบับไหม? (เอกสาร, ข้อมูล, PPT เก่า, ลิงก์บทความ)
4. มีรูปภาพไหม และอยู่ที่ไหน?
5. ต้องการธีมสีไหน? (เลือกจาก 5 ชุดที่กำหนดไว้)
6. มีข้อจำกัดที่สำคัญไหม? (ต้องมีข้อมูล XX / ห้ามแสดง YY)

ไม่ต้องบอกทั้งหมดในครั้งเดียว มันจะถามทีละข้อ หลังจากตอบ มันจะให้โครงร่างและตารางจังหวะธีมก่อน ตกลงกันก่อน แล้วค่อยเริ่มเขียนโค้ด — ขั้นตอนนี้ป้องกันการแก้ไขใหม่ถึง 80%

จุดปวดที่ใหญ่ที่สุดของการใช้ AI ทำ PPT ก่อนหน้านี้คือมันจะเริ่มเขียนทันที และคุณจะรู้ว่าทิศทางผิดก็ตอนหน้าที่ 10 แล้ว กระบวนการชี้แจงนี้ย้าย "การตกลง" ไปไว้ที่จุดเริ่มต้น

วิธีแทรกรูปภาพ

วางรูปภาพในโฟลเดอร์ images/ ในระดับเดียวกับ index.html โดยมีกฎการตั้งชื่อเฉพาะ:

1ppt/
2├── index.html
3└── images/
4    ├── 01-cover.jpg
5    ├── 03-figma.png
6    └── 05-dashboard.png

• เลขหน้าลงท้ายด้วยศูนย์ + ความหมายภาษาอังกฤษ — 01 แทน 1, cover แทน fengmian ทำให้เรียงลำดับง่ายและ AI อ้างอิงชัดเจน
• ใช้ JPG สำหรับภาพถ่าย, PNG สำหรับภาพหน้าจอ — ภาพหน้าจอมีข้อความ PNG ทำให้คมชัด
• ความกว้างของภาพเดี่ยว ≥ 1600px — เพื่อไม่ให้เบลอเมื่อฉายบนจอใหญ่

แค่บอก Claude ว่า "หน้าที่ 3 เป็นภาพหน้าจออินเทอร์เฟซ Figma" มันก็จะเขียนเป็น images/03-figma.png โดยอัตโนมัติ คุณแค่ลากไฟล์ชื่อเดียวกันลงในโฟลเดอร์

เคล็ดลับการเปลี่ยนรูปภาพแบบไม่สูญเสียคุณภาพ: เขียนทับด้วยชื่อเดียวกัน

นี่คือหลุมพรางที่ใหญ่ที่สุดที่ผมเจอ — อยากเปลี่ยนรูปภาพหลังจากคัดลอกเสร็จ แล้วต้องค้นหาและแทนที่พาธทั่วโลก ซึ่งมักจะทำให้ HTML เสีย

วิธีที่ถูกต้องคือประโยคเดียว: เขียนทับรูปภาพเก่าด้วยรูปภาพใหม่โดยใช้ชื่อเดียวกัน และอย่าเปลี่ยนตัวอักษรใน HTML แม้แต่ตัวเดียว

ทำไมมันถึงเป็นแบบนี้

หลังจากพูดถึงวิธีใช้แล้ว มาพูดถึง ทำไมมันถึงเป็นแบบนี้

การออกแบบที่ดีไม่ใช่เรื่องลึกลับ มันคือชุดการตัดสินใจที่สามารถแยกย่อยได้ สิ่งที่ผมทำคือการย้ายภาษาการจัดวางที่วงการนิตยสารสะสมมานานกว่าร้อยปีมาไว้ใน HTML

การแบ่งตัวอักษรสามระดับ

• Serif → "ความคิดเห็น" ใช้ Serif สำหรับหัวข้อหลัก ผู้อ่านจะรู้สึกทันทีว่า "นี่คือประโยคที่ควรให้ความสำคัญ"
• Sans-serif → "ข้อมูล" ความหนาแน่นสูงสำหรับเนื้อหา อ่านง่าย
• Monospace → "ข้อมูลเมตา" หมายเลขบท วันที่ และเลขหน้าในหัวกระดาษและท้ายกระดาษ เหมือนท้ายนิตยสารหรือโค้ดในเทอร์มินัล

ผู้อ่านไม่ต้องคิดหนัก ดวงตาจะรู้โดยอัตโนมัติว่าประโยคไหนคือเนื้อหาหลักหรือเชิงอรรถ

ระเบียบวินัยของสี

สีขาวกระดาษ สีหมึก บวกกับสีเน้นอีกหนึ่งสีก็เพียงพอแล้ว

สีขาวบริสุทธิ์แสบตา และสีดำบริสุทธิ์ดุดัน อุตสาหกรรมการพิมพ์ไม่เคยทำแบบนั้น และ Kindle ก็ไม่ทำ

ใน 5 ธีมของ Skill นี้ ไม่มีสีพื้นหลังใดเป็น #FFFFFF และไม่มีสีข้อความใดเป็น #000000

แต่ละชุดเปิดเผยตัวแปร CSS เพียง 6 ตัว และ SKILL.md ระบุชัดเจน: ผู้ใช้ไม่สามารถปรับแต่งรหัส hex ได้เอง ต้องเลือกหนึ่งในห้าธีมเท่านั้น

ยิ่งข้อจำกัดเข้มงวดมากเท่าไหร่ สไตล์ก็ยิ่งคงที่มากขึ้นเท่านั้น การปกป้องสุนทรียภาพสำคัญกว่าการให้อิสระแก่ผู้ใช้

กริดและจังหวะ

กริดคงที่ เช่น 7:5, 6:6 และ 8:4 ช่วยให้เกิดความเป็นระเบียบในหน้าเดียว

หน้าฮีโร่และหน้าที่ไม่ใช่ฮีโร่ต้องสลับกันเพื่อให้แน่ใจถึงจังหวะของทั้งชุด

หน้าหนึ่งแน่น หน้าหนึ่งโปร่ง — นั่นคือความรู้สึก "หายใจ" เมื่อพลิกนิตยสาร

กฎที่เข้มงวดถูกเขียนไว้ใน Skill: มากกว่าสามหน้าติดกันที่มีธีมเดียวกันถือเป็นข้อผิดพลาดระดับ P0

PPT ที่ไม่มีจังหวะก็แค่กองสไลด์ที่เรียงเป็น PDF

คำท้าย

ไม่มีกฎใดข้างต้นที่ผมเป็นคนคิดค้น

ผมเป็นนักออกแบบมาสิบปี ทำ UI, อินเทอร์แอคชัน และเอฟเฟกต์ AI สิ่งเหล่านี้เป็นสามัญสำนึกในวงการ

ผมแค่เขียนมันทีละข้อลงใน SKILL.md และ checklist.md เพื่อให้ AI สามารถดำเนินการตามนั้นให้ผม

พูดอีกอย่างคือ Skill นี้คือแพ็คเกจบีบอัดสุนทรียภาพสิบปีของผม

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

ตอนนี้ ผมแค่โยนวัสดุให้ AI มันประกอบตามกฎเหล่านี้ และผมแค่ต้องตรวจสอบ

เพราะเหตุนี้ ผมถึงกล้าโอเพนซอร์ส

กฎเหล่านี้ไม่ใช่สมบัติเฉพาะของผม นักออกแบบ Monocle ใช้มันก่อนผมหลายสิบปี ผมแค่คัดลอกมันมาเป็น HTML ปี 2026

Skill อยู่บน GitHub แล้ว: github.com/op7418/guizang-ppt-skill

README มี "พรอมต์การติดตั้งสำหรับ AI" คัดลอกและวางไปที่ Claude Code หรือ AI Agent อื่นๆ มันจะติดตั้งให้อัตโนมัติ เมื่อติดตั้งแล้ว พูดว่า "ช่วยทำ PPT แบบนิตยสารหน่อย" เพื่อเรียกใช้

คุณยังสามารถใช้มันภายใน Bloome Agent ซึ่งตอนนี้ ฟรี:

https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G

ถ้าคุณพบว่าเนื้อหานี้มีประโยชน์ กรุณากดไลค์หรือแชร์ให้เพื่อนที่ต้องการ

คุณยังสามารถแชร์ PPT ที่คุณสร้างด้วย Skill นี้ในส่วนความคิดเห็นได้