ให้ AI เขียนหน้าเว็บ มันทำงานได้นะ... แต่ดูออกเลยว่า "dev เป็นคนทำ"
ทุกคนเคยไหมครับ สั่ง Claude Code หรือ Cursor ให้สร้าง UI ออกมา ฟังก์ชันครบ ปุ่มกดได้ ทุกอย่างทำงาน แต่พอมองจริงๆ มันขาดความ "เนียน" — spacing ไม่ลงตัว ตัวหนังสือลำดับความสำคัญมั่ว motion กระตุก ดูเป็น "programmer aesthetic" ที่ไม่มี polish
มีคนแก้ปัญหานี้ตรงๆ แล้ว ชื่อ UI Skills (โดย @Ibelick)
มันคือ CLI ที่เอา "ทักษะของ design engineer" ไปฝังให้ AI coding agent ของเรา (Claude Code, Cursor, Codex) คิดเรื่อง UI เป็นมากขึ้น คอนเซ็ปต์เดียวกับ "skills" ที่ Claude Code ใช้นั่นแหละครับ — แต่อันนี้เป็น skill เฉพาะทางสาย design (spacing, typography, hierarchy, motion, accessibility)
ที่ผมว่าน่าสนใจสุดคือ "routing layer" — เราไม่ต้องเลือกเองว่าจะใช้ skill ไหน แค่บอก agent ว่า:
"Run `npx ui-skills start` to fix the motion in this dialog"
ตัว CLI จะวิเคราะห์งานที่เราจะทำ แล้วเลือก "ชุดความรู้ที่เล็กที่สุดแต่เหมาะที่สุด" (smallest useful set) โหลดเป็น context ให้ agent เอง ไม่ต้องยัดทุกอย่างเข้าไปให้รก
คำสั่งหลักๆ มีไม่กี่ตัว:
• `npx ui-skills start` — router อัตโนมัติ เลือก skill ให้เอง
• `npx ui-skills categories` — ดูหมวดทั้งหมด
• `npx ui-skills list --category motion` — ดู skill ในหมวด motion
• `npx ui-skills get baseline-ui` — ดึง skill ตรงๆ
ตัวอย่าง skill ที่มี เช่น baseline-ui (deslop UI — เก็บกวาด spacing, hierarchy, typography ให้เป็นระเบียบเร็วๆ) เป็น cleanup pass พื้นฐานที่ทำให้หน้าตาดูดีขึ้นทันที
honest นะครับ — tool นี้ยังใหม่ ของฟรี open source (ตอนนี้ ~2.9k ดาวบน GitHub) ก็มี bug เล็กน้อยตามประสาของใหม่ และเป็น curated directory ที่ทุก skill อาจไม่ได้เวิร์กเท่ากันหมด แนะนำให้เปิดอ่าน skill ที่มันจะโหลดก่อนใช้สักนิด (เป็นนิสัยที่ดีเรื่อง security เวลาให้ agent โหลด context จากข้างนอก)
แต่ idea ของ "discovery layer" ที่ให้ agent routing ความรู้ design ได้เอง ผมว่านี่คือทิศที่ถูก — เพราะปัญหา AI เขียน UI "ทำได้แต่ไม่สวย" มันเป็นปัญหาจริงที่ทุกคนเจอ
ใครสาย vibe coding / Claude Code / Cursor ลองเอาไปเล่นดูครับ แล้วมาเล่าให้ฟังว่าหน้าเว็บที่ AI ทำให้ "เนียนขึ้น" จริงไหม 👇
ดูได้ที่ ui-skills.com
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac