Image-Led Presentation in HTML, Exported to PDF

งาน: ทำ presentation แบบ "ภาพนำ" เป็น HTML แล้วส่งออก PDF

ส่วนที่ 1 — ข้อมูลของงานนี้ (แก้ตรงนี้ที่เดียว)

• เรื่องที่จะนำเสนอ: <เช่น เสนอขายระบบ X ให้บริษัท Y>
• คนฟังคือใคร และเขาต้องตัดสินใจอะไรหลังฟังจบ: <เช่น ผู้บริหาร 3 คน ต้องเลือกแพ็กเกจ>
• เนื้อหาต้นทาง: <path ของไฟล์ เช่น docs/brief.md หรือวางเนื้อหาไว้ใต้พรอมต์นี้>
• ภาษาบนสไลด์: <ไทย>
• จำนวนสไลด์หลักโดยประมาณ: <15-20>
• สีแบรนด์: พื้นหลังเข้ม <#05162a> สีเน้น <#ffd400>
• โลโก้ (ถ้ามี):
• โฟลเดอร์ที่จะวางงาน: <docs/deck/>

ส่วนที่ 2 — หลักคิด

สไลด์ชุดนี้ต้องดูเหมือนงานของเอเจนซี ไม่ใช่เอกสารที่เอามาแปะบนจอ คนฟังควรเข้าใจแต่ละหน้าได้ใน 3 วินาทีจากภาพกับหัวข้อ แล้วค่อยอ่านรายละเอียด

1. หนึ่งหน้า หนึ่งข้อความ หัวข้อของทุกหน้าเป็นประโยคสรุปที่อ่านแล้วได้ข้อสรุปเลย เช่น "ตรวจเครื่องจบใน 5 นาที โดยไม่ต้องมีพนักงาน" ไม่ใช่ "ภาพรวมระบบ" ถ้าอ่านเฉพาะหัวข้อเรียงกันทั้งชุด ต้องได้เรื่องเล่าที่จบในตัว
2. ภาพเป็นตัวนำ ไม่ใช่ของประดับ ทุกหน้ามีภาพถ่ายเต็มจอ หรือภาพกินพื้นที่ราวครึ่งหน้า ห้ามมีหน้าที่เป็นตารางหรือ bullet ล้วนบนพื้นสีเรียบ ถ้าเนื้อหาเป็นตารางจริง ๆ ให้วางตารางคู่กับคอลัมน์ภาพ
3. ทุกหน้าซ้อนชั้นเหมือนกัน ภาพ → แผ่นสีเข้มโปร่งแสงทับภาพให้ตัวหนังสืออ่านออก (scrim) → เนื้อหา → แถบบนล่าง (ชื่อแบรนด์ หมวด เลขหน้า)
4. ตัวหนังสือทุกตัวเป็น HTML ห้ามให้โมเดลสร้างภาพเขียนตัวอักษร ตัวเลข โลโก้ หรือหน้าจอแอปลงในภาพ เพราะสะกดผิดและแก้ทีหลังไม่ได้
5. ตัวเลขและข้อเท็จจริงมาจากเนื้อหาต้นทางเท่านั้น ห้ามแต่งตัวเลขให้ดูดี อะไรที่ยังไม่ได้พิสูจน์ ให้เขียนบนสไลด์ว่ายังไม่ได้พิสูจน์
6. เขียนถึงคนฟัง ไม่ใช่ถึงคนพูด ห้ามมีข้อความสอนวิธีใช้สไลด์ เช่น "สไลด์สำรอง" หรือ "เปิดเฉพาะเมื่อถูกถาม" ห้ามคำเกริ่นแบบภาษาพูด เช่น "พูดตรง ๆ" และห้ามอ้างชื่อไฟล์ภายในที่คนฟังไม่มี
7. ชุดหลักสั้น รายละเอียดไปท้ายเล่ม ชุดหลักเล่าเรื่องให้จบ ตารางละเอียด เงื่อนไข และที่มาของข้อมูล ให้แยกเป็นภาคผนวกต่อท้าย เลขหน้า A-1, A-2 ไปเรื่อย ๆ

ส่วนที่ 3 — ขั้นตอน (ทำเรียงตามนี้จนจบ ไม่ต้องหยุดถาม)

ขั้น 1: วางโครงเรื่องก่อนแตะโค้ด

อ่านเนื้อหาต้นทางให้ครบ แล้วเขียน outline.md เป็นตาราง หนึ่งแถวต่อหนึ่งสไลด์ มีคอลัมน์ เลขหน้า / หัวข้อ (ประโยคสรุป) / หลักฐานหรือตัวเลขที่ใช้ / ภาพที่ต้องการ / รูปแบบหน้า เรียงเรื่องเป็น ปัญหาของคนฟัง → ทางออก → มันทำงานอย่างไร → หลักฐาน → ราคาหรือสิ่งที่ขอ → ขั้นต่อไป

ขั้น 2: กำหนดแนวภาพครั้งเดียว ใช้ทั้งชุด

เขียนย่อหน้า "สไตล์ภาพ" หนึ่งย่อหน้า ระบุแสง โทนสี ฉาก มุมกล้อง และอารมณ์ แล้วแปะย่อหน้านี้ต่อท้ายพรอมต์ของทุกภาพ เพื่อให้ทั้งชุดดูเป็นงานชุดเดียวกัน โทนภาพต้องเข้ากับสีพื้นหลังเข้มของสไลด์

ขั้น 3: สร้างภาพด้วยเครื่องมือสร้างภาพของคุณ

• สร้างภาพจริงเป็นไฟล์ ไม่ใช่วาดด้วย HTML, CSS หรือ SVG
• อัตราส่วน 16:9 สำหรับภาพเต็มจอ และแนวตั้งสำหรับคอลัมน์ภาพ
• เว้นพื้นที่ว่างและมืดไว้ฝั่งที่จะวางตัวหนังสือ (ปกติคือฝั่งซ้าย)
• ทุกพรอมต์ปิดท้ายด้วย: no text, no letters, no numbers, no logos, no watermarks
• ถ้ามีมือถือ แท็บเล็ต หรือจอคอมในภาพ ให้หันจอออกจากกล้อง หรือจอดับ ห้ามเห็นหน้าจอที่มี UI
• คนในภาพให้เหมาะกับประเทศและบริบทของคนฟัง
• บันทึกเป็น JPEG กว้างราว 1920px ไว้ใน img/ ตั้งชื่อตามเลขสไลด์
• เปิดดูทุกภาพที่ได้ ภาพไหนมีตัวอักษรเพี้ยน มือผิดรูป หรือหลุดสไตล์ ให้สร้างใหม่

ขั้น 4: หน้าจอแอป (ถ้าต้องโชว์)

สร้างหน้าจอเป็น HTML แยกไฟล์ในกรอบมือถือ แล้ว screenshot ที่ความละเอียดอย่างน้อย 3 เท่า ไว้ใน screens/ แล้วนำไปวางบนสไลด์ ข้อความบนหน้าจอต้องตรงกับเนื้อหาจริง

ขั้น 5: ประกอบสไลด์

• ไฟล์ presentation.html กับ deck.css และ appendix.html ถ้ามีภาคผนวก
• แต่ละสไลด์เป็น <section class="slide"> ขนาดตายตัว 1280×720px, overflow: hidden
• CSS ต้องมี @page { size: 1280px 720px; margin: 0; } และ break-after: page ทุกสไลด์
• เลขหน้าใช้ CSS counter ไม่พิมพ์มือ
• สร้างรูปแบบหน้าไว้ใช้ซ้ำ 5 ถึง 7 แบบ เช่น ปก, คั่นบท, ภาพเต็มจอพร้อมข้อความฝั่งซ้าย, ภาพครึ่งหน้าคู่เนื้อหา, ตัวเลขใหญ่เรียงแถว, ตารางคู่ภาพ, ปิดท้าย
• ฟอนต์ที่รองรับภาษาของสไลด์ เช่น IBM Plex Sans Thai หัวข้อ 36px ขึ้นไป เนื้อหาไม่ต่ำกว่า 16px
• ใช้สีเน้นสีเดียว เน้นคำสำคัญด้วยแถบสีทึบหลังตัวหนังสือ
• แบ่งเนื้อหาด้วยเส้นบางและที่ว่าง ไม่ใช้กล่องซ้อนกล่อง
• ห้ามใช้ box-shadow แบบเบลอ, text-shadow, filter, backdrop-filter เพราะตอนพิมพ์เป็น PDF จะกลายเป็นภาพแตกหรือเป็นแถบ ให้ใช้ gradient กับสีโปร่งแสงแทน

ขั้น 6: ส่งออก PDF

เขียน render.sh ที่เรียก Chrome แบบ headless: --headless=new --no-pdf-header-footer --virtual-time-budget=10000 --print-to-pdf=<ไฟล์> ถ้ามีภาคผนวก ให้พิมพ์แยกแล้วต่อไฟล์ด้วย pdfunite

ขั้น 7: ตรวจด้วยตาตัวเองทุกหน้า

แปลง PDF ทุกหน้าเป็น PNG (pdftoppm -r 100 -png) แล้วเปิดดูทีละหน้า ตรวจว่า

• ไม่มีข้อความล้นหรือโดนตัดที่ขอบ
• ตัวหนังสือบนภาพอ่านออกทุกบรรทัด ถ้าไม่ออกให้เพิ่มความเข้มของ scrim
• หัวข้อไม่ขึ้นบรรทัดใหม่กลางคำ และไม่มีคำเดียวตกบรรทัด
• จำนวนหน้าใน PDF เท่ากับจำนวนสไลด์
• ภาพหน้าจอแอปคมเมื่อซูม

แก้แล้ว render ใหม่จนผ่านทุกหน้า

ส่วนที่ 4 — สิ่งที่ต้องรายงานตอนจบ

• path ของ PDF และจำนวนหน้า
• รายการข้อสมมติที่คุณตัดสินใจเอง
• จุดที่เนื้อหาต้นทางไม่มีข้อมูล และคุณเว้นไว้หรือระบุว่ายังไม่ยืนยัน
• หน้าที่คุณยังไม่พอใจ พร้อมเหตุผล