รีวิว unslop — skill ที่เปลี่ยน UI หน้าตา AI เจนให้ดูเหมือนดีไซเนอร์ทำ

คืออะไร

unslop คือ skill สำหรับ Claude Code และ Codex ที่เปลี่ยน UI หน้าตา "AI" จากการ vibe code ให้กลายเป็น interface ที่มีดีไซน์และคาแรกเตอร์ของตัวเอง สร้างโดย Damir Sokolovsky (@heydamir) ผู้เริ่มซีรีส์ Unslopping บน X

มันจะหา "slop" ในหน้าจอก่อน เช่น purple gradient, glow, emoji label, copy ที่ตะโกนเกินไป และ spacing ที่ไม่สม่ำเสมอ แล้วตั้ง direction จาก product ของคุณก่อนลงมือแก้ทีละ pass ใช้ได้กับทุก tech stack ของหน้าจอ เช่น Next.js, React, Vue, Svelte, Tailwind หรือ HTML/CSS ธรรมดา ทั้ง dashboard, app และ landing page แถมทำกับ live site ได้ด้วยเมื่อมีแค่ลิงก์

จุดเด่น

• ✅ Audit รายงานทุกจุดที่เป็น slop พร้อมบอกว่าอยู่ตำแหน่งไหน
• ✅ Direction กำหนดคาแรกเตอร์ของดีไซน์ให้มาจาก product ของคุณเอง
• ✅ Passes แก้ตามลำดับ spacing, color, icons, copy, type, layout, details, visuals และ motion
• ✅ Visuals แสดง product จริงแทนภาพ glossy blob ถ้าต้อง generate ภาพ จะเชื่อมต่อ service อย่าง fal, Replicate, OpenAI images หรือ Higgsfield และถามก่อนทุกครั้งที่ generation มีค่าใช้จ่าย
• ✅ Story video ทำ video จัตุรัสสั้น ๆ ของหน้าจอที่กำลัง unslop ตัวเอง พร้อม post ได้เลย
• ✅ ก่อนแก้อะไรมันจะ audit และเสนอ direction ให้ก่อน ถ้าหน้าจอดีอยู่แล้วจะบอกและแนะนำการปรับเล็ก ๆ แทนที่จะ redesign ใหม่ทั้งหมด

เหมาะกับใคร

• คนที่ vibe code แล้วหน้าเว็บดูสาย AI ทุกเจ้าไปหมด อยากได้ดีไซน์ที่มีตัวตนมากกว่านั้น
• คนที่มี landing page หรือ dashboard อยู่ในสแตกใด ๆ ก็ได้ เพราะตัว skill ทำงานร่วมกับทุก tech stack
• คนที่อยากทำคลิปสั้นแสดง "ก่อน/หลัง" เอาไปโพสต์บนโซเชียล

เริ่มต้นใช้งาน

สำหรับ Claude Code ให้คัดลอก skill เข้าโฟลเดอร์ skills:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

ถ้าจะใช้กับโปรเจกต์เดียว ให้คัดลอกไปไว้ที่ .claude/skills/ ในโปรเจกต์นั้นแทน

สำหรับ Codex ให้สั่งติดตั้ง skill จาก repo ตรง ๆ:

$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

หรือคัดลอกด้วยมือเข้า ~/.agents/skills/ หรือ .agents/skills/ ในโปรเจกต์:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.agents/skills && cp -r unslop/skills/unslop ~/.agents/skills/

ถ้าอยากทำ story video หรือ snapshot live site ต้องติดตั้ง Playwright และ Chromium ในโปรเจกต์ที่รัน skill:

npm install -D playwright
npx playwright install chromium

story video ยังต้องมี ffmpeg ติดตั้งไว้และเรียกใช้ผ่าน PATH ได้ด้วย

วิธีใช้ พิมพ์ /unslop ใน Claude Code หรือ $unslop ใน Codex หรือบอกด้วยคำพูดตามสบาย agent ก็จะเลือก skill นี้ขึ้นมาเองได้:

/unslop this dashboard
/unslop the hero of https://example.com
/unslop my landing page and make the story video so I can post it

ใน README ยังมีตัวอย่างหน้าจอ vibecoded 2 หน้า ในโฟลเดอร์ examples ไว้ลองเล่นด้วย

ข้อควรรู้

• ⭐ ดาวราว 3.5k และ fork 171 ข้อมูล ณ 1 พ.ย. 2026
• 🆕 โปรเจกต์นี้เพิ่งถูกสร้างขึ้นเมื่อวันที่ 29 ต.ค. 2026 และ push ล่าสุดเมื่อ 1 พ.ย. 2026 ถือว่าสดมาก ๆ ตอนนี้มี open issues อยู่ 1 รายการ
• 📜 License คือ CC BY 4.0 และ repo บอกว่าใช้ได้เชิงพาณิชย์ แต่ต้องให้เครดิต Damir Sokolovsky (@heydamir) พร้อมลิงก์กลับมาที่ repo นี้ทุกครั้งที่นำไปใช้ แก้ไข หรือแชร์
• 💰 การ generate ภาพผ่าน image service อาจมีค่าใช้จ่าย ตาม README มันจะโชว์ prompt และถามก่อนทุกครั้งที่ generation จะเสียเงิน ถ้ายังไม่มี service เชื่อมต่ออยู่ก็จะช่วยเสนอตั้งเป็น MCP server ให้ (และ dashboard กับ app ส่วนใหญ่ไม่จำเป็นต้องใช้ภาพเลย)
• 🛠️ ถ้าไม่อยากทำเอง เจ้าของ repo มีบริการ unslop หน้าจอหลักให้เสร็จภายใน 3 วันที่ heydamir.design/unslop

🔗 https://github.com/heydamir/unslop

ข้อมูลจาก GitHub ณ 1 พ.ย. 2026: ⭐ 3,455 | ภาษา JavaScript | license CC-BY-4.0