By krit.junsree@gmail.com 
Nitin Gavhane แนะนำ 3 skill ฟรีสำหรับ Claude Code ที่ช่วยขจัดหน้าตาแบบ “AI-generated” ที่เห็นซ้ำในทุก project — ตั้งแต่ purple-to-blue gradient จนถึง card ซ้อน card ที่กลายเป็น cliché
ทำไม UI ที่ Claude Code เขียนจึงหน้าตาเหมือนกันหมด
Claude Code เขียน UI ที่ทำงานได้สมบูรณ์ แต่หน้าตาก็เหมือนกับที่คนอื่นทำ — purple-to-blue gradient, Inter font, card ซ้อน card ซ้อน card, rounded icon tile ที่โผล่บนทุก section heading เหมือนบังคับด้วยสัญญา ใครที่ build project ด้วย AI coding tool มากกว่า 2 ครั้งจะรู้จักหน้าตานี้ดี
เรื่องนี้ไม่ใช่เพราะ Claude Code design ไม่เป็น แต่เพราะทุก model เรียนมาจาก generic SaaS template กองเดียวกัน เมื่อปล่อยให้ทำงานด้วย default มันก็เอื้อมไปหยิบสัญลักษณ์เดิมทุกครั้ง
วิธีที่ผมพบว่าได้ผลจริง คือให้ Claude Codeมี design opinion จริง ๆในรูปของ skill ที่มัน read ก่อนแตะ code ต่อไปนี้คือ 3 skill ที่ผมใช้อยู่และแต่ละตัวเก่งเรื่องอะไร
1. Emil Kowalski Design Engineering Skill — สำหรับ motion และ interaction
Emil Kowalski คือคนสร้าง Sonner และ Vaul และสอนหลักการ animation ผ่านคอร์ส animations.dev มาหลายปีก่อนจะ package ความรู้ทั้งหมดเป็น skill file ที่ drop เข้า Claude Code ได้
หลังติดตั้งแล้ว เมื่อขอให้มัน open ด้วยประโยคสั้น ๆ ยืนยันว่าพร้อมช่วยสร้าง interface ที่ “feel right” มันจะเริ่มตัดสินใจเรื่อง motion เล็ก ๆ ที่คนทั่วไปมักข้าม เช่น:
- Release ควร feel snappy แม้เวลาที่กด deliberate
- Spring animation ให้ความรู้สึกเป็นธรรมชาติกว่า fixed-duration เพราะมัน settle ตาม physical parameter ไม่ใช่ snap หยุด
- Tooltip หลัง tooltip แรกใน group ควร skip delay เพราะการรอครั้งที่สองรู้สึกช้าแม้เป็น “behavior ที่ถูก”
มี companion audit mode ที่บางครั้งกระจายเป็น skill แยก — สร้างจากงานของ Kowalski ร่วมกับ designer Jakub Krehel และ Jhey Tompkins มันจะ scan UI เพื่อหาสิ่งที่เรียกว่า “AI-slop motion”: pulsing status dot, blur-on-everything entrance, hover-scale ที่ใส่บนทุก element การประเมินจะชั่งน้ำหนัก design philosophy 3 แบบเทียบกับ project type ที่ทำงานอยู่ — kids app กับ productivity dashboard จึงไม่ถูก treat แบบเดียวกัน
ดูรายละเอียด: emilkowal.ski/skill · GitHub: github.com/emilkowalski/skills
วิธีติดตั้ง:
git clone https://github.com/emilkowalski/skills
cp -r skills/emil-design-eng ~/.claude/skills/Restart Claude Code แล้วมันจะหยิบ skill ขึ้นมาเองอัตโนมัติในครั้งถัดไปที่ทำงานเกี่ยวกับ animation หรือ interaction ไม่มี slash command ต้องจำ — มัน trigger เองเมื่องานเข้าเงื่อนไข
2. Impeccable — สำหรับ overall visual system
Impeccable สร้างโดย Paul Bakaus เริ่มจากการต่อยอด frontend-design skill ของ Anthropic เอง แล้วขยายให้ใหญ่กว่าเดิมมาก — มี 23 command, 7 reference file ครอบคลุมทั้ง type, color, spacing, responsiveness, motion, UX writing และมีลิสต์ anti-pattern ที่มันปฏิเสธจะ generate ด้วย
ส่วนที่เปลี่ยนวิธีที่ผมใช้ไปเลยคือ setup step ก่อน Impeccable จะเขียน component ตัวใดตัวหนึ่ง มันจะ run interview แล้ว save คำตอบลงไฟล์ PRODUCT.md — ประกอบด้วยข้อมูลว่า product ทำสำหรับใคร, brand voice 3 คำจริง ๆ, named visual reference (ไม่ใช่ adjective คลุมเครือ) และสิ่งที่ product ต้อง avoid ให้ไม่เหมือนอะไรบ้าง หลังจากนั้นทุก command จะอ่านไฟล์นี้อัตโนมัติ — เราจึงไม่ต้อง re-explain brand ทุกครั้งที่ขอ section ใหม่
ใน day-to-day เราจะพิมพ์คำสั่งประมาณ /impeccable polish the pricing page หรือ /impeccable audit the checkout flow — command เหล่านี้ share vocabulary ที่ Claude เข้าใจจริง เช่น quieter, bolder, distill, critique มีคนหนึ่ง test บน portfolio ตัวเอง run audit ได้คะแนน 25/40 และพบว่า issue ที่ถูก flag คือการตัดสินใจที่เขาเคย defend ใน design review จริง ๆ ประเด็นของ tool นี้คือมันเป็น second pair of eyes ไม่ใช่แค่ linter
ดูรายละเอียด: impeccable.style · GitHub: github.com/pbakaus/impeccable
วิธีติดตั้ง:
npx impeccable installRun ครั้งเดียวจาก project root แล้วเข้า Claude Code พิมพ์:
/impeccable initนี่คือ setup interview ที่พูดถึงข้างบน หลังจากนั้นก็ใช้คำสั่งอย่าง /impeccable polish the pricing page ได้เมื่อต้องการ
3. Taste Skill — สำหรับ layout และ typography variance
Taste Skill มี angle ที่ต่างออกไป แทนที่จะมี rulebook ตายตัว มันจะ read brief ก่อน — industry, audience, mood, ระดับ motion, layout ควร spacious หรือ dense — แล้ว pick design direction ให้ก่อนจะ generate อะไร
Ship มาพร้อม variant หลายแบบ ทั้ง calmer style สำหรับ UI ที่ polished + whitespace เยอะ, editorial style ที่โมเดลตาม Notion และ Linear, และ Swiss-typography variant ที่ contrast แข็งขึ้นสำหรับคนที่ต้องการ decoration น้อย
รายละเอียดที่ผมชอบเป็นพิเศษคือมัน include anti-laziness rule ที่หยุด agent ไม่ให้ทิ้ง placeholder comment หรือข้ามครึ่ง section — ปัญหาจริงที่เจอบ่อยเมื่อ generate ทั้งหน้าแทน component เดียว
ดูรายละเอียด: tasteskill.dev · GitHub: github.com/Leonxlnx/taste-skill
วิธีติดตั้ง:
npx skills add leonxlnx/taste-skill --agent claude-codeติดตั้งภายใต้ชื่อ design-taste-frontend จากนั้น describe หน้าที่ต้องการ Claude Code จะอ่าน brief ก่อน pick direction แทนที่จะ default ไป centered layout กับ pale blue button ตามปกติ
วิธี combine ทั้ง 3 skill
ผมไม่ได้ run ทั้งสามในทุก project rough approach ของผมคือ:
- Taste Skill ก่อน — ตอน scaffold หน้าใหม่ ให้ layout กับ type direction ตัดสินใจก่อนจะมี component ตัวใดตัวหนึ่ง
- Impeccable สำหรับงาน client-facing เพราะ setup PRODUCT.md ช่วยให้ brand voice consistent ข้ามทุก command หลังจากนั้น
- Emil skill ท้ายสุด — เมื่อ UI static เสร็จแล้วและเริ่มเพิ่ม interaction, hover state, transition
ไม่มี skill ตัวไหน replace judgment ของเราเอง แค่หยุด instinct แรกของ Claude Code ที่แทบจะเป็นเวอร์ชัน generic ทุกครั้ง ลองติดตั้งตัวเดียวก่อน แล้ว run บน old project ที่เบื่อจะมองแล้วดูว่ามัน flag อะไร — นั่นคือ moment ที่มัน click
ที่มา: 3 Free Claude Code Skills That Fix 90% of That “AI-Generated” UI Look by Nitin Gavhane — เผยแพร่ 8 ก.ค. 2026
