AI ทำ UI ออกมาดูธรรมดา เพราะเลือกวิธีออกแบบไม่ตรงกับงานหรือเปล่า? GitHub Daily วันนี้ขอแนะนำ UI Skills — โปรเจกต์ Open Source สำหรับ Design Engineer ที่ช่วยเลือก Skill ด้าน UI ให้ AI Agent ใช้ตามประเภทงาน แทนการโยน Prompt กว้าง ๆ แล้วหวังให้ AI ออกแบบได้ตรงใจเอง จุดเด่นคือคำสั่ง `npx ui-skills start` ที่ทำหน้าที่พา Agent ไปใช้ชุดทักษะ UI ที่เหมาะกับงานนั้น เช่น งานวางโครงสร้างหน้าเว็บ งาน Motion หรือการสร้าง UI ตามหลักพื้นฐาน เหมาะกับใคร • UX/UI Designer ที่ใช้ AI ช่วยสร้างหน้าเว็บ • Design Engineer และ Frontend Developer • คนใช้ Claude Code, Cursor หรือ Coding Agent • ทีมที่ต้องการให้ UI จาก AI มีหลักการมากขึ้น • คนที่อยากแยก Skill ตามประเภทงาน แทนการใช้ Prompt เดียวกับทุกหน้า เอาไปใช้ทำอะไรได้บ้าง • เลือกชุดกฎ UI ให้เหมาะกับงานแต่ละประเภท • ให้ Agent ใช้แนวทางออกแบบพื้นฐานก่อนเริ่มเขียน Code • ค้นหา Skill ตามหมวด เช่น Motion • ดึง Skill เฉพาะเรื่องมาใช้ในโปรเจกต์ • ลดการให้ AI เดารูปแบบ UI จาก Prompt ที่กว้างเกินไป • ใช้เป็นคลังแนวทางร่วมกันระหว่าง Designer และ Developer ตัวอย่างคำสั่งที่ใช้ได้ เริ่มให้ Agent เลือก Skill ที่เหมาะกับงาน npx ui-skills start ดูหมวดหมู่ทั้งหมด npx ui-skills categories ดู Skill ในหมวด Motion npx ui-skills list --category motion ดึง Skill พื้นฐานของ UI npx ui-skills get baseline-ui ลองใช้ยังไงวันนี้ 1. เปิด Terminal ในโปรเจกต์หน้าเว็บ 2. รันคำสั่ง `npx ui-skills start` 3. ระบุงานจริง เช่น สร้างหน้า Pricing, Dashboard หรือ Landing Page 4. ให้ Agent เลือก Skill ที่เหมาะก่อนเริ่มสร้าง UI 5. ตรวจผลลัพธ์เรื่อง Layout, Typography, Spacing และ Responsive ก่อนนำไปใช้จริง UI Skills เหมาะกับการช่วยกำหนดแนวทางให้ AI แต่ผลลัพธ์สุดท้ายยังควรผ่านการตรวจจาก Designer หรือ Developer โดยเฉพาะเรื่อง Accessibility, Brand Guideline และประสบการณ์ใช้งานจริง #Getnotes #GitHubDaily #UISkills #DesignEngineer #UIDesign #UXUI #AICoding #ClaudeCode #Cursor #FrontendDeveloper #DeveloperTools #OpenSource #VibeCoding