มัดรวม Agent Skills สำหรับงาน UX/UI ที่ควรมีติดเครื่อง

ปัญหาคลาสสิกของการให้ AI เขียน UI คือ “มันทำงานได้ แต่หน้าตาเป็น AI” ฟอนต์ซ้ำๆ ที่เจอทุกเว็บ, gradient ม่วงๆ ที่ดูออกทันทีว่าใครทำ, ปุ่มที่กดแล้วไม่มี focus state ให้คนใช้คีย์บอร์ด พอเจอบ่อยเข้าเลยไปส่องดูว่าตอนนี้มี agent skills ตัวไหนบ้างที่ช่วยให้งาน UX/UI ดีขึ้นจริง ไปๆ มาๆ กวาดมาได้ 21 ตัว (นับ skill ย่อยในชุดของ Emil Kowalski แยกเป็น 3 ตัว) เลยจัดกลุ่มเป็น 6 สายให้เลือกหยิบตามงาน

(ถ้ายังไม่รู้จักว่า “skill” คืออะไร สั้นๆ คือชุดความรู้/กฎที่เราเสียบเข้าไปให้ AI agent อย่าง Claude Code เก่งเรื่องนั้นๆ ขึ้น วิธีลงก็ง่าย ส่วนใหญ่แค่โยนโฟลเดอร์ skill เข้า ~/.claude/skills หรือลงผ่าน marketplace ของ agent ที่ใช้ ติดตั้งทีเดียวใช้ได้ทุกงาน)

ก่อนไล่ทีละตัว ถ้าอยากเห็นภาพรวมของหมวดนี้ทั้งหมด ไปเปิดดูได้ที่ skills.sh หมวด Design & UI เขารวม skill สายดีไซน์ไว้ที่เดียว พร้อมบอกว่าแต่ละตัวทำอะไร หลายตัวในโพสต์นี้ผมก็เจอจากตรงนั้นแหละ

สายรสนิยม: ทำให้ดีไซน์ไม่ “หน้าตา AI”

สายแรกคือกลุ่มที่มาแก้ปัญหาต้นเรื่องตรงๆ สอน agent ให้มี “ตา” ก่อนมีมือ

Anthropic Frontend-Design

เปิด repo: ตัวทางการจาก Anthropic ทำงานเหมือน art director คือ เลือกทิศทางความสวยก่อนเขียนโค้ด มีกฎห้ามใช้ฟอนต์ที่ AI ชอบใช้ซ้ำ และห้าม gradient ม่วงโหลๆ ตรงจริตผมมาก

# ใน Claude Code (repo นี้รวม frontend-design, brand-guidelines, webapp-testing ไว้ด้วยกัน)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

ui-ux-pro-max

เปิด repo: คลังดีไซน์สำเร็จรูป มี 67 UI style, 161 palette, 57 คู่ฟอนต์, กราฟอีก 25 แบบ รองรับ stack หลักครบ (React, Next.js, Vue, SwiftUI, Flutter ฯลฯ) ตัวนี้ผมมีติดเครื่องอยู่แล้ว หยิบใช้บ่อย

# แบบ plugin ใน Claude Code
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# หรือแบบ CLI (เปลี่ยน --ai เป็น cursor/windsurf/copilot ได้)
npx ui-ux-pro-max-cli init --ai claude

Taste Skill

เปิดเว็บ: สาย fine-tune รสนิยม มีทั้งเว็บทางการที่ tasteskill.dev และ repo บน GitHub ที่ Leonxlnx/taste-skill ชูสโลแกน “The Anti-Slop Frontend Framework for AI Agents” มี variant ให้เลือกถึง 13 แบบ ตั้งแต่ตัวหลัก v2 ไปจนถึงสาย minimalist, brutalist และแปลงรูปเป็นโค้ด จุดเด่นคือคุมรสนิยมด้วย 3 ค่า: DESIGN_VARIANCE, MOTION_INTENSITY และ VISUAL_DENSITY อยากได้แนวไหนปรับตัวเลขเอา คอนเซปต์ “จูนรสนิยมด้วยตัวเลข” นี่น่าเล่นอยู่ (ท้ายโพสต์มีจับมันมาลงสนามจริงด้วย รอดูได้เลย)

# ลงทั้งชุด
npx skills add https://github.com/Leonxlnx/taste-skill

# หรือเลือกเฉพาะ variant ที่อยากได้
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Impeccable

เปิดเว็บ: ของ Paul Bakaus มาในมุมที่ต่างออกไป คือแทนที่จะโยนกฎก้อนใหญ่ให้ AI มันให้ “คำศัพท์ดีไซน์” เป็นคำสั่งย่อย 23 คำสั่ง เช่น /impeccable polish ขัดงานให้เนี้ยบ หรือ /impeccable colorize จัดระบบสี แถมมี slop detector กฎ 45 ข้อไว้จับ UI หน้าตา AI ได้ตั้งแต่ตอนรีวิว PR ฟรีและ open source ใช้ได้ทั้ง Claude Code, Cursor, Copilot, Gemini CLI

npx impeccable install

Hallmark

เปิดเว็บ: ของ nutlope สโลแกนตรงจุด: “Make your AI agent a designer” มี 4 โหมด คือ Build (สร้างหน้าใหม่จาก brief), Study (แกะ DNA ดีไซน์จากเว็บที่เราชอบ), Audit (จับ anti-pattern ในงานเดิม) และ Redesign มาพร้อม 20 ธีม กับด่านตรวจคุณภาพ 57 ข้อก่อนปล่อยงานทุกครั้ง กฎในนั้นแบนพวก hero gradient ม่วง กับ layout ที่จับทุกอย่างไว้กลางจอโดยเฉพาะ ดาวบน GitHub ก็ปาไป 3.5k แล้ว

npx skills add nutlope/hallmark

สาย DESIGN.md + ระบบดีไซน์: ให้ agent มีคู่มือประจำโปรเจกต์

ช่วงนี้มีแนวคิดใหม่ที่มาแรงคือไฟล์ DESIGN.md (สเปคจาก Google) เป็นเอกสารสรุประบบดีไซน์ของโปรเจกต์ ทั้งสี ฟอนต์ spacing และเหตุผลเบื้องหลัง วางไว้ให้ agent อ่านก่อนลงมือ ทุกหน้าใหม่ที่มันสร้างจะได้อยู่ในภาษาภาพเดียวกัน ไม่ใช่สุ่มหน้าตาใหม่ทุกรอบ สายนี้เลยเป็นกลุ่มเครื่องมือที่ช่วย “สร้างและป้อน” คู่มือแบบนั้นให้ agent

getdesign.md

เปิดเว็บ: จากทีม VoltAgent เป็นแคตตาล็อก DESIGN.md ที่แกะมาจากระบบดีไซน์ของแบรนด์ดังกว่า 300 เจ้า (Apple, Stripe, Figma, Tesla ฯลฯ) วิธีใช้ง่ายมาก คือเจอเว็บไหนที่ชอบสไตล์ ก็หยิบ DESIGN.md ของมันไปเป็น brief ให้ agent ของเรา ได้ภาษาภาพแนวนั้นโดยไม่ต้อง copy pixel ใครมา เปิดดูแคตตาล็อกได้ฟรี ตัวนี้ไม่มีคำสั่งลง เพราะเป็นเว็บแคตตาล็อก เข้าไปก็อป DESIGN.md ที่ชอบมาวางในโปรเจกต์ได้เลย

extract-design-system

เปิด repo: อันนี้กลับด้านกัน คือแทนที่จะไปหยิบของคนอื่น มันแกะ design token จากเว็บจริงที่เราชี้ให้ ทั้งสี typography spacing border radius และเงา แล้วคายออกมาเป็นไฟล์ JSON ตามสเปค W3C กับ CSS custom properties พร้อมใช้ จะใช้เป็น MCP กับ Cursor/Claude Desktop ก็ได้ ฟรี MIT license

npx skills add arvindrk/extract-design-system

Brand Guidelines

เปิด repo: ตัวทางการอีกตัวใน repo ของ Anthropic เป็น skill ที่ฝัง brand guideline (สีแบรนด์ ฟอนต์ น้ำเสียง) ให้ agent ทำ artifact ออกมาตรงแบรนด์เสมอ ตัวอย่างในนั้นใช้แบรนด์ของ Anthropic เอง แต่จุดที่น่าสนใจคือเอาโครงมันมาดัดเป็น brand skill ขององค์กรเราได้เลย ทีมไหนคุม brand guideline เข้มๆ นี่ตอบโจทย์

# อยู่ใน repo เดียวกับ frontend-design
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

ส่วนตัว Impeccable ที่พูดถึงไปข้างบนก็ generate DESIGN.md ให้โปรเจกต์เราได้เหมือนกัน ใช้คู่กับสายนี้ได้พอดี

สาย Motion & Animation: ให้ UI ขยับเป็น ไม่ใช่ขยับมั่ว

อีกจุดที่ AI พลาดบ่อยไม่แพ้เรื่องสีคือ animation ใส่ easing ผิดจังหวะ เงาหนาเกิน ทุกอย่างเด้งพร้อมกันจนตาลาย สายนี้มีคนมาอุดช่องให้แล้ว

Skills for Design Engineers (Emil Kowalski)

เปิด repo: ของ Emil Kowalski (design engineer สาย animation ที่เคยทำกับ Vercel และ Linear เจ้าของคอร์ส animations.dev) รวม 3 skill ในชุดเดียว ดาว 4.5k

• emil-design-eng หลักคิดด้าน motion และดีไซน์ที่เขากลั่นจากงานจริง เน้นจุดที่ agent ชอบพลาด เช่น เลือก easing ผิด เงาไม่เข้ากับงาน
• review-animations รีวิว animation ในโค้ดเราแบบเข้มๆ ตามกฎที่วางไว้ เหมือนมี senior มานั่งจับผิด transition ให้
• animation-vocabulary สอน “ศัพท์ animation” ให้เราสั่ง AI ได้แม่นขึ้น เพราะบางทีปัญหาไม่ใช่ AI ทำไม่ได้ แต่เราบอกมันไม่ถูกคำ

npx skills@latest add emilkowalski/skills

ฝั่ง Impeccable ก็มีคำสั่ง /impeccable delight สำหรับเติม micro-interaction ให้งานมีชีวิตอยู่ในชุดเดียวกับที่เล่าไปแล้ว

สายตรวจคุณภาพ + Accessibility

สร้างสวยอย่างเดียวไม่พอ ต้องมีด่านตรวจด้วย สายนี้คือกลุ่ม “QA ดีไซน์” ที่ควรมีอย่างน้อยหนึ่งตัว

Vercel Web Design Guidelines

เปิด repo: รีวิวโค้ด UI เทียบกับ Web Interface Guidelines กว่า 100 ข้อ ครอบคลุม ARIA, focus state ที่มองเห็น, label ของ input, ขนาดปุ่มสำหรับนิ้ว, รองรับ reduced-motion, semantic HTML และการใช้คีย์บอร์ด อันนี้สำคัญเพราะ AI มักลืมเรื่อง accessibility (สายเดฟชอบย่อกันว่า a11y)

# คำสั่งเดียวได้ทั้ง 3 ตัวของ Vercel เลย
npx skills add vercel-labs/agent-skills

Vercel React Best Practices

อยู่ใน repo เดียวกัน เน้น performance มีกฎ 40 กว่าข้อ 8 หมวด เรียงตามผลกระทบ (ลงด้วยคำสั่งเดียวกับข้างบน)

Vercel Composition Patterns

repo เดียวกันอีกเช่นกัน สอน pattern การประกอบ component แบบ React ที่ยืดหยุ่นและ scale ได้ พวก compound component กับการออกแบบ props ให้ไม่พังตอนโปรเจกต์โต เหมาะกับคนที่ทำ design system เอง

AccessLint

เปิด repo: ถ้างานต้องผ่านมาตรฐาน accessibility จริงจัง ตัวนี้ตรวจตาม WCAG 2.2 ระดับ A/AA ให้ ทั้ง scan หน้าเว็บจริงและเทียบ diff กับ baseline

npx skills add AccessLint/skills

Anthropic Webapp-Testing

เปิด repo: ตัวทางการอีกตัว ให้ agent เปิดเบราว์เซอร์ผ่าน Playwright ไปกดไปคลิกทดสอบหน้าเว็บจริง ถ่าย screenshot มาดูผลงานตัวเองแล้ววนแก้ เหมาะมากเวลาให้ AI ทำ UI เพราะมันจะได้ “เห็น” ของที่ตัวเองสร้าง ไม่ใช่เดาจากโค้ดอย่างเดียว

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

สาย Component + สร้าง UI: มีคลังของให้หยิบ ไม่ต้องเสกจากศูนย์

กลุ่มนี้คือพวกที่ต่อ agent เข้ากับคลัง component หรือเครื่องมือ generate UI ตรงๆ บางตัวเป็น skill บางตัวเป็น MCP (ตัวเชื่อมให้ agent คุยกับเครื่องมือภายนอก ไม่ใช่ skill ตรงๆ แต่ในงาน UI มันถูกใช้คู่กันจนแยกไม่ค่อยออก) ตัวไหนเป็นอะไรผมวงเล็บบอกไว้ให้

shadcn/ui Skill + MCP

เปิด docs: ตอนนี้ shadcn มีของทางการทั้งสองแบบ ตัว skill จะอ่าน components.json ของโปรเจกต์เรา เลยรู้ว่าใช้ framework อะไร ลง component ตัวไหนไปแล้ว ใช้ icon ชุดไหน แล้วประกอบ form หรือ dashboard ออกมาถูก pattern ตั้งแต่รอบแรก ส่วน MCP ไว้ให้ agent ค้นหาและติดตั้ง component จาก registry ด้วยภาษาคน ใครอยู่บน shadcn อยู่แล้วนี่ของฟรีที่ไม่มีเหตุผลจะไม่ลง

pnpm dlx skills add shadcn/ui

Magic MCP โดย 21st.dev (MCP)

เปิด repo: พิมพ์บรรยาย component ที่อยากได้ แล้วมันดึงของจากคลัง community ของ 21st.dev ที่มี component กับ template ให้ค้นเป็นพันๆ ตัว มาประกอบเป็นโค้ด TypeScript พร้อม preview ใช้ได้กับ Cursor, Windsurf, VS Code (ผ่าน Cline) และ Claude ดาว 5.3k ตอนนี้ยัง beta ใช้ฟรีแบบมีโควต้าต่อเดือน ต้องไปขอ API key ที่ 21st.dev/mcp ก่อน

# เปลี่ยน --client เป็น cursor/vscode/windsurf/codex ได้
npx @21st-dev/cli@latest init --client claude

Superdesign

เปิดเว็บ: เริ่มจากเป็น extension ใน IDE (ตัว repo เดิม ดาว 6.6k แต่หยุด maintain แล้ว) ตอนนี้ย้ายมาเป็นเว็บแอปเต็มตัว เป็น design agent ที่พิมพ์ prompt แล้วได้ mockup, wireframe, component ออกมาให้ fork ไปแก้ต่อได้ แถมยังปล่อยเป็น design skill ให้เรียกจาก coding agent อย่าง Cursor, Windsurf, Claude Code ได้ด้วย ฝั่งเว็บมีปุ่ม Recreate Screenshot กับ Import from Site ไว้แกะเว็บที่ชอบมาเป็นจุดตั้งต้น ตัวนี้ไม่มีคำสั่ง npx ตายตัว ใช้ผ่านเว็บหรือหยิบ skill จากในแอปเอา

Sleek design-mobile-apps

เปิด repo: สายแอปมือถือโดยเฉพาะ ให้ agent ออกแบบหน้าจอแอป iOS/Android และจัดการโปรเจกต์บนแพลตฟอร์ม Sleek ได้จากในแชต ข้อควรรู้คือต้องมีบัญชี Sleek Pro ขึ้นไปกับ API key ถึงจะใช้ได้ ไม่ใช่ของฟรี

npx skills add sleekdotdesign/agent-skills

สาย Figma + Design Tools: เชื่อมโลกดีไซน์เข้ากับ agent

กลุ่มสุดท้ายเป็น MCP คือสะพานระหว่าง design tool ที่ทีมใช้อยู่แล้วกับ coding agent

Figma MCP (MCP)

อ่านประกาศ: ตัวทางการจาก Figma เชื่อม Figma เข้ากับ Claude Code ตรงๆ ทำได้สองทาง ทั้งดึงดีไซน์จาก Figma มาเป็นโค้ด และดันโค้ดกลับไปเป็นดีไซน์ที่แก้ต่อใน Figma ได้

# เติม --scope user ถ้าอยากให้ใช้ได้ทุกโปรเจกต์
claude mcp add --transport http figma https://mcp.figma.com/mcp

ลองของจริง: ใส่ skill แล้วสวยขึ้นแค่ไหน

เขียนถึงตรงนี้แล้วมันคาใจ คือทุกตัวโม้ว่าช่วยให้สวยขึ้น แต่สวยขึ้น แค่ไหน ไม่มีใครโชว์ให้ดูเทียบกันตรงๆ เลยจัดการทดลองเองซะเลย กติกาง่ายๆ: โจทย์เดียวกันทุกยก คือทำ hero ของหน้า landing ให้แอปจดโน้ตสมมติชื่อ “Jotdown” เป็น HTML+CSS ไฟล์เดียวจบ แล้วจับภาพที่ 1440x900 เหมือนกันหมด

รอบตั้งต้นผมให้ Claude Code เขียนแบบไม่เปิด skill อะไรเลย ปล่อยไปตามสัญชาตญาณ ผลออกมาตามนี้

ดูแล้วขำตัวเอง เพราะมันคือ checklist ของสิ่งที่ skill พวกนี้แบนครบทุกข้อ: จัดกลางจอ, ฟอนต์ Inter, headline ไล่ gradient ม่วง, badge มี emoji, แถมบรรทัด “Loved by 10,000+ writers” ที่กุตัวเลขขึ้นมาเอง นี่แหละหน้าตา “AI ทำ” ที่เราเห็นกันเกลื่อนเน็ต

จากนั้นก็ไล่ทีละ skill โดยไปดึงคำสั่งจริงของแต่ละตัวมาอ่านแล้วทำตามเป๊ะๆ ทั้ง 5 ตัวดึงได้ครบ ไม่มีตัวไหนต้องข้าม (frontend-design กับ SKILL.md ของ Taste, Impeccable, Hallmark ดึงจาก repo บน GitHub ส่วน ui-ux-pro-max ใช้ตัวที่ลงไว้ในเครื่อง)

ยกที่ 1: Anthropic Frontend-Design ตัวนี้บังคับให้วางแผนก่อนเขียนโค้ด ต้องเลือก token สี ฟอนต์ และ “signature element” ที่ผูกกับตัว subject จริงๆ พอ subject คือแอปจดโน้ต มันเลยพาไปจบที่ไอเดีย hero เป็นหน้ากระดาษสมุดทั้งหน้า มีเส้นบรรทัด เส้นขอบแดง headline วางบนเส้นบรรทัดพอดี แถมโน้ตลายมือข้างขอบกระดาษ

ยกที่ 2: ui-ux-pro-max ตัวนี้ไม่ใช่กฎแต่เป็นคลังค้นหา ผมรันสคริปต์ search.py --design-system ของมันจริงๆ ด้วยคีย์เวิร์ด “note taking productivity app minimal calm” มันตอบกลับมาเป็นสูตรสำเร็จ: สไตล์ Neumorphism, โทนฟ้า cyan สงบๆ, ฟอนต์ Lora คู่ Raleway, layout แบบหน้าโหลดแอป พร้อมดาวเรตติ้งกับปุ่ม App Store ผมก็ประกอบตามสูตรนั้นเป๊ะ ได้หน้านุ่มฟูเงานูนแบบในภาพ ข้อสังเกตตรงๆ คือทิศทางถูกชี้ขาดโดยผลค้นหาล้วนๆ คำว่า “calm” พาไปโดนหมวด wellness เลยได้กลิ่นแอปนั่งสมาธิมากกว่าแอปจดโน้ต และตัว tool เองก็ยังเตือนในผลลัพธ์ว่า Neumorphism คะแนน accessibility ต่ำ

ยกที่ 3: Taste Skill ตัวนี้เริ่มด้วยการบังคับประกาศ “Design Read” หนึ่งบรรทัดกับหมุน 3 dial ตามสูตร landing SaaS ทั่วไปได้ค่า 7/6/4 กฎที่เห็นผลชัดสุดคือ anti-center bias (ห้ามจัดกลางจอถ้า variance เกิน 4) เลยได้ hero แบบผ่าครึ่ง ฟอนต์ห้ามใช้ Inter เลยไปจบที่ Geist สีหลักโทน zinc บวก accent เขียว emerald ตัวเดียวทั้งหน้า และกฎเด็ดคือห้ามทำ screenshot ปลอมจาก div ต้องใช้รูปจริง ซึ่งมันแนะนำ picsum แบบตั้งชื่อ seed เอง ตรงนี้เจอมุมฮา เพราะ picsum มันสุ่มรูปตาม seed ไม่ได้เข้าใจความหมาย ผมลองไป 4 seed ได้รูปตึกโบราณ รูปวัวกลางทุ่ง รูปคลื่น กับรูปทะเลหมอก เลยเลือกทะเลหมอกที่โทนเข้ากับคำว่า “quiet” ที่สุด

ยกที่ 4: Impeccable ผมโหลดทั้ง SKILL.md หลักและไฟล์ brand register ของมันมาอ่าน ขั้นตอนเลือกฟอนต์ของตัวนี้โหดสุด คือให้เขียนคำนิยามแบรนด์ 3 คำก่อน แล้วมี “reflex-reject list” รายชื่อฟอนต์ต้องห้ามยาวเป็นหางว่าว ทั้ง Inter, Lora, Space Grotesk, Playfair โดนแบนหมดเพราะเป็นฟอนต์ที่ AI ชอบหยิบ สุดท้ายไปจบที่ Bricolage Grotesque ส่วนเรื่องสีมันสั่งให้ “commit” ไปเลย ห้ามกั๊ก ผมเลยเทน้ำเงินหมึกปากกาทั้งหน้าแบบ drench ตัดด้วยไฮไลต์เหลืองแบบปากกาเน้นข้อความ ผลออกมาโดดจากตัวอื่นชัดเจน

ยกที่ 5: Hallmark ตัวนี้ทำงานเป็นระบบสุด มันให้เลือก genre ก่อน (แอป productivity เข้าเกณฑ์ modern-minimal) แล้ว genre จะล็อกธีมให้เลือกจากกลุ่มของมัน ผมได้ธีม Cobalt: กระดาษขาวโทนเย็น accent น้ำเงิน cobalt ตัวเดียว โครง hero สองคอลัมน์แบบ title ซ้าย คำอธิบายขวา ที่ขำคือธีมนี้สั่งใช้ Space Grotesk กับ Inter ซึ่งเป็นฟอนต์ที่ Impeccable เพิ่งแบนไปเมื่อกี้ กฎเด่นของ Hallmark คือห้ามกุตัวเลข (บรรทัด 10,000+ writers แบบใน baseline นี่ผิดกฎทันที) ห้าม gradient text ห้ามหัวข้อตัวเอียง ผลลัพธ์เลยออกมาสะอาดแบบเว็บ dev tool พร้อมช่อง quick capture ที่เป็น input จริงๆ ไม่ใช่ของปลอมวาดด้วย div

ตัดสิน (ตามตาผมคนเดียว): ทั้ง 5 ตัวหนีจาก baseline ได้หมดจริง ไม่มีตัวไหนเหลือกลิ่น gradient ม่วงจัดกลางจอเลย ถ้าให้เรียงตามความชอบ ผมให้ Impeccable ที่หนึ่ง เพราะกล้าสุดและมีคาแรกเตอร์แบรนด์ชัดสุด ตามด้วย Frontend-Design ที่ไอเดียกระดาษสมุดผูกกับตัวโปรดักต์แน่นสุด (แต่ก็เสี่ยงสุด บางคนอาจมองว่าเว่อร์) ส่วน Hallmark คือตัวที่เอาไปใช้กับงานจริงได้ทันทีสุด เนี้ยบแบบไม่ต้องเถียงกับใคร Taste ออกมาดูแพงแบบเงียบๆ ปลอดภัยสุดในกลุ่ม และ ui-ux-pro-max ได้หน้าที่แปลกตาสุดก็จริง แต่โดนสูตรพาหลงหมวดไปหน่อย

ออกตัวไว้ตรงนี้: นี่คือโจทย์เดียว ยกเดียว คนประกอบคนเดียว ความสวยเป็นเรื่องรสนิยมล้วนๆ และฝีมือคนตามคำสั่งก็มีผลไม่น้อย ลองเปลี่ยนโจทย์เป็น dashboard หรือ e-commerce ผลอาจสลับอันดับกันหมดก็ได้ ใครว่างลองเอาไปรันกับโจทย์ตัวเองดูคับ สนุกกว่าอ่านผลของผมเยอะ

เตือนก่อนติดตั้ง: audit เสมอ

อันนี้สำคัญมากในปี 2026 งานวิจัย ToxicSkills ของ Snyk ที่สแกน skill เกือบ 4,000 ตัว พบว่า 36.8% มีช่องโหว่ด้านความปลอดภัยอย่างน้อย 1 จุด และ 13.4% ถึงขั้นวิกฤต เพราะ skill คือโค้ด/คำสั่งที่ AI จะเอาไปทำตาม ถ้าเราลงของมั่วๆ จากแหล่งที่ไม่น่าเชื่อถือ มันเสี่ยงจริง

หลักง่ายๆ: ลงจากแหล่งทางการ (Anthropic, Vercel, shadcn) หรือของที่มีคนใช้เยอะ+รีวิวได้ก่อน อย่าเห็นชื่อเท่ๆ แล้วลงเลย เปิด SKILL.md อ่านก่อนว่ามันสั่งอะไร (ผมเองเพิ่งโดนระบบเตือนตอนจะลง skill จากแหล่งภายนอกมาเมื่อวันก่อน ซึ่งก็ถือว่าเตือนถูก) ยิ่งลิสต์นี้ยาวขึ้น ยิ่งต้องเลือกเป็น

สรุปเริ่มยังไงดี

21 ตัวฟังดูเยอะ แต่ไม่ต้องลงทุกตัว เอาที่ตรงงานพอ ถ้าให้แนะนำชุดเริ่มต้น:

1. Frontend-Design (ให้ดีไซน์ไม่หน้าตา AI)
2. Vercel Web Design Guidelines (กัน a11y หลุด)
3. เสริม ui-ux-pro-max ตอนอยากได้ style/palette สำเร็จรูปไวๆ

ถ้าขี้เกียจเลื่อนกลับไปหาทีละตัว ชุดเริ่มต้นนี้ก็อปรันรวดเดียวได้เลย

# 1. Frontend-Design (ของ Anthropic)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

# 2. Vercel Web Design Guidelines (ได้ react-best-practices กับ composition-patterns มาด้วย)
npx skills add vercel-labs/agent-skills

# 3. ui-ux-pro-max
npx ui-ux-pro-max-cli init --ai claude

พอเริ่มอยู่มือแล้วอยากไปต่อ ค่อยหยิบสายใหม่มาเล่นทีละสาย งานเน้น interaction ไปทาง Emil Kowalski skills โปรเจกต์ shadcn ก็ลง shadcn skill ทีมที่มีดีไซเนอร์ทำงานใน Figma ก็ต่อ Figma MCP ส่วนโปรเจกต์ไหนอยากคุมภาษาภาพระยะยาว ลองทำ DESIGN.md ติดโปรเจกต์ไว้สักไฟล์ จะเขียนเองหรือให้ extract-design-system แกะจากเว็บที่ชอบมาก็ได้

ใครอยากอ่านรีวิวเชิงลึกเป็นตัวๆ Snyk เขาเขียนสรุปไว้ใน Top Claude Skills for UI/UX Engineers อ่านต่อได้

ส่วนตัวผมว่าเทรนด์นี้น่าสนใจตรงที่มันแก้จุดอ่อนที่สุดของ AI พอดี คือ “โค้ดได้แต่รสนิยมยังไม่ถึง” การมี skill สาย art-director มาคุมทิศทางก่อน ทำให้ผลลัพธ์ดูเป็นงานคนมากขึ้นเยอะ และพอนั่งไล่ลิสต์นี้จบก็เห็นภาพชัดว่า ecosystem มันโตเร็วจนแบ่งสายอาชีพกันแล้ว มีทั้งสายรสนิยม สาย QA สาย motion เหมือนทีมดีไซน์ย่อมๆ ที่ลงได้ด้วยคำสั่งเดียว ใครทำงานหน้าบ้านลองหยิบไปเล่นดูคับ แค่ระวังเรื่องแหล่งที่มาไว้หน่อยก็พอ