Hallmark สกิลออกแบบสำหรับ Claude Code · Cursor · Codex ที่ตรวจ 57 ข้อไม่ให้เว็บดูเหมือนงาน AI
Hallmark เป็นสกิลออกแบบสำหรับ Claude Code · Cursor · Codex ที่เลือกโครงหน้าและธีมให้เข้ากับโจทย์ แต่ละงาน แล้วตรวจ 57 ข้อก่อนส่งงานกลับมา สิ่งที่เอาไปใช้ได้ทันทีคือหลักสังเกตกลิ่น AI ในงานออกแบบ แม้ยังไม่ได้ติดตั้งอะไรเลย

Hallmark เป็นสกิล คือชุดกฎและตัวอย่างที่ติดตั้งเพิ่มให้ AI อ่านก่อนลงมือเขียนโค้ด เขียนขึ้นมาแก้อาการเดียว คืออาการเปิดหน้าเว็บขึ้นมาแล้วรู้ทันทีว่างานนี้ AI ทำ ทั้งที่ชี้ไม่ถูกว่ารู้ได้จากตรงไหน หน้านั้นไม่ได้น่าเกลียด สีเรียบร้อย ฟอนต์อ่านง่าย ปุ่มอยู่ในตำแหน่งที่ควรอยู่ แต่พอมองรวมๆ กลับเหมือนอีกหลายสิบหน้าที่เพิ่งเลื่อนผ่านมา จนไม่เหลืออะไรให้จำ
สกิลนี้เป็นแนวเดียวกับสกิลทำสไลด์สำหรับ Claude Code ใช้ได้กับ Claude Code · Cursor · Codex ทั้งสามตัวนี้คือเครื่องมือที่สั่ง AI ให้เขียนโค้ดในเครื่องเราได้โดยตรง คนสร้างคือทีม Together AI เปิดซอร์สด้วยสัญญาอนุญาต MIT เอาไปใช้และแก้ต่อได้ฟรี ติดตั้งจบในคำสั่งเดียว ข้างในมีธีมให้เลือก 20 แบบ กับข้อตรวจกลิ่น AI อีก 57 ข้อที่งานต้องผ่านก่อนถึงจะส่งกลับมาให้เรา
ของที่หยิบไปใช้ได้จริงไม่ได้มีแค่ตัวเครื่องมือ แต่เป็นนิยามที่มันใช้ตัดสินว่าอะไรคือกลิ่น AI พอรู้ว่ามันมองหาอะไร เปิดงานเก่าที่เคยให้ AI ทำไว้ก็เห็นปัญหาด้วยตาตัวเองแล้ว ทั้งที่ยังไม่ได้ติดตั้งอะไรเลย
ความจืดเกิดจากสิ่งที่โมเดลเรียนรู้จนใช้เป็นค่าเริ่มต้น
หน้าโครงการของ Hallmark สรุปตัวเองไว้ประโยคหนึ่งว่า สกิลนี้ปฏิเสธค่าเริ่มต้นที่โมเดลภาษาทุกตัวเรียนรู้มา
โมเดลภาษาทำงานด้วยการเลือกคำตอบที่มีโอกาสมากที่สุด พอเอามาทำงานออกแบบ คำตอบที่มีโอกาสมากที่สุดก็คือหน้าเว็บกลางๆ ของทุกหน้าที่มันเคยเห็นมา ผลที่ได้จึงไม่ใช่งานที่ผิด แต่เป็นงานค่าเฉลี่ย และความเป็นค่าเฉลี่ยนี่เองที่ทำให้ดูออกว่าเป็นงาน AI
ปัญหาอีกครึ่งหนึ่งอยู่ที่โจทย์ที่เราป้อนเข้าไป สั่งไปว่าทำหน้าเว็บให้ร้านกาแฟหน่อย เท่ากับไม่ได้บอกสักคำว่าทำไมมันต้องเลือกทางอื่นแทนทางที่ปลอดภัยที่สุด มันเลยหยิบของที่คุ้นมือกลับมาให้ ไม่ใช่เพราะออกแบบไม่เป็น แต่เพราะไม่มีใครบอกว่าอะไรคือสิ่งที่ต้องเลี่ยง
AI slop หน้าตายังไง ส่องงานตัวเองด้วยสามคำถาม

คำว่า AI slop ใช้เรียกงานที่ AI ผลิตออกมาตามค่าเริ่มต้น โดยไม่มีใครตัดสินใจอะไรให้มันเลย ในงานออกแบบ อาการนี้จับได้ด้วยคำถามสามข้อ หยิบงานที่มีอยู่แล้วมาตอบได้เลยทันที
คำถามแรก โครงหน้ามาจากโจทย์ หรือมาจากความเคยชิน โครงหน้าคือลำดับว่าอะไรอยู่ตรงไหน อะไรมาก่อนอะไร Hallmark เรียกมันว่า macrostructure และเลือกใหม่ทุกครั้งให้เข้ากับโจทย์ตรงหน้า เลือกเสร็จยังเขียนกำกับไว้ในคอมเมนต์ของไฟล์ CSS ด้วยว่าหน้านี้ใช้โครงแบบไหน ส่วนวิธีตรวจงานตัวเอง ให้ชี้ไปทีละส่วนแล้วถามว่าทำไมส่วนนี้ต้องอยู่ตรงนี้ ถ้าตอบได้แค่ว่าเว็บอื่นก็วางแบบนี้ แปลว่าไม่มีใครเลือกมันเลย
คำถามที่สอง สลับแบรนด์แล้วหน้ายังใช้ได้เหมือนเดิมไหม ข้อนี้ตรวจง่ายที่สุด ลองเปลี่ยนชื่อร้าน เปลี่ยนข้อความ เปลี่ยนสีหลักของหน้า ถ้าหน้าเดิมกลายเป็นเว็บของธุรกิจคนละประเภทได้เลยโดยไม่ต้องขยับโครงสักนิด แปลว่าโครงนั้นไม่เคยมาจากโจทย์ของเราตั้งแต่แรก Hallmark ก็ใช้เกณฑ์นี้กับตัวเอง หน้าเว็บสองหน้าที่มาจากโจทย์คนละแบบต้องรู้สึกเหมือนคนละเว็บ ไม่ใช่เว็บเดิมที่เปลี่ยนสี
คำถามที่สาม มีอะไรบนหน้าที่ทำมาเพื่องานนี้โดยเฉพาะไหม งานที่มีตัวตนมักมีรายละเอียดที่ยกไปใส่งานอื่นไม่ได้ อย่างหน้าเว็บงานพิมพ์ที่บอกจำนวนสีกับน้ำหนักกระดาษไว้ตรงมุมภาพ หรือเมนูชาที่จัดเป็นตารางตามวิธีผลิตใบชาแทนที่จะไล่เป็นรายการราคา ไล่ดูทั้งหน้าแล้วไม่เจอรายละเอียดแบบนี้สักจุด งานนั้นก็ยังไม่ได้เป็นของใคร
รายการเต็มว่า Hallmark ตรวจอะไรบ้างอยู่ในตัวสกิล หน้าโครงการบอกไว้แค่จำนวนว่า 57 ข้อ ไม่ได้กางออกมาให้ดูทั้งหมด อยากเห็นรายการที่ตรงกับงานของเรา มีทางเดียวคือสั่งให้มันตรวจงานชิ้นนั้น
20 ธีมกับ 57 ข้อตรวจ ทำงานกันยังไง

สั่งให้สร้างงานใหม่ทีหนึ่ง Hallmark จะทำงานเรียงกันสามจังหวะ จังหวะแรกเลือกโครงหน้าให้เข้ากับโจทย์ จังหวะที่สองหยิบธีมจากแคตตาล็อก 20 แบบมาแต่งหน้าตา
จังหวะสุดท้ายคือรันข้อตรวจ 57 ข้อ แล้วปิดท้ายด้วยการวิจารณ์งานตัวเองอีกรอบก่อนส่งกลับมา งานที่ยังไม่ผ่านจึงมาไม่ถึงมือเรา
ผลก็คือพอโจทย์ต่างกัน หน้าเว็บออกมาคนละโลกกันจริงๆ ตัวอย่างแรกชื่อ Tally โจทย์เป็นระบบ SaaS พูดง่ายๆ คือซอฟต์แวร์แบบสมัครสมาชิกที่วางบิลตามการใช้งานจริง ธีมที่ได้คือ modern-minimal สะอาดตา มีการ์ดใบแจ้งหนี้เป็นตัวเอกของหน้า
อีกตัวอย่างคือ Cold Snap โจทย์เป็นค่ายเพลงที่กำลังปล่อยงานชุดใหม่ ธีมที่ได้คือ Carnival เล่นตัวอักษรใหญ่เต็มหน้า สีเหลืองตัดกับน้ำตาลเข้ม แล้วมีแถบข้อความวิ่งแบบใบปิดคอนเสิร์ต สองหน้านี้มาจากสกิลตัวเดียวกัน แต่แทบไม่เหลือร่องรอยว่ามาจากแม่แบบเดียวกัน
งานที่ได้ออกมาเป็นไฟล์เดียว มี HTML กับ CSS อยู่ในนั้นครบ ไม่ต้องพ่วงอะไรเพิ่ม เปิดดูเองหรือส่งต่อให้คนอื่นได้ทันที แล้วยังย้อนดูได้ด้วยว่าหน้านั้นเลือกโครงแบบไหน เพราะมันเขียนกำกับไว้ในคอมเมนต์ให้แล้ว ใครอยากกวาดตาดูทั้งชุดก่อนติดตั้ง เข้าไปที่ usehallmark.com แล้วกดปุ่ม T สลับธีมดูทีละแบบได้
ถ้าโจทย์มีแนวทางเฉพาะตัวจนไม่มีธีมไหนในแคตตาล็อกรับไหว Hallmark จะสลับไปโหมด Custom ออกแบบใหม่ตั้งแต่ต้น ทั้งชุดสี ตัวอักษร และโครงหน้าของงานนั้น ข้อตรวจ 57 ข้อยังใช้ชุดเดิม ต่างกันแค่ตรงที่ไม่ได้หยิบแม่แบบไหนมาใช้เลย
โหมดนี้มีไว้ใช้เฉพาะตอนจำเป็น โจทย์ทั่วไปไม่ได้แตะมัน ตัวอย่างที่หน้าโครงการยกไว้มีทั้งเมนูชาที่จัดเป็นตารางแทนรายการ ใบปลิวร้านซ่อมของ กับหน้าจองตั๋วรถไฟตู้นอนที่ทำทั้งหน้าให้เหมือนตั๋วจริงหนึ่งใบ ไล่เวลาจอดแต่ละสถานีลงมา แล้วมีตราประทับกำกับอยู่มุมบน
สี่คำสั่ง ควรลองคำสั่งไหนก่อน
Hallmark มีคำสั่งอยู่สี่แบบ แต่ละแบบตอบคนละสถานการณ์
| คำสั่ง | ใช้ตอนไหน |
|---|---|
| ค่าเริ่มต้น ไม่ต้องพิมพ์คำสั่งอะไรเพิ่ม | ตอนเริ่มงานใหม่จากศูนย์ มันจะเลือกโครงหน้า ใช้ชุดกฎ แล้วตรวจก่อนส่งงาน |
hallmark audit <target> | ตอนมีโค้ดอยู่แล้วและอยากรู้ว่าตรงไหนมีปัญหา |
hallmark redesign <target> | ตอนเนื้อหาใช้ได้แล้วแต่หน้าตายังจืด |
hallmark study <screenshot | URL> | ตอนมีงานที่ชอบอยู่ในใจแล้วอยากได้แนวทางแบบนั้น |
คำสั่งที่หยิบมาลองได้เร็วที่สุดคือ audit เพราะไม่ต้องเริ่มงานใหม่ ชี้ไปที่ไฟล์ที่ทำค้างไว้ได้เลย มันจะไล่ดูโค้ดเทียบกับรูปแบบที่ควรเลี่ยง ให้คะแนน แล้วส่งกลับมาเป็นรายการที่ต้องแก้ ที่ต้องรู้ไว้คือมันไม่แก้โค้ดให้ ส่งมาแค่รายการให้อ่าน ซึ่งกลายเป็นข้อดีสำหรับคนที่ยังไม่อยากให้ AI ไปยุ่งกับไฟล์จริง
redesign ต่างจาก audit ตรงที่ลงมือทำให้จริง มันทิ้งโครงเดิมทั้งหมด แต่เก็บข้อความ การจัดหมวดหมู่ข้อมูล และแบรนด์เดิมไว้ครบ แล้วสร้างหน้าใหม่ให้ออกมาคนละหน้าตากับของเดิม เหมาะกับงานที่เนื้อหาเรียบร้อยแล้ว เหลือแต่รูปแบบที่ยังไม่ไปไหน
ส่วน study เป็นคำสั่งที่พางานไปไกลกว่าแค่หนีความจืด คือทำให้งานเริ่มมีตัวตนของตัวเอง ชี้ไปที่ภาพหน้าจอหรือ URL ของงานที่ชอบ มันจะถอดแนวทางออกมาให้สามอย่าง โครงหน้า การจับคู่ตัวอักษร และแนวทางการใช้สีของงานนั้น สิ่งที่มันยืนกรานคือไม่ก๊อปต้นฉบับให้เหมือนทุกพิกเซล และไม่ดึงแม่แบบที่ต้องซื้อมาใช้ ผลที่ได้ยังส่งออกเป็นไฟล์ design.md เอาไปใช้ต่อกับ AI ตัวอื่นได้อีก
ติดตั้งด้วยคำสั่งเดียว
เปิด terminal แล้วพิมพ์บรรทัดนี้
npx skills add nutlope/hallmarkอยากอัปเดตเป็นเวอร์ชันล่าสุดเมื่อไหร่ก็รันซ้ำบรรทัดเดิมได้เลย ใครยังไม่เคยเปิด terminal มาก่อน เริ่มจาก Claude Code ให้คล่องก่อน แล้วค่อยย้อนกลับมาที่บรรทัดนี้ จะง่ายกว่ากันมาก
อีกทางคือคัดลอกไฟล์เข้าไปเอง Nutlope เผยแพร่โค้ดไว้บน GitHub ให้ดึงไฟล์ SKILL.md กับโฟลเดอร์ references/ มาวางตามตำแหน่งของแต่ละเครื่องมือ
- Claude Code วางที่
~/.claude/skills/hallmark/ - Cursor วางที่
.cursor/rules/hallmark.mdcเนื้อหาที่ใส่คือส่วนเนื้อของSKILL.mdไม่ต้องเอาส่วนหัวไฟล์มาด้วย - Codex วางที่
~/.codex/skills/hallmark/ถ้าอยากใช้ทุกโปรเจกต์ หรือ.codex/skills/hallmark/ถ้าอยากให้มีผลเฉพาะโปรเจกต์นั้น
ข้อควรรู้ก่อนคาดหวังผลลัพธ์
Hallmark ช่วยยกระดับงาน แต่ไม่ได้มาแทนคนออกแบบ มันตัดตัวเลือกที่จืดที่สุดทิ้งให้ ส่วนการตัดสินว่าอะไรเหมาะกับงานตรงหน้ายังเป็นงานของคน เส้นแบ่งตรงนี้เป็นเส้นเดียวกับที่ดีไซเนอร์ที่ใช้ Claude Code เจอในงานประจำวัน
ผ่านข้อตรวจครบทั้ง 57 ข้อก็ยังไม่ได้แปลว่าสวยหรือเข้ากับแบรนด์เรา ข้อตรวจพวกนี้ทำหน้าที่คัดงานที่ไม่พ้นค่าเฉลี่ยออกไปเท่านั้น ไม่ได้รับประกันว่าผลลัพธ์จะตรงกับรสนิยมของลูกค้าหรือตรงกับสิ่งที่แบรนด์อยากสื่อ ตรงนั้นยังเป็นเราที่ต้องดูเอง
อีกอย่างคือผลลัพธ์ยังขึ้นกับโจทย์ที่ป้อนเข้าไปมาก โจทย์หนึ่งบอกแค่ประเภทธุรกิจ อีกโจทย์บอกด้วยว่าลูกค้าเป็นใครและอยากให้รู้สึกยังไง งานที่ได้คุณภาพต่างกันชัดเจน สกิลช่วยเลือกทางให้ได้ก็จริง แต่มันเลือกจากข้อมูลเท่าที่เราให้ไปเท่านั้น
อยากรู้เร็วที่สุดว่าเรื่องนี้เกี่ยวกับงานเราแค่ไหน ให้เปิดหน้าเว็บที่เคยให้ AI ทำไว้สักหน้า แล้วสั่ง hallmark audit ดูสักครั้ง
รายการที่ส่งกลับมาจะดูเหมือนรายการข้อผิดพลาด แต่จริงๆ แล้วแต่ละบรรทัดกำลังชี้จุดที่ยังไม่มีใครตัดสินใจ และคนที่จะตัดสินใจก็ยังเป็นเราอยู่ดี
ที่มา: โปรเจกต์ Hallmark บน GitHub จาก Nutlope
ชอบเรื่องแนวนี้ มีอีบุ๊คฟรีให้อ่านต่อ
สร้าง Claude Skill แบบไม่ต้องรู้โค้ด คู่มือสร้าง Claude Skill ของคุณเองด้วยการคุยกับ Claude Code เป็นภาษาไทย
กดสมัครแล้วเราจะส่งเทคนิค AI และของแจกใหม่ๆ ให้ทางอีเมล เลิกรับได้ตลอด
Claude Cowork · The Business Playbook

ฉบับภาษาไทย 15 บท เรียนรู้ผ่านโปรเจกต์จำลองต่อเนื่องทั้งเล่ม ตั้งแต่ตั้งค่า Workspace จัดการไฟล์ เชื่อมแอป ตั้งระบบอัตโนมัติ จนถึงสร้าง Plugin

