Claude design skills คือชุดคำสั่งด้านการออกแบบสำหรับผู้ช่วย AI อย่าง Claude ที่นักพัฒนาและดีไซเนอร์เขียนแจกไว้บน GitHub หน้าที่หลักคือช่วยแก้ปัญหาหน้าเว็บจาก AI ที่มักออกมาหน้าตาซ้ำๆ เหมือนกันไปหมด

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

เพิ่มครั้งเดียว แล้วเรียกใช้ผ่านคำสั่ง /

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

วิธีเริ่มต้นใช้งานง่ายมาก แค่เพิ่มสกิลเข้าไปในหน้าตั้งค่าของ Claude หนึ่งครั้ง จากนั้นเวลาจะใช้งานก็พิมพ์เครื่องหมาย / ตามด้วยชื่อสกิล แล้วพิมพ์โจทย์ของเราต่อท้ายในบรรทัดเดียวกัน เช่น

/web-design-engineer อยากได้ landing page ของโรงหนังเก่าแก่ เน้นความครีเอทีฟ

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

อีกเรื่องที่ช่วยประหยัดขั้นตอนคือ สกิลที่เพิ่มไว้ในหน้าตั้งค่าปกติของ Claude เป็นชุดเดียวกับที่เรียกใช้ได้ในเครื่องมือสร้างเว็บอย่าง Claude Design โดยไม่ต้องไปเพิ่มแยกอีกรอบ และสกิลชุดเดียวกันนี้ยังให้ผลแบบเดียวกันเมื่อนำไปใช้กับ Claude Code ที่เป็นระบบสั่งงานผ่านเทอร์มินัล หรือ AI ช่วยเขียนโค้ดตัวอื่นอย่าง Codex ใครที่เคยลองใช้ Claude Design สร้างเว็บไซต์ทั้งหน้าจากบรีฟภาษาคนธรรมดา มาแล้ว จะเห็นได้ชัดว่าสกิลเหล่านี้เข้ามาช่วยเสริมงานออกแบบได้อย่างไร

ถ้ายังไม่มีไอเดีย เริ่มจากชุดของ Emil Kowalski

ชุดสกิลของนักออกแบบอย่าง Emil Kowalski มีทั้งหมด 9 ตัว แต่ละตัวจะดูแลงานออกแบบคนละส่วน ตั้งแต่ Apple design ที่นำหลักการออกแบบของ Apple มาปรับใช้กับหน้าเว็บ ไปจนถึง animation vocabulary ที่ช่วยแปลงคำอธิบายการเคลื่อนไหวแบบกว้างๆ ของเรา ให้เป็นศัพท์เฉพาะทางด้านโมชันที่ AI เข้าใจและนำไปทำตามได้ถูกต้อง

สองตัวที่ทีมในคลิปหยิบมาใช้บ่อยที่สุดคือ email design engineering ซึ่งใช้จัดวางองค์ประกอบบนหน้าจอพร้อมใส่การเคลื่อนไหว และ Animate ที่ใช้ปรับแต่งแอนิเมชันอย่างละเอียดสำหรับเว็บที่สร้างเสร็จแล้ว

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

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

garden-skills ให้ AI ดูตัวอย่างงานจริงก่อนเริ่มออกแบบ

อีกชุดที่มีแนวคิดน่าสนใจคือ garden-skills ของ Conard Li นักพัฒนาซอฟต์แวร์ ซึ่งรวมสกิลไว้ 5 ตัว ครอบคลุมตั้งแต่งานวิดีโอไปจนถึงงานภาพ แต่ตัวที่โดดเด่นที่สุดคือ web design engineer ที่ถอดวิธีคิดของดีไซเนอร์ระดับมือโปรมาเป็นคำสั่ง โดยเน้นความสวยงามและความประณีตของหน้าเว็บเป็นหลัก

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

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

ai-design-skills ทำมาเพื่อ Landing Page ไม่ใช่หน้าแรกของเว็บ

ถ้าต้องการทำเว็บหน้าเดียวแบบเฉพาะเจาะจง ชุดสกิล ai-design-skills ของทีมออกแบบ Elia Design ออกแบบมาเพื่อสร้าง Landing Page ในรูปแบบไฟล์เดียวจบโดยเฉพาะ

จุดสำคัญของชุดนี้คือการแยกหน้าแรกของเว็บออกจาก Landing Page อย่างชัดเจน เพราะหน้าแรกต้องรองรับผู้ใช้งานหลากหลายกลุ่ม แต่ Landing Page มีหน้าที่หลักเพียงอย่างเดียว คือพาผู้ใช้ไปสู่ Call to Action เช่น กดปุ่มซื้อหรือสมัครใช้งาน

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

แต่เนื่องจากเป็นสกิลที่เน้นเฉพาะ Landing Page จึงไม่เหมาะกับเว็บไซต์ที่มีหลายหน้าหรือมีเมนูนำทางที่ซับซ้อน

ชุดของ Meng To ทำให้เว็บเล่าเรื่องได้ ไม่ใช่แค่สวย

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

ในชุดนี้มีสกิลที่น่าสนใจ เช่น:

• video to super prompt: แปลงคลิปวิดีโอบันทึกหน้าจอเว็บที่เราชอบ ให้กลายเป็นพรอมต์สำหรับสั่ง AI สร้างหน้าเว็บตามตัวอย่างได้
• Awards quality sites: รวบรวมหลักการและเอฟเฟกต์ที่เว็บสายประกวดระดับโลกอย่าง Awwwards นิยมใช้ เพื่อช่วยให้ผลงานที่ได้ดูสวยงาม พรีเมียม และมีระดับ

tastemaker ใช้พิกเซลจากภาพจริงเป็นข้อมูลอ้างอิง ไม่ใช่แค่ข้อความบรรยาย

สกิล tastemaker ของนักพัฒนา codeswithroh เข้ามาแก้ปัญหาที่ต่างจากสกิลตัวอื่น ปกติเวลาเราส่งภาพตัวอย่างให้ AI แล้วสั่งว่าต้องการสไตล์แบบนี้ AI จะสรุปภาพนั้นเป็นข้อความสั้นๆ ก่อน แล้วค่อยสร้างเว็บจากข้อความนั้น ทำให้รายละเอียดและโทนของภาพต้นฉบับตกหล่นไป

tastemaker ใช้วิธีรันสคริปต์เพื่ออ่านค่าพิกเซลจากภาพอ้างอิงโดยตรง แล้วเก็บรายละเอียดด้านดีไซน์ไว้ให้ AI นำกลับมาใช้ได้ ประโยชน์สำคัญคือช่วยให้สไตล์การออกแบบคงที่ตลอดทั้งโปรเจกต์ ไม่หลุดธีมเวลาสั่งให้ออกแบบหน้าถัดไป ซึ่งเป็นปัญหาที่พบบ่อยเวลาสร้างเว็บทีละหน้า

review กับ screen critique ให้ AI ช่วยตรวจงาน ไม่ใช่แค่สร้างงาน

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

1. ชุดของ Jakub Krehel ชุดนี้แยกการตรวจสอบออกเป็นสกิลย่อยตามแต่ละหัวข้อ เช่น ฟอนต์ สี หรือการออกแบบให้ทุกคนเข้าถึงได้ (Accessibility) ในคลิปหยิบมาใช้ 2 ตัว:

• review: ตรวจสอบงานดีไซน์รอบด้านพร้อมให้คะแนน ทั้งเรื่องแอนิเมชัน การใช้งาน และการแสดงผลบนหน้าจอขนาดต่างๆ สกิลนี้ทำงานได้ดียิ่งขึ้นเมื่อเชื่อมกับ GitHub เพราะสามารถเปรียบเทียบความแตกต่างก่อนและหลังแก้โค้ด พร้อมบอกได้ว่าข้อผิดพลาดเกิดจากการแก้ไขรอบไหน
• better layout: เจาะลึกเรื่องระยะห่าง ตำแหน่ง และการจัดแนว เช่น ในคลิปตัวสกิลตรวจพบว่าองค์ประกอบวันที่บนหน้าเว็บมีพื้นที่ไม่พอ แล้วบอกกลับมาได้ทันทีว่าต้องเพิ่มอีกกี่พิกเซล

2. designer-skills ของ Owl-Listener ชุดนี้อ้างอิงจากหลักการออกแบบประสบการณ์ผู้ใช้ (UX) และงานวิจัยด้านพฤติกรรมผู้ใช้ โดยแยกกฎแต่ละข้อเป็นสกิลเฉพาะตัว ในคลิปแนะนำ 2 ตัว:

• screen critique: ตรวจสอบคุณภาพของหน้าเว็บตามแนวทางปฏิบัติมาตรฐาน
• perception laws: วิเคราะห์ตามหลักการรับรู้ทางสายตา ช่วยบอกได้ว่าองค์ประกอบไหนสะดุดตาก่อน ตัวอักษรมีจุดไหนอ่านยาก หรือระยะห่างส่วนใดควรปรับแก้

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

ข้อควรรู้ก่อนจะไล่ติดตั้งทั้ง 7 ชุด

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

วิธีที่คุ้มค่าที่สุดคือเลือกใช้ให้เหมาะกับแต่ละช่วงของงาน:

• ยังไม่มีไอเดียและอยากเริ่มจากศูนย์: แนะนำชุดของ Emil Kowalski
• มีภาพต้นแบบที่ชอบอยู่แล้ว: ใช้ tastemaker เพื่อถอดสไตล์จากภาพ
• ต้องการทำ Landing Page หน้าเดียว: ใช้ชุดของ Elia Design
• เมื่อสร้างเว็บเสร็จแล้ว: เรียกใช้สกิลตรวจงานอย่าง review หรือ screen critique เพื่อเก็บรายละเอียด

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

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

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

ที่มา: คลิป Insane Claude Design Skills You Need To Actually Build Beautiful Sites จากช่อง AI LABS