▶SUBTHAIแปลไทย · ซับ · พากย์⚙
บทความแปลภาษาไทย · YouTube

This Open Code Skill Just Destroyed AI Slop Forever with Anti-Slop Frontend Rules

0:000:00
เล่นเสียงต้นฉบับของวิดีโอ พร้อมแสดงซับไทยซิงก์ตามเวลา
กำลังโหลดวิดีโอ…
01

สรุปย่อ

ประเด็นสำคัญจากวิดีโอ

> **ที่มา:** [YouTube — AI Stack Engineer](https://www.youtube.com/watch?v=COCO6jjZZQg) · เผยแพร่ 7 ก.ย. 2026 · ~10:22 นาที

# สรุปภาษาไทย — This Open Code Skill Just Destroyed AI Slop Forever

> **ที่มา:** [YouTube — AI Stack Engineer](https://www.youtube.com/watch?v=COCO6jjZZQg) · เผยแพร่ 7 ก.ย. 2026 · ~10:22 นาที
> *สรุปโดยอัตโนมัติ — เนื้อหาต้นฉบับ © AI Stack Engineer*

## วิดีโอนี้เกี่ยวกับอะไร
รีวิว + สาธิต **Taste Skill** ชุดไฟล์ skill.md ที่ให้กฏดีไซน์จริงกับเอเจนต์เขียนโค้ด AI เพื่อแก้ปัญหา “AI slop” (หน้าเว็บที่โมเดลสร้างแล้วหน้าตาเหมือนกันหมด) โดยรันใน **Open Code** เอเจนต์โอเพนซอร์สบนเทอร์มินัลที่รองรับ ~75 model provider

## ประเด็นหลัก

1. **ปัญหา AI slop:** ขอแลนดิ้งเพจทีไรก็ได้ไล่สีม่วง + การ์ดสามใบ + testimonial + footer — โค้ดรันได้แต่จำเจ
2. **Taste Skill ต่างจากพรอมต์ทั่วไป:** ไม่ได้สั่งแค่ “make it look polished” แต่ระบุ failure patterns แล้วแบนทิ้งตรงๆ (ราว 80,000 stars บน GitHub มี Vercel และ Kimi จาก Moonshot เป็นสปอนเซอร์)
3. **V2 experimental:** อ่าน brief ก่อนแล้วอนุมานทิศทางดีไซน์ (editorial / SaaS dashboard / portfolio) พร้อมปุ่มปรับ 3 ตัว — Design variants, Motion intensity, Visual density — และจะเถียงถ้าค่าที่คุณขอไม่ตรง brief
4. **กฏเหล็ก:** สี accent เดียวทั้งหน้า, ระบบมุมโค้งเดียว, ธีมเดียว, วินัย hero (headline ≤2 บรรทัด, subtext ≤20 คำ, ปุ่มหลักเห็นโดยไม่สกรอลล์, nav ≤80px), แบน em dash, แบนการ์ดสามใบเท่ากัน, แบนไล่สีม่วง AI, แบน dashboard ปลอมจาก div, ห้าม scroll listener ดิบ (ต้องใช้ GSAP ScrollTrigger / Motion / Intersection Observer / CSS scroll-driven) + preflight checklist ติ๊ก pass/fail ทุกข้อ
5. **ติดตั้ง:** `npx skills add` + URL GitHub → เลือก skill / เอเจนต์ (Open Code, Cursor, Codex, Gemini CLI, Copilot) / project หรือ global / symlink หรือ copy — แนะนำ symlink
6. **ชุดมี ~13 skill:** ตัวหลัก (งานใหม่), ตัวเข้มสำหรับ GPT/Codex, redesign (audit 6 หมวด ไม่เปลี่ยน URL/nav/ชื่อฟิลด์ฟอร์มแบบเงียบๆ กัน SEO พัง), พรีเซ็ต 3 ลุค (soft / minimalist / brutalist), output skill, Google Stitch Bridge + skill สร้างเฟรมอ้างอิง
7. **เดโมจริง:** brief 6 ช่อง → 3 ขั้น (declare design read → ส่งงาน ≥8 section ≥4 layout families → audit เป็นลายลักษณ์อักษร) — เอเจนต์ดันค่าที่ขอกลับพร้อมเหตุผล และผลลัพธ์ผ่านกฏ (ไม่มี em dash เลย)
8. **มุมธุรกิจ:** เอา skill redesign ไปทำ before/after ให้เว็บธุรกิจท้องถิ่นที่ดูเก่าแล้วส่งขาย
9. **คำเตือน:** ค่าเริ่มต้นยัง experimental (งานลูกค้าควรปินเวอร์ชันเก่า) และไฟล์ยาว = token จริงทุกรัน โมเดลถูกๆ อาจแพงกว่าที่คิดในหน้าใหญ่

## ใครควรดู
สาย vibe coding / AI coding agents ที่เบื่อหน้าเว็บซ้ำๆ และอยากได้ output ระดับกล้าโชว์ลูกค้าที่จ่ายเงิน

---
*Attribution: This Open Code Skill Just Destroyed AI Slop Forever — AI Stack Engineer (youtube.com/watch?v=COCO6jjZZQg), เผยแพร่ 7 ก.ย. 2026*
02

คำแปลเต็ม

แปลตามบทสนทนาต้นฉบับ ปรับเป็นภาษาไทยธรรมชาติ

เอเจนต์เขียนโค้ด AI มีปัญหาเรื่องดีไซน์ที่โผล่มาท่าเดิมทุกครั้ง คุณขอแลนดิ้งเพจหนึ่งหน้า แล้วสิ่งที่ได้คือไล่สีม่วงด้านบน ตรงกลางคือการ์ดสามใบเท่ากัน ตามด้วยแถว testimonial แล้วปิดท้ายด้วย footer โค้ดรันได้ปกติแต่หน้าตาเหมือนทุกหน้าที่โมเดลเคยผลิตมาทั้งปี Taste Skill คือชุดไฟล์ skill ที่สร้างมาเพื่อโจมตีปัญหานี้โดยตรง และวันนี้ผมจะรันมันใน Open Code แทนที่จะเป็น Claude Code เพราะตอนนี้ Open Code อ่านไฟล์ skill ได้โดยตรงอยู่แล้ว และคุณชี้มันไปหาโมเดลไหนก็ได้ที่คุณจ่ายอยู่แล้ว Open Code คือเอเจนต์เขียนโค้ดโอเพนซอร์สที่อยู่ในเทอร์มินัล จุดที่คนสนใจคือมันไม่ผูกกับ provider เจ้าเดียวเลย มันคุยกับ model provider ได้ราว 75 เจ้า คุณรัน Claude ใน session หนึ่ง GPT ในอีก session หนึ่ง Gemini หรือโมเดล local ในอีก session หนึ่งก็ได้ จ่ายตาม token ที่ใช้แทนค่าธรรมเนียมรายเดือนแบบเหมา มันมีเทอร์มินัลอินเทอร์เฟสจริง พร้อม plan mode กับ build mode เอเจนต์จะเขียนออกมาก่อนว่าจะทำอะไรก่อนแตะไฟล์ session ถูกเก็บไว้ให้กลับมาทำงานของเมื่อวานต่อได้ มีคำสั่ง share ที่เปลี่ยน session เป็นลิงก์ส่งให้เพื่อนร่วมทีม มี LSP diagnostics เอเจนต์จึงเห็นเส้นหยักสีแดงเดียวกับที่เอดิเตอร์ของคุณเห็น รองรับ MCP มีไฟล์ agents.md สำหรับกติกาโปรเจกต์ และมีระบบปลั๊กอิน TypeScript มีเวอร์ชันเดสก์ท็อปกับ IDE ด้วยแต่คนส่วนใหญ่ใช้ในเทอร์มินัล Skills คือชิ้นส่วนที่สำคัญของวิดีโอนี้ ใน Open Code skill คือโฟลเดอร์ที่มีไฟล์ชื่อ skill.md อยู่ข้างใน เอเจนต์โหลดมันเมื่อจำเป็นผ่านเครื่องมือ skill โดยตรง แทนที่จะยัดเข้าคอนเทกซ์ตลอดเวลา มันสแกนโฟลเดอร์ opencode/skills ในโปรเจกต์ของคุณ มีโฟลเดอร์ .claude/skills เพื่อความเข้ากันได้ นอกจากนี้ยังมีโฟลเดอร์ global ใต้ home config อะไรที่เขียนให้ Claude Code จึงมักใช้ตรงนี้ได้โดยไม่ต้องแก้ คุณตั้ง permission แยกตาม skill ได้ในไฟล์ opencode.json ว่าจะ allow deny หรือ ask สะดวกเวลารีโพมี skill ที่ไม่อยากให้เอเจนต์หยิบไปเอง Taste Skill มีดาวบน GitHub ราว 80000 ดวง และมีสปอนเซอร์ชื่อดังอย่าง Vercel Kimi จาก Moonshot และ animations.dev กับบริษัทเครื่องมือดีไซน์เล็กๆ อีกหลายเจ้า ความสนใจขนาดนี้ถือว่าเยอะมากสำหรับของที่เป็นแค่ไฟล์ markdown รวมกฏดีไซน์ก้อนใหญ่ เหตุผลที่มันดังคือมันเจาะจง พรอมต์ดีไซน์ทั่วไปจบแค่คำว่า make it look polished ซึ่งโมเดลทำตามได้ในทางเทคนิคแต่ยังส่งเลย์เอาต์เดิมๆ ออกมา แต่ตัวนี้ชี้รูปแบบความล้มเหลวแบบตรงๆ แล้วแบนทิ้ง สกิลตัวหลักถูกเขียนใหม่ทั้งหมดในปี 2026 เวอร์ชันปัจจุบันติดป้ายว่า V2 experimental ชื่อตอนติดตั้งเหมือนเดิมแต่กฏเข้มขึ้นมาก ผู้เขียนเก็บตัวเก่าไว้เป็นชุดติดตั้งแยก เผื่อใครที่เวิร์กโฟลว์พึ่งพฤติกรรมแบบเก่าเป๊ะๆ สิ่งที่เปลี่ยนคือ V2 อ่าน brief ของคุณก่อน แล้วอนุมานทิศทางดีไซน์จาก brief นั้น แทนที่จะปะสไตล์บ้านเดียวใส่ทุกงาน ถ้า brief บอกว่า editorial หรือ SaaS dashboard หรือ portfolio มันจะเลือกเลย์เอาต์ ระดับ motion และความหนาแน่นข้อมูลให้เหมาะ แล้วแถลงสิ่งที่มันอ่านได้ในหนึ่งประโยคก่อนเขียนอะไรทั้งนั้น ข้างใต้ทั้งหมดมีปุ่มปรับสามปุ่ม Design variants คุมว่าเลย์เอาต์จะทดลองแค่ไหน ตั้งแต่แบบกึ่งกลางทายได้ ไปจนถึงแบบอสมมาตร Motion intensity ตั้งแต่ hover state ง่ายๆ ไปจนถึงซีเควนซ์ตามการสกรอลล์ Visual density คือปริมาณข้อมูลในหนึ่งหน้าจอ ค่าต่ำเหมาะกับหน้า marketing โปร่งๆ ค่าสูงเหมาะกับ dashboard คุณตั้งเองก็ได้แต่ปกติ V2 จะตั้งให้เอง และมันจะเถียงคุณถ้าตัวเลขของคุณไม่ตรงกับ brief ซึ่งผมชอบนะ ส่วนที่สนุกคือกฏซึ่งมีสามล็อกที่เอเจนต์ไม่มีสิทธิ์ผ่อน สี accent สีเดียวทั้งหน้า เพื่อไม่ให้ section ที่เจ็ดกลายเป็นสีน้ำเงินบนเว็บโทนเทาอุ่น ระบบมุมโค้งระบบเดียว คมทั้งหมด มนทั้งหมด หรือ pill ทั้งหมด ธีมเดียวทั้งหน้า เลือกครั้งเดียว ห้ามพลิกเป็น dark กลางทาง จากนั้นคือวินัยของ hero เป็นลิมิตแข็งเหนือรอยพับจอ Headline เกินสองบรรทัดบนเดสก์ท็อปไม่ได้ Subtext เกิน 20 คำไม่ได้ ปุ่มหลักต้องเห็นโดยไม่ต้องสกรอลล์ แถบ nav สูงเกิน 80 พิกเซลไม่ได้ ห้ามใช้ em dash ในทุกข้อความ ทั้ง copy headline ปุ่ม และ alt text Eyebrow แบบเลข section อย่าง 00/index ห้ามใช้ ป้ายเวอร์ชันปลอมใน hero ห้ามใช้ แถบเมืองเวลาและสภาพอากาศจิ๋วๆ ที่ AI ชอบแปะตามมุม ห้ามใช้ ตัวบอกให้สกรอลล์ห้ามใช้เพราะคนอ่านรู้อยู่แล้วว่าสกรอลล์คืออะไร จุด status ประดับเริ่มต้นที่ศูนย์ การ์ดฟีเจอร์สามใบเท่ากันในแถวเดียวโดนแบนโดยปริยาย ให้ใช้ zigzag หรือกริดอสมมาตรแทน สีม่วง AI กับไล่สี blob แบบ mesh โดนแบน ยกเว้นแบรนด์นั้นเป็นสีม่วงจริง Dashboard กับเทอร์มินัลปลอมที่ประกอบจาก div แต่งสไตล์โดนแบน ให้ใช้รูปจริงแทน และใน JavaScript ห้ามใส่ scroll event listener ดิบๆ ต้องใช้ GSAP ScrollTrigger Motion หรือ Intersection Observer หรือ CSS scroll-driven animation เท่านั้น ท้ายไฟล์มี preflight checklist ที่เอเจนต์ต้องรัน แล้วติ๊ก pass หรือ fail ทุกบรรทัดก่อนบอกว่างานเสร็จ ติดตั้งใช้แค่คำสั่งเดียว รัน npx skills add ในโปรเจกต์ของคุณ แล้วตามด้วย URL ของรีโพบน GitHub จากนั้นมันจะพาเข้า picker มันถามว่าจะเอา skill ตัวไหน เลือกทั้งหมดก็ได้หรือตัวเดียวก็ได้ ถามว่าใช้กับเอเจนต์ตัวไหนซึ่ง Open Code ก็อยู่ในลิสต์ พร้อม Cursor Codex Gemini CLI Copilot และตัวอื่นๆ ถามว่าใช้เฉพาะโปรเจกต์นี้หรือ global ทุกโปรเจกต์ แล้วถามว่าจะ symlink หรือ copy ผมเลือก symlink เพราะการ copy จะกระจายไฟล์ซ้ำไปทุกโฟลเดอร์เอเจนต์ ส่วน symlink เก็บ source of truth ไว้ที่เดียว มันพิมพ์โน้ตความปลอดภัยสั้นๆ ก่อนเขียนอะไรลงเครื่อง ควรอ่านให้ดีเพราะคุณกำลังปล่อยให้ markdown ของคนแปลกหน้ามาคุมงาน build ถ้าอยากได้แค่ตัวหลักให้ใส่ flag skill เป็น design-taste-frontend แล้วข้ามที่เหลือไปเลย ทั้งชุดมีราว 13 skill แต่ไม่จำเป็นต้องเอาหมดพร้อมกัน ตัว core ครอบคลุมงานสร้างใหม่ มีตัวเข้มกว่าเดิมจูนมาสำหรับโมเดลสไตล์ GPT กับ Codex มี skill redesign ที่ตรวจเว็บเดิม 6 หมวดก่อนแตะอะไรทั้งนั้น มีพรีเซ็ตสามลุคให้เลือก แบบ soft เหมาะกับหน้าสงบพรีเมียม แบบ minimalist ได้ฟีล Notion หรือ Linear และแบบ brutalist ที่ใช้ตัวพิมพ์สวิสกับคอนทราสต์จัด มี skill output ที่หยุดเอเจนต์ไม่ให้ทิ้งคอมเมนต์ placeholder กับ section ที่ทำค้างไว้ มี Google Stitch Bridge กับอีกสาม skill รูปภาพล้วน ที่สร้างเฟรมอ้างอิงสำหรับเว็บ สำหรับมือถือ และสำหรับ brand board แล้วคุณส่งกลับให้เอเจนต์เขียนโค้ด implement ต่อ สำหรับเดโม ผมจะสร้างแลนดิ้งเพจ analytics dashboard และใช้ greenfield prompt จากหน้า docs ตรงๆ เป็น brief สั้นๆ หกช่อง คือชนิดของหน้า ชื่อโปรดักต์กับคำอธิบายบรรทัดเดียว กลุ่มผู้ชม vibe words ที่เป็นรูปธรรมสองถึงสี่คำ URL อ้างอิงของจริง และ avoid list จากนั้นรันสามขั้น ขั้นหนึ่งเอเจนต์ประกาศ design read กับค่าปุ่มปรับทั้งสามพร้อมเหตุผลแล้วหยุด ขั้นสองหลังผมอนุมัติมันจะส่งมอบหน้าหนึ่งหน้าที่มีอย่างน้อยแปด section กับอย่างน้อยสี่ตระกูลเลย์เอาต์ต่างกันโดยใช้รูปจริง ขั้นสามมันรัน audit เป็นลายลักษณ์อักษร ทั้ง m-check และ preflight check รวมถึง layout repetition check และ hero check ตกข้อไหนถือว่างานไม่เสร็จ ดูสิ่งที่เกิดในขั้นหนึ่งตรงนี้ผมขอ dense กับ high motion ไป มันดันกลับพร้อมแนะนำตัวเลขที่ต่ำกว่า และให้เหตุผลบรรทัดเดียวต่อข้อ สำหรับโปรดักต์ dashboard ถือว่าตัดสินถูก เพราะยัด motion ใส่หน้าข้อมูลแน่นๆ มักทำให้ดูถูก ผมบอกให้เอาตัวเลขของมันไปเลย ซึ่งการโต้ตอบแบบนี้เป็นของใหม่ใน V2 และนี่คือเส้นแบ่งระหว่างไฟล์ skill กับ style sheet ดูผลลัพธ์ hero ที่พอดี viewport โดย headline ได้สองบรรทัด สี accent สีเดียววิ่งจากบนถึงล่าง section ฟีเจอร์เป็น zigzag สองคอลัมน์แทนแถวการ์ดสามใบแบบเดิม พฤติกรรมสกรอลล์จัดการผ่าน ScrollTrigger ไม่ใช่ listener ที่เขียนเอง เลยไม่กระตุกแถม copy ไม่มี em dash เลยสักตัว ฟังดูเป็นเรื่องเล็กแต่รู้ไหมว่านี่คือวิธีเร็วสุดที่คนใช้จับได้ว่าข้อความนี้ AI เขียนบนเว็บลูกค้า มุมธุรกิจตรงนี้ค่อนข้างตรงไปตรงมา เว็บธุรกิจท้องถิ่นที่ดูเหมือนสิบปีก่อนมีอยู่ทุกที่ ค่าจ้างเอเจนซีเล็กๆ ให้ทำ redesign ยังแพงอยู่ แต่ต้นทุนผลิตด้วยวิธีนี้ถูกลงมากจนช่องว่างกว้างขึ้นทุกที ลองค้นอะไรแบบ roofing companies in Denver เลือกเว็บที่โทรมๆ สักเจ้ามารัน skill redesign ใส่แล้วส่ง before กับ after ให้เขา พรอมต์ redesign สร้างมาเพื่องานนี้โดยเฉพาะ มันตรวจ brand token กับโครงสร้างเว็บก่อน แล้วมันจะไม่ยอมเปลี่ยน URL ป้าย nav หรือชื่อฟิลด์ฟอร์มแบบเงียบๆ ซึ่งเป็นตัวที่มักทำอันดับ search ของเขาพัง คำเตือนตรงๆ สองข้อก่อนไป ค่าเริ่มต้นยังติดป้าย experimental ถ้อยคำกฏอาจเปลี่ยนระหว่างการติดตั้ง ถ้าจะส่งงานลูกค้าอาจอยากปักหมุดเวอร์ชันเก่าไว้ และไฟล์พวกนี้ยาวซึ่งหมายถึง token ที่ใช้จริงทุกรัน โมเดลถูกๆ บวก skill นี้อาจแพงกว่าที่คิดในหน้าใหญ่ๆ นอกนั้นการจับอิสระเรื่อง provider ของ Open Code กับสมุดกฏดีไซน์ที่เจาะจงขนาดนี้ คือคู่ที่ใกล้เคียงสุดที่ผมเคยได้กับเอาต์พุตที่กล้าวางตรงหน้าลูกค้าที่จ่ายเงิน โอเค นั่นคือทั้งหมดของวิดีโอครับ หวังว่าจะชอบกัน ถ้าชอบฝากกดไลก์วิดีโอและกดติดตามช่องด้วยนะครับ แล้วเจอกันวิดีโอหน้าครับ

04

อภิธานศัพท์เทคนิค

คำศัพท์และชื่อผลิตภัณฑ์ที่คงรูปภาษาอังกฤษ

ศัพท์คำแปล / คำอธิบาย
AI slopAI slop (งานจำเจจาก AI)
Taste SkillTaste Skill
Open CodeOpen Code
Claude CodeClaude Code
skill / skill.mdskill / ไฟล์ skill.md
agents.mdagents.md
opencode.jsonopencode.json
plan mode / build modeplan mode / build mode
LSP diagnosticsLSP diagnostics
MCPMCP
providerprovider (ผู้ให้บริการโมเดล)
V2 experimentalV2 experimental
briefbrief (โจทย์งาน)
design variantsdesign variants
motion intensitymotion intensity
visual densityvisual density
accent colorสี accent
corner radiusระบบมุมโค้ง
hero disciplineวินัยของ hero
em dash (—)em dash
eyebroweyebrow
zigzag / asymmetric gridzigzag / กริดอสมมาตร
AI purple / mesh blobสีม่วง AI / ไล่สี blob
GSAP ScrollTriggerGSAP ScrollTrigger
Intersection ObserverIntersection Observer
CSS scroll-driven animationCSS scroll-driven animation
preflight checklistpreflight checklist
npx skills addnpx skills add
symlink / copysymlink / copy
design-taste-frontenddesign-taste-frontend
greenfield promptgreenfield prompt
design readdesign read
m-checkm-check
layout repetition checklayout repetition check
hero checkhero check
redesign skillskill redesign
brand tokensbrand tokens
Google Stitch BridgeGoogle Stitch Bridge
brand boardbrand board
before / afterbefore / after
pin (version)ปินเวอร์ชัน
05

ซับไตเติ้ลภาษาไทย

ดาวน์โหลดหรือดูซับทั้งหมด

1
00:00:00,000 --> 00:00:01,527
เอเจนต์เขียนโค้ด AI

2
00:00:01,527 --> 00:00:04,983
มีปัญหาเรื่องดีไซน์ที่โผล่มาท่าเดิมทุกครั้ง

3
00:00:04,983 --> 00:00:06,912
คุณขอแลนดิ้งเพจหนึ่งหน้า

4
00:00:06,912 --> 00:00:09,484
แล้วสิ่งที่ได้คือไล่สีม่วงด้านบน
thai-subtitles.srt
SubRip — ใช้กับเครื่องเล่นวิดีโอส่วนใหญ่
↓ ดาวน์โหลด
thai-subtitles.vtt
WebVTT — ใช้กับเว็บ / YouTube
↓ ดาวน์โหลด
เปิดดูซับไตเติ้ลทั้งหมด (208 segments)
1
00:00:00,000 --> 00:00:01,527
เอเจนต์เขียนโค้ด AI

2
00:00:01,527 --> 00:00:04,983
มีปัญหาเรื่องดีไซน์ที่โผล่มาท่าเดิมทุกครั้ง

3
00:00:04,983 --> 00:00:06,912
คุณขอแลนดิ้งเพจหนึ่งหน้า

4
00:00:06,912 --> 00:00:09,484
แล้วสิ่งที่ได้คือไล่สีม่วงด้านบน

5
00:00:09,484 --> 00:00:12,538
ตรงกลางคือการ์ดสามใบเท่ากัน ตามด้วยแถว

6
00:00:12,538 --> 00:00:15,270
testimonial แล้วปิดท้ายด้วย footer

7
00:00:15,270 --> 00:00:20,012
โค้ดรันได้ปกติแต่หน้าตาเหมือนทุกหน้าที่โมเดลเคยผลิตมาทั้งปี

8
00:00:20,012 --> 00:00:22,263
Taste Skill คือชุดไฟล์ skill

9
00:00:22,263 --> 00:00:24,995
ที่สร้างมาเพื่อโจมตีปัญหานี้โดยตรง

10
00:00:24,995 --> 00:00:28,531
และวันนี้ผมจะรันมันใน Open Code แทนที่จะเป็น

11
00:00:28,531 --> 00:00:31,907
Claude Code เพราะตอนนี้ Open Code อ่านไฟล์

12
00:00:31,907 --> 00:00:33,755
skill ได้โดยตรงอยู่แล้ว

13
00:00:33,755 --> 00:00:37,533
และคุณชี้มันไปหาโมเดลไหนก็ได้ที่คุณจ่ายอยู่แล้ว

14
00:00:37,533 --> 00:00:38,627
Open Code

15
00:00:38,627 --> 00:00:42,485
คือเอเจนต์เขียนโค้ดโอเพนซอร์สที่อยู่ในเทอร์มินัล

16
00:00:42,485 --> 00:00:45,379
จุดที่คนสนใจคือมันไม่ผูกกับ provider

17
00:00:45,379 --> 00:00:48,915
เจ้าเดียวเลย มันคุยกับ model provider ได้ราว

18
00:00:48,915 --> 00:00:52,290
75 เจ้า คุณรัน Claude ใน session หนึ่ง GPT

19
00:00:52,290 --> 00:00:55,666
ในอีก session หนึ่ง Gemini หรือโมเดล local

20
00:00:55,666 --> 00:00:58,720
ในอีก session หนึ่งก็ได้ จ่ายตาม token

21
00:00:58,720 --> 00:01:01,613
ที่ใช้แทนค่าธรรมเนียมรายเดือนแบบเหมา

22
00:01:01,613 --> 00:01:05,310
มันมีเทอร์มินัลอินเทอร์เฟสจริง พร้อม plan mode

23
00:01:05,310 --> 00:01:06,435
กับ build mode

24
00:01:06,435 --> 00:01:10,052
เอเจนต์จะเขียนออกมาก่อนว่าจะทำอะไรก่อนแตะไฟล์

25
00:01:10,052 --> 00:01:11,147
session

26
00:01:11,147 --> 00:01:14,442
ถูกเก็บไว้ให้กลับมาทำงานของเมื่อวานต่อได้

27
00:01:14,442 --> 00:01:17,094
มีคำสั่ง share ที่เปลี่ยน session

28
00:01:17,094 --> 00:01:19,907
เป็นลิงก์ส่งให้เพื่อนร่วมทีม มี LSP

29
00:01:19,907 --> 00:01:21,002
diagnostics

30
00:01:21,002 --> 00:01:25,583
เอเจนต์จึงเห็นเส้นหยักสีแดงเดียวกับที่เอดิเตอร์ของคุณเห็น

31
00:01:25,583 --> 00:01:27,753
รองรับ MCP มีไฟล์ agents.md

32
00:01:27,753 --> 00:01:30,726
สำหรับกติกาโปรเจกต์ และมีระบบปลั๊กอิน

33
00:01:30,726 --> 00:01:33,700
TypeScript มีเวอร์ชันเดสก์ท็อปกับ IDE

34
00:01:33,700 --> 00:01:36,835
ด้วยแต่คนส่วนใหญ่ใช้ในเทอร์มินัล Skills

35
00:01:36,835 --> 00:01:40,371
คือชิ้นส่วนที่สำคัญของวิดีโอนี้ ใน Open Code

36
00:01:40,371 --> 00:01:43,505
skill คือโฟลเดอร์ที่มีไฟล์ชื่อ skill.md

37
00:01:43,505 --> 00:01:44,600
อยู่ข้างใน

38
00:01:44,600 --> 00:01:48,216
เอเจนต์โหลดมันเมื่อจำเป็นผ่านเครื่องมือ skill

39
00:01:48,216 --> 00:01:51,271
โดยตรง แทนที่จะยัดเข้าคอนเทกซ์ตลอดเวลา

40
00:01:51,271 --> 00:01:53,762
มันสแกนโฟลเดอร์ opencode/skills

41
00:01:53,762 --> 00:01:57,138
ในโปรเจกต์ของคุณ มีโฟลเดอร์ .claude/skills

42
00:01:57,138 --> 00:02:00,513
เพื่อความเข้ากันได้ นอกจากนี้ยังมีโฟลเดอร์

43
00:02:00,513 --> 00:02:04,130
global ใต้ home config อะไรที่เขียนให้ Claude

44
00:02:04,130 --> 00:02:07,666
Code จึงมักใช้ตรงนี้ได้โดยไม่ต้องแก้ คุณตั้ง

45
00:02:07,666 --> 00:02:10,318
permission แยกตาม skill ได้ในไฟล์

46
00:02:10,318 --> 00:02:13,453
opencode.json ว่าจะ allow deny หรือ ask

47
00:02:13,453 --> 00:02:15,140
สะดวกเวลารีโพมี skill

48
00:02:15,140 --> 00:02:18,436
ที่ไม่อยากให้เอเจนต์หยิบไปเอง Taste Skill

49
00:02:18,436 --> 00:02:20,686
มีดาวบน GitHub ราว 80000 ดวง

50
00:02:20,686 --> 00:02:24,062
และมีสปอนเซอร์ชื่อดังอย่าง Vercel Kimi จาก

51
00:02:24,062 --> 00:02:26,232
Moonshot และ animations.dev

52
00:02:26,232 --> 00:02:29,607
กับบริษัทเครื่องมือดีไซน์เล็กๆ อีกหลายเจ้า

53
00:02:29,607 --> 00:02:33,706
ความสนใจขนาดนี้ถือว่าเยอะมากสำหรับของที่เป็นแค่ไฟล์

54
00:02:33,706 --> 00:02:35,956
markdown รวมกฏดีไซน์ก้อนใหญ่

55
00:02:35,956 --> 00:02:38,126
เหตุผลที่มันดังคือมันเจาะจง

56
00:02:38,126 --> 00:02:41,421
พรอมต์ดีไซน์ทั่วไปจบแค่คำว่า make it look

57
00:02:41,421 --> 00:02:42,516
polished

58
00:02:42,516 --> 00:02:46,615
ซึ่งโมเดลทำตามได้ในทางเทคนิคแต่ยังส่งเลย์เอาต์เดิมๆ

59
00:02:46,615 --> 00:02:49,990
ออกมา แต่ตัวนี้ชี้รูปแบบความล้มเหลวแบบตรงๆ

60
00:02:49,990 --> 00:02:53,687
แล้วแบนทิ้ง สกิลตัวหลักถูกเขียนใหม่ทั้งหมดในปี

61
00:02:53,687 --> 00:02:56,420
2026 เวอร์ชันปัจจุบันติดป้ายว่า V2

62
00:02:56,420 --> 00:02:57,515
experimental

63
00:02:57,515 --> 00:03:00,729
ชื่อตอนติดตั้งเหมือนเดิมแต่กฏเข้มขึ้นมาก

64
00:03:00,729 --> 00:03:03,864
ผู้เขียนเก็บตัวเก่าไว้เป็นชุดติดตั้งแยก

65
00:03:03,864 --> 00:03:07,561
เผื่อใครที่เวิร์กโฟลว์พึ่งพฤติกรรมแบบเก่าเป๊ะๆ

66
00:03:07,561 --> 00:03:10,936
สิ่งที่เปลี่ยนคือ V2 อ่าน brief ของคุณก่อน

67
00:03:10,936 --> 00:03:13,830
แล้วอนุมานทิศทางดีไซน์จาก brief นั้น

68
00:03:13,830 --> 00:03:17,286
แทนที่จะปะสไตล์บ้านเดียวใส่ทุกงาน ถ้า brief

69
00:03:17,286 --> 00:03:20,581
บอกว่า editorial หรือ SaaS dashboard หรือ

70
00:03:20,581 --> 00:03:23,956
portfolio มันจะเลือกเลย์เอาต์ ระดับ motion

71
00:03:23,956 --> 00:03:26,207
และความหนาแน่นข้อมูลให้เหมาะ

72
00:03:26,207 --> 00:03:30,949
แล้วแถลงสิ่งที่มันอ่านได้ในหนึ่งประโยคก่อนเขียนอะไรทั้งนั้น

73
00:03:30,949 --> 00:03:34,003
ข้างใต้ทั้งหมดมีปุ่มปรับสามปุ่ม Design

74
00:03:34,003 --> 00:03:36,976
variants คุมว่าเลย์เอาต์จะทดลองแค่ไหน

75
00:03:36,976 --> 00:03:40,352
ตั้งแต่แบบกึ่งกลางทายได้ ไปจนถึงแบบอสมมาตร

76
00:03:40,352 --> 00:03:43,727
Motion intensity ตั้งแต่ hover state ง่ายๆ

77
00:03:43,727 --> 00:03:47,183
ไปจนถึงซีเควนซ์ตามการสกรอลล์ Visual density

78
00:03:47,183 --> 00:03:49,434
คือปริมาณข้อมูลในหนึ่งหน้าจอ

79
00:03:49,434 --> 00:03:52,247
ค่าต่ำเหมาะกับหน้า marketing โปร่งๆ

80
00:03:52,247 --> 00:03:54,176
ค่าสูงเหมาะกับ dashboard

81
00:03:54,176 --> 00:03:57,230
คุณตั้งเองก็ได้แต่ปกติ V2 จะตั้งให้เอง

82
00:03:57,230 --> 00:04:00,927
และมันจะเถียงคุณถ้าตัวเลขของคุณไม่ตรงกับ brief

83
00:04:00,927 --> 00:04:02,021
ซึ่งผมชอบนะ

84
00:04:02,021 --> 00:04:06,361
ส่วนที่สนุกคือกฏซึ่งมีสามล็อกที่เอเจนต์ไม่มีสิทธิ์ผ่อน

85
00:04:06,361 --> 00:04:09,978
สี accent สีเดียวทั้งหน้า เพื่อไม่ให้ section

86
00:04:09,978 --> 00:04:13,193
ที่เจ็ดกลายเป็นสีน้ำเงินบนเว็บโทนเทาอุ่น

87
00:04:13,193 --> 00:04:16,809
ระบบมุมโค้งระบบเดียว คมทั้งหมด มนทั้งหมด หรือ

88
00:04:16,809 --> 00:04:20,426
pill ทั้งหมด ธีมเดียวทั้งหน้า เลือกครั้งเดียว

89
00:04:20,426 --> 00:04:23,962
ห้ามพลิกเป็น dark กลางทาง จากนั้นคือวินัยของ

90
00:04:23,962 --> 00:04:27,177
hero เป็นลิมิตแข็งเหนือรอยพับจอ Headline

91
00:04:27,177 --> 00:04:30,874
เกินสองบรรทัดบนเดสก์ท็อปไม่ได้ Subtext เกิน 20

92
00:04:30,874 --> 00:04:34,571
คำไม่ได้ ปุ่มหลักต้องเห็นโดยไม่ต้องสกรอลล์ แถบ

93
00:04:34,571 --> 00:04:38,027
nav สูงเกิน 80 พิกเซลไม่ได้ ห้ามใช้ em dash

94
00:04:38,027 --> 00:04:41,563
ในทุกข้อความ ทั้ง copy headline ปุ่ม และ alt

95
00:04:41,563 --> 00:04:44,939
text Eyebrow แบบเลข section อย่าง 00/index

96
00:04:44,939 --> 00:04:48,073
ห้ามใช้ ป้ายเวอร์ชันปลอมใน hero ห้ามใช้

97
00:04:48,073 --> 00:04:50,967
แถบเมืองเวลาและสภาพอากาศจิ๋วๆ ที่ AI

98
00:04:50,967 --> 00:04:52,574
ชอบแปะตามมุม ห้ามใช้

99
00:04:52,574 --> 00:04:57,557
ตัวบอกให้สกรอลล์ห้ามใช้เพราะคนอ่านรู้อยู่แล้วว่าสกรอลล์คืออะไร

100
00:04:57,557 --> 00:05:00,209
จุด status ประดับเริ่มต้นที่ศูนย์

101
00:05:00,209 --> 00:05:04,147
การ์ดฟีเจอร์สามใบเท่ากันในแถวเดียวโดนแบนโดยปริยาย

102
00:05:04,147 --> 00:05:07,523
ให้ใช้ zigzag หรือกริดอสมมาตรแทน สีม่วง AI

103
00:05:07,523 --> 00:05:09,854
กับไล่สี blob แบบ mesh โดนแบน

104
00:05:09,854 --> 00:05:13,068
ยกเว้นแบรนด์นั้นเป็นสีม่วงจริง Dashboard

105
00:05:13,068 --> 00:05:15,721
กับเทอร์มินัลปลอมที่ประกอบจาก div

106
00:05:15,721 --> 00:05:18,775
แต่งสไตล์โดนแบน ให้ใช้รูปจริงแทน และใน

107
00:05:18,775 --> 00:05:22,391
JavaScript ห้ามใส่ scroll event listener ดิบๆ

108
00:05:22,391 --> 00:05:25,445
ต้องใช้ GSAP ScrollTrigger Motion หรือ

109
00:05:25,445 --> 00:05:28,982
Intersection Observer หรือ CSS scroll-driven

110
00:05:28,982 --> 00:05:32,116
animation เท่านั้น ท้ายไฟล์มี preflight

111
00:05:32,116 --> 00:05:35,813
checklist ที่เอเจนต์ต้องรัน แล้วติ๊ก pass หรือ

112
00:05:35,813 --> 00:05:38,385
fail ทุกบรรทัดก่อนบอกว่างานเสร็จ

113
00:05:38,385 --> 00:05:41,841
ติดตั้งใช้แค่คำสั่งเดียว รัน npx skills add

114
00:05:41,841 --> 00:05:45,216
ในโปรเจกต์ของคุณ แล้วตามด้วย URL ของรีโพบน

115
00:05:45,216 --> 00:05:47,788
GitHub จากนั้นมันจะพาเข้า picker

116
00:05:47,788 --> 00:05:49,958
มันถามว่าจะเอา skill ตัวไหน

117
00:05:49,958 --> 00:05:52,691
เลือกทั้งหมดก็ได้หรือตัวเดียวก็ได้

118
00:05:52,691 --> 00:05:55,825
ถามว่าใช้กับเอเจนต์ตัวไหนซึ่ง Open Code

119
00:05:55,825 --> 00:05:59,281
ก็อยู่ในลิสต์ พร้อม Cursor Codex Gemini CLI

120
00:05:59,281 --> 00:06:00,808
Copilot และตัวอื่นๆ

121
00:06:00,808 --> 00:06:03,702
ถามว่าใช้เฉพาะโปรเจกต์นี้หรือ global

122
00:06:03,702 --> 00:06:07,077
ทุกโปรเจกต์ แล้วถามว่าจะ symlink หรือ copy

123
00:06:07,077 --> 00:06:09,408
ผมเลือก symlink เพราะการ copy

124
00:06:09,408 --> 00:06:12,623
จะกระจายไฟล์ซ้ำไปทุกโฟลเดอร์เอเจนต์ ส่วน

125
00:06:12,623 --> 00:06:15,837
symlink เก็บ source of truth ไว้ที่เดียว

126
00:06:15,837 --> 00:06:18,088
มันพิมพ์โน้ตความปลอดภัยสั้นๆ

127
00:06:18,088 --> 00:06:19,856
ก่อนเขียนอะไรลงเครื่อง

128
00:06:19,856 --> 00:06:23,232
ควรอ่านให้ดีเพราะคุณกำลังปล่อยให้ markdown

129
00:06:23,232 --> 00:06:25,401
ของคนแปลกหน้ามาคุมงาน build

130
00:06:25,401 --> 00:06:28,777
ถ้าอยากได้แค่ตัวหลักให้ใส่ flag skill เป็น

131
00:06:28,777 --> 00:06:32,233
design-taste-frontend แล้วข้ามที่เหลือไปเลย

132
00:06:32,233 --> 00:06:33,921
ทั้งชุดมีราว 13 skill

133
00:06:33,921 --> 00:06:37,055
แต่ไม่จำเป็นต้องเอาหมดพร้อมกัน ตัว core

134
00:06:37,055 --> 00:06:38,663
ครอบคลุมงานสร้างใหม่

135
00:06:38,663 --> 00:06:42,360
มีตัวเข้มกว่าเดิมจูนมาสำหรับโมเดลสไตล์ GPT กับ

136
00:06:42,360 --> 00:06:45,655
Codex มี skill redesign ที่ตรวจเว็บเดิม 6

137
00:06:45,655 --> 00:06:47,503
หมวดก่อนแตะอะไรทั้งนั้น

138
00:06:47,503 --> 00:06:50,075
มีพรีเซ็ตสามลุคให้เลือก แบบ soft

139
00:06:50,075 --> 00:06:53,692
เหมาะกับหน้าสงบพรีเมียม แบบ minimalist ได้ฟีล

140
00:06:53,692 --> 00:06:56,505
Notion หรือ Linear และแบบ brutalist

141
00:06:56,505 --> 00:06:59,880
ที่ใช้ตัวพิมพ์สวิสกับคอนทราสต์จัด มี skill

142
00:06:59,880 --> 00:07:03,015
output ที่หยุดเอเจนต์ไม่ให้ทิ้งคอมเมนต์

143
00:07:03,015 --> 00:07:06,712
placeholder กับ section ที่ทำค้างไว้ มี Google

144
00:07:06,712 --> 00:07:09,927
Stitch Bridge กับอีกสาม skill รูปภาพล้วน

145
00:07:09,927 --> 00:07:13,302
ที่สร้างเฟรมอ้างอิงสำหรับเว็บ สำหรับมือถือ

146
00:07:13,302 --> 00:07:14,990
และสำหรับ brand board

147
00:07:14,990 --> 00:07:18,446
แล้วคุณส่งกลับให้เอเจนต์เขียนโค้ด implement

148
00:07:18,446 --> 00:07:21,982
ต่อ สำหรับเดโม ผมจะสร้างแลนดิ้งเพจ analytics

149
00:07:21,982 --> 00:07:25,358
dashboard และใช้ greenfield prompt จากหน้า

150
00:07:25,358 --> 00:07:28,010
docs ตรงๆ เป็น brief สั้นๆ หกช่อง

151
00:07:28,010 --> 00:07:29,135
คือชนิดของหน้า

152
00:07:29,135 --> 00:07:32,752
ชื่อโปรดักต์กับคำอธิบายบรรทัดเดียว กลุ่มผู้ชม

153
00:07:32,752 --> 00:07:35,966
vibe words ที่เป็นรูปธรรมสองถึงสี่คำ URL

154
00:07:35,966 --> 00:07:38,297
อ้างอิงของจริง และ avoid list

155
00:07:38,297 --> 00:07:41,512
จากนั้นรันสามขั้น ขั้นหนึ่งเอเจนต์ประกาศ

156
00:07:41,512 --> 00:07:42,607
design read

157
00:07:42,607 --> 00:07:45,821
กับค่าปุ่มปรับทั้งสามพร้อมเหตุผลแล้วหยุด

158
00:07:45,821 --> 00:07:50,724
ขั้นสองหลังผมอนุมัติมันจะส่งมอบหน้าหนึ่งหน้าที่มีอย่างน้อยแปด

159
00:07:50,724 --> 00:07:51,819
section

160
00:07:51,819 --> 00:07:55,837
กับอย่างน้อยสี่ตระกูลเลย์เอาต์ต่างกันโดยใช้รูปจริง

161
00:07:55,837 --> 00:07:59,293
ขั้นสามมันรัน audit เป็นลายลักษณ์อักษร ทั้ง

162
00:07:59,293 --> 00:08:02,588
m-check และ preflight check รวมถึง layout

163
00:08:02,588 --> 00:08:05,080
repetition check และ hero check

164
00:08:05,080 --> 00:08:07,089
ตกข้อไหนถือว่างานไม่เสร็จ

165
00:08:07,089 --> 00:08:10,625
ดูสิ่งที่เกิดในขั้นหนึ่งตรงนี้ผมขอ dense กับ

166
00:08:10,625 --> 00:08:11,750
high motion ไป

167
00:08:11,750 --> 00:08:14,644
มันดันกลับพร้อมแนะนำตัวเลขที่ต่ำกว่า

168
00:08:14,644 --> 00:08:18,180
และให้เหตุผลบรรทัดเดียวต่อข้อ สำหรับโปรดักต์

169
00:08:18,180 --> 00:08:21,475
dashboard ถือว่าตัดสินถูก เพราะยัด motion

170
00:08:21,475 --> 00:08:24,047
ใส่หน้าข้อมูลแน่นๆ มักทำให้ดูถูก

171
00:08:24,047 --> 00:08:26,297
ผมบอกให้เอาตัวเลขของมันไปเลย

172
00:08:26,297 --> 00:08:29,110
ซึ่งการโต้ตอบแบบนี้เป็นของใหม่ใน V2

173
00:08:29,110 --> 00:08:32,647
และนี่คือเส้นแบ่งระหว่างไฟล์ skill กับ style

174
00:08:32,647 --> 00:08:35,942
sheet ดูผลลัพธ์ hero ที่พอดี viewport โดย

175
00:08:35,942 --> 00:08:38,433
headline ได้สองบรรทัด สี accent

176
00:08:38,433 --> 00:08:41,889
สีเดียววิ่งจากบนถึงล่าง section ฟีเจอร์เป็น

177
00:08:41,889 --> 00:08:45,104
zigzag สองคอลัมน์แทนแถวการ์ดสามใบแบบเดิม

178
00:08:45,104 --> 00:08:48,801
พฤติกรรมสกรอลล์จัดการผ่าน ScrollTrigger ไม่ใช่

179
00:08:48,801 --> 00:08:52,096
listener ที่เขียนเอง เลยไม่กระตุกแถม copy

180
00:08:52,096 --> 00:08:53,945
ไม่มี em dash เลยสักตัว

181
00:08:53,945 --> 00:08:59,972
ฟังดูเป็นเรื่องเล็กแต่รู้ไหมว่านี่คือวิธีเร็วสุดที่คนใช้จับได้ว่าข้อความนี้

182
00:08:59,972 --> 00:09:01,580
AI เขียนบนเว็บลูกค้า

183
00:09:01,580 --> 00:09:04,232
มุมธุรกิจตรงนี้ค่อนข้างตรงไปตรงมา

184
00:09:04,232 --> 00:09:08,250
เว็บธุรกิจท้องถิ่นที่ดูเหมือนสิบปีก่อนมีอยู่ทุกที่

185
00:09:08,250 --> 00:09:11,867
ค่าจ้างเอเจนซีเล็กๆ ให้ทำ redesign ยังแพงอยู่

186
00:09:11,867 --> 00:09:16,368
แต่ต้นทุนผลิตด้วยวิธีนี้ถูกลงมากจนช่องว่างกว้างขึ้นทุกที

187
00:09:16,368 --> 00:09:19,663
ลองค้นอะไรแบบ roofing companies in Denver

188
00:09:19,663 --> 00:09:23,280
เลือกเว็บที่โทรมๆ สักเจ้ามารัน skill redesign

189
00:09:23,280 --> 00:09:26,575
ใส่แล้วส่ง before กับ after ให้เขา พรอมต์

190
00:09:26,575 --> 00:09:30,031
redesign สร้างมาเพื่องานนี้โดยเฉพาะ มันตรวจ

191
00:09:30,031 --> 00:09:32,603
brand token กับโครงสร้างเว็บก่อน

192
00:09:32,603 --> 00:09:35,416
แล้วมันจะไม่ยอมเปลี่ยน URL ป้าย nav

193
00:09:35,416 --> 00:09:37,586
หรือชื่อฟิลด์ฟอร์มแบบเงียบๆ

194
00:09:37,586 --> 00:09:41,926
ซึ่งเป็นตัวที่มักทำอันดับ search ของเขาพัง คำเตือนตรงๆ

195
00:09:41,926 --> 00:09:44,658
สองข้อก่อนไป ค่าเริ่มต้นยังติดป้าย

196
00:09:44,658 --> 00:09:45,753
experimental

197
00:09:45,753 --> 00:09:48,566
ถ้อยคำกฏอาจเปลี่ยนระหว่างการติดตั้ง

198
00:09:48,566 --> 00:09:52,263
ถ้าจะส่งงานลูกค้าอาจอยากปักหมุดเวอร์ชันเก่าไว้

199
00:09:52,263 --> 00:09:54,915
และไฟล์พวกนี้ยาวซึ่งหมายถึง token

200
00:09:54,915 --> 00:09:57,005
ที่ใช้จริงทุกรัน โมเดลถูกๆ

201
00:09:57,005 --> 00:10:00,219
บวก skill นี้อาจแพงกว่าที่คิดในหน้าใหญ่ๆ

202
00:10:00,219 --> 00:10:03,595
นอกนั้นการจับอิสระเรื่อง provider ของ Open

203
00:10:03,595 --> 00:10:06,488
Code กับสมุดกฏดีไซน์ที่เจาะจงขนาดนี้

204
00:10:06,488 --> 00:10:12,677
คือคู่ที่ใกล้เคียงสุดที่ผมเคยได้กับเอาต์พุตที่กล้าวางตรงหน้าลูกค้าที่จ่ายเงิน

205
00:10:12,677 --> 00:10:15,249
โอเค นั่นคือทั้งหมดของวิดีโอครับ

206
00:10:15,249 --> 00:10:16,454
หวังว่าจะชอบกัน

207
00:10:16,454 --> 00:10:20,151
ถ้าชอบฝากกดไลก์วิดีโอและกดติดตามช่องด้วยนะครับ

208
00:10:20,151 --> 00:10:22,080
แล้วเจอกันวิดีโอหน้าครับ