Hallmark Skill คืออะไร? ทริคใช้ AI สร้าง UI ให้สวยขึ้น

Q: Hallmark Skill คืออะไร

[Hallmark](https://github.com/Nutlope/hallmark) เป็น Skill สำหรับ AI Coding Agent (รองรับ Claude Code, Cursor และ Codex) เขียนโดย Nutlope ปล่อยภายใต้ลิขสิทธิ์ MIT สิ่งสำคัญที่ต้องเข้าใจก่อนใช้งาน: Hallmark ไม่ใช่ Component Library และไม่มีโค้ดสำเร็จรูป แต่มันคือไฟล์คำสั่งชุดมาตรฐานที่ Agent ต้องอ่านและปฏิบัติตาม ตัวสกิลจะรันกระบวนการตั้งแต่ขั้นที่ 0 ถึงขั้นที่ 7 ตั้งแต่การอ่านบริบทโปรเจกต์, เลือกโครงหน้า, เลือกธีม, โหลดกฎที่จำเป็น, ประกาศสิ่งที่จะทำ, เขียนโค้ด และปิดท้ายด้วยการตรวจทาน 58 ข้อ

Q: วิธีติดตั้ง Hallmark ทำอย่างไร?

คำสั่งเดียว

Q: Hallmark ไม่เหมาะกับงานแบบไหน?

Hallmark ถูกออกแบบมาเพื่อจัดการ Visual & Interaction Layer เท่านั้น สิ่งที่ไม่เหมาะ: การแก้ปัญหาประเภท UX Flow, เมนูหาไม่เจอ, ฟอร์มยาวเกินไป หรือ Dashboard อัดแน่นจนอ่านไม่ออก เนื่องจาก Hallmark จะไม่แตะโครงสร้างข้อมูล (Data Structure) หรือการจัดระเบียบของแอปพลิเคชัน สิ่งที่ทำได้ดีมาก: ในระดับ Component เดี่ยว สกิลนี้เข้มงวดมาก โดยบังคับให้ออกแบบครอบคลุม 8 สถานะ (default, hover, focus, active, disabled, loading, error, success) และบังคับตรวจทานบนหน้าจอมือถือ 4 ขนาดมาตรฐาน (320px, 375px, 414px, 768px) :::diagram /blog-media/hallmark-skill/scope-boundary.svg | แผนภาพสองชั้น ชั้นบนที่เน้นด้วยกรอบสีส้มคือชั้นหน้าตาและการโต้ตอบ ซึ่งเป็นสิ่งเดียวที่ Hallmark เปลี่ยนให้ ชั้นล่างสี่กล่องคือ route ของหน้า โครงข้อมูล เจตนาของข้อความ และแบรนด์ ซึ่งมันเก็บไว้ตามเดิม | กล่องสีส้มคือขอบเขตทั้งหมดของสกิลนี้

ทำไม AI ถึงสร้าง UI ออกมาไม่สวย?

ปัญหาที่ AI สร้าง UI ออกมาดูไม่สวย จัดวางแปลกตา หรืออ่านยาก เกิดจากการที่ AI ไม่มีเกณฑ์ประเมินว่างานระดับไหนถึงเรียกว่า "สวยงาม" เมื่อไม่มีเกณฑ์มาบังคับ มันจึงถอยกลับไปหาค่าเฉลี่ยกลางๆ ที่พบได้บ่อยที่สุดในฐานข้อมูลที่ใช้เทรน

ผลลัพธ์คือ UI หน้าตาเหมือนกันไปหมด ซึ่งในวงการเรียกว่า AI Slop

Hallmark Skill คืออะไร

Hallmark เป็น Skill สำหรับ AI Coding Agent (รองรับ Claude Code, Cursor และ Codex) เขียนโดย Nutlope ปล่อยภายใต้ลิขสิทธิ์ MIT

สิ่งสำคัญที่ต้องเข้าใจก่อนใช้งาน: Hallmark ไม่ใช่ Component Library และไม่มีโค้ดสำเร็จรูป แต่มันคือไฟล์คำสั่งชุดมาตรฐานที่ Agent ต้องอ่านและปฏิบัติตาม ตัวสกิลจะรันกระบวนการตั้งแต่ขั้นที่ 0 ถึงขั้นที่ 7 ตั้งแต่การอ่านบริบทโปรเจกต์, เลือกโครงหน้า, เลือกธีม, โหลดกฎที่จำเป็น, ประกาศสิ่งที่จะทำ, เขียนโค้ด และปิดท้ายด้วยการตรวจทาน 58 ข้อ

ทำไม Hallmark จึงแก้ปัญหา AI Slop ได้

สิ่งที่ Hallmark Skill ทำต่างจากการสั่ง Prompt แบบธรรมดา คือการกำหนดข้อห้ามและมาตรฐานไว้อย่างชัดเจน แล้วบังคับให้ AI Agent ตรวจงานตัวเองผ่าน รายการเช็กลิสต์ 58 ข้อ ก่อนส่งงาน โดยจะมีตัวอย่างกฎระบุไว้ในไฟล์ SKILL.md

ด่านตรวจนี้คือส่วนที่ Prompt ธรรมดาไม่มี

ตัวอย่างกฏของ Hallmark:

ห้ามใช้ Nav/Footer ยอดฮิตของ AI: เช่น แถบนำทางแบบ N1a หรือ Footer แบบ Ft3 ซึ่งเป็นการใช้งานยอดฮิตของ AI ที่คนจเห็นแล้วจำได้ทันที
ห้ามวาง Title Tag ฝั่งตรงข้าม: ป้ายกำกับหัวข้อแบบ 01 · THE TOUR ที่วางป้ายไว้ซ้ายแล้วให้หัวข้ออยู่ขวาจะตกข้อตรวจทันที ต้องวางซ้อนบนหัวข้อเท่านั้น
ห้ามใช้ตัวเลขแต่งขึ้นเอง: ห้ามเขียนตัวเลขการตลาดลอยๆ เช่น "เพิ่มยอดขาย 47%" ให้ใช้ตัวเลขจริงหรือเว้นเป็น Placeholder ไว้
หัวข้อต้องเป็นตัวตรงเสมอ: ตัวเอียงอนุญาตให้ใช้ได้เฉพาะในย่อหน้าเนื้อความเท่านั้น
ห้ามใช้ Hardcoded Hex Colors: ทุกค่าสีและฟอนต์ต้องอ้างอิงผ่าน Design Tokens เช่น var(--color-accent) เท่านั้น

ทุกกฎถูกออกแบบมาให้ตอบได้ชัดเจนว่า "ผ่าน" หรือ "ไม่ผ่าน" ตัดปัญหาเรื่องรสนิยมส่วนตัวออกไปได้ทันที

เทียบให้เห็นภาพ

เพื่อไม่ให้เป็นการเข้าข้างตัวเอง บทความนี้ทดสอบกับโมเดล 4 ตัว ผ่าน OpenRouter โดยให้ โจทย์คนละอย่าง เพื่อไม่ให้เป็นการวัดจาก Prompt เดียวที่บังเอิญเข้าทาง

สิ่งที่คุมให้เหมือนกันทั้งสองรอบ เพื่อให้เหลือ Hallmark เป็นตัวแปรเดียวจริงๆ:

ตัวแปร	ค่าที่ใช้
ข้อความ Prompt	เหมือนกันทุกไบต์ ตรวจด้วยค่า Hash ของข้อความ
Design Tokens ของ GEIST	ใส่ให้ทั้งสองรอบ เท่ากัน
`temperature`	`0.3` เท่ากัน
`max_tokens`	`32000` เท่ากัน
ผู้ให้บริการ (Provider)	ล็อกไว้ตายตัว ปิด Fallback

ผู้ให้บริการที่ล็อกไว้: deepseek และ glm ใช้ CoreWeave, minimax ใช้ Together, gpt-5.6-luna ใช้ OpenAI และอ่านค่ากลับจากคำตอบทุกครั้งเพื่อยืนยันว่าไม่ถูกสลับไปเครื่องอื่น

ต่างกันแค่จุดเดียว: รอบที่สองใส่ไฟล์ SKILL.md ของ Hallmark เป็น System Prompt ส่วนรอบแรกไม่มี System Prompt เลย ไม่มีการบอกโมเดลว่ากำลังถูกนำไปเทียบ และไม่มีการเลือกผลลัพธ์ที่ถูกใจ ทุกภาพคือผลที่ได้มาจริง

`deepseek-v4-flash` · โจทย์: Landing Page ของ AI Podcast

หน้าเว็บพอดแคสต์ชื่อ The AI Commons ใช้สีส้ม Mango และพื้นขาวตาม Design Tokens ของ GEIST หัวเรื่องว่า Where AI meets community. ตามด้วยส่วนตอนล่าสุดและส่วนแนะนำพิธีกร — `deepseek-v4-flash` ไม่ได้โหลด Skill

หน้าเว็บพอดแคสต์ชื่อ Signal and Noise ใช้ชุดสีเดียวกัน หัวเรื่องว่า AI is moving fast. Let us talk about it together ตามด้วยรายการตอนที่พาดหัวด้วยชื่อตอนแบบยาว — `deepseek-v4-flash` โหลด Hallmark

`minimax-m3` · โจทย์: หน้า Pricing ของ API แปลงเอกสาร

หน้า Pricing ของบริการแปลงเอกสารชื่อ Parsewell หัวเรื่องว่า Parse any document. Pay only for what you parse. ตามด้วยเครื่องมือประเมินค่าใช้จ่ายรายเดือนและตารางเทียบฟีเจอร์ — `minimax-m3` ไม่ได้โหลด Skill

หน้า Pricing ของบริการแปลงเอกสารชื่อ Parseflow หัวเรื่องว่า Parse documents at scale. Pay only for what you use. ตามด้วยตารางเทียบแผนราคาและตัวอย่างโค้ดสามบรรทัด — `minimax-m3` โหลด Hallmark

`glm-5.2` · โจทย์: Landing Page ของโรงคั่วกาแฟอิสระ

หน้าเว็บโรงคั่วกาแฟชื่อ Emberline หัวเรื่องบอกว่ากาแฟถึงมือภายในเจ็ดวันจากวันคั่ว ตามด้วยส่วนอธิบายสามขั้นตอนการสมัครและส่วนแนะนำเมล็ด — `glm-5.2` ไม่ได้โหลด Skill

หน้าเว็บโรงคั่วกาแฟชื่อ Hollow Oak หัวเรื่องว่า Roasted at dawn, at your door by Friday. ตามด้วยส่วนให้ผู้ใช้เลือกความถี่การจัดส่งและส่วนเลือกเมล็ด — `glm-5.2` โหลด Hallmark

`gpt-5.6-luna` · โจทย์: Landing Page ของแอปจัดการเงินส่วนบุคคล

หน้าเว็บแอปการเงินชื่อ Spendl หัวเรื่องว่า Spend with purpose. Live with less worry. ตามด้วยการ์ดฟีเจอร์และส่วนอธิบายประโยชน์ — `gpt-5.6-luna` ไม่ได้โหลด Skill

หน้าเว็บแอปการเงินชื่อ Mango ปุ่มหลักสีส้ม Mango หัวเรื่องว่า Make sense of every spent ด้านขวาเป็นการ์ดสรุปยอดใช้จ่ายพร้อมกราฟแท่ง ตามด้วยการ์ดฟีเจอร์สามใบสีฟ้าและเหลืองอ่อน — `gpt-5.6-luna` โหลด Hallmark

ผลที่วัดได้

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

และผลที่ได้ก็ไม่ตรงกับที่ตั้งใจจะพิสูจน์ตอนแรกด้วย นี่คือตัวเลขที่นับจากไฟล์ HTML จริงทั้ง 8 ไฟล์ โดยนับเฉพาะค่าสีที่ฝังอยู่ นอก บล็อก Token ที่เราใส่ให้:

โมเดล	ค่าสีฝังตรงนอก Token	Stamp ของ Hallmark
`deepseek-v4-flash`	0 → 0	ไม่มี
`minimax-m3`	0 → 0	มี (`Pricing-Led`)
`glm-5.2`	39 → 1	ไม่มี
`gpt-5.6-luna`	0 → 0	มี (`Workbench`)

สามในสี่โมเดลไม่ต่างกันเลย เมื่อได้ Design Tokens ไปตั้งแต่แรก ทุกตัวก็ใช้ตามนั้นอยู่แล้ว ไม่ว่าจะโหลด Skill หรือไม่ มีแค่ glm-5.2 ตัวเดียวที่แอบสร้างสีนอกระบบ 39 จุดตอนไม่ได้โหลด แล้วเหลือ 1 จุดตอนโหลด

เรื่องโครงสร้างหน้าก็เช่นกัน จำนวน Section ออกมา 5 ต่อ 5, 8 ต่อ 6, 7 ต่อ 7 และ 5 ต่อ 5 คือแทบไม่ขยับ และมีแค่ 2 ใน 4 ตัวที่เขียน Stamp กำกับตามที่กฎบังคับ แปลว่าโมเดลขนาดเล็กไม่ได้ทำตามขั้นตอนของ Skill ครบทุกข้อ

ผลนี้แย้งกับสิ่งที่บทความเวอร์ชันก่อนเคยเขียนไว้

เวอร์ชันก่อนของบทความนี้เทียบโดยไม่ได้ให้ Design Tokens กับฝั่งที่ไม่ได้โหลด Skill ผลที่ได้คือค่าสีฝังตรงลดจาก 70-121 จุด เหลือ 0 ทั้ง 4 โมเดล ซึ่งดูน่าประทับใจมาก

แต่พอใส่ Tokens ให้ทั้งสองฝั่งเท่ากัน ตัวเลขนั้นก็หายไปเกือบหมด แปลว่าสิ่งที่วัดได้ตอนนั้นคือ "ผลของการมี Design System" ไม่ใช่ "ผลของ Hallmark" การคุมตัวแปรที่หลวมกว่าทำให้ได้ตัวเลขที่สวยกว่าความจริง

ข้อสรุปที่ซื่อสัตย์กว่าคือ: ถ้าโปรเจกต์ของคุณมี Design System อยู่แล้ว อย่าคาดหวังผลต่างที่วัดเป็นตัวเลขได้จาก Hallmark เพราะสิ่งที่มันบังคับเรื่องสีและ Token คุณทำไปแล้ว ประโยชน์ของมันจะไปอยู่ที่งาน Greenfield ที่ยังไม่มีระบบให้ยึด ซึ่งตรงกับที่เขียนไว้ใน TL;DR ด้านบนพอดี

ข้อจำกัดของการเทียบครั้งนี้

รันฝั่งละ หนึ่งครั้งต่อโมเดล ไม่ใช่ผลการวัดเชิงสถิติ รันใหม่ย่อมได้หน้าตาคนละแบบ

minimax ฝั่งที่โหลด Skill ต้องยิงซ้ำหนึ่งครั้ง เพราะครั้งแรกผู้ให้บริการคืน Error กลางทาง นั่นคือการเรียกที่ล้มเหลว ไม่ใช่การเลือกผลลัพธ์ใหม่เพราะไม่ถูกใจ

ตัวเลขในตารางนับจากไฟล์จริง ส่วนคำว่า "ใช้งานได้จริง" เป็นความเห็น ไม่ใช่ผลวัด และภาพบางหน้ายาวเกินกว่าจะเก็บได้ทั้งหน้า จึงตัดที่ความสูง 2600 พิกเซล

Hallmark ทำอะไรได้บ้าง ใช้งานยังไง?

Hallmark แบ่งการทำงานออกเป็น 4 โหมด ซึ่งจุดต่างที่สำคัญที่สุดไม่ใช่แค่ชื่อคำสั่ง แต่คือ "โหมดไหนยอมให้แก้ไฟล์โค้ดของคุณบ้าง"

audit อยู่ฝั่งซ้ายเสมอ นี่คือจุดที่ร่างแรกเข้าใจผิด

`build` (โหมดเริ่มต้น)

เป็นโหมดเริ่มต้นเมื่อคุณสั่งงานสร้าง UI ทั่วไป เช่น:

build a new landing page for an AI community podcast

ก่อนเขียนโค้ด Agent จะบอกก่อนว่าเลือกใช้โครงหน้าแบบไหน, ธีมอะไร, Nav/Footer แบบไหน เพื่อให้คุณทักท้วงได้ก่อนที่มันจะเริ่มเขียนไฟล์จริง

`audit` (ตรวจทานอย่างเดียว ไม่แก้ไฟล์ให้)

hallmark audit src/app/page.tsx

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

`redesign` (รื้อหน้าตา แต่รักษาโครงสร้างข้อมูล)

hallmark redesign src/app/pricing --mood editorial

โหมดที่เหมาะที่สุดสำหรับโปรเจกต์ที่มีอยู่อยู่แล้ว มันจะรื้อเฉพาะชั้นการแสดงผล (Visual Layer) และ Interaction แต่สัญญาว่าจะ ไม่แตะ Route, ขอบเขตของ Component, เจตนาของข้อความ และ Data Structure เด็ดขาด

`study` (ถอดแบบ Design DNA จากเว็บหรือภาพ)

hallmark study https://example.com
hallmark study ./screenshot.png

โหมด URL: อ่าน HTML/CSS จริง จึงได้ชื่อฟอนต์และค่าสีเป๊ะ แต่มีจุดบอดคือมองไม่เห็นจังหวะและช่องไฟ (Spacing Rhythm)
โหมด Screenshot: มองเห็นจังหวะและช่องไฟอย่างแม่นยำ แต่ทำได้แค่เดาบทบาทของฟอนต์

จุดบอดของสองโหมดสลับกันพอดี ถ้าเรื่องจังหวะสำคัญ ให้ส่งภาพ

วิธีติดตั้ง Hallmark ทำอย่างไร?

คำสั่งเดียว

npx skills add nutlope/hallmark

Hallmark ไม่เหมาะกับงานแบบไหน?

Hallmark ถูกออกแบบมาเพื่อจัดการ Visual & Interaction Layer เท่านั้น

สิ่งที่ไม่เหมาะ: การแก้ปัญหาประเภท UX Flow, เมนูหาไม่เจอ, ฟอร์มยาวเกินไป หรือ Dashboard อัดแน่นจนอ่านไม่ออก เนื่องจาก Hallmark จะไม่แตะโครงสร้างข้อมูล (Data Structure) หรือการจัดระเบียบของแอปพลิเคชัน

สิ่งที่ทำได้ดีมาก: ในระดับ Component เดี่ยว สกิลนี้เข้มงวดมาก โดยบังคับให้ออกแบบครอบคลุม 8 สถานะ (default, hover, focus, active, disabled, loading, error, success) และบังคับตรวจทานบนหน้าจอมือถือ 4 ขนาดมาตรฐาน (320px, 375px, 414px, 768px)

กล่องสีส้มคือขอบเขตทั้งหมดของสกิลนี้

เทคนิค: เติม Motion ด้วย animate-skill

เมื่อโครงสร้างหน้าสวยงามแล้ว การเติมจังหวะเคลื่อนไหวจะช่วยให้ UI ดูมีชีวิตชีวาขึ้น คุณสามารถใช้ animate เข้ามาช่วยได้

npx skills add emilkowalski/skill --skill animate

animate จะให้แนวทางเรื่อง Easing, Timing และกฎการทำ Motion เช่น บังคับขยับเฉพาะ transform และ opacity, ห้ามใช้ค่า Default Ease ของเบราว์เซอร์ และรองรับ prefers-reduced-motion ซึ่งทำงานสอดคล้องกับกฎของ Hallmark ได้อย่างสมบูรณ์แบบ

สรุปคำแนะนำสำหรับการเริ่มต้นใช้งาน

สำหรับโปรเจกต์ที่มีอยู่แล้ว: ให้เริ่มด้วยสั่ง hallmark audit เพื่อให้ AI ช่วยสแกนหาจุดอับสายตาโดยไม่ต้องกลัวว่าโค้ดจะถูกแก้ไข
หากต้องการปรับปรุง Visual: ใช้สั่ง hallmark redesign แล้วอ่านรายการไฟล์ที่ Agent ประกาศก่อนกดยืนยัน
หากมี Design System แล้ว: ให้คาดหวังผลลัพธ์ในเรื่อง โครงสร้างการจัดวางหน้า Layout แทนเรื่องการเลือกธีมสี