เครื่องมือ CLI ตัวเดียวที่สกัดดีไซน์ทั้งเว็บออกมาเป็นไฟล์ ให้ Claude Code สร้าง UI ตรงแบบเป๊ะ

โดย Nokka (นก-กา) | 11 กันยายน 2026

บทความนี้เขียนโดย AI (deepseek-v4.1-flash) ผ่าน Hermes Agent ตรวจสอบและเรียบเรียงโดย Nokka

โพสต์หนึ่งจาก Tom Dörr ที่มีผู้ติดตามสาย AI coding จำนวนมาก อธิบายเครื่องมือตัวหนึ่งสั้น ๆ ว่า "สกัดระบบดีไซน์ทั้งชุด ทั้งสี ตัวอักษร และคอมโพเนนต์ จากเว็บไซต์ออกมาเป็นรูปแบบที่ Claude Code อ่านได้ เพื่อสร้าง UI ให้ตรงแบบเป๊ะ" [1]

ปัญหาที่เครื่องมือนี้แก้คือความหงุดหงิดที่นักพัฒนาสาย AI เจอกันทุกวัน เมื่อสั่งให้ AI เขียนหน้าจอตามแบบที่มีอยู่ มันมักได้แค่ "โทนใกล้เคียง" แต่ไม่ตรง ทั้งเฉดสี ห่างบรรทัด และรูปทรงปุ่ม งานที่ได้จึงต้องมานั่งแก้ด้วยมืออยู่ดี

ตัวเลขที่ทำให้ต้องมอง

บน GitHub โปรเจกต์ชื่อ npxskillui (หรือ SkillUI) มีดาว 1,900 ดวง ถูก fork ไป 203 ครั้ง ใช้สัญญาอนุญาต MIT และเปิดโค้ดทั้งหมด [2]

ขนาดของโปรเจกต์ไม่ได้ใหญ่อะไร มีไฟล์ไม่กี่ไฟล์ แต่แนวคิดข้างในคือสิ่งที่ทำให้มันน่าสนใจ

วิธีทำงาน: วิเคราะห์สถิต ไม่ใช้ AI เลย

จุดที่ทำให้เครื่องมือนี้ต่างจากตัวช่วยสร้าง UI อื่นในตลาดคือมันไม่เรียกโมเดล AI ในกระบวนการสกัดข้อมูลเลย ทั้งหมดเป็นการวิเคราะห์โค้ดตรง ๆ [2]

โหมดการทำงานมีสี่แบบ

URL mode ดึงหน้าเว็บมา แล้วไล่เก็บไฟล์ CSS ที่เชื่อมโยงทั้งหมด จากนั้นใช้ Playwright เปิดหน้าเว็บจริงเพื่ออ่านค่าที่เบราว์เซอร์คำนวณออกมา ไม่ใช่ค่าที่เขียนไว้ในไฟล์

Dir mode สแกนโฟลเดอร์โปรเจกต์ หาไฟล์ CSS, SCSS, TypeScript, JSX เพื่อดึงตัวแปรดีไซน์ ค่าตั้งต้นของ Tailwind และรูปแบบคอมโพเนนต์ที่ใช้ซ้ำ

Repo mode โคลนโปรเจกต์จาก Git ลงโฟลเดอร์ชั่วคราว แล้วรันโหมด Dir กับมัน

Ultra mode ใช้ Playwright เก็บภาพตอนเลื่อนหน้าจอ ตรวจจับไลบรารีแอนิเมชันจากตัวแปรส่วนกลางของเบราว์เซอร์ ดึงคีย์เฟรมจากสไตล์ชีต และเก็บความต่างของสถานะตอนวางเมาส์กับตอนโฟกัส

ผลลัพธ์ที่ได้คือโฟลเดอร์ ไม่ใช่รายงาน

จุดที่ทำให้เครื่องมือนี้ทำงานร่วมกับ Claude Code ได้คือรูปแบบผลลัพธ์ มันไม่ได้พิมพ์รายงานให้อ่าน แต่สร้างโฟลเดอร์ที่ประกอบด้วยไฟล์ SKILL.md, CLAUDE.md, DESIGN.md, ไฟล์โทเคนดีไซน์ ภาพหน้าจอ และไฟล์ ZIP นามสกุล .skill [2]

ความหมายคือเปิดโฟลเดอร์นั้นแล้วพิมพ์คำสั่ง claude ได้เลย ผู้ช่วยจะอ่านไฟล์เหล่านี้โดยอัตโนมัติและรู้ระบบดีไซน์ที่ต้องใช้โดยไม่ต้องอธิบายซ้ำ

การสาธิตบนหน้าโปรเจกต์เล่าว่าทีมงานสร้างหน้าแลนดิ้งของ Notion ใหม่ได้ด้วยคำสั่งบรรทัดเดียว [2]

ใครได้ประโยชน์จริง และใครไม่ต้องเสียเวลา

สถานการณ์	เหมาะกับ SkillUI หรือไม่
ทำเว็บใหม่ให้ตรงแบรนด์ที่มีคู่มือดีไซน์อยู่แล้ว	เหมาะมาก สกัดจากเว็บต้นแบบแล้วสั่งได้ทันที
รับงานต่อจากโปรเจกต์เก่าที่ไม่มีเอกสาร	เหมาะ รันโหมด Dir กับโค้ดเดิมได้เลย
ทำโปรโตไทป์เร็ว ๆ แบบไม่สนแบรนด์	ไม่จำเป็น เครื่องมือทั่วไปเร็วกว่า
เว็บที่ใช้ CSS-in-JS ซับซ้อนหรือ Shadow DOM	ต้องทดสอบก่อน ผลลัพธ์อาจไม่ครบ
ต้องการแค่แก้สีไม่กี่จุด	เปิด DevTools ดูเองเร็วกว่า

ข้อควรระวังก่อนใช้

หนึ่ง ผลลัพธ์ขึ้นกับคุณภาพโค้ดต้นทาง ถ้าเว็บต้นแบบเขียน CSS แบบกระจัดกระจายไม่มีระบบ เครื่องมือก็สกัดได้เท่าที่มี ไม่ใช่สร้างระบบดีไซน์ใหม่ขึ้นมาเอง

สอง โหมด Ultra ต้องติดตั้ง Playwright และดาวน์โหลด Chromium เพิ่ม ซึ่งใช้พื้นที่และเวลาติดตั้งมากกว่าโหมดอื่น

สาม การสกัดดีไซน์จากเว็บคนอื่นแล้วเอามาสร้างเว็บตัวเองเป็นเรื่องที่ต้องคิดให้ดีทางกฎหมายและจริยธรรม โทเคนดีไซน์บางอย่างเช่นชุดสีเฉพาะอาจมีเครื่องหมายการค้าคุ้มครองอยู่ การใช้เพื่อเรียนรู้อัตลักษณ์แบรนด์ของตัวเองเป็นเรื่องหนึ่ง การลอกหน้าตาคู่แข่งออกมาทั้งดุ้นเป็นอีกเรื่อง

สี่ เครื่องมือนี้ไม่ได้ช่วยเรื่องโครงสร้างโค้ดที่ดี มันให้ข้อมูลหน้าตา แต่คุณภาพการจัดวางคอมโพเนนต์ยังขึ้นกับผู้ที่สั่งงานอยู่ดี

มุมมองจากคนที่ใช้ AI เขียนโค้ดทุกวัน

ในฐานะคนที่ทำงานกับผู้ช่วย AI ทุกวัน ผมพบว่าอุปสรรคใหญ่ที่สุดไม่ใช่ความสามารถของโมเดล แต่คือช่องว่างของบริบท

โมเดลไม่รู้ว่าโปรเจกต์ของเราใช้เฉดสีอะไร ปุ่มมีรัศมีมุมกี่พิกเซล หรือระยะห่างระหว่างการ์ดเป็นเท่าไร ถ้าไม่บอก ทุกครั้งมันจะเดาใหม่ ผลลัพธ์จึงไม่คงที่ วันที่สร้างห้าหน้าจอ ก็จะได้ห้าแบบที่ไม่เหมือนกัน

เครื่องมืออย่าง SkillUI แก้ปัญหานี้ที่ราก คือแปลงความรู้ที่อยู่ในหัวคนออกมาเป็นไฟล์ที่เครื่องอ่านได้ หลักการเดียวกันนี้ใช้ได้กับการเขียนคอนเทนต์ด้วย เช่นการทำคู่มือเสียงของแบรนด์เป็นไฟล์ให้ AI อ่านก่อนเขียนทุกครั้ง

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

แหล่งอ้างอิง

[1] Dörr, T. (@tom_doerr), โพสต์เกี่ยวกับเครื่องมือสกัด design system, X (11 ก.ย. 2026), https://x.com/tom_doerr/status/2098224649762984168

[2] amaancoderx, "npxskillui: Reverse-engineer any design system into a Claude-ready skill" (MIT, v1.3.4), https://github.com/amaancoderx/npxskillui