เปลี่ยน AI Slides ให้เป็น Presentation แบบ Interactive ที่เจาะลึก: กรอบการทำงานแบบ 6 โครงสร้าง

1【Interactive Deck Prompt v2.1】
2ข้ามเนื้อหาฉบับเต็มเนื่องจากข้อจำกัดด้านความยาว กรุณาคัดลอกจาก note
3
4## เพิ่มเติม: ทำให้เป็นแบบอินเทอร์แอคทีฟ
5ใช้บล็อกนี้ต่อท้าย Prompt สำหรับสร้าง deck ด้านบน วางข้อมูลดิบไว้ใต้บล็อกนี้ (คงบรรทัด "Paste materials below this" จาก Prompt ก่อนหน้าไว้ให้ครบถ้วน)
6
7### ลำดับความสำคัญ
8- เนื้อหา (การจัดการตัวเลข หัวข้อ ตรรกะ เทมเพลต มาตรฐานการวาด การตรวจสอบ) ให้ทำตาม Prompt สร้าง deck ด้านบน
9- รูปแบบผลลัพธ์ให้ความสำคัญกับบล็อกนี้: HTML อินเทอร์แอคทีฟไฟล์เดียว 3 หน้า (4 หน้าถ้าข้อมูลเยอะ) หัวข้อสูงสุด 36 ตัวอักษรต่อบรรทัด (ห้ามตัดคำขึ้นบรรทัดใหม่) ไม่ต้องสร้างเอกสารออกแบบแยก ให้แทนที่ด้วยรายการหน้าและบัญชีตัวเลข (รวมรายการออกแบบที่จำเป็นจาก Prompt ก่อนหน้าไว้ในสองส่วนนี้)
10- ถามคำถามเพียงครั้งเดียวก่อนเริ่มทำ และถามเฉพาะเมื่อวัตถุประสงค์หรือกลุ่มเป้าหมายไม่ชัดเจนจากข้อมูล/บริบทเท่านั้น นอกเหนือจากนั้นให้ใช้วิจารณญาณ บันทึกข้อสมมติฐาน และเขียนรวดเดียวจบ
11
12### เทมเพลตหน้า (ปรับภาพให้ตรงกับตัวอย่างด้านล่าง)
13- หน้า 2-3: กราฟหลักอยู่ฝั่งซ้าย (กว้าง 60%) แผงหลักฐานอยู่ฝั่งขวา (กล่องพื้นหลังสีอ่อน) โครงสร้างแผง: ตัวเลขขนาดใหญ่ 1 ตัว (88-96px) → มันคืออะไร (1 บรรทัด) → บริบท (2-3 บรรทัด) → เป้าหมายเปรียบเทียบ & ส่วนต่าง (พร้อมสูตร) → "View Breakdown ›"
14- หน้า 1: แถวบนเป็นตัวเลขขนาดใหญ่ 3 ตัว แถวล่างแสดงภาพรวม/โครงสร้างทั้งหมด (เกิดอะไรขึ้นตรงไหน) วางการ์ดที่ลิงก์ไปยังหน้าเฉพาะ ("p.2 ›") ไว้ในแผนผัง
15- กราฟและตัวเลขต้องเต็มกรอบ ห้ามมีแถบว่างใต้เนื้อหา
16- ใช้ตัวเลขจากข้อมูลดิบทั้งหมด (กราฟ แผง ข้อความเน้น หลักฐาน) คำนวณส่วนต่าง/อัตราส่วนและแสดงสูตร ห้ามคิดตัวเลขที่ไม่มีในข้อมูลดิบขึ้นมาเอง
17- ประธานหลักใช้สีหลัก ตัวเปรียบเทียบใช้เฉดไล่ระดับสีอ่อน ที่เหลือใช้สีเทา มีตัวเลขขนาดใหญ่เพียงตัวเดียวต่อหน้า
18- ทำให้องค์ประกอบที่คลิกได้ดูชัดเจน: ใช้ "›", "Click to...", ขอบเมื่อโฮเวอร์, วงแหวนไฮไลต์หนึ่งครั้งเมื่อเข้าหน้า แท่งกราฟ/จุดแสดง Tooltip ที่มี "ค่า, ชื่อ, แหล่งที่มา" เมื่อโฮเวอร์
19
20### หนึ่ง Interaction ต่อหน้า (มาจากโครงสร้าง)
21เพิ่มการกระทำเพียงอย่างเดียวต่อหน้าที่ช่วยให้ผู้อ่านตรวจสอบข้อสรุปของหัวข้อได้ เลือกการกระทำตามประเภทโครงสร้างของหัวข้อนั้น
22- พีระมิด (ข้อสรุป/หลักฐาน) → คลิกเพื่อเจาะลึก แผงหลักฐานฝั่งขวา (ระบุแหล่งที่มา ใส่ไว้แทบทุกหน้า)
23- การจัดหมวดหมู่ (การแบ่งกลุ่ม) → สลับเกณฑ์ (มุมมองรวม เมตริก ปี) เพื่อจัดเรียงแท่งกราฟใหม่ทั้งหมด
24- การเปรียบเทียบ (ความแตกต่าง) → สถานะเดิมค่อยๆ เปลี่ยนเป็นสถานะปัจจุบัน ทิ้งส่วนต่าง/ความแตกต่างไว้เป็นเส้นประ
25- ความเป็นเหตุเป็นผล (เหตุ/ผล) → Slider ปรับเงื่อนไข คำนวณผลลัพธ์ใหม่ แสดงสูตรบนหน้าจอ
26- การแก้ปัญหา (ช่องว่าง/ทางแก้) → เปิด/ปิดทางแก้เพื่ออุด/ปล่อยช่องว่าง
27- ลำดับ (ขั้นตอน/กระบวนการ/เวลา) → ประกอบร่างตามลำดับ ตัวละครเคลื่อนที่ผ่านกระบวนการ เครื่องหมาย "Now" บนไทม์ไลน์
28ห้ามใส่แอนิเมชันที่ไม่เกี่ยวกับหัวข้อ แอนิเมชันเชิงปริมาณต้องคำนวณจากค่าจริง
29
30### แผงหลักฐาน (เลื่อนเข้ามาจากขวาเมื่อคลิก)
31- กว้าง 720px เลื่อนเข้ามาจากขวา ทำให้พื้นหลังมืดลง ปิดด้วย X, Esc หรือคลิกที่พื้นหลัง
32- โครงสร้างจากบนลงล่าง: บริบทตำแหน่ง ("สถานะปัจจุบัน > ชื่อรายการ") → ข้อสรุป (1-2 บรรทัด) → แท็บ (สูงสุด 2 แท็บ เช่น รายละเอียด / แหล่งที่มา & ข้อสมมติฐาน) → กราฟ/ตารางขนาดเล็ก → แหล่งที่มา
33- ใส่ตัวเลขรายละเอียดที่ใส่ในหน้าหลักไม่พอไว้ที่นี่ ควรมีในแทบทุกหน้า
34
35### ภาพรวมทั้ง Deck
36- เปิดใช้งานการนำทางแบบซูมเข้าจากภาพรวมหน้า 1 ไปยังหน้าเฉพาะ อนุญาตให้กระโดดจากหน้าทางแก้ไปยังหน้าหลักฐานได้
37- ปุ่มกด: → และ Space สำหรับหน้าถัดไป, ← สำหรับหน้าก่อนหน้า, ตัวเลขสำหรับกระโดดไปหน้า, Esc สำหรับปิด/ย้อนกลับ, O สำหรับภาพรวมทุกหน้า, D สำหรับ Auto-demo (เคอร์เซอร์ลูกศรเคลื่อนที่ตามสคริปต์ จบด้วยภาพรวม ติดแท็กองค์ประกอบอินเทอร์แอคทีฟด้วยชื่อ data-demo)
38- แต่ละหน้าประกอบร่างใน ~3 วินาที: หัวข้อ → กราฟหลัก (แท่งกราฟโตจาก 0 เหลื่อมกัน 60ms) → ตัวเลข → แผงหลักฐาน ใช้ CSS transitions/delays ถ้าใช้ JS ให้จับคู่ requestAnimationFrame กับตัวจับเวลา 50ms
39- รองรับพารามิเตอร์ URL #static และการตั้งค่า "Reduce Motion" เพื่อแสดงสถานะประกอบร่างสุดท้าย (สำหรับหน้าอินเทอร์แอคทีฟ ให้แสดงสถานะที่เห็นข้อสรุปของหัวข้อชัดเจน เช่น เปิดทางแก้ทั้งหมด) ต้องอ่านเป็น deck แบบปกติได้ด้วย
40- ย่อขยายแคนวาส 1920x1080 ให้พอดีหน้าจอ โหลดภายนอกจำกัดเฉพาะ Google Fonts Noto Sans JP
41
42### มาตรฐานขั้นต่ำ (ใช้เฉพาะเมื่อไม่มี Prompt สร้าง deck ด้านบน)
431. สร้างบัญชีตัวเลขจากข้อมูลดิบ (รายการ, ค่า, วันที่, แหล่งที่มา, ประชากร) ทำเครื่องหมายตัวเลขที่ขาดหายไปด้วย "xx" พร้อมหมายเหตุ จัดอันดับรายการที่ไม่มีค่าไว้ท้ายสุด
442. หนึ่งข้อความต่อหนึ่งหน้า หัวข้อต้องเป็นประโยคสมบูรณ์ที่รวมข้อเท็จจริงและข้อสรุปเข้าด้วยกัน สูงสุด 36 ตัวอักษร/บรรทัด หลีกเลี่ยงโครงสร้างสองส่วนแบบ "A. B", การนับแบบ "มี 3 อย่าง..." หรือประโยคห้วนที่ลงท้ายด้วยคำนาม
453. เขียนหัวข้อทั้งหมดก่อน ตรวจสอบการไหลในแนวตั้ง (ภาพรวม→หลักฐาน→ทางแก้) ก่อนสร้างกราฟ
464. เลือกประเภทกราฟตามเจตนาเชิงโครงสร้างของหัวข้อ (ดู "หนึ่ง Interaction" ด้านบน)
475. ชื่อกราฟ: "อะไร, เมื่อไหร่, หน่วย" ห้ามใส่ข้อสรุปในชื่อกราฟ ระบุแหล่งที่มาทั้งในส่วนท้ายหน้าและแผงหลักฐาน
486. สี: สีหลัก 1 สี, ไล่ระดับสีอ่อน 3 สี, สีเทา สีหลักเริ่มต้น #1976D2 สีเน้น (Amber #D97706) ใช้ได้เพียงครั้งเดียวทั้ง deck ขนาดฟอนต์ต่ำสุด 18px
497. อย่าอ้างความเป็นเหตุเป็นผลจากความสอดคล้อง (Correlation) ติดป้ายค่าประมาณว่า "Estimate" พร้อมแสดงสูตรและข้อสมมติฐานบนหน้าจอ
50
51### เอาต์พุต
52- HTML: Claude เป็น Artifact, ChatGPT เป็น Canvas (หรือบล็อกโค้ดเดียวถ้าไม่มีทั้งสองอย่าง) เขียนรวดเดียวจบ จำกัดจำนวนหน้าและรวบคอมโพเนนต์เป็นฟังก์ชันเพื่อให้โค้ดสั้นลง ถ้าถูกตัด ให้เขียนเอกสารเดิมต่อเมื่อผู้ใช้พิมพ์ "continue" (อย่าขอให้ผู้ใช้คัดลอกวางเอง)
53- บรรทัดแรกระบุวิธีการ: "เนื้อหา = Deck Prompt / อินเทอร์แอคทีฟ = Interactive Block" หรือ "ใช้ Interactive Block อย่างเดียว (เนื้อหาใช้กฎแบบย่อ)"
54- รายการหน้า (หัวข้อ/โครงสร้าง/การกระทำ/เนื้อหาแผงหลักฐาน), บัญชีตัวเลข, คำแนะนำ ให้ไว้นอก HTML (ในตัวข้อความตอบกลับ) แบบกระชับ ห้ามใส่ใน HTML
55- ตั้งเป้าขนาด HTML รวม ~40KB ตัดข้อความออกถ้าจำเป็น (ห้ามตัดกราฟ แผงหลักฐาน หรือการกระทำ)
56- ปิดท้ายด้วยข้อเสนอแนะ 2-3 ข้อเพื่อการพัฒนาเพิ่มเติม และถามผู้ใช้ให้เลือก
57
58### การตรวจสอบขั้นสุดท้าย
59ก่อนส่งออก ให้ตรวจทานและแก้ไข: ทุกหน้าต้องมี "การกระทำเพื่อตรวจสอบหัวข้อ" และ "แผงหลักฐานพร้อมแหล่งที่มา" / ไม่มีตัวเลขที่คิดขึ้นเอง / ไม่มีแถบว่าง การทับซ้อน ล้นขอบ หรือข้อความ <18px / การลงท้ายหัวข้อสอดคล้องกันทุกหน้า (ไม่ใช่ลงท้ายด้วย "ควร..." ทั้งหมด) / สคริปต์ Auto-demo ไม่อ้างอิงถึงองค์ประกอบที่ไม่มีอยู่จริง
60
61(โค้ดสำหรับหน้าตัวอย่างหนึ่งหน้าจะอยู่ตรงนี้ การใส่ตัวอย่างช่วยยกระดับคุณภาพได้อย่างมาก ฉบับเต็มพร้อมโค้ดอยู่บน note)