คอร์ส AI Content Automation
ด้วย Claude Code
Chapter 1

ก้าวแรก Webapp
ร้านกาแฟ Honey Café

รวม Prompt ทุก EP ในบทเรียนนี้ — ก๊อปแล้ววางใน Claude Code ได้เลย ทำทีละ EP ตามลำดับ แล้วเว็บของคุณจะค่อย ๆ โตขึ้นทีละก้าว

📚 17 EP ⌨️ ก๊อป Prompt ได้ทันที 🖨️ Ctrl+P เซฟเป็น PDF ได้
อ.เบิร์ด (Pakorn)
ผู้สอน · อ.เบิร์ด (Pakorn) Pakorn AI — สอนสร้างระบบ Auto Content ด้วย Claude Code
วิธีใช้เอกสารนี้ — แต่ละ EP มีกล่อง Prompt พร้อมปุ่ม คัดลอก ที่มุมขวา กดแล้วเอาไปวางใน Claude Code ได้เลย
1ทำ ทีละ EP ตามลำดับ อย่าข้าม
2ก๊อป Prompt → วางใน Claude Code → รอผล
3ลองเปิดเว็บดูผลทุกครั้ง ก่อนไป EP ถัดไป
สารบัญ
0
Episode 0

เกริ่น และตัวอย่าง app เบื้องต้น

🎬 คลิปเล่า / เกริ่น + โชว์ตัวอย่าง app — ไม่มี Prompt
1
Episode 1

Working directory, usage model, permissions mode

🎬 คลิปสอน Claude Code เบื้องต้น — ไม่มี Prompt
2
Episode 2

สร้าง webapp แรก หน้าแรก

ผมอยากได้เว็บง่ายๆ ทำด้วย Python รันบน Localhost เครื่องคอมของเรา ไว้ใช้ทำโพสต์ขายของ Facebook ร้านกาแฟ "Honey Café" หน้าแรกเปิดมาให้เจอชื่อร้าน ☕ Honey Café ตัวใหญ่ๆ สีส้ม อยู่กลางหน้าจอ ใต้ชื่อมีคำอธิบายสั้นๆ ว่าเป็นเว็บทำโพสต์ร้านกาแฟ แล้วรันเปิดให้ดูในเบราว์เซอร์ด้วย
ทำแค่นี้ ยังไม่ต้องถามเรื่องอื่น ยังไม่ต้องทำ feature อื่น ไม่ต้องเสนอด้วย
3
Episode 3

สร้างหัวข้อตัวอย่าง พร้อมช่องพิมพ์หัวข้อ

ในหน้าเว็บ Honey Café เพิ่มรายการเรื่องที่อยากโพสต์ 3 อัน คือ: "ลาเต้น้ำผึ้ง เมนูใหม่ ใช้น้ำผึ้งแท้ แก้วละ 65 บาท", "โปรซื้อ 1 แถม 1 เฉพาะ 11 โมง–บ่าย 2", "บรรยากาศร้านวันฝนตก แวะมานั่งชิลทั้งวัน" — แสดงเป็นการ์ด แต่ละอันมีปุ่ม "ถัดไป" พอกดถัดไป ให้โชว์เรื่องที่เลือกไว้ด้านล่าง
ทำแค่นี้ ยังไม่ต้องเสนอเรื่องอื่นเพิ่มเติม
4
Episode 4

เริ่มลองให้ AI เขียน Hook + Caption และเรื่อง env

ทำระบบให้ AI เขียนแคปชั่น Facebook ในหน้าเว็บ Honey Café นี้เลย ตามนี้:
การทำงาน : พอกดปุ่มที่การ์ดเรื่องไหน ให้ส่งเรื่องนั้นไปให้ AI เขียน hook (บรรทัดแรก) + แคปชั่น Facebook 1 อัน โดยเปลี่ยนไปอีกหน้านึง แล้วเอามาโชว์
API-Key : [ใส่ API Key ของคุณ] ช่วยเอา API Key ของ OpenAI นี้ใส่ใน .env ด้วย
Model : ใช้โมเดล gpt-5.4-mini เป็นตัวเขียน
เพิ่มเติม : ระหว่างรอ AI ให้มีกล่องขึ้นว่า "AI กำลังเขียนแคปชั่นให้..." พร้อมวงกลมหมุนๆ พอได้แล้วให้หายไปเอง และไปหน้าต่อไป
ไม่ต้องเสนอเรื่องอื่น
🔑
แทนที่ [ใส่ API Key ของคุณ] ด้วย API Key ของตัวเองจาก platform.openai.com — Key เป็นความลับส่วนตัว อย่าแชร์ให้ใคร และเก็บไว้ในไฟล์ .env เท่านั้น (ห้าม commit ขึ้น git)
5
Episode 5

การเซฟ Git เพื่อย้อนเวอร์ชัน

อยากเซฟ git โปรแกรมนี้เก็บสถานะ ตอนนี้ไว้
และให้ระบุ วันที่ เวลา และชื่อเซฟ และคำอธิบายสถานะ ตอนนี้เอาไว้ด้วย อนาคตจะได้มาย้อนเวอร์ชัน และรู้ว่า เวอร์ชันไหน เป็นเวอร์ชันไหน
6-7
Episode 6–7

ทำ Content ตาม Persona (กลุ่มเป้าหมาย 1–2)

Prompt 1 — คิด Persona 5 กลุ่ม
คุณคือนักวิเคราะห์ persona ที่มีใจเป็นกลาง ไม่ bias เอาใจคนถาม
ผมจะให้ทำ Persona สำหรับ ธุรกิจคาเฟ่ร้านกาแฟดังกล่าว ช่วยคิด Persona ให้ 5 กลุ่มตัวอย่าง ชื่อสมมติ, อายุเฉลี่ย, รายได้เฉลี่ย, คติประจำใจ, insight ลึกๆ เช่น hidden need, trust issues, barrier, fear, motivation, Trigger to buy, สิ่งที่ทำให้เชื่อ, ข้อความที่ไม่ควรพูดกับคนกลุ่มนี้ หรืออื่นๆ ที่แนะนำ
คุยเพื่อตกผลึกกันก่อน ยังไม่ต้องไปพัฒนาระบบ จนกว่าผมจะบอกให้เอาไปพัฒนาระบบ
Prompt 2 — คิด Pains / Gains
จาก Persona ทั้งหมด ผมชอบ persona 5 กลุ่มนี้ [ระบุ persona ที่ชอบ]
ช่วยคิด Top Pains, Gains สำหรับแต่ละ persona ในด้าน functional, emotional, social อย่างละ 10 หัวข้อ ขอให้ครอบคลุมทั้งเรื่องร้าน เรื่องตัวเมนูกาแฟ หรืออื่นๆ เกี่ยวกับร้านกาแฟ
Prompt 3 — พัฒนาระบบเลือกกลุ่มเป้าหมาย
ผมโอเคกับ Persona 5 คนนี้แล้ว อยากพัฒนาเว็บ Honey Café ต่อ ให้มีระบบ "เลือกกลุ่มเป้าหมาย แล้ว AI เขียน 3 แคปชั่นเจาะกลุ่ม" ตามรายละเอียดนี้
หลังจากเลือกหัวข้อเสร็จ ให้มีหน้าเลือก Persona 5 กลุ่ม ทำเป็น Dropdown list ให้เลือก
หลังจากเลือก Persona แล้ว ให้ GPT 5.4 mini คิด hook + caption สำหรับ persona นั้น โดยเฉพาะมา 3 แบบ
เวลาระบบส่ง prompt ให้ GPT 5.4 mini ให้สั่งไปประมาณว่า
"คิด Hook + Caption สำหรับหัวข้อ [ชื่อหัวข้อ] เพื่อให้ Persona ที่เลือกอ่าน" (หรือเพิ่มเติมกว่านี้ ถ้าเห็นว่าจำเป็น)
และทุกครั้ง ให้ส่งรายละเอียดไฟล์ persona + gains,pains ทั้งชุด ให้ GPT 5.4 mini แนบไปด้วย เพื่อเป็นข้อมูลอ้างอิง
ให้ใช้ Pains, Gains ต่างกันสำหรับแต่ละ caption
ที่หน้าแสดงผลลัพธ์ ให้ติดป้ายกำกับด้วยว่า อันนี้ใช้ Persona ไหน และใช้ Pain, Gain ข้อไหน มาคิด
8
Episode 8

การคิดเงิน Pricing ของ GPT 5.4 mini

จาก webapp ที่เราทำกันมา ผมอยากเข้าใจเรื่อง ค่าใช้จ่ายของโมเดล ขอให้ช่วย
1. อธิบายการคิดเงินของสิ่งที่เราทำกันออกมาอย่างละเอียด พร้อมอ้างอิงราคาจริง ไปหาข้อมูลจริงแนบมาด้วย
2. อยากให้ เขียนกำกับแต่ละปุ่มด้วยว่า การกดคลิก จะเกิดค่าใช้จ่ายประมาณเท่าไหร่
3. และพอไปหน้าที่แสดงผลลัพธ์แล้ว ให้มีอีกส่วนนึง บอกด้วยว่า สิ่งที่แสดงทั้งหมดนี้ เช่น caption+hook ทั้งหมด คิดเป็นกี่บาท หรือประมาณกี่ $
9
Episode 9

ทำระบบให้เราเลือก Hook อีกรอบ

หลังจากที่เราได้เลือก hook+caption มาแล้ว เดี๋ยวผมอยากจะให้ระบบ สามารถกำหนดให้เราเลือก hook อีกครั้งหนึ่ง เพื่อจะเตรียมเอา hook นั้น ไปใช้เน้นทำใน artwork (แต่คุณยังไม่ต้องสนใจเรื่อง artwork ทำเรื่อง hook ก่อน)
โดย hook ที่จะให้เลือก ให้ใช้ hook เดียวกับ 9 hook+caption ที่คิดมานั่นแหล่ะ
โดยให้แสดงแต่ละ hook เป็น card
โดยที่ hook ไหนที่เป็นอันเดิมกับ hook+caption ที่เลือก ให้มีเครื่องหมายดาว และเลือกเป็น default ไว้ด้วย
10
Episode 10

ใช้ PIL ทำรูปภาพ + bgcolor เลียนแบบ FB

🖼️
EP นี้ต้อง แนบรูปตัวอย่าง ที่อยากได้ให้ Claude Code ดูด้วย (รูปแบบโพสต์ Facebook ที่เป็นตัวหนังสือบนสีพื้น) — ใช้รูปที่แจกมาในคอร์ส หรือแคปหน้าจอตัวอย่างของคุณเอง
📎 รูปตัวอย่างที่ต้องแนบกับ Prompt 1
ตัวอย่างโพสต์ Facebook แบบ text + สีพื้นหลัง
บันทึกรูปนี้ไว้ แล้วลากแนบเข้าแชท Claude Code พร้อมกับ Prompt 1 (ตรงคำว่า "ผมแนบตัวอย่างรูปที่อยากได้ให้" ในพรอมต์)
Prompt 1 — ทดสอบ + เลือกฟอนต์
ต่อมา ผมต้องการให้ระบบสร้างรูปที่เลียนแบบโพส Facebook แบบ text + bg color โดยใช้ Pillow (PIL) (ผมแนบตัวอย่างรูปที่อยากได้ให้)
ถ้าต้องติดตั้งอะไร จัดการให้หมดด้วย
ก่อนไปทำระบบจริง อยากทดสอบกันตรงนี้ก่อนว่า รูปที่คุณทำออกมา หน้าตาเป็นยังไง
และอยากให้เสนอ font ที่ต่างกันสัก 5 แบบ ให้ผมเลือก พร้อมตัวอย่างที่ทำมาจริงด้วย
Prompt 2 — เอาไปพัฒนาระบบจริง + 9 สีพื้นหลัง
ผมเลือก font Prompt ต่อมา...
ผมอยากให้เอาไปพัฒนาต่อเลย
โดยหลังจากที่เลือก hook แล้ว ให้เอา hook ไปใส่ในรูปแบบนี้ และผมขอ option สีพื้นหลังให้เลือกทั้งหมด 9 สี
และพอเลือกแล้ว ให้ preview ให้ดูด้วย ว่าหน้าตาจริง ตอนโพส Facebook จะเป็นประมาณไหน
11
Episode 11

ทดสอบโมเดลรูปภาพ และต้นทุน แบบไหนตอบโจทย์ที่สุด

🎬 คลิปทดสอบ/เทียบโมเดล — ไม่มี Prompt
12
Episode 12

ได้ภาพสวยแล้ว! เพิ่มระบบสร้างภาพด้วย GPT Images 2

ตอนนี้ระบบเราสร้างภาพด้วย PIL แต่ผมอยากให้มี option การสร้างรูปเพิ่มโดย
เปลี่ยนเป็นสร้างภาพด้วย GPT Images 2.0 - low
เงื่อนไข
- ใช้โมเดลนี้ GPT Images 2.0 - low
- ห้ามใช้โมเดลอื่น และไม่ต้องแนะนำโมเดลอื่นตอนนี้
- สร้างเหลือแค่ 2 รูปมาให้เลือก
โดย Prompt ที่ส่งให้ มีเพียงแค่ สร้างรูปขนาด 1:1 ตามนี้
Hook : [ใส่ hook ที่เลือก] Caption : [ใส่ Caption ที่เลือก]
---
แต่ก่อนไปพัฒนาระบบจริง ช่วยเอา hook+caption ตัวอย่าง (เช่น ที่ผมเคยเลือกล่าสุด) ไปทดสอบ ส่งให้ GPT Image 2.0 low สร้างรูปตัวอย่างให้ดูสองรูป ส่งมาให้ดูในนี้ก่อน
ถ้าผมโอเค ผมจะบอกแล้วค่อยพัฒนาระบบจริงต่อไป
13
Episode 13

Polish ย้อน สร้างใหม่ ไปหน้า home

ผมอยากทำการ polish โปรแกรมเพิ่ม โดย
1. อยากเพิ่มปุ่ม Back ในทุกๆ step ให้สามารถย้อนไปหน้าก่อน หรือ step ก่อนได้
2. เพิ่มปุ่ม สร้างใหม่ (Regenerate) กับตัว caption+hook และ รูปภาพ และเขียนกำกับด้วยว่า กดทีนึงใช้เงินประมาณกี่บาท
3. อยากปุ่ม home ให้กลับไปหน้าแรกได้อัตโนมัติ
14
Episode 14

แก้ hook+caption และใส่หัวข้อเอง

ทดสอบแล้ว ถูกต้องทั้งหมด
ทีนี้ผมอยากเพิ่มอีก 2 features ดังนี้
1. อยากเพิ่ม option ให้ผมสามารถแก้ไข/edit ตัว hook+caption ที่เลือกแล้วได้ (ออกแบบยังไงดี ช่วยแนะนำด้วย)
2. อยากได้ช่องใส่ หัวข้อด้วยตัวเอง ที่หน้าแรก เพิ่มเติมจากการเลือก card ตัวอย่างหัวข้อ 3 cards
15
Episode 15

ปุ่ม copy caption, download รูป, ปุ่มโพส FB + schedule

ทดสอบแล้ว ทั้งหมดทำงานถูกต้อง อยากเพิ่มอีก 3 features
1. ปุ่ม copy hook+caption ที่เลือกแล้ว เผื่อคนอยากเอาไปโพสด้วยตัวเอง
2. ปุ่ม download รูปภาพ เผื่อคนอยากเอาไปโพสด้วยตัวเอง
3. ปุ่มกดโพสต์ หรือเลือกตั้ง Schedule post ใน Facebook และมีปฏิทินให้เลือก ซึ่งเราจะยังไม่ผูก API Facebook fanpage เพื่อโพสจริง เพียงแค่ อยากทำปุ่มจำลองเอาไว้ก่อน ช่วยเสนอ design สัก 3 แบบ ก่อนเริ่มทำจริง
16
Episode 16

Loading, Breadcrumb, นับ Caption, Error

Prompt 1 — Loading % + Breadcrumb
ทุกอย่างทำถูกต้องแล้ว ขอเพิ่มอีก 2 features
1. อยากเพิ่มหลอด Loading เป็น % เพื่อให้เห็นว่าตอนนี้การที่ AI ทำงานอยู่ คืบหน้าไปถึงไหนแล้ว อาจจะมีข้อความกำกับเล็กๆด้วยก็ได้ และถ้า Error ก็ควรบอกด้วยว่า Error แล้ว ช่วยเสนอไอเดียก่อนเริ่มทำจริงสัก 3 แบบด้วย ว่าทำยังไงถึงจะใกล้เคียงความเป็นจริงที่ AI ทำงาน
2. เพิ่ม Breadcrumb เพื่อให้รู้ว่า ตอนนี้เราอยู่ step ไหน หน้าไหน
Prompt 2 — นับตัวอักษร Caption + Error เป็นมิตร
อยากเพิ่มอีก 2 features คือ
• นับตัวอักษร caption ที่จะโพส Facebook
• และ feature Error เป็นมิตร เมื่อระบบล่ม แทนที่จะเป็นหน้าขาวๆ
Chapter 1 — ก้าวแรก Webapp · คอร์ส AI Content Automation ด้วย Claude Code
ทำทีละ EP · ก๊อป Prompt ไปวาง · เปิดดูผลทุกครั้ง 🍯☕