← ดู guides ทั้งหมด

แจกฟรีจากคลิป Day 1 — ทุก prompt ในหน้านี้ copy ไปใช้ได้เลย

เว็บที่คุณกำลังอ่านอยู่นี้ เมื่อเช้านี้ยังเป็นบล็อกธรรมดาที่โครงพังบนมือถือ หัวเว็บตัวหนังสือหักทีละตัวอักษร กล่อง prompt ล้นจอ บทความปนกับของแจก จบวันเดียวกลายเป็นแบบที่เห็น — โดยผมไม่ได้เขียนโค้ดเองเลยสักบรรทัด นี่คือทุก step ที่ทำจริง พร้อม prompt ที่ใช้จริงทุกตัว

Step 0 — ต่อเว็บเข้ากับ AI (ทำครั้งเดียว)

ผมใช้เว็บ WordPress (fridaymorning727.com โฮสต์กับ WordPress.com) กับ Claude — สองตัวนี้คุยกันได้โดยตรงผ่านสิ่งที่เรียกว่า connector (MCP):

1. เปิด Claude → Settings → Connectors → ค้นหา WordPress.com → Connect
2. Login ด้วยบัญชี WordPress.com ของเรา แล้วกดอนุญาต — จบ
3. หลังจากนั้น Claude อ่าน/สร้าง/แก้หน้าเว็บ เมนู แม้กระทั่ง template ของ theme ได้เอง — โดยทุกการเปลี่ยนแปลงมันจะขออนุญาตเราก่อน และสร้างหน้าใหม่เป็น draft เสมอ เรากด publish เอง

ไม่ใช้ WordPress? ข้าม step นี้ได้เลย — ทุก step ถัดจากนี้ใช้กับเว็บอะไรก็ได้ แค่ AI จะเปลี่ยนจาก “ลงมือให้” เป็น “บอกวิธีให้คุณทำตาม”

Step 1 — หาเว็บต้นแบบ: เอาจากไหน

หลักการเลือก: เอาเว็บที่ทำหน้าที่เดียวกับที่เราอยากทำ ไม่ใช่แค่เว็บสวย ของผมอยากทำคลังแจกของฟรี เลยเลือก 3 เว็บที่เจอจากการตามคนทำคอนเทนต์สาย AI:

• claude101.com — การจัดกลุ่มเนื้อหาเป็น Level ที่ทำให้หน้าเดียวรู้สึกเป็นคอร์ส
• cindyzhu.com.au/guides — คลังของแจก 131 ชิ้นที่ยังหาของเจอง่าย
• ruben.substack.com — วิธีเล่าเรื่องด้วยภาพประกอบที่คนอ่านตามทัน

Step 2 — ส่ง AI แยกกันไปศึกษา คนละมุม

นี่คือจุดที่คนส่วนใหญ่พลาด: โยนทุกเว็บให้ AI ดูทีเดียวแล้วได้คำตอบเบลอๆ ผมใช้วิธีแบ่งเป็น 3 โจทย์คนละมุม (ใน Claude สั่ง “spin subagent แยกกันไปศึกษา” ได้เลย หรือเปิด 3 แชทแยกกันก็ได้ผลเดียวกัน):

แยกกันไปศึกษา 3 เรื่อง แล้วค่อยกลับมาตกลงกัน:
1. [เว็บต้นแบบ 1] — ศึกษาในแง่โครงสร้างการจัดเนื้อหา: เขาจัดกลุ่มยังไง ทำไมคนดูแล้วไม่หลง
2. [เว็บต้นแบบ 2] — ศึกษาโครงของหน้าเนื้อหาทีละชิ้น: เรียงอะไรก่อนหลัง ยาวแค่ไหน CTA อยู่ตรงไหน
3. [เว็บต้นแบบ 3] — ศึกษาการเล่าเรื่องและการใช้ภาพประกอบ: ใช้กี่รูป ภาพแบบไหน caption เขียนยังไง
แต่ละเรื่องสรุปไม่เกิน 600 คำ พร้อมข้อเสนอที่เอาไปใช้กับเว็บผมได้จริง 3 ข้อ
เสร็จแล้วเอา 3 มุมมาชนกัน ตรงไหนขัดกันให้ชี้มา แล้วเสนอข้อสรุปที่ดีที่สุดสำหรับเว็บผม

ผลที่ได้กลับมามีของที่ผมไม่เคยสังเกตเอง เช่น เว็บ Cindy ทั้งคลัง 131 guide ไม่มีรูปเลยสักรูป (เพราะคลิปของเธอเล่าเรื่องไปแล้ว) ส่วน Ruben ใช้ภาพเยอะมากเพราะบทความคือสื่อหลักของเขา — ข้อมุมที่ขัดกันแบบนี้คือของดี มันบังคับให้เราตัดสินใจเองว่าบริบทเราเหมือนใคร (ของผม: คนมาจากลิงก์โดยไม่ได้ดูคลิป → ต้องมีภาพแบบ Ruben แต่โครง scan ง่ายแบบ Cindy)

Step 3 — ให้มันเสนอทางเลือก เราเป็นคนตัดสิน

สิ่งที่ผมได้กลับมาคือตารางเทียบ 3 ทางเลือก (ใช้โครงเดิม+เพิ่มหมวด / แยก URL / แยกเว็บใหม่) พร้อมต้นทุนและผลต่อ SEO ของแต่ละทาง ผมเลือกทางที่ถูกสุด: ใช้ของเดิมทั้งหมด เพิ่มแค่หมวดหมู่+เมนู — บทเรียนสำคัญ: AI ที่ดีจะพยายามห้ามเราสร้างใหม่เกินจำเป็น ถ้ามันชวนคุณรื้อทุกอย่างทิ้ง ให้สงสัยไว้ก่อน

Step 4 — ลงมือทีละเรื่อง สั่งเป็นภาษาคน

นี่คือคำสั่งจริงที่ผมพิมพ์ใส่ Claude ทั้งวัน สังเกตว่าไม่มีศัพท์เทคนิคสักคำ:

• “แถบทางซ้ายมันดูไม่ใช่เลย” → AI ไปหาสาเหตุเอง (template ของ theme บีบหัวเว็บเป็นคอลัมน์แคบ) แล้วแก้ทั้งเว็บ
• “prompt มันยังไม่ fit mobile” + แนบภาพหน้าจอมือถือ → เจอต้นเหตุจริง (กล่องโค้ดไม่ตัดบรรทัด ไม่ใช่ขนาด font)
• “อยากได้คลีนๆ ไม่รก” → ตัดปุ่มซ้ำ ลดขนาดหัวข้อ เอา note ภายในออกจากหน้าจริง
• “อยากให้โทนสีเป็นตาม Claude รวมถึง font” → ได้พื้นครีม+font serif ทั้งเว็บในไม่กี่นาที

บทเรียน: คุณไม่ต้องรู้ศัพท์เทคนิค — บอกสิ่งที่ตาเห็นกับสิ่งที่รู้สึก แล้วให้ AI แปลเป็นเทคนิคเอง แนบภาพหน้าจอช่วยได้มากที่สุด

Step 5 — เกลาด้วย design critique

พอโครงเสร็จ ผมให้ AI วิจารณ์งานตัวเองซ้ำอีกรอบ ด้วย prompt นี้ (แนบภาพหน้าจอมือถือไปด้วยทุกครั้ง):

ดูหน้านี้แล้ววิจารณ์ตรงๆ พร้อมเสนอทางปรับปรุง: [ลิงก์หน้า]
วิจารณ์ให้ครบ 5 ด้าน: ความรู้สึกแรกใน 2 วินาที / ใช้งานจริงติดตรงไหน /
สายตาถูกดึงไปถูกที่หรือเปล่า / ความสม่ำเสมอ / อ่านบนมือถือรอดไหม
ทุกปัญหาให้บอกระดับความร้ายแรง + วิธีแก้ เรียงตามผลกระทบ
ปล. แนบภาพหน้าจอจากมือถือมาให้ด้วย อย่าเชื่อแค่จอคอม

รอบนี้จับได้ของจริง: กล่อง prompt ล้นขอบจอมือถือ ซึ่งต้นเหตุจริงไม่ใช่ขนาดตัวหนังสืออย่างที่ผมเดา — ถ้าผมแก้เองคงนั่งลด font ไปเรื่อยๆ ไม่จบ

Prompt เริ่มต้น (ตัวเดียวที่ครอบทั้งกระบวนการ)

คุณคือที่ปรึกษาออกแบบเว็บ ผมจะให้ลิงก์เว็บของผม + เว็บต้นแบบ 2-3 เว็บที่ผมชอบ
ทำตามลำดับนี้ ห้ามข้ามขั้น:
1. เข้าไปดูเว็บต้นแบบทีละเว็บ สรุปว่าอะไรทำให้มันดี (โครงหน้า / การเล่าเรื่อง / ภาพ / ขนาดตัวหนังสือ / CTA)
2. วิจารณ์เว็บผมเทียบกับต้นแบบ: อะไรขาด อะไรเกิน อะไรพัง เรียงตามผลกระทบต่อคนอ่าน ไม่ใช่ตามความง่าย
3. เสนอโครงใหม่ 2-3 ทางเลือก พร้อมข้อดี-ข้อเสีย-ต้นทุน แล้วแนะนำ 1 ทางพร้อมเหตุผล — รอผมเลือกก่อน
4. เมื่อผมเลือกแล้ว ไล่ทำทีละเรื่อง เรื่องละขั้น บอกก่อนทุกครั้งว่าจะเปลี่ยนอะไร เพราะอะไร
กติกา:
- ใช้ของที่ผมมีอยู่ก่อนเสมอ ห้ามชวนสร้างใหม่/ย้ายแพลตฟอร์มถ้าไม่จำเป็น
- เจอปัญหาที่ผมไม่ได้ถาม ให้บอก แต่อย่าแก้เองจนกว่าผมสั่ง
- ทุกหน้าต้องเช็คบนมือถือด้วย ไม่ใช่แค่จอคอม
เว็บผม: [ลิงก์]
ต้นแบบ: [ลิงก์ 1] / [ลิงก์ 2] — สิ่งที่ชอบในแต่ละอัน: [บอกสั้นๆ]

มือถือ: กดค้างที่กล่อง → Select All → Copy

เช็คความสำเร็จ: ถ้า AI เริ่มจากการวิเคราะห์เว็บต้นแบบก่อน แล้วเสนอทางเลือกให้คุณตัดสิน (ไม่ใช่ลงมือแก้ทันที) = มาถูกทาง ส่วนผลลัพธ์ของผมคือเว็บที่คุณกำลังอ่านอยู่นี้ทั้งเว็บ

ใช้กับงานตัวเองได้เต็มที่ อยากแชร์ให้เพื่อน ส่งลิงก์หน้านี้ให้เขาเลย

ดูเครื่องมือทั้งหมดที่ AI Toolkit หรือตามเบื้องหลังการสร้างที่ TikTok @than_tum