This Open Code Skill Just Destroyed AI Slop Forever with Anti-Slop Frontend Rules
สรุปย่อ
ประเด็นสำคัญจากวิดีโอ
> **ที่มา:** [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*
คำแปลเต็ม
แปลตามบทสนทนาต้นฉบับ ปรับเป็นภาษาไทยธรรมชาติ
เอเจนต์เขียนโค้ด 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 กับสมุดกฏดีไซน์ที่เจาะจงขนาดนี้ คือคู่ที่ใกล้เคียงสุดที่ผมเคยได้กับเอาต์พุตที่กล้าวางตรงหน้าลูกค้าที่จ่ายเงิน โอเค นั่นคือทั้งหมดของวิดีโอครับ หวังว่าจะชอบกัน ถ้าชอบฝากกดไลก์วิดีโอและกดติดตามช่องด้วยนะครับ แล้วเจอกันวิดีโอหน้าครับ
อภิธานศัพท์เทคนิค
คำศัพท์และชื่อผลิตภัณฑ์ที่คงรูปภาษาอังกฤษ
| ศัพท์ | คำแปล / คำอธิบาย |
|---|---|
| AI slop | AI slop (งานจำเจจาก AI) |
| Taste Skill | Taste Skill |
| Open Code | Open Code |
| Claude Code | Claude Code |
| skill / skill.md | skill / ไฟล์ skill.md |
| agents.md | agents.md |
| opencode.json | opencode.json |
| plan mode / build mode | plan mode / build mode |
| LSP diagnostics | LSP diagnostics |
| MCP | MCP |
| provider | provider (ผู้ให้บริการโมเดล) |
| V2 experimental | V2 experimental |
| brief | brief (โจทย์งาน) |
| design variants | design variants |
| motion intensity | motion intensity |
| visual density | visual density |
| accent color | สี accent |
| corner radius | ระบบมุมโค้ง |
| hero discipline | วินัยของ hero |
| em dash (—) | em dash |
| eyebrow | eyebrow |
| zigzag / asymmetric grid | zigzag / กริดอสมมาตร |
| AI purple / mesh blob | สีม่วง AI / ไล่สี blob |
| GSAP ScrollTrigger | GSAP ScrollTrigger |
| Intersection Observer | Intersection Observer |
| CSS scroll-driven animation | CSS scroll-driven animation |
| preflight checklist | preflight checklist |
| npx skills add | npx skills add |
| symlink / copy | symlink / copy |
| design-taste-frontend | design-taste-frontend |
| greenfield prompt | greenfield prompt |
| design read | design read |
| m-check | m-check |
| layout repetition check | layout repetition check |
| hero check | hero check |
| redesign skill | skill redesign |
| brand tokens | brand tokens |
| Google Stitch Bridge | Google Stitch Bridge |
| brand board | brand board |
| before / after | before / after |
| pin (version) | ปินเวอร์ชัน |
ซับไตเติ้ลภาษาไทย
ดาวน์โหลดหรือดูซับทั้งหมด
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 แล้วสิ่งที่ได้คือไล่สีม่วงด้านบน
เปิดดูซับไตเติ้ลทั้งหมด (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 แล้วเจอกันวิดีโอหน้าครับ