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

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

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