โดย Nokka (นก-กา) | 31 ต.ค. 2026

ภาพประกอบ: กระดาษร่างหน้าเว็บสี่แผ่นวางเรียงเหลื่อมกันเป็นขั้นบันไดบนโต๊ะ มือหนึ่งกำลังเลื่อนแผ่นบนสุดออก

มีโพสต์แชร์กันเยอะเรื่องสกิลฟรีที่ทำให้ Claude Code กับ Cursor สร้างหน้าเว็บได้สวยและไม่ซ้ำใคร ตัวเลขที่โพสต์บอกคือหกพันดาวบน GitHub

โพสต์ต้นทางเป็นข้อความที่ถูกส่งต่อมา ไม่มีลิงก์สาธารณะให้ตรวจ ผมจึงอ้างจากข้อความที่ได้รับ และเทียบกับรีโปจริงซึ่งตรวจได้ทุกบรรทัด

ผมเข้าไปดูรีโปจริง เทียบทีละข้อกับที่โพสต์อ้าง แล้วเจอทั้งของจริงและของที่คลาดเคลื่อน

รีโปนี้คืออะไรกันแน่

elayadesign/ai-design-skills เป็นชุดสกิลสำหรับเครื่องมือเขียนโค้ดที่อ่านไฟล์กฎ markdown ได้ ไม่ว่าจะเป็น Claude Code, Cursor, Codex, Windsurf หรือ Cline [1]

ข้อมูลจาก GitHub API ณ วันที่เขียนบทนี้

  • 13,028 ดาว ไม่ใช่หกพันอย่างที่โพสต์บอก ผมคาดว่าตัวเลขในโพสต์มาจากช่วงที่รีโปยังใหม่อยู่ [1] [6]
  • 957 ฟอร์ก และมี issue เปิดค้าง 2 รายการ [6]
  • สัญญาอนุญาต MIT ใช้เชิงพาณิชย์ได้ [6]
  • สร้าง 29 ก.ค. 2026 และ push ล่าสุด 30 ต.ค. 2026 [6]

เจ้าของบัญชีชื่อ Elaya มีรีโปสาธารณะสามตัว คือตัวนี้ redesign-skill และ skills [6]

รีโป redesign-skill แยกออกไปเพราะทำหน้าที่คนละอย่าง คือใช้ปรับเว็บที่มีอยู่แล้วให้ดูดีขึ้น ไม่ใช่สร้างใหม่ทั้งหน้า [4]

ส่วนรีโป skills เป็นฟอร์กของชุดสกิลจาก Anthropic ไม่ใช่ผลงานที่ Elaya เขียนเอง ผมจึงไม่นับรวมในการตรวจครั้งนี้

ตัวสกิลยังระบุด้วยว่าบางส่วนดัดแปลงมาจาก taste-skill ของ Leon Lin ภายใต้สัญญา MIT เช่นกัน [5]

ข้างในมีสกิลเดียว ไม่ใช่หลายตัว

จุดที่ผมต้องแก้ตั้งแต่ต้น: โพสต์เขียนเหมือนมีหลายสกิลรวมถึงตัวแปลงดีไซน์เป็นคลิป MP4 หรือ GIF ด้วย

แต่ไฟล์ในรีโปมีอยู่ชุดเดียว คือ skills/landing-page-design/SKILL.md ยาวราว 22,000 ตัวอักษร [3]

ผมค้นทั้งรีโปนี้และรีโป redesign-skill แล้ว ไม่พบสกิลที่แปลงดีไซน์เป็นวิดีโอหรือ GIF เลย คำอ้างนั้นยังไม่มีหลักฐานในรีโป

ส่วนอิมเมจที่ใช้ในตัวอย่างโพสต์ทำด้วย Higgsfield ตามที่โพสต์บอกเอง ซึ่งเป็นบริการภายนอกที่ต้องจ่ายเงิน และไม่เกี่ยวกับตัวสกิล

สกิลนี้สั่งให้ AI ทำอะไร

ตัวไฟล์แบ่งเป็นสองภาคชัดเจน ภาค A ว่าด้วยเนื้อหาและโครงหน้า ภาค B ว่าด้วยกฎภาพที่บังคับใช้ [3]

ภาค A ถามก่อนลงมือ

สิ่งแรกที่สกิลสั่งคือถามผู้ใช้เป็นชุดเดียว ไม่ใช่ยิงคำถามทีละข้อ ครอบคลุมเป้าหมายเดียวของหน้า กลุ่มเป้าหมาย ข้อโต้แย้งสามข้อแรกที่ทำให้คนไม่ซื้อ ช่องทางที่คนเข้ามา และหลักฐานที่มีอยู่จริง [3]

จากนั้นกำหนดโครงสิบสองส่วน เรียงตามต้นทางคือ พาดหัว, คำโปรยใต้พาดหัว, ปุ่มหลัก, หลักฐานชิ้นแรก, ภาพฮีโร่, ปัญหาและทางออก, ประโยชน์สามถึงห้าข้อ, วิธีใช้สามขั้น, รีวิว, FAQ หกถึงสิบสองข้อ, การลดความเสี่ยง และปุ่มปิดท้ายที่เหมือนปุ่มบนสุด [3]

ภาค B กฎภาพที่ไม่อ่อนข้อ

นี่คือส่วนที่ทำให้คนแชร์กัน และเป็นส่วนที่ผมชอบที่สุด

  • ฟอนต์ที่ห้ามใช้: Inter, Roboto, Arial, Open Sans, Helvetica [3]
  • ฟอนต์ที่ให้ใช้: Geist, Manrope, Poppins และ Geist Mono สำหรับตัวเลขหรือโค้ด [3]
  • ห้ามตัวเอียง ทั้งหน้าจอ และห้ามใช้ระดับหนามากอย่าง ultra bold หรือ 900 โดยให้สูงสุดที่ semibold หรือ bold [3]
  • ห้ามใช้ขีด (-) ในข้อความ ซึ่งผมคิดว่าเป็นกฎที่คนเขียนเว็บไทยมักทำหลุดโดยไม่รู้ตัว [3]
  • ห้ามข้อความตัวอย่างเป็นภาษาละติน และห้ามใช้คำว่า "พาดหัวของคุณที่นี่" [3]

ข้อสุดท้ายสำคัญกับคนทำธุรกิจจริง คือสกิลสั่งว่า ราคา ตัวเลขสถิติ จำนวนลูกค้า และรีวิว ต้องมาจากผู้ใช้หรือแหล่งจริง ถ้าไม่มีให้ใส่ตัวยึดเช่น {{price}} ไว้ก่อน ห้ามแต่งขึ้นเอง [3]

ผมชอบกฎข้อนี้เพราะมันแก้ปัญหาที่เจอบ่อยที่สุด เว็บที่ AI ทำมักดูดีในภาพรวม แต่พออ่านตัวเลขกลับไม่มีที่มา

กฎที่ผมคิดว่าแปลกแต่มีเหตุผล

ในไฟล์มีส่วน B11 ชื่อ "tagline reveal section" ซึ่งเป็นส่วนที่สกิลบังคับให้ใส่ทุกหน้า [3]

แนวคิดคือให้มีจุดหนึ่งที่ประโยคสั้น ๆ ของแบรนด์ค่อย ๆ เผยออกมาระหว่างเลื่อนหน้า เป็นจังหวะที่ทำให้คนจำแบรนด์ได้ ไม่ใช่แค่เห็นสินค้า

ผมมองว่านี่เป็นดาบสองคม ใช้ดีก็ทำให้หน้าดูมีชั้นเชิง ใช้ผิดที่ก็กลายเป็นลูกเล่นที่ไม่มีใครอ่าน ส่วนที่บอกตำแหน่งในต้นทางยังไม่ลงรอยกันเอง คือ A2 แนะให้วางหลังฮีโร่หรือหลังส่วนประโยชน์ ขณะที่ B11 กำกับว่าไม่ให้ติดกับฮีโร่ [3]

วิธีติดตั้ง

วิธีที่รีโปแนะนำคือใช้ CLI ของ skills.sh ซึ่งต้องมี Node.js [2]

# ติดตั้งทั้งหมดและเลือกเองว่าจะให้ agent ตัวไหนใช้ npx skills add elayadesign/ai-design-skills # เลือกเฉพาะสกิลนี้ และระบุ agent npx skills add elayadesign/ai-design-skills --skill landing-page-design -a claude-code -a cursor # ติดตั้งระดับผู้ใช้ ไม่ผูกกับโปรเจกต์ npx skills add elayadesign/ai-design-skills -g

โฟลเดอร์ปลายทางคือ .claude/skills/ ถ้าใช้ Claude Code ส่วน Cursor, Codex และเครื่องมืออื่นจะได้ไฟล์ใน .agents/skills/ [2]

ถ้าไม่ใช้ CLI ก็โคลนรีโปแล้วคัดลอกโฟลเดอร์สกิลไปวางเองได้ หรือดาวน์โหลด SKILL.md ไปอัปโหลดใน Project ของ Claude บนเว็บ [2]

ข้อจำกัดที่โพสต์ไม่ได้บอก

หนึ่ง สกิลไม่สร้างภาพให้ ตัวไฟล์สั่งให้ใช้ภาพสินค้า ภาพหน้าจอ หรือวิดีโอเดโมที่มีอยู่จริง ถ้าไม่มีภาพก็ต้องหาเองหรือจ้างทำ [3]

สอง ค่าฟอนต์ค่าเริ่มต้นเป็นฟอนต์ละติน ถ้าทำเว็บไทยต้องเปลี่ยนเอง เพราะ Geist กับ Manrope ไม่มีชุดตัวอักษรไทย ผมเปิดรายการ subset ของ Google Fonts ดูเอง Manrope ครอบคลุมละติน ไซริลลิก กรีก และเวียดนาม ส่วน Geist ไม่มีกรีก ทั้งสองตัวไม่มีชุดอักษรไทย

วิธีที่ผมแนะนำคือแก้ในส่วน B1 ของไฟล์ ให้ใช้ฟอนต์ไทยอย่าง IBM Plex Sans Thai หรือ Noto Sans Thai แล้วคงกฎอื่นไว้

สาม มันไม่ใช่เครื่องมือออกแบบ สกิลนี้ให้ AI เดินตามระบบที่คนอื่นคิดไว้ ไม่ได้คิดแทนคุณในเรื่องแบรนด์ ถ้าแบรนด์ยังไม่ชัด ผลลัพธ์จะเรียบร้อยแต่จำเจ

สี่ ตัวเลขบนโพสต์ล้าสมัย ตอนนี้รีโปมีหนึ่งหมื่นสามพันดาว ถ้าคุณเห็นโพสต์ที่บอกหกพัน โพสต์นั้นน่าจะเก่าแล้ว

ใครควรใช้ ใครข้ามได้

ควรใช้ถ้า คุณต้องทำหน้าขายของสักหน้าอย่างเร็ว อยากให้ผลลัพธ์ไม่เหมือนเทมเพลต และยอมเสียเวลาตอบคำถามช่วงต้นราวสิบนาที (เป็นการกะของผม)

ข้ามได้ถ้า คุณมีดีไซเนอร์อยู่แล้ว หรือหน้าของคุณเป็นแอปที่ต้องมีดีไซน์เฉพาะทาง สกิลนี้ถูกออกแบบมาสำหรับหน้าขายของหน้าเดียว ไม่ใช่ระบบดีไซน์ทั้งผลิตภัณฑ์

สิ่งที่ผมยังไม่รู้

ผมไม่ได้ติดตั้งสกิลนี้แล้วสร้างหน้าจริงในรอบนี้ สิ่งที่ผมตรวจคือตัวไฟล์กฎและข้อมูลรีโปเท่านั้น

ดังนั้นคำถามว่า "ใช้แล้วเว็บจะสวยขึ้นจริงไหม" ผมตอบด้วยหลักฐานไม่ได้นอกจากตัวกฎเอง ซึ่งอ่านแล้วสมเหตุสมผล แต่ผลจริงขึ้นกับโมเดลที่รันและ prompt ที่คุณให้

ถ้าคุณลองแล้วได้หน้าตาแบบไหน อยากรู้เหมือนกันครับ

แหล่งอ้างอิง

[1] GitHub · elayadesign/ai-design-skills (เข้าถึง 31 ต.ค. 2026) · https://github.com/elayadesign/ai-design-skills
[2] รีโปเดียวกัน · README วิธีติดตั้ง (เข้าถึง 31 ต.ค. 2026) · https://github.com/elayadesign/ai-design-skills/blob/main/README.md
[3] รีโปเดียวกัน · skills/landing-page-design/SKILL.md (เข้าถึง 31 ต.ค. 2026) · https://github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md
[4] GitHub · elayadesign/redesign-skill (เข้าถึง 31 ต.ค. 2026) · https://github.com/elayadesign/redesign-skill
[5] GitHub · Leonxlnx/taste-skill ซึ่งเป็นต้นทางบางส่วนของสกิลนี้ (เข้าถึง 31 ต.ค. 2026) · https://github.com/Leonxlnx/taste-skill
[6] GitHub REST API · ข้อมูลรีโปและบัญชีผู้ใช้ elayadesign (31 ต.ค. 2026) · https://api.github.com/repos/elayadesign/ai-design-skills

บทความนี้เขียนโดย AI (deepseek-v4.1-flash · ผู้ให้บริการโมเดล: ollama-cloud) ผ่าน Hermes Agent ภายใต้การควบคุมและตรวจสอบคุณภาพโดยมนุษย์ - Nokka (นก-กา)