📘 Runbook — ทำ User Manual ด้วย AI

คู่มือของการทำคู่มือ · ทำตามทีละสเต็ปได้เลย

1️⃣ ภาพรวม Workflow

📎 เตรียม input 🤖 ป้อน prompt 🔍 ตรวจ output ✏️ แก้ 📄 ลง Astro/Docusaurus 👀 preview 🚀 deploy

🤖 AI (Claude/ChatGPT)

ร่างเนื้อหา manual จาก spec/screenshot ได้เร็ว

🌐 Astro / Docusaurus

เว็บไซต์คู่มือ [เติม: เราเลือกอันไหน]

📝 Markdown/MDX

ฟอร์แมตเนื้อหา ใช้ได้ทั้งสอง platform

2️⃣ ขั้นตอนทีละสเต็ป

1เตรียม Input

screenshot หน้าจริงทุกสเต็ป · spec/OpenAPI/BA · ชื่อ field/status/error จริง · ตัวอย่างเล่มเดิม (ให้ AI เลียนโทน)

⚠️ AI เขียนดี = input ดี อย่าให้ AI เดา

2ป้อน Prompt

ใช้ template จาก Prompt Library (หัวข้อ คลัง Prompt) → เลือกอันที่ตรงงาน → เติมข้อมูลจริง → ส่ง

3ตรวจ Output ← สำคัญสุด

เช็กตาม checklist ข้างล่างทุกครั้ง ห้าม copy ตรง ๆ ลงเว็บ

4แก้ก่อนใช้

แก้จุดที่ AI พลาด · ปรับโทนให้ตรงเล่มอื่น · เพิ่มภาพ/ลิงก์จริง

5ลง Astro / Docusaurus

Docusaurus: สร้าง docs/หมวด/หน้า.mdx → frontmatter (title, sidebar_position) → เนื้อหา → ถ้าใช้ HTML card ต้อง format:'mdx'

Astro (Starlight): สร้าง src/content/docs/ → frontmatter (title, description) → เนื้อหา

[เติม: path จริง repo เรา + คำสั่ง sync spec]

6Preview + Deploy

npm run start / npm run dev ดู local → npm run build เช็ก build ผ่าน

[เติม: วิธี deploy จริง — Vercel / GitHub Pages / อื่น ๆ]

3️⃣ Checklist ตรวจ Output (ทุกครั้งก่อนลงเว็บ)

⚠️ 4️⃣ จุดที่ AI มักพลาด (หัวใจของ Runbook)

อาการวิธีจับวิธีแก้
มโน UI ที่ไม่มีจริงเทียบ screenshotให้ screenshot ประกอบเสมอ
ใช้ชื่อ field ผิด/เดาเองเทียบ specระบุชื่อจริงใน prompt
ข้ามขั้น edge caseลองทำตามจริงสั่งให้ครอบ error case
MDX syntax พัง (< {})build failescape / ใช้ code block
โทนไม่ตรงเล่มเดิมอ่านเทียบให้ตัวอย่างเล่มเดิมใน prompt
[เติมของจริงที่เราเจอ]

5️⃣ FAQ

Q: output ยาว/สั้นไป?

กำหนดความยาว + โครงสร้างใน prompt (ดูหัวข้อ คลัง Prompt)

Q: build fail หลังเอาเนื้อหาลง?

มักเป็น MDX syntax — เช็ก < { } ที่ไม่ได้ escape

Q: [เติมคำถามที่ทีมถามจริงตอน workshop]