ux-ui-agent-skills ชุดสกิลช่วย AI Agent ออกแบบ UX/UI และ Design System ตามมาตรฐาน WCAG 2.2

สวัสดีครับทุกคนในกลุ่ม ขอฝาก skill เล็กๆ ที่ผมทำไว้หน่อยนะครับ ชื่อ ux-ui-agent-skills …

.

ผมเป็น designer ที่เขียนโค้ดทุกวัน แล้วเจอปัญหาเดิมซ้ำๆ คือพอให้ AI ทำหน้าจอ งานมักออกมาหน้าตาคล้ายๆ กันหมด ใช้ gradient ม่วง การ์ดสี่ใบเท่ากัน ตัวหนังสือเทาอ่านยาก แล้วก็บอกว่าเสร็จแล้วทั้งที่ยังไม่ผ่าน accessibility ผมเลยลองเอาสิ่งที่ทำงานมาสิบกว่าปีมาเขียนเป็นกฎให้มันใช้

.

ข้างในมีทั้ง design tokens แบบ DTCG, component specs, แนวทาง WCAG 2.2 และ gate ที่เปิด browser จริงแล้วตรวจว่างานผ่านหรือไม่ผ่าน ทั้ง contrast, responsive, การใช้ keyboard ไปจนถึงปุ่ม Delete ที่ดันใช้สีน้ำเงิน ส่วนเรื่อง taste ที่วัดเป็นตัวเลขไม่ได้ ก็มีคำสั่ง /critique ให้ agent อีกตัวมาช่วยดูงานแบบตั้งใจหาจุดตีกลับ เหมือนมี senior มารีวิวให้

.

พูดอย่างเดียวอาจจะนึกภาพไม่ออก ผมเลยทำ landing page ไว้ให้เข้าไปกดเล่นได้เลยที่ [plugin87.github.io/ux-ui-agent-skills](https://l.facebook.com/l.php?u=http%3A%2F%2Fplugin87.github.io%2Fux-ui-agent-skills%3Ffbclid%3DIwZXh0bgNhZW0CMTAAcGRvZgVicmlkETE4SHE4Um82Y2dZSzF0TnRDc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHid7uzIFumnjYb2fKOFKFuhGt978-WHpQGH6UV_zWO0SFIVzzf6FQIv8y5ty_aem_48ykLxcHRF-DIiNUcJ3o8A&h=AUCZUakFnRHHLxPSrzgviAyjZWgMNUAmHgKemh0XH44O9qQYd2d55T5n9yFm6LiJv2brisVa22IHTPryZ-SmfOridju9xIQoYNKg_z7f79hVZbVeLz_AWI9FGaZi-tuKNGipj9k0GoHCN9SpgN47Xw&__tn__=-UK-R&c[0]=AUDVzsuz2rNQg9qEFhDawLU9k8CnbFF5FkcX59SEtWM_54wzZcyRIebPLWzILFZ0lCNRoAOwly2zuY6kobLhBTW7CwOwOUQ2ucNkkH6ZSINLymLYhWiJ9aZiar6ppQHBzSHhPlt8q9b_iUWxcNaJxtL7ii9uXcd8lr4a_Hn1-RMRD7K39ms) ทุกหน้าจอในนั้น agent สร้างขึ้นจากกฎชุดนี้ และผ่าน gate ครบทุกข้อทั้งโหมดสว่างและมืด มีหน้าจอผลิตภัณฑ์จริงยี่สิบหน้าจากหลายอุตสาหกรรม ไม่ใช่แค่แผ่นรวม component อันที่ผมชอบที่สุดคือ Meridian Terminal หน้าจอเทรดหุ้นที่มีกราฟสิบแบบอยู่บนจอเดียว ทั้งแท่งเทียน order book ไปจนถึง correlation matrix ทุกกราฟวาดด้วย SVG จาก token ชุดเดียวกัน ไม่ได้ใช้ chart library สักตัว กดสลับธีมดูได้ เปิดดูบนมือถือก็ได้ ไม่ต้องติดตั้งอะไรเลยครับ ผมว่าดูหน้านี้หน้าเดียวจะเข้าใจเร็วกว่าอ่านที่ผมเขียนมาทั้งหมด

.

ตอนนี้มีคนจากหลายประเทศเข้ามาใช้ ครบ 2,000 stars แล้ว และขึ้นไปอยู่อันดับ 5 บน Trendshift ซึ่งผมดีใจมาก แต่ที่อยากให้เกิดจริงๆ คืออยากให้คนไทยได้ใช้ด้วย เพราะเครื่องมือดีๆ สาย design ส่วนใหญ่มักมาจากต่างประเทศ เลยอยากให้มีของที่คนไทยทำ แล้วคนไทยช่วยกันใช้ ช่วยกันติ ช่วยกันทำให้ดีขึ้น

.

ใครใช้ Claude Code พิมพ์ /plugin marketplace add plugin87/ux-ui-agent-skills แล้วตามด้วย /plugin install ux-ui-agent-skills@ux-ui-agent-skills ได้เลยครับ ถ้าใช้ตัวอื่นอย่าง Codex, Cursor หรือ Copilot พิมพ์ npx ux-ui-agent-skills init --agent codex ในโปรเจกต์ มันจะใส่ไฟล์ AGENTS.md ที่ agent ส่วนใหญ่อ่านได้ให้พร้อมกฎทั้งชุด

.

ลองแล้วเจออะไรไม่เวิร์ก หรือรู้สึกว่าตรงไหนยังไม่ใช่ บอกผมได้เลยนะครับ คอมเมนต์ไว้ตรงนี้หรือเปิด issue ที่ [github.com/plugin87/ux-ui-agent-skills](https://github.com/plugin87/ux-ui-agent-skills?fbclid=IwZXh0bgNhZW0CMTAAcGRvZgVicmlkETE4SHE4Um82Y2dZSzF0TnRDc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHid7uzIFumnjYb2fKOFKFuhGt978-WHpQGH6UV_zWO0SFIVzzf6FQIv8y5ty_aem_48ykLxcHRF-DIiNUcJ3o8A) ก็ได้ ผมอ่านทุกอันครับ See less