รีวิว /awwwards — skill ที่สั่งประโยคเดียว ให้ AI agent ทำเว็บระดับประกวด พร้อมตรวจในเบราว์เซอร์จริง
ข้อมูล Repo
juliobsz/skills- ภาษา
- JavaScript
- ดาว
- 935
- สร้างเมื่อ
- แก้ไขล่าสุด
เปลี่ยนสถานะผ่าน API: PATCH /api/reports/a30b1812-1f12-4a14-9002-a451223e1b7c
แคปชันสำหรับ Facebook
พิมพ์ประโยคเดียว ได้เว็บสวยระดับประกวด ไม่ใช่เว็บหน้าตาเหมือนกันหมดแบบที่ AI ชอบทำครับ 🏆 /awwwards คือ skill ที่ให้ AI agent เป็นทั้งครีเอทีฟ ดีไซเนอร์ และโปรแกรมเมอร์ในตัว ✅ คิดคอนเซปต์ 3 แบบจากตัวตนของเรา แล้วเลือกแบบที่ดีที่สุด ✅ วางชุดสี ฟอนต์ และการเคลื่อนไหวให้เป็นระบบ ✅ ไม่มีข้อความมั่ว ๆ หรือรางวัลปลอม ✅ ถ่ายภาพหน้าจอตรวจเองทั้งคอมและมือถือ แก้จนทุกหมวดได้ 8/10 แถม /jury ให้คะแนนเว็บไหนก็ได้แบบกรรมการ ใช้ได้กับ Claude Code, Codex และ Antigravity 🔗 https://github.com/juliobsz/skills #AIAgent #WebDesign #ClaudeCode #Nextjs
ภาพปกแบบ HTML สด
แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที
สไตล์ Easy AI
1080×1350แก้ไข 2026-10-25
สไตล์ easy-app
1080×1350แก้ไข 2026-10-25
สรุป
/awwwards เป็น agent skill ที่รับคำสั่งประโยคเดียว แล้วให้ agent ทำหน้าที่ครีเอทีฟไดเรกเตอร์ ดีไซเนอร์ และนักพัฒนาในตัว คิดคอนเซปต์ 3 แบบ วาง design system เขียนเว็บด้วย Next.js หรือ Astro แล้วตรวจด้วยภาพหน้าจอเบราว์เซอร์จริงจนทุกหมวดได้ 8/10 มี /jury ให้คะแนนเว็บแบบกรรมการ Awwwards มาด้วย ใช้กับ Claude Code, Codex, Antigravity และอื่น ๆ (MIT)
คืออะไร
/awwwards คือ agent skill ที่สร้างเว็บระดับประกวดจากคำสั่งเดียว เช่นพิมพ์ว่า make me a portfolio, my name is Julio แค่นั้นพอ agent จะทำหน้าที่ครีเอทีฟไดเรกเตอร์ ดีไซเนอร์ และ creative developer ในตัว แล้วส่งเว็บที่ตรวจในเบราว์เซอร์จริงแล้วกลับมาให้
มาตรฐานที่ตั้งไว้คือระดับงานที่ได้ Site of the Day ของ Awwwards โดยไม่ต้องส่งประกวดจริง ใน repo เดียวกันยังมี /jury ที่ให้คะแนนเว็บไหนก็ได้แบบกรรมการ Awwwards
จุดเด่น
- แก้ปัญหาเว็บ AI หน้าตาเหมือนกันหมด (ไล่สีม่วง การ์ดสามใบ คำโปรยซ้ำ ๆ) ด้วยกระบวนการแทน
- คิดคอนเซปต์ 3 แบบจากคนละมุม เช่น ชื่อเรา งานที่ทำ หรือสถานที่ แล้วให้คะแนนความแปลกใหม่และความเข้ากัน
- วาง design system จริง ทั้งชุดสีตามหน้าที่ ฟอนต์ฟรีที่คัดมา grid และภาษาการเคลื่อนไหว เขียนลง
DESIGN.mdแล้วผ่าน "genericness test" ตัดอะไรที่ดูเหมือนโมเดลทั่วไปทำ - การเคลื่อนไหวใช้ GSAP, Lenis และ WebGL (OGL) เฉพาะที่จำเป็น มีจุดเด่นหนึ่งจุด ที่เหลือเรียบ
- ไม่มี lorem ipsum รางวัลปลอม หรือตัวเลขแต่งขึ้น อะไรที่สมมติจะทำเครื่องหมายเป็น placeholder และสรุปไว้ตอนท้าย
- รอบตรวจคุณภาพ: build จริง ไล่ตรวจ SEO, accessibility, น้ำหนักหน้า ถ่ายภาพหน้าจอทั้ง desktop มือถือ และโหมดลดการเคลื่อนไหว วัด LCP และ CLS บนมือถือที่จำลองเน็ตช้า แล้วให้ subagent ตัวใหม่ที่ไม่เคยเห็นแผนเป็นคนให้คะแนน แก้จนทุกหมวดได้ 8/10
- เลือก Next.js เป็นค่าเริ่มต้น Astro สำหรับเว็บโชว์ผลงานที่เน้นการเคลื่อนไหว หรือใช้ stack เดิมถ้ารันในโปรเจกต์ที่มีอยู่
- deploy ไป Vercel, Netlify หรือ Cloudflare ได้ แต่ต้องให้เรายืนยันก่อน
เหมาะกับใคร
- ฟรีแลนซ์ ดีไซเนอร์ หรือนักพัฒนาที่อยากได้เว็บพอร์ตโฟลิโอหรือหน้าเปิดตัวสินค้าที่ดูไม่ซ้ำใคร
- คนที่อยากให้คะแนนเว็บตัวเองหรือคู่แข่งด้วย /jury พร้อมรายการสิ่งที่ควรแก้เรียงตามคะแนนที่จะได้เพิ่ม
เริ่มต้นใช้งาน
npx skills add juliobsz/skills -g
เปิด session ใหม่ของ agent แล้วพิมพ์ /awwwards หรือขอเว็บตรง ๆ ได้เลย ถ้าอยากได้ภาพอธิบายแบบ isometric เพิ่ม ให้ลง npx skills add wheresryan22/anatomy -g ด้วย (ไม่บังคับ)
ใช้ /jury ได้แบบนี้
/jury https://your-site.com
ข้อควรรู้
- License: MIT
- ใช้เวลานานและกิน token เยอะ เพราะทำทั้งคอนเซปต์ design system build และตรวจแก้หลายรอบ
- ต้องมี Node 22.20 ขึ้นไปสำหรับ skills CLI, Playwright สำหรับภาพหน้าจอ และโมเดลที่อ่านภาพได้
- ผลลัพธ์ขึ้นกับโมเดล ผู้สร้างทดสอบกับ Claude Code, Antigravity และ Codex
- ถ้าไม่ใส่ข้อมูลจริง เว็บจะมี placeholder ที่เราต้องเติมเอง
- คะแนน /jury เป็นการประเมิน ไม่ได้เกี่ยวข้องกับ Awwwards และเทียบกับกรรมการจริงแค่ 2 เว็บ
- skills CLI เก็บข้อมูลการใช้งานแบบไม่ระบุตัวตน ปิดได้ด้วย
DISABLE_TELEMETRY=1หรือDO_NOT_TRACK=1 - ความสดใหม่: สร้างเมื่อ 12 ต.ค. 2026 push ล่าสุด 20 ต.ค. 2026 มี issue เปิดอยู่ 1 รายการ
🔗 https://github.com/juliobsz/skills
ข้อมูลจาก GitHub ณ 25 ต.ค. 2026: ⭐ 935 | ภาษา JavaScript | license MIT