เจาะประเด็น
Dev Tools / AI
เบื่อมานานแล้ว! เครื่องมือใหม่ให้คุณ "ขีดเขียน" บนหน้าเว็บ ส่งงานให้ AI Agent แก้ไขเป็นชุดๆ
เดฟคนหนึ่งทนไม่ไหวกับการนั่งพิมพ์พร่ำบอก AI ให้แก้ UI ทีละจุด เลยสร้างโอเพนซอร์สที่เปลี่ยนวิธีทำงานกับ Claude Code ไปตลอดกาล
ทีมข่าว เอไอไทย.com
⏱ อ่าน 4 นาที
เคยรู้สึกมั้ยว่า "การพิมพ์อธิบาย" ว่าอยากได้อะไรกับ AI มันช่างจำกัดและปวดหัวขนาดไหน? แล้วถ้าเราบอกมันด้วยการ "ชี้แล้วคลิก" บนหน้าจอจริงๆ ล่ะ?
ผมเชื่อว่าใครที่เคยทำงานกับ AI Agent อย่าง Claude Code มาสักพัก จะต้องเจอจุดที่ "กวนใจสุดๆ" เหมือนกัน นั่นคือการต้องนั่งไล่แก้ UI ทีละจุดเล็กๆ น้อยๆ กับการแก้ข้อความ (Text) ที่ฟังดู "ไม่เป็นมนุษย์" อยู่เรื่อย และน่าขันตรงที่ สองอย่างนี้แหละคือหัวใจของการสร้างซอฟต์แวร์ร่วมกับ LLM ในยุคนี้
เรื่องมันเริ่มจากเดฟคนหนึ่งที่เบื่อหน่ายกับการไล่สแกนหาจุดที่ AI เขียนทิ้งร่องรอยไว้ชัดเจน (AI-slop) ไม่ว่าจะเป็นคำพูดที่ดูหุ่นยนต์เกินไปบนหน้า Landing Page หรือดีไซน์ที่ดูไม่เข้ากันสักนิด เขาเลยตัดสินใจลงมือสร้างเครื่องมือที่ช่วยให้ "ตัวเอง" สร้างแอปได้ดีขึ้น และผลลัพธ์ที่ออกมาคือ Tailr
Tailr ไม่ใช่แค่ตัวแก้ไขหน้าเว็บธรรมดา แต่มันคือชุดเครื่องมือที่ให้คุณ "ขีดเขียน" ลงบนหน้าเว็บจริงๆ ที่กำลังรันอยู่ แล้วส่งคำสั่งทั้งหมดนั้นให้ AI Agent ของคุณจัดการเป็นชุดๆ ได้ในทีเดียว ไม่ต้องมานั่งพิมพ์ทีละบรรทัดให้เมื่อยมืออีกต่อไป
ตัวระบบทำงานเป็น MCP Server (Model Context Protocol) คู่กับ Proxy ตัวหนึ่งที่ทำหน้าที่ "ฉีด" หน้า Overlay เข้าไปใน Dev Server ของคุณเอง ทุกอย่างรันอยู่บนเครื่องคุณ 100% ไม่มีข้อมูลส่งไปที่ไหน ไม่มี Dependency ให้ต้องมานั่งงม และแถมแจกฟรีแบบ MIT License รองรับ Node.js 18 ขึ้นไป
ความเจ๋งของมันคือคุณไม่ต้องมานั่งพิมพ์ว่า "ย้ายปุ่มนี้ไปทางขวา 2 พิกเซล เปลี่ยนสีเป็น #fff ลดขนาดฟอนต์ลงหน่อย" แต่คุณสามารถเข้าไปคลิกที่ element นั้นบนหน้าเว็บจริงๆ แล้วแก้ไขได้เลย หรือจะคอมเมนต์เป็นข้อความไว้ตรงๆ ก็ได้ แล้วส่งทั้งชุดให้ Agent จัดการทีเดียว
นอกจากนี้ มันยังมีฟีเจอร์ที่ผมว่าคนใช้ Claude Code หรือ Cursor ต้องชอบแน่ๆ นั่นคือการขอ "ตัวเลือกหลายๆ แบบ" สำหรับ element เดียวกัน หรือจะขอเป็น Slider เลยก็ได้ เช่น ให้ Agent สร้างตัวแปรควบคุมความกว้างของ Padding, ความเข้มของ Glow หรือระยะเวลา Animation ขึ้นมา แล้วคุณก็ลากปรับดูบนหน้าเว็บแบบ Real-time จนกว่าจะได้ฟีลลิ่งที่ใช่ แล้วค่อย "แช่" ค่านั้นไว้ ถือเป็นการทำงานแบบ Visual Tuning ที่ไม่ต้องมานั่งแก้โค้ดแล้วรีเฟรชดูใหม่ให้เสียเวลา
ต้องยอมรับว่าผู้เขียนเจ้าเครื่องมือนี้พูดตรงไปตรงมามาก เขายอมรับว่าตัวเองเพิ่งลองใช้มันกับโปรเจกต์ Landing Page ของ Tailr เองใน Claude Code กับ Cursor เท่านั้น ยังไม่รู้ว่ามันจะเวิร์คกับ Repo ของคนอื่นขนาดไหน นี่คือหนึ่งในปัญหาคลาสสิกของโลกโอเพนซอร์ส คือคนสร้างมักจะทดสอบกับงานตัวเองที่รู้ซึ้งถึงปัญหาดี แต่พอนำไปใช้กับบริบทอื่นอาจพังไม่เป็นท่า
แต่ Concept ของมันน่าสนใจมาก เพราะมันแก้ Pain Point ที่แทบไม่มีเครื่องมือไหนกล้าจัดการจริงๆ จังๆ นั่นคือ "การสื่อสารระหว่างมนุษย์กับ AI เรื่องดีไซน์" ซึ่งเป็นนามธรรมและสื่อสารด้วยคำพูดได้ยากที่สุด การได้เห็นภาพและลงมือปรับแก้บนหน้านั้นโดยตรง มันช่วยลดช่องว่างตรงนั้นลงได้เยอะมาก สำหรับใครที่เบื่อการพิมพ์พร่ำบอก AI แล้วได้ผลงานไม่ตรงใจ ผมว่า Tailr คือคำตอบที่ใกล้เคียงที่สุดในตอนนี้
นี่คือทิศทางของ Dev Tool ในอนาคตจริงๆ ที่ "การชี้" บนหน้าจอจะกลายเป็นภาษาคุยกับ AI ได้อย่างมีประสิทธิภาพมากกว่าการพิมพ์เป็นร้อยบรรทัด ใครที่ทำงานกับ AI Agent ทุกวัน ลองไปโหลดมาเล่นดู รับรองว่าจะติดใจ และถ้าเจอจุดพัง อย่าลืมไปแจ้งเจ้าของโปรเจกต์ด้วย เพราะเขาอยากรู้จริงๆ ว่าเครื่องมือนี้จะอยู่รอดใน Repo ของคนอื่นได้แค่ไหน
ที่มา: Reddit r/ClaudeAI — อ่านต้นฉบับ
ความคิดเห็น 3
กำลังโหลดความคิดเห็น...