รีวิว Hallmark — skill ออกแบบหน้าเว็บที่ไม่ยอมให้ดูเหมือน AI ทำ
ข้อมูล Repo
Nutlope/hallmark- ภาษา
- CSS
- ดาว
- 33,732
- สร้างเมื่อ
- แก้ไขล่าสุด
เปลี่ยนสถานะผ่าน API: PATCH /api/reports/b93218da-96eb-4e97-8c88-48cb94428d02
แคปชันสำหรับ Facebook
ให้ AI ทำหน้าเว็บทีไร หน้าตาออกมาเหมือนกันหมด ลองตัวนี้ครับ 🎨 Hallmark เป็น design skill จาก Together AI ใช้ได้กับ Claude Code, Codex, Cursor และ OpenCode ตั้งใจทำหน้าเว็บที่ไม่ดูเหมือน AI ทำ ✅ มี 48 ธีม เลือกมาให้ 3 แบบที่เข้ากับ prompt ✅ จัดหน้าตามงานจริง หน้าจองก็ให้จอง หน้าร้านก็ให้ขาย ✅ ตรวจหน้าเว็บในเบราว์เซอร์จริงที่ 8 ความกว้าง จับจุดที่ดูเป็น AI สำเร็จรูป ✅ สั่ง redesign หน้าเดิมได้โดยเนื้อหาและลิงก์ไม่หาย หรือสั่ง audit อย่างเดียวก็ได้ ✅ ฟรี license MIT ติดตั้งคำสั่งเดียวผ่าน npx เหมาะกับคนที่ใช้ AI agent ทำ landing page แล้วอยากได้งานที่มีคาแรกเตอร์ 🔗 https://github.com/Nutlope/hallmark #ClaudeCode #WebDesign #AISkills #Frontend #OpenSource
ภาพปกแบบ HTML สด
แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที
สไตล์ Easy AI
1080×1350แก้ไข 2026-10-26
สไตล์ easy-app
1080×1350แก้ไข 2026-10-26
สรุป
Hallmark จาก Together AI เป็น design skill สำหรับ Claude Code, Codex, Cursor และ OpenCode เลือกธีมจาก 48 แบบ จัดหน้าตามงานจริงของเว็บ แล้วตรวจในเบราว์เซอร์จริงเพื่อจับจุดที่ดูเหมือน AI ทำ มีโหมด redesign และ audit หน้าเดิมด้วย license MIT
คืออะไร
Hallmark เป็น design skill สำหรับ Claude Code, Codex, Cursor และ OpenCode ที่ตั้งใจทำหน้าเว็บให้ "ไม่ดูเหมือน AI ทำ" ผลงานจาก Together AI
วิธีคิดของมันคือวางเกณฑ์ขั้นต่ำที่ห้ามหลุด แล้วปล่อยให้งานออกแบบเดินต่อเอง โดยเลือกธีมมาให้ 3 แบบจากแคตตาล็อก 48 ธีม จัดหน้าตามสิ่งที่ผู้เข้าชมมาทำ แล้ว lint ผลลัพธ์ในเบราว์เซอร์จริงเพื่อจับจุดที่ดูเหมือนเครื่องทำ เช่น ป้ายเล็ก ๆ เหนือทุกหัวข้อ ตัวพิมพ์ใหญ่ถ่างห่าง คำเดียวในหัวข้อที่ใส่สี หรือฟอร์มที่ขึ้นขอบคุณทั้งที่ไม่ได้ส่งอะไรจริง สุดท้ายมี reviewer ที่ไม่เห็นบริบทเดิมมาตัดสินอีกรอบ
จุดเด่น
- 🎨 48 ธีม แต่ละธีมเป็น "วัสดุ" (กระดาษ ฟอนต์ สี พื้นผิว คอมโพเนนต์) ไม่ได้กำหนดว่าหน้าต้องมีอะไร prompt ต่างกันในธีมเดียวกันจึงได้หน้าคนละแบบ
- 🧱 เกณฑ์แบ่งเป็นชั้น: Floor ห้ามหลุดเด็ดขาด (contrast, focus, reduced motion, ข้อมูลที่แต่งขึ้น, layout มือถือพัง), Reflex คือนิสัยที่โมเดลชอบทำ ปลดได้ถ้ามีเหตุผล และ Finish เป็นรายละเอียดงานฝีมือที่ไม่บล็อกการส่งงาน
- 🛒 จัดหน้าจากงานจริง หน้าจองก็ให้จอง หน้าร้านก็ให้ขาย ปุ่มหลักอยู่ตรงที่ควรอยู่
- 📸 ชี้ไปที่ URL, dev server หรือแอป แล้วมันถ่าย screenshot ของสินค้าจริงเอง และมีคลังรูปถ่ายที่เปิดสิทธิ์ใช้งาน 755 รูปพร้อมใส่เครดิตบนหน้า
- 🔁 สั่ง
/hallmark redesignเพื่อรื้อหน้าเดิมโดยเก็บเนื้อหาและการเชื่อมต่อไว้ หรือ/hallmark auditเพื่อรายงานอย่างเดียว - 🧪
sloplintเช็กหน้าเว็บที่ 8 ความกว้าง และตอน redesign จะเก็บลิงก์ ฟิลด์ handler และหัวข้อไว้ก่อน ถ้าอะไรหายไปจะไม่ผ่าน
เหมาะกับใคร
- คนที่ใช้ AI coding agent ทำ landing page แล้วเบื่อหน้าตาแบบ "AI สำเร็จรูป"
- ฟรีแลนซ์หรือทีมเล็กที่อยากได้หน้าเว็บที่มีคาแรกเตอร์โดยไม่ต้องจ้างดีไซเนอร์ทุกงาน
- คนที่อยากให้ agent ตรวจหน้าเว็บเดิม (audit) ก่อนตัดสินใจรื้อใหม่
เริ่มต้นใช้งาน
ต้องมี Node 18 ขึ้นไป ติดตั้งแบบใช้ได้ทุกโปรเจกต์:
npx skills add nutlope/hallmark -g
ไม่ใส่ -g จะติดตั้งเฉพาะโปรเจกต์ปัจจุบัน แล้วเรียกใช้ใน Claude Code, Cursor หรือ OpenCode ด้วย /hallmark <prompt> (ใน Codex ใช้ $hallmark <prompt>) ส่วนงานหน้าเดิมสั่งแบบนี้:
/hallmark redesign ./src/app
/hallmark audit ./index.html
ถ้าอยากให้เช็กในเบราว์เซอร์และถ่าย screenshot ได้ด้วย ต้องติดตั้ง npm i -g puppeteer-core และมี Chrome ถ้าไม่มี จะยังรันได้เฉพาะการเช็กแบบ static
ข้อควรรู้
- License MIT ส่วนรูปในคลังเป็นรูปจาก Wikimedia Commons ที่แต่ละรูปมีสิทธิ์ของตัวเอง (CC0, public domain, CC BY หรือ CC BY-SA) และ Hallmark ใส่เครดิตให้ทุกรูปที่ใช้
- โปรเจกต์สร้างเมื่อ 27 เม.ย. 2026 ตอนนี้เป็น v2 และ push ล่าสุด 23 ต.ค. 2026
- ผลงานแต่ละหน้าเป็น HTML กับ CSS แบบไฟล์เดียวจบ ถ้าโปรเจกต์เป็น framework ควรเช็กว่าผลลัพธ์เข้ากับโครงที่ใช้อยู่
- ถ้า skill ไม่ทำงานเอง ให้เรียกชื่อตรง ๆ เช่น "use hallmark to build ..."
🔗 https://github.com/Nutlope/hallmark
ข้อมูลจาก GitHub ณ 26 ต.ค. 2026: ⭐ 33,732 | ภาษา CSS | license MIT