รีวิว Oil UI — skill ออกแบบหน้าเว็บให้ AI agent เสนอหลายแนวให้เลือก แล้วเกลาจากภาพหน้าจอจริง
ข้อมูล Repo
oil-oil/oil-ui- ภาษา
- Python
- ดาว
- 2,096
- สร้างเมื่อ
- แก้ไขล่าสุด
เปลี่ยนสถานะผ่าน API: PATCH /api/reports/bbe54489-b064-4b30-905c-f5ef03b4db91
แคปชันสำหรับ Facebook
สั่ง AI ทำเว็บทีไร ได้หน้าตาเหมือนกันทุกที ลองตัวนี้ครับ 🎨 Oil UI คือ skill ออกแบบหน้าเว็บให้ Claude Code, Codex และ agent อื่น ๆ คิดแบบนักออกแบบตัวจริง ✅ ศึกษาประเภทสินค้าและคู่แข่งก่อนลงมือวาด ✅ เสนอหลายแนวที่ต่างกันจริง วางเทียบบนหน้าเดียวให้เรากดเลือก ✅ เกลาต่อจากภาพหน้าจอจริง ทั้งคอมและมือถือ ✅ ใช้ได้กับเว็บ แอป dashboard และ component ติดตั้งคำสั่งเดียว npx skills add oil-oil/oil-ui ใช้ได้เลยไม่ต้องตั้งค่า 🔗 https://github.com/oil-oil/oil-ui #AIAgent #UIDesign #ClaudeCode #WebDesign
ภาพปกแบบ HTML สด
แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที
สไตล์ Easy AI
1080×1350แก้ไข 2026-10-25
สไตล์ easy-app
1080×1350แก้ไข 2026-10-25
สรุป
Oil UI เป็น skill ออกแบบ UI สำหรับ AI agent อย่าง Claude Code และ Codex ที่ไม่ทำหน้าตาแบบเดิม ๆ แต่ศึกษาประเภทสินค้าก่อน เสนอแนวออกแบบที่ต่างกันจริงหลายแบบบนหน้าเปรียบเทียบให้เราเลือก แล้วเกลาต่อจากภาพหน้าจอจริงทั้ง desktop และมือถือ ใช้ได้กับเว็บ แอป dashboard และ component ติดตั้งคำสั่งเดียว (MIT)
คืออะไร
Oil UI คือ skill ออกแบบหน้าตา (interface design) สำหรับ AI agent มันจะสำรวจแนวออกแบบที่ต่างกันจริง ๆ หลายแบบวางเทียบกัน ให้เราเลือกหนึ่งแบบ แล้วเกลาต่อโดยดูจากภาพหน้าจอจริง ใช้ได้ทั้งเว็บไซต์ แอป dashboard และ component ดูตัวอย่างงานได้ที่ ui.oiloil.org
จุดเด่น
- เข้าใจสินค้าก่อนวาด: บอกได้ว่าสินค้าอยู่หมวดไหน หาคู่แข่ง 2 ถึง 3 รายที่สไตล์โดดเด่นที่สุดมาดูว่าเขาทำอะไรและทำไม แล้วตัดสินใจว่าจะเก็บอะไร เปลี่ยนอะไร
- เปลี่ยนคำกว้าง ๆ อย่าง "ดูพรีเมียม" หรือ "คลีน" ให้เป็นการตัดสินใจที่เห็นได้จริง เช่น ใช้ฟอนต์อะไร เว้นที่ว่างเท่าไร ใช้สีมากแค่ไหน
- แต่ละแนวต้องต่างกันจริง: ใน 4 เรื่องคือ layout ตัวอักษร สี และภาพหลัก สองแนวใด ๆ ซ้ำกันได้ไม่เกินหนึ่งเรื่อง ถ้าหน้าแรกดูคล้ายกันจะเปลี่ยน layout ไม่ใช่แค่สลับสี
- ทำให้มี "จังหวะที่คนจำได้" แค่หนึ่งหรือสองจุด เช่น ตอนกดปุ่ม ตอนจ่ายเงินสำเร็จ หรือหน้า 404 ส่วนอื่นเรียบไว้
- มีหน้าเปรียบเทียบสไตล์ในตัว วาง HTML รูป หรือหน้า dev ที่รันอยู่ไว้เทียบกัน สลับขนาด desktop กับมือถือได้ กด "Select" แบบที่ชอบแล้วเอาประโยคที่ copy ไปวางให้ agent ทำต่อ
- เสร็จแล้วเปิดหน้าจริงทั้ง desktop และมือถือเพื่อตรวจภาพหน้าจอ และปิดท้ายด้วยรอบ "ตัดออก" ให้แต่ละหน้ามีจุดเด่นจุดเดียว
เหมาะกับใคร
- คนที่ใช้ AI เขียนเว็บแล้วได้หน้าตาเหมือน ๆ กันทุกครั้ง อยากได้ดีไซน์ที่มีเอกลักษณ์
- นักพัฒนาที่อยากได้ทางเลือกดีไซน์หลายแบบมาเทียบก่อนลงมือจริง
- คนที่อยากให้ agent รีวิวหน้าเดิม หรือทำหน้าใหม่จากภาพหน้าจอพร้อมเวอร์ชันมือถือ
เริ่มต้นใช้งาน
พิมพ์ในเทอร์มินัล
npx skills add oil-oil/oil-ui
หรือสั่ง agent ที่ติดตั้ง skill ได้ว่า Install this skill for me: run npx skills add oil-oil/oil-ui ติดตั้งแล้วใช้ได้ทันที ไม่ต้องตั้งค่า
จากนั้นบอกสิ่งที่ต้องการ เช่น "Use oil-ui to explore a few design directions for this course booking product and build pages I can preview." ไฟล์ร่างและภาพหน้าจอจะเก็บในโฟลเดอร์ .oil-ui ของโปรเจกต์ ส่วนโค้ดจริงเขียนกลับเข้าโปรเจกต์ตามแบบแผนเดิม
ข้อควรรู้
- License: MIT
- เวอร์ชันโอเพนซอร์สเน้นทำหน้าใหม่จากศูนย์ให้สวย ส่วนงานด้าน usability ฟอร์ม dialog dashboard และการปรับโปรเจกต์เดิมแบบเต็มรูปแบบอยู่ในรุ่น Oil UI Pro ที่ขาย 9.99 ดอลลาร์ (จ่ายครั้งเดียว)
- ถ้ามี Pro อยู่แล้วไม่ต้องลงตัวนี้ ลงทั้งคู่จะแย่งงานกัน
- skill จะเช็กเวอร์ชันใหม่ออนไลน์ไม่เกินทุก 10 นาที อ่านแค่รายการเวอร์ชันสาธารณะ ไม่อัปโหลดอะไรจากโปรเจกต์ ปิดได้ด้วย
OIL_NO_UPDATE_CHECK=1และต้องมี Python 3 - ความสดใหม่: สร้างเมื่อ 30 ก.ย. 2026 push ล่าสุด 24 ต.ค. 2026 มี issue เปิดอยู่ 1 รายการ
🔗 https://github.com/oil-oil/oil-ui
ข้อมูลจาก GitHub ณ 25 ต.ค. 2026: ⭐ 2,096 | ภาษา Python | license MIT