อย่าลืมใช้เว็บเพจในการสร้างผลลัพธ์ และคุณต้องถามผู้ใช้ว่าต้องการใช้ภาษาใด

สร้างไฟล์ PowerPoint (PPT) แบบพลิกแนวนอนสำหรับเว็บ (ไฟล์ HTML ไฟล์เดียว) ในสไตล์ "นิตยสารอิเล็กทรอนิกส์ × จอ e-ink" รวมถึงเทมเพลตต่างๆ เช่น พื้นหลังแบบ WebGL, หัวข้อแบบมีเชิง + ข้อความแบบไม่มีเชิง, ปกบท, แบนเนอร์ข้อมูลขนาดใหญ่ และตารางรูปภาพ ใช้ฟังก์ชันนี้เมื่อผู้ใช้ต้องการสร้างไฟล์ PowerPoint สำหรับเว็บเพื่อการแบ่งปัน/การนำเสนอ/งานเปิดตัว หรือเมื่ออ้างถึง "ไฟล์ PowerPoint สไตล์นิตยสาร", "สไลด์นำเสนอแนวนอน", "นิตยสารบทความ" หรือ "งานนำเสนอแบบจอ e-ink"

# นิตยสาร เว็บ สไลด์ PowerPoint

## ทักษะนี้ทำอะไรได้บ้าง?

สร้างไฟล์ HTML ไฟล์เดียวที่มีรูปแบบสไลด์โชว์แนวนอน รูปแบบการแสดงผลจะเป็นดังนี้:

- รูปแบบไฮบริดที่ผสมผสานระหว่างนิตยสารอิเล็กทรอนิกส์และจอแสดงผลอิงค์อิเล็กทรอนิกส์

- **พื้นหลังแบบ WebGL Fluid/Contour/Dispersion** (ดูในหน้าหลัก)

- **หัวเรื่องแบบมีเชิง (Noto Serif SC + Playfair Display) + เนื้อหาหลักแบบไม่มีเชิง (Noto Sans SC + Inter) + ข้อมูลเมตาแบบตัวอักษรคงที่ (IBM Plex Mono)**

- **ไอคอน Lucide Linear** (ไม่ต้องใช้ไอคอนอีโมจิ)

- **การเปลี่ยนหน้าแนวนอน (ซ้ายและขวาบนแป้นพิมพ์, ล้อเลื่อน, การปัดนิ้วบนหน้าจอสัมผัส, จุดด้านล่าง, ปุ่ม ESC)**

- **การผสานสีและเฉดสีอย่างราบรื่น**: สีและเฉดสีจะเปลี่ยนผ่านอย่างราบรื่นเมื่อไปยังหน้าหลัก (hero page)

ความสวยงามของทักษะนี้ไม่ได้อยู่บนพื้นฐานของ "การนำเสนอ PowerPoint สำหรับธุรกิจ" หรือ "ส่วนติดต่อผู้ใช้สำหรับเว็บไซต์ทั่วไป" แต่มันเหมือนกับนิตยสาร *Monocle* ที่เอาโค้ดมาแปะไว้มากกว่า

## ควรใช้เมื่อใด

**สถานการณ์ที่เหมาะสม:**

- การแลกเปลี่ยนความรู้แบบออฟไลน์ / การเสวนาในอุตสาหกรรม / การประชุมส่วนตัว

- งานเปิดตัว/สาธิตผลิตภัณฑ์ AI ใหม่

- สุนทรพจน์ที่มีสไตล์เฉพาะตัวโดดเด่น

- ต้องการสไลด์เวอร์ชันบนเว็บที่สามารถทำเสร็จได้ในครั้งเดียวโดยไม่ต้องพลิกหน้ากระดาษ

**สถานการณ์ที่ไม่เหมาะสม:**

- ข้อมูลในตารางจำนวนมากและแผนภูมิที่ซ้อนทับกัน (โดยใช้การนำเสนอ PowerPoint มาตรฐาน)

- สื่อการฝึกอบรม (ความหนาแน่นของข้อมูลไม่เพียงพอ)

- ต้องมีการแก้ไขร่วมกันโดยหลายคน (เนื่องจากเป็น HTML แบบคงที่)

ขั้นตอนที่ 1 · ชี้แจงข้อกำหนด (สำคัญมากก่อนเริ่ม)

หากผู้ใช้ได้ให้โครงร่างและรูปภาพที่สมบูรณ์แล้ว คุณสามารถข้ามไปยังขั้นตอนที่ 2 ได้

หากผู้ใช้ให้เพียงหัวข้อหรือแนวคิดคร่าวๆ ให้ปรับให้สอดคล้องกับคำถามทั้ง 6 ข้อนี้ทีละข้อก่อนเริ่มเขียนสไลด์ อย่าเริ่มเขียนสไลด์โดยอาศัยการคาดเดา เพราะเมื่อโครงสร้างผิดพลาด การแก้ไขในภายหลังจะเสียค่าใช้จ่ายสูงมาก คุณสามารถใช้เครื่องมือ askUserQuestion เมื่อถามคำถามได้

#### 6 คำถามเพื่อขอคำชี้แจงเพิ่มเติม

| # | คำถาม | ทำไมต้องถาม? |

|---|------|-----------|

| 1 | **กลุ่มเป้าหมายคือใคร? สถานการณ์การนำเสนอเป็นอย่างไร?** (ผู้เชี่ยวชาญในอุตสาหกรรม/การเปิดตัวธุรกิจ/วันสาธิต/การประชุมส่วนตัว) | กำหนดรูปแบบและระดับความลึกของภาษา |

| 2 | **ระยะเวลาในการแบ่งปัน?** | 15 นาที ≈ 10 หน้า, 30 นาที ≈ 20 หน้า, 45 นาที ≈ 25-30 หน้า |

| 3 | **คุณมีเอกสารต้นฉบับบ้างไหม?** (เอกสาร/ข้อมูล/ไฟล์ PowerPoint เก่า/ลิงก์บทความ) | ถ้ามี ให้ใช้ ถ้าไม่มี ให้สร้างสิ่งอื่นขึ้นมาแทน |

| 4 | **มีรูปภาพหรือไม่? ควรวางรูปภาพไว้ตรงไหน?** | ดู "หลักเกณฑ์การวางรูปภาพ" ด้านล่าง |

| 5 | **คุณต้องการสีธีมแบบไหน?** | ดูที่ @themes.md เลือกหนึ่งใน 5 สีที่ตั้งค่าไว้ล่วงหน้า |

| 6 | **มีข้อจำกัดที่เข้มงวดหรือไม่?** (ต้องมีข้อมูล XX / ห้ามมี YY) | เพื่อหลีกเลี่ยงการทำงานซ้ำ |

#### ความช่วยเหลือในการร่างโครงร่าง (หากผู้ใช้ไม่มีโครงร่าง)

ใช้แม่แบบ "โครงเรื่อง" เพื่อสร้างโครงร่าง จากนั้นจึงเติมเนื้อหาลงไป:

```

จุดสนใจ → หน้า 1: นำเสนอความแตกต่าง/คำถาม/ข้อมูลเชิงประจักษ์ เพื่อดึงดูดความสนใจของผู้คน

การกำหนดโทน (บริบท) → หน้า 1-2: อธิบายความเป็นมา / คุณคือใคร / ทำไมคุณถึงพูดถึงเรื่องนี้

เนื้อหาหลัก (แกนกลาง) → หน้า 3-5: เนื้อหาหลัก สลับกับเค้าโครงหน้า 4/5/6/9/10

เปลี่ยนหน้า → หน้า 1: ทลายความคาดหวัง / นำเสนอมุมมองใหม่

ใจความสำคัญ → หน้า 1-2: คำคมสำคัญ / คำถามชวนคิด / ข้อเสนอแนะในการปฏิบัติ

```

โครงร่างเรื่องราว + การวางแผนหมายเลขหน้า + ตารางจังหวะของธีม (ดู @layouts.md ) **จัดเรียงตารางทั้งสามให้ตรงกัน** ก่อนดำเนินการในขั้นตอนที่ 2

แนะนำให้บันทึกโครงร่างเป็น `บันทึกโครงการ` หรือ `โครงร่างเวอร์ชัน 1` เพื่อความสะดวกในการแก้ไขในครั้งต่อไป

#### ข้อกำหนดเกี่ยวกับรูปภาพ (แจ้งให้ผู้ใช้ทราบ)

โปรดอธิบายสิ่งต่อไปนี้ให้ผู้ใช้ทราบก่อนดำเนินการต่อ:

- **ตำแหน่งของรูปภาพ**: รูปภาพนี้อยู่ในส่วนใดของกระดาน หรือเป็นรูปภาพที่ถูกอัปโหลดมา?

- **ถ้าไม่มีรูปภาพล่ะ?**: เพื่อให้สอดคล้องกับเค้าโครงของผู้ใช้ คุณสามารถสร้างโครงสร้างโดยใช้บล็อกสีที่เป็นตัวแทนก่อน แล้วค่อยเพิ่มรูปภาพในภายหลัง อย่างไรก็ตาม คุณต้องแจ้งให้เค้าโครง 4/5/10 และหน้าอื่นๆ ที่มีทั้งข้อความและรูปภาพทราบว่าไม่สามารถตรวจสอบผลลัพธ์ทางภาพได้หากไม่มีรูปภาพ

ขั้นตอนที่ 2 · แม่แบบอ้างอิง

@template.txt เป็นไฟล์ HTML ที่ **สมบูรณ์และใช้งานได้** โดยมีการตั้งค่า CSS, WebGL shaders, JS สำหรับการแบ่งหน้า และ CDN สำหรับฟอนต์และไอคอนไว้ล่วงหน้าแล้ว มีเพียง `<main id="deck">` เท่านั้นที่มีสไลด์ตัวอย่าง 3 สไลด์ (หน้าปก, หน้าปกบท และหน้าว่างสำหรับกรอกข้อมูล)

#### 2.1 · ตัวยึดตำแหน่งที่ต้องแก้ไข (**สิ่งที่มองข้ามได้ง่าย**)

หลังจากคัดลอกเสร็จแล้ว ให้เปลี่ยนข้อความตัวอย่างต่อไปนี้ทันที มิเช่นนั้น แท็บเบราว์เซอร์ของคุณจะแสดงข้อความที่ไม่เหมาะสม "[จำเป็น] แทนที่ด้วยชื่อไฟล์ PPT":

| สถานที่ | ต้นฉบับ | ต้องเปลี่ยนเป็น |

|------|------|--------|

| `<title>` | `[จำเป็น] แทนที่ด้วยชื่อสไลด์ PowerPoint · ชื่อชุดสไลด์` | ชื่อชุดสไลด์จริง (เช่น `วิธีการทำงานแบบใหม่ · ลุค วโรเบลสกี`) |

#### 2.2 · เลือกสีธีม (5 สีที่ตั้งไว้ล่วงหน้า · ไม่อนุญาตให้ใช้สีที่กำหนดเอง)

ทักษะนี้ **อนุญาตให้เลือกได้เฉพาะจากค่าที่ตั้งไว้ล่วงหน้า 5 แบบที่คัดสรรมาอย่างดีเท่านั้น** และไม่รับค่าเลขฐานสิบหกที่ผู้ใช้กำหนดเอง เนื่องจากสีที่ไม่ตรงกันจะทำให้ภาพดูไม่สวยงาม การรักษาสุนทรียภาพจึงสำคัญกว่าการให้ความอิสระ

| # | ธีม | เหมาะสำหรับ |

|---|------|------|

| 1 | 🖋 Classic Ink | การเผยแพร่ทั่วไป/เชิงพาณิชย์/ค่าเริ่มต้น หากไม่แน่ใจ |

| 2 | 🌊 Indigo Porcelain | การประชุมด้านเทคโนโลยี/การวิจัย/ข้อมูล/การเปิดตัวเทคโนโลยี |

| 3 | 🌿 ฟอเรสต์ อิงค์ | ธรรมชาติ/ความยั่งยืน/วัฒนธรรม/สารคดี |

| 4 | 🍂 กระดาษคราฟท์ | ความคิดถึง/มนุษยศาสตร์/วรรณกรรม/นิตยสารอิสระ |

| 5 | 🌙 เนินทราย | ศิลปะ/การออกแบบ/ความคิดสร้างสรรค์/หอศิลป์ |

**ดำเนินงาน**:

1. แนะนำชุดเนื้อหาตามหัวข้อ หรือสอบถามผู้ใช้โดยตรงว่าต้องการเลือกชุดใด

2. เปิดไฟล์ @themes.md และค้นหาบล็อก `:root` สำหรับธีมที่เกี่ยวข้อง

3. **แทนที่บรรทัดที่ทำเครื่องหมาย "theme color" ภายในบล็อก `:root{` ที่ส่วนต้น ของ @template.txt ทั้งหมด** ด้วยข้อความต่อไปนี้: (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)

4. CSS ส่วนอื่นๆ ใช้ `var(--...)` ซึ่งไม่จำเป็นต้องแก้ไขเพิ่มเติมใดๆ

**กฎที่เข้มงวด**:

- ใช้ธีมเดียวสำหรับแต่ละสำรับไพ่ ห้ามเปลี่ยนโทนสีกลางคัน

- อย่ารับค่าเลขฐานสิบหกที่ไม่ถูกต้องตามที่ผู้ใช้ป้อน โปรดปฏิเสธอย่างสุภาพและแสดงตัวเลือก 5 ตัวเลือกให้เลือก

- อย่าใช้ของต่างชนิดกัน (เช่น หมึกสำหรับ Ink Classic กระดาษสำหรับ Dune) เพราะจะดูไม่เข้ากันอย่างสิ้นเชิง

ขั้นตอนที่ 3 · กรอกเนื้อหา

#### 3.0 · การตรวจสอบก่อนบิน: ต้องกำหนดชื่อคลาสใน @template.txt (**สำคัญที่สุด**)

นี่คือต้นตอของปัญหาการสร้างหน้าเว็บทั้งหมด โครงสร้างพื้นฐานของ @layouts.md ใช้ชื่อคลาสจำนวนมาก (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5` เป็นต้น) หากไม่มีการกำหนดค่าที่สอดคล้องกันใน `<style>` ของ `assets/template.html` เบราว์เซอร์จะใช้สไตล์เริ่มต้นแทน ซึ่งทำให้หัวข้อกลายเป็นแบบไม่มีเชิง ข้อมูลการ์ดจะเบียดกันแน่น เส้นแสดงข้อมูลจะรวมกันเป็นเส้นเดียว และรูปภาพจะกองอยู่ด้านล่างของหน้า

**ก่อนเขียนโค้ดสำหรับสไลด์ใดๆ:**

1. **ขั้นแรก อ่าน @template.txt ** (อย่างน้อยจนถึงส่วนท้ายของบล็อก `<style>`)

2. **โปรดตรวจสอบรายการก่อนการใช้งานใน @layouts.md ** เพื่อยืนยันว่าคลาสทั้งหมดที่คุณต้องการใช้นั้นมีอยู่ในแท็ก `<style>` แล้ว

3. หากคลาสใดหายไป: **ให้เพิ่มคลาสนั้นในส่วน `<style>` ของ ไฟล์ @template.txt ** อย่าเขียนซ้ำในแต่ละสไลด์

4. **@template.txt เป็นแหล่งข้อมูลเดียวสำหรับชื่อคลาส**—ห้ามสร้างชื่อคลาสใหม่ หากต้องการปรับแต่งชื่อคลาส ให้ใช้ `style="..."` แบบแทรกในบรรทัด

คลาสที่มักถูกมองข้าม (ต้องตรวจสอบให้แน่ใจก่อนว่ามีอยู่จริง):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `เท้า`

#### 3.0.5 · การวางแผนจังหวะของธีม (**สำคัญเท่ากับการตรวจจับคลาสล่วงหน้า**)

ก่อนเลือกเลย์เอาต์ คุณต้องระบุคลาสธีมสำหรับแต่ละหน้าก่อน (`hero dark` / `hero light` / `light` / `dark`) และจัดเรียงให้ตรงกันในเอกสารหรือฉบับร่าง ดูรายละเอียดเพิ่มเติมได้ในส่วน "การวางแผนจังหวะธีม" ที่เริ่มต้นด้วย @layouts.md

**กฎบังคับ**:

- แต่ละส่วนของหน้าต้องมีคำใดคำหนึ่งต่อไปนี้ ได้แก่ `light`, `dark`, `hero light` หรือ `hero dark` ห้ามเขียนแค่ `hero` เฉยๆ

- การนำเสนอเนื้อหาในหัวข้อเดียวกันติดต่อกันเกิน 3 หน้า จะทำให้ผู้ชมรู้สึกเมื่อยล้า และไม่อนุญาต

- ต้องมี "ฮีโร่ด้านมืด" อย่างน้อยหนึ่งตัว และ "ฮีโร่ด้านสว่าง" อย่างน้อยหนึ่งตัว ในหน้าที่มี 8 หน้าขึ้นไป

- ชุดเอกสารทั้งหมดไม่ควรประกอบด้วยหน้าที่มีข้อความ "สีอ่อน" เพียงอย่างเดียว ต้องมีหน้าที่มีข้อความ "สีเข้ม" รวมอยู่ด้วยเพื่อสร้างพื้นที่ว่างหายใจ

- แทรกหน้าเด่น (hero page) ทุกๆ 3-4 หน้า (หน้าปก/ปกหลัง/คำถาม/คำคมขนาดใหญ่)

**การตรวจสอบตนเองหลังการสร้าง: `grep 'class="slide' index.html` แสดงรายการหัวข้อทั้งหมด จำเป็นต้องตรวจสอบความเร็วที่เหมาะสมด้วยตนเองก่อนส่งมอบ**

#### 3.1 · การเลือกรูปแบบการจัดวาง

**อย่าเขียนสไลด์ตั้งแต่เริ่มต้น** เปิดไฟล์ `@layouts.md` ซึ่งมีโครงร่างเลย์เอาต์สำเร็จรูป 10 แบบ แต่ละแบบเป็นบล็อกโค้ด `<section>` ที่สมบูรณ์และสามารถวางได้:

| รูปแบบ | วัตถุประสงค์ |

|---|---|

| 1. หน้าปก | หน้า 1 |

| 2. หน้าปกบท | การเปิดเรื่องของแต่ละองก์ |

3. โปสเตอร์ที่ขับเคลื่อนด้วยข้อมูล | การนำเสนอข้อมูลเชิงลึก |

| 4. ข้อความด้านซ้าย รูปภาพด้านขวา (คำคม + รูปภาพ) | ความแตกต่างทางอัตลักษณ์ / เรื่องราว |

| 5. ตารางรูปภาพ | การเปรียบเทียบรูปภาพหลายภาพ / หลักฐานภาพหน้าจอ |

6. กระบวนการทำงานแบบสองท่อ |

| 7. ปริศนาจบ/หน้าคำถาม | จบตอน/ตอนจบ |

8. คำคมเด่น | ตัวอักษรมีเชิง/ข้อคิดสำคัญ |

9. การเปรียบเทียบแบบขนาน (ก่อน / หลัง) | โหมดเก่าเทียบกับโหมดใหม่ |

10. การผสมผสานภาพและข้อความ | หน้าเว็บที่มีภาพและข้อความเข้มข้น |

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

#### 3.2 มาตรฐานอัตราส่วนภาพ

ควรใช้ **อัตราส่วนภาพมาตรฐาน** เสมอ ห้ามใช้อัตราส่วนภาพที่แปลกประหลาดจากภาพต้นฉบับ (เช่น `2592/1798`)

| สถานการณ์จำลอง | อัตราส่วนการแนะนำ |

|------|---------|

| ข้อความอยู่ทางซ้าย รูปภาพอยู่ทางขวา (รูปภาพหลัก) | อัตราส่วน 16:10 หรือ 4:3 + `max-height:56vh` |

| ตารางรูปภาพ (การเปรียบเทียบรูปภาพหลายภาพ) | **กำหนดความสูงคงที่ที่ `26vh`** ไม่จำเป็นต้องกำหนดอัตราส่วนภาพ |

| รูปภาพขนาดเล็กทางด้านซ้าย + ข้อความทางด้านขวา | อัตราส่วน 1:1 หรือ 3:2 |

| ภาพหลักแบบเต็มหน้าจอ | 16:9 + `max-height:64vh` |

| ภาพประกอบขนาดเล็กในรูปแบบผสมผสานระหว่างข้อความและภาพ | อัตราส่วน 3:2 หรือ 3:4 |

**ห้ามใช้ `align-self:end` กับรูปภาพเด็ดขาด** เพราะรูปภาพจะเลื่อนไปอยู่ด้านล่างของเซลล์และถูกแถบเครื่องมือของเบราว์เซอร์บัง ให้ใช้ grid container ที่มี `align-items:start` (กำหนดไว้แล้วในเทมเพลต) เพื่อให้รูปภาพอยู่ด้านบน หรือหากต้องการให้รูปภาพอยู่ด้านล่างในคอลัมน์ซ้าย ให้ใช้ flex column ที่มี `justify-content:space-between`

รายละเอียดของส่วนประกอบต่างๆ (เช่น แบบอักษร สี ตาราง ไอคอน คำอธิบายเพิ่มเติม การ์ดแสดงสถิติ ฯลฯ) อยู่ใน ไฟล์ @components.md

ขั้นตอนที่ 4 · ตรวจสอบตนเองกับรายการตรวจสอบ

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

มีหลายประเด็นที่ควรให้ความสนใจเป็นพิเศษ:

1. **หัวข้อหลักต้องใช้แบบอักษรมีเชิง (serif)**—หากแสดงผลเป็นแบบอักษรไม่มีเชิง (sans-serif) มีโอกาส 99% ที่การตรวจสอบเบื้องต้นในขั้นตอนที่ 3.0 ล้มเหลว และคลาส `h-hero` หายไปใน template.html

2. **ใช้เฉพาะ `height:Nvh` ในตารางรูปภาพเท่านั้น ห้ามใช้ `aspect-ratio` (เพราะจะทำให้ตารางเสีย)**

3. **ไม่ควรจัดวางรูปภาพไว้ด้านล่างสุดของหน้า** — อย่าใช้ `align-self:end` ให้ใช้ grid + `align-items:start` แทน (ดูขั้นตอนที่ 3.2)

4. **ภาพต้องมีอัตราส่วนภาพมาตรฐาน** (16:10 / 4:3 / 3:2 / 1:1 / 16:9) ห้ามคัดลอกภาพที่มีอัตราส่วนภาพผิดปกติ

5. **หัวข้อหลักภาษาจีนต้องมีความยาวไม่เกิน 5 ตัวอักษร และใช้ `nowrap` (หลีกเลี่ยงการใช้ 1 ตัวอักษรต่อบรรทัด)**

6. **ใช้ Lucide แทนอิโมจิ**

7. **ใช้แบบอักษรมีเชิงสำหรับหัวข้อ แบบอักษรไม่มีเชิงสำหรับเนื้อหาหลัก และแบบอักษรความกว้างคงที่สำหรับข้อมูลเมตา**

ขั้นตอนที่ 5 · การวนซ้ำ

ปรับปรุงตามคำติชมของผู้ใช้—ตอนนี้ CSS ของเทมเพลตมีการกำหนดพารามิเตอร์ไว้สูง โดย 90% ของการปรับแต่งเป็นการเปลี่ยนแปลงสไตล์แบบอินไลน์ (font-size:Xvw / height:Yvh / spacing:Zvh)

## หลักการออกแบบหลัก (ปรัชญา)

หลักการเหล่านี้เป็นผลมาจากการสร้างงานนำเสนอ PowerPoint จำนวน 5 ครั้งสำหรับบริษัทที่มีพนักงานเพียงคนเดียว การฝ่าฝืนหลักการใดหลักการหนึ่งจะทำให้ภาพลักษณ์ของงานนำเสนอเสียไป

1. **การจำกัดความโดดเด่นทางเทคนิค** — พื้นหลัง WebGL จะปรากฏให้เห็นเฉพาะในหน้าฮีโร่ และแทบมองไม่เห็นในหน้าปกติ

2. **เน้นโครงสร้างมากกว่าการตกแต่ง** — ไม่มีเงา ไม่มีภาพลอย ไม่มีกรอบเว้นวรรค ข้อมูลทั้งหมดถ่ายทอดผ่าน **ขนาดตัวอักษรใหญ่ + ความคมชัดของตัวอักษร + ระยะห่างแบบตาราง**

3. **ลำดับชั้นของเนื้อหาถูกกำหนดโดยขนาดตัวอักษรและประเภทตัวอักษร** — ตัวอักษรมีเชิงสูงสุด = หัวข้อหลัก, ตัวอักษรมีเชิงขนาดกลาง = หัวข้อย่อย, ตัวอักษรไม่มีเชิงขนาดใหญ่ = ข้อความนำ, ตัวอักษรไม่มีเชิงขนาดเล็ก = เนื้อหา, ตัวอักษรความกว้างคงที่ = ข้อมูลเมตา

4. **รูปภาพคือสิ่งสำคัญที่สุด** — ตัดเฉพาะส่วนล่างของรูปภาพ โดยให้แน่ใจว่าส่วนบนและด้านซ้าย/ขวาของรูปภาพยังคงอยู่ครบถ้วน แก้ไขตารางด้วย `height:Nvh` อย่าใช้ `aspect-ratio` เพื่อขยายรูปภาพ

5. **จัดลำดับการแสดงผลให้เหมาะสมกับหน้าที่มีภาพฮีโร่** — การสลับดูระหว่างหน้าที่มีภาพฮีโร่และหน้าอื่นๆ จะช่วยป้องกันอาการปวดตาได้

6. **ความสอดคล้องของคำศัพท์** — คำว่า "ทักษะ" ควรแปลเป็น "ทักษะ" ไม่ใช่การผสมภาษาจีนและภาษาอังกฤษ

## เอกสารอ้างอิง

รูปแบบภาพของทักษะนี้ได้รับแรงบันดาลใจจาก:

- แชร์บทความ "บริษัทที่มีพนักงานเพียงคนเดียว: องค์กรที่ล่มสลายเพราะ AI" (22 เมษายน 2569 หน้า 27)

- การจัดวางเลย์เอาต์ของนิตยสาร *Monocle*

- ตัวอย่างบทความในบล็อกของแกรี่ ตัน ประธาน YC เรื่อง "สายรัดบางๆ แต่ทักษะเต็มเปี่ยม"

สามารถใช้เป็นจุดเริ่มต้นในการจัดสไตล์ได้