UI UX Pro Max: สกิลแก้เว็บ AI หน้าตาเหมือนกัน ที่ยังพลาดเรื่องเดียว

ต้องเตรียมอะไรบ้าง

• Claude Code หรือเอเจนต์อื่นที่ README ระบุว่ารองรับ เช่น Cursor, Windsurf, Codex CLI, Gemini CLI และ GitHub Copilot
• Python 3 สคริปต์ใช้แค่ไลบรารีมาตรฐาน ไม่ต้อง pip install อะไรเพิ่ม เครื่องผมเป็น Python 3.9.6 ที่มากับ macOS ก็รันได้ และชุดทดสอบ 160 ข้อใน repo ผ่านครบ
• Node.js ใช้แค่ตอนติดตั้งด้วย npx ตัวสกิลไม่ได้ใช้ Node ตอนทำงาน

สกิลนี้ใช้ฟรี ไม่ต้องใช้ API key และไม่ต่อเน็ตตอนค้นข้อมูล ผมลองไล่ดู import ในสคริปต์แล้ว มีแค่ csv, re, pathlib และโมดูลมาตรฐานอื่น ๆ ส่วนเงินที่ต้องจ่ายมีแค่ค่า Claude Code ตามแพ็กเกจที่ใช้อยู่ ทีมผู้พัฒนามีเวอร์ชัน Premium ขายแยกที่ uupm.cc ด้วย ตามที่ README บอก รุ่นนั้นเพิ่มงานแบรนด์ โลโก้ แบนเนอร์ และสไลด์ ผมไม่ได้ลองรุ่นนั้น

ติดตั้ง ui-ux-pro-max ได้ 3 วิธี

วิธีที่ 1: npx skills add (ผมแนะนำวิธีนี้)

ใน repo นี้มีสกิลทั้งหมด 7 ตัว ถ้าต้องการแค่ตัวออกแบบ UI ให้ใส่ --skill ui-ux-pro-max ไว้ท้ายคำสั่ง ถ้าอยากดูก่อนว่ามีอะไรบ้าง ใช้ --list ได้ คำสั่งนี้แค่แสดงรายการ ยังไม่ติดตั้งอะไรลงเครื่อง

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --list
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

คำสั่งนี้ผมรันแค่ --list ส่วนการติดตั้งจริงผมใช้วิธีที่ 2 ในโฟลเดอร์ทดลอง

วิธีที่ 2: ใช้ CLI ของโปรเจกต์ (uipro)

README แนะนำวิธีนี้เป็นหลัก ให้เข้าไปที่โฟลเดอร์โปรเจกต์ก่อน แล้วรันคำสั่งด้านล่าง ถ้าไม่อยากลงอะไรแบบ global ใช้ npx ได้เลย

cd ~/Projects/my-site
npx ui-ux-pro-max-cli@latest init --ai claude

สิ่งที่ต้องรู้คือ uipro init ลงสกิลมาทั้ง 7 ตัว (banner-design, brand, design, design-system, slides, ui-styling และ ui-ux-pro-max) รวมกันราว 4.8 MB ถ้าอยากได้ตัวเดียว ใช้วิธีที่ 1 จะคุมได้ง่ายกว่า ถ้าอยากให้ใช้ได้ทุกโปรเจกต์ ใส่ --global ไฟล์จะไปอยู่ที่ ~/.claude/skills/

วิธีที่ 3: ผ่าน Plugin Marketplace ของ Claude Code

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

วิธีนี้พิมพ์ในหน้าแชตของ Claude Code ได้เลย ผมไม่ได้ลองวิธีนี้ README บอกว่าเวอร์ชันก่อน v2.5.1 เคยติดตั้งไม่ผ่านเพราะมี symlink ใน zip ถ้าเจอปัญหานี้ให้กลับไปใช้วิธีที่ 2

ติดตั้งเสร็จแล้วให้ปิด Claude Code แล้วเปิดใหม่ จะเห็น ui-ux-pro-max ในรายการสกิล

ลองสร้าง design system ชุดแรก

ปกติเราไม่ต้องเรียกสคริปต์เอง พอขอให้ Claude ทำหน้าเว็บ สกิลจะทำงานเอง แต่ถ้าอยากให้แน่ใจว่าได้ใช้ ให้บอกชื่อสกิลไปในพรอมต์ หรือพิมพ์ /ui-ux-pro-max ตามด้วยสิ่งที่ต้องการ เช่น

/ui-ux-pro-max ทำหน้า landing ร้านกาแฟโทนอบอุ่น
สร้าง design system ก่อนแล้ว persist ลงโฟลเดอร์โปรเจกต์ จากนั้นค่อยเขียนหน้า

ตามที่ SKILL.md เขียนไว้ Claude จะเรียกสคริปต์ search.py แบบนี้ ผมลองรันคำสั่งเดียวกันเองในโฟลเดอร์ทดลอง

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "coffee shop cafe local brand warm" --design-system -p "Cafe Demo"

ผลลัพธ์มี 7 ส่วน คือ รูปแบบหน้า (ส่วนไหนมาก่อนหลัง ปุ่ม CTA วางตรงไหน) สไตล์ ชุดสีพร้อมชื่อตัวแปร CSS ฟอนต์พร้อมลิงก์ Google Fonts เอฟเฟกต์ สิ่งที่ควรเลี่ยง และเช็กลิสต์ก่อนส่งงาน ถ้าจะเอาไปใช้ต่อด้วยโปรแกรม ใส่ --json ถ้าจะเก็บไว้อ่าน ใส่ -f markdown

บันทึกเป็น MASTER.md ให้ทุกหน้าใช้ชุดเดียวกัน

ส่วนนี้ผมว่ามีประโยชน์ที่สุด ถ้าใส่ --persist สคริปต์จะเขียนไฟล์ design-system/<ชื่อโปรเจกต์>/MASTER.md ไว้ในโปรเจกต์ พอเราสั่งทำหน้าที่สอง สาม สี่ Claude จะกลับมาอ่านไฟล์นี้ก่อน หน้าเว็บทั้งเว็บเลยใช้สีและฟอนต์ชุดเดียวกัน

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "coffee shop cafe local brand warm" \
  --design-system --persist -p "Cafe Demo" --output-dir .

ในไฟล์นี้มีตารางสี ฟอนต์ ระยะห่าง เงา สเปกของปุ่ม การ์ด ช่องกรอก และ modal รวมถึงรูปแบบหน้า สิ่งที่ห้ามใช้ และเช็กลิสต์ ถ้าหน้าไหนต้องการสไตล์ต่างจากหน้าอื่น ใส่ --page "checkout" จะได้ไฟล์แยกใน pages/ ซึ่งใช้แทน MASTER เฉพาะหน้านั้น ถ้ามี MASTER.md อยู่แล้ว สคริปต์จะไม่เขียนทับ ยกเว้นเราใส่ --force

ปรับผลลัพธ์ด้วย 3 dial

ถ้าอยากได้ลุคที่แรงขึ้นหรือเรียบขึ้น ใส่ตัวเลข 1–10 ให้ --variance (เรียบ↔แหวก), --motion (แอนิเมชันน้อย↔มาก) และ --density (โล่ง↔แน่น) ได้โดยไม่ต้องเปลี่ยนคำค้น ผมลองใช้คำค้นร้านกาแฟเดิม แล้วใส่ --variance 9 --density 3 สไตล์เปลี่ยนจาก Vibrant & Block-based ไปเป็น Brutalism และเอฟเฟกต์เปลี่ยนเป็นมุมเหลี่ยม ไม่มี transition ส่วนชุดสีกับฟอนต์ยังเหมือนเดิม

UI UX Pro Max คืออะไร

ถ้าให้อธิบายสั้น ๆ มันคือตำราดีไซน์ที่ Claude เปิดค้นได้ ข้างในเป็นไฟล์ CSV หลายไฟล์ ไฟล์หนึ่งเก็บสไตล์ อีกไฟล์เก็บชุดสีแยกตามประเภทธุรกิจ 192 ประเภท มีไฟล์คู่ฟอนต์ ไฟล์ Google Fonts ราว 1,900 ตระกูล ไฟล์กฎ UX ไฟล์ไอคอน ไฟล์กราฟ และไฟล์แนวทางของแต่ละ stack ตั้งแต่ React, Next.js, Vue, Tailwind, shadcn/ui ไปจนถึง SwiftUI และ Flutter สคริปต์ search.py ค้นไฟล์เหล่านี้ด้วย BM25 แล้วใช้กฎใน ui-reasoning.csv สรุปคำตอบออกมา

repo นี้ได้รับความนิยมสูงมาก ตอนที่ผมเช็กมีดาวบน GitHub ราว 130,000 ดวง และบน skills.sh มีคนติดตั้งไปแล้ว 371,200 ครั้ง ข้อมูลในนี้ก็มีคนดูแลต่อเนื่อง สกิลตัวเดิมที่ผมลงไว้ในเครื่องก่อนหน้านี้ SKILL.md เขียนว่ามี 84 สไตล์ และกฎ UX 98 ข้อ แต่ตัวล่าสุดที่ผมเพิ่งโหลดมา ทีมคัดสไตล์เหลือ 79 แบบ แบ่งเป็นตัวที่ใช้แนะนำจริง 50 แบบ ส่วนกฎ UX เพิ่มเป็น 119 ข้อ เลขเปลี่ยนไปเยอะในไม่กี่เดือน

ทำไมหน้าเว็บถึงไม่ออกมาหน้าตาเหมือนกัน

เวลาเราสั่ง Claude ทำหน้าเว็บตรง ๆ มันจะเลือกสีกับฟอนต์จากความเคยชิน ผลเลยออกมาคล้ายกันทุกงาน สกิลนี้ให้ Claude เริ่มจากประเภทธุรกิจก่อน แล้วค่อยไปหาสไตล์ สี ฟอนต์ และรูปแบบหน้าที่ข้อมูลบอกว่าเหมาะ ผมลองสามคำค้นแล้วเอาค่าสีกับฟอนต์จาก JSON ที่ได้มาวางเทียบกัน

• ร้านกาแฟ ได้โทนน้ำตาลกับพื้นครีม ฟอนต์ Inter คู่กับ Playfair Display และคำเตือนให้เลี่ยง "ภาพอาหารไม่สวย" กับ "ไม่บอกเวลาเปิดปิด"
• โรงงาน B2B ได้โทนกรมท่ากับปุ่มสีฟ้า ฟอนต์ Plus Jakarta Sans หน้าแบบ Trust & Authority ที่เน้นใบรับรองกับปุ่ม Get Quote
• แอปการเงิน ได้พื้นเข้ม ปุ่มสีทอง ฟอนต์ IBM Plex Sans และคำเตือนเรื่องค่าธรรมเนียมที่ไม่ชัดเจน

อีกจุดที่ผมชอบ คือทั้งผลของโรงงานและการเงินมีข้อห้ามว่า "AI purple/pink gradients" ติดมาด้วย ทีมผู้พัฒนาใส่ลุคที่คนดูออกว่า AI ทำไว้ในรายการสิ่งที่ต้องเลี่ยงตั้งแต่แรก

จุดเด่น

• ออฟไลน์ ฟรี ไม่ต้องใช้คีย์ สคริปต์เป็น Python ล้วน ไม่มี dependency เพิ่ม รันไม่ถึงวินาที ไม่ส่งข้อมูลโปรเจกต์ออกไปไหน
• ผลลัพธ์ใช้ต่อได้ทันที ได้รหัสสีพร้อมชื่อตัวแปร CSS, @import ของ Google Fonts และ Tailwind config ของคู่ฟอนต์ ไม่ใช่แค่คำแนะนำลอย ๆ
• MASTER.md ช่วยให้ทั้งเว็บไปทางเดียวกัน ข้อนี้สำคัญกว่าที่คิด เพราะปัญหาของเว็บที่ AI ทำมักเป็นหน้าแรกกับหน้าอื่นดูไม่เข้ากัน
• มีเช็กลิสต์ก่อนส่งงาน เช่น ห้ามใช้อีโมจิแทนไอคอน สีตัวอักษรต้องตัดกับพื้นอย่างน้อย 4.5:1 ต้องเห็นกรอบโฟกัสตอนกดคีย์บอร์ด และต้องรองรับ prefers-reduced-motion
• หาฟอนต์ไทยได้ ค้นใน --domain google-fonts ด้วยคำว่า "thai sans serif" แล้วเจอ IBM Plex Sans Thai, Noto Sans Thai และ Athiti ที่รองรับภาษาไทยจริง

ข้อจำกัดที่ควรรู้ก่อนใช้

• คำค้นต้องเป็นภาษาอังกฤษ ผมลองค้นด้วยคำว่า "ร้านกาแฟ" ได้ผลเป็นหน้าแบบ Hero + Features สีฟ้ากับส้ม ซึ่งไม่เกี่ยวกับร้านกาแฟเลย และสคริปต์ก็ไม่ได้บอกว่าหาไม่เจอ ถ้าสั่งผ่าน Claude ปกติ Claude จะแปลงเป็นคำค้นภาษาอังกฤษเอง แต่ถ้าเรียกสคริปต์เองต้องระวังจุดนี้
• ผลที่ได้ยังต้องมีคนดูอีกรอบ ร้านกาแฟได้หน้าแบบ Funnel 3 ขั้นกับสไตล์ที่ข้อมูลบอกว่าเหมาะกับสตาร์ทอัปและเกม สีปุ่ม CTA เป็นสีเดียวกับสีหลัก และตั้ง Playfair Display เป็นฟอนต์เนื้อหา แต่ลิงก์ Google Fonts โหลดมาแค่ตัวเอียง ในภาพเทียบจะเห็นว่าเนื้อหาร้านกาแฟเอียงทั้งหมด ส่วนแอปการเงินได้ปุ่มสีม่วงทั้งที่ข้อห้ามของตัวเองบอกให้เลี่ยงโทนม่วงชมพูแบบ AI
• คู่ฟอนต์ไม่ได้คิดมาสำหรับภาษาไทย ฟอนต์อย่าง Inter หรือ Playfair Display ไม่มีตัวอักษรไทย ถ้าทำเว็บไทยต้องบอก Claude ให้ใช้ฟอนต์ไทยเพิ่มเอง
• SKILL.md ค่อนข้างยาว ตัวที่ติดตั้งด้วย uipro มีราว 7,700 คำ ทุกครั้งที่สกิลทำงาน Claude ต้องอ่านไฟล์นี้ ซึ่งกิน context และโควตาไปส่วนหนึ่ง
• uipro ลงสกิลมาเกินที่ต้องการ ได้มาครบ 7 ตัว สกิล design ที่ติดมาด้วยระบุว่าทำโลโก้ผ่าน Gemini หรือบริการ AI อื่นได้ ซึ่งน่าจะต้องใช้คีย์ของบริการนั้น ผมไม่ได้ลองส่วนนี้
• เอกสารกับตัวโปรแกรมไม่ตรงกันบางจุด README เขียนถึง uipro init --dry-run แต่ CLI เวอร์ชัน 2.15.0 บน npm ขึ้น error ว่า unknown option เลขเวอร์ชันก็ไม่ตรงกัน (release บน GitHub เป็น v2.15.0 แต่ skill.json เป็น 2.13.0) และสรุปบน skills.sh ยังใช้ตัวเลขชุดเก่า (50+ สไตล์ 161 ชุดสี)

คำถามที่พบบ่อย

ui-ux-pro-max ใช้ฟรีไหม

ฟรี เป็นโอเพนซอร์ส MIT ตัวสคริปต์รันในเครื่อง ไม่ต้องใช้ API key ค่าใช้จ่ายมีแค่ค่า Claude Code ตามแพ็กเกจที่ใช้อยู่ ส่วนเวอร์ชัน Premium ที่ uupm.cc เป็นอีกผลิตภัณฑ์ที่ขายแยก ผมไม่ได้ลอง

ต้องพิมพ์คำสั่ง search.py เองไหม

ไม่ต้อง พอสั่ง Claude ทำงานเกี่ยวกับหน้าเว็บ สกิลจะทำงานเอง Claude เป็นคนเรียกสคริปต์ การรันเองมีประโยชน์ตอนอยากดูตัวเลือกก่อนตัดสินใจ หรือตอนอยากลองหลายคำค้นเพื่อเทียบกัน

ใช้กับเว็บภาษาไทยได้ไหม

ได้ แต่ต้องช่วย Claude สองเรื่อง เรื่องแรก คำค้นควรเป็นภาษาอังกฤษ เช่น "coffee shop warm" ไม่ใช่ "ร้านกาแฟ" เรื่องที่สอง ให้ระบุฟอนต์ไทยเอง หรือสั่งให้ค้นใน google-fonts ด้วยคำว่า thai ก่อน

ใช้กับ React, Next.js หรือ Tailwind ได้ไหม

ได้ มีแนวทางแยกตาม stack ทั้งหมด 22 stack ใช้ --stack nextjs หรือ --stack html-tailwind ได้ SKILL.md ให้ Claude ดูจาก package.json ก่อนว่าโปรเจกต์ใช้อะไร ถ้าดูไม่ออกให้ถามเรา ไม่ให้เดาเอง

ติดตั้งแล้วจะไปแก้โค้ดหรือไฟล์ในโปรเจกต์ไหม

ตัวสคริปต์แค่อ่านไฟล์ CSV แล้วพิมพ์ผลออกมา ไฟล์เดียวที่มันเขียนคือ design-system/.../MASTER.md ตอนที่เราใส่ --persist และจะไม่เขียนทับไฟล์เดิมถ้าไม่ได้ใส่ --force ส่วนการเขียนโค้ดหน้าเว็บจริงเป็นงานของ Claude เหมือนตอนที่ไม่มีสกิล