ทำไม Claude ถึงให้ดีไซน์แบบทั่วไปมาเป็นค่าเริ่มต้น, 5 ทักษะที่ช่วยแก้ปัญหานี้ได้จริง, และขั้นตอนทีละขั้นตอนในการสร้างทักษะของคุณเองเมื่อไม่มีทักษะไหนที่เหมาะกับแบรนด์ของคุณ
คุณรู้วิธีสังเกตมันอยู่แล้ว ไล่ระดับสีม่วงบนพื้นหลังสีขาว, ฟอนต์ Inter, เงาอ่อนๆ บนการ์ด, อีโมจิที่หายไปกลาง section คุณมองแล้วก็คิดว่า: Claude ทำสิ่งนี้
มันไม่ใช่ความผิดของโมเดล มันเป็นพฤติกรรมเริ่มต้นของมัน
เมื่อคุณขอให้ "สร้างหน้า landing page" โดยไม่มีคำแนะนำเพิ่มเติม โมเดลจะไม่เลือกตัวเลือกที่น่าสนใจที่สุด มันจะเลือกตัวเลือกที่มีความเป็นไปได้มากที่สุด และตัวเลือกที่มีความเป็นไปได้มากที่สุดก็คือค่าเฉลี่ยของทุกสิ่งที่มันเห็นระหว่างการฝึก: หน้าเว็บที่ปลอดภัย, ธรรมดา, และน่าลืมจำนวนนับล้าน ผลลัพธ์ที่ได้คือดีไซน์ที่ดูเหมือนดีไซน์จาก AI เพราะมันเป็นศูนย์กลางทางสถิติของสิ่งที่มีอยู่บนเว็บจริงๆ
Anthropic มีชื่อเรียกสำหรับสิ่งนี้ พวกเขาเรียกมันว่า distributional convergence ในทางปฏิบัติ มันหมายถึงสิ่งเดียว: หากไม่มีทิศทาง Claude จะตกอยู่ในความซ้ำซากจำเจเสมอ
ทักษะคือสิ่งที่คุณใช้พามันออกจากจุดนั้น
ทักษะคืออะไร, พูดสั้นๆ
ให้คิดถึงไฟล์ markdown (ข้อความ) ที่ Claude อ่านก่อนเริ่มทำงาน แทนที่จะต้องพิมพ์ความชอบ ระบบดีไซน์ และโทนเสียงของคุณซ้ำในทุก prompt คุณเขียนมันครั้งเดียวแล้วมันก็โหลดโดยอัตโนมัติ มันคือรายละเอียดงานที่คุณส่งมอบก่อนที่จะมอบหมายงาน
ความแตกต่างของผลลัพธ์ที่ได้นั้นมหาศาล prompt เดียวกัน, Claude ตัวเดียวกัน, แต่เมื่อโหลดทักษะที่ถูกต้อง มันจะหยุดเป็นนักออกแบบทั่วไปและกลายเป็นผู้ร่วมงานที่รู้จักงานของคุณ
ผมทดสอบมาหลายตัว โดยเปรียบเทียบก่อนและหลังด้วย prompt เดียวกันเพื่อดูว่าอะไรที่สร้างความแตกต่างได้จริง เราสามารถแยกออกมาได้ 5 ทักษะที่เปลี่ยนเกมการออกแบบเว็บได้จริง
1. Frontend Design (ทักษะทางการจาก Anthropic)
นี่เป็นทักษะที่ได้รับความนิยมมากที่สุดในระบบนิเวศ และด้วยเหตุผลที่ดี: มันเผยแพร่โดย Anthropic เอง มียอดติดตั้งเกิน 277,000 ครั้ง
เคล็ดลับของมันไม่ใช่การสอนให้ Claude วาดภาพสวยๆ แต่เป็นการสอนว่าสิ่งไหนที่มัน ไม่ควร ทำ ไฟล์นี้ระบุรายการสิ่งซ้ำซากที่ควรหลีกเลี่ยงอย่างชัดเจน: ฟอนต์ที่ใช้มากเกินไป, ชุดสีที่คุ้นตา, โครงสร้างเงาของการ์ดที่ทุกคนรู้จัก มันคือบทเรียนสั้นๆ เกี่ยวกับรสนิยมที่ดีที่ฝังอยู่ในโมเดล
ในการทดสอบก่อนและหลัง สิ่งนี้ชัดเจนมาก หน้า landing page เดียวกันที่เคยออกมาพร้อมไล่ระดับสีม่วงและอีโมจิ กลายเป็นอะไรที่ดูมีระดับ จับคู่ serif ที่สง่างามกับ sans-serif ที่สะอาดตา, มี animation fade เมื่อเลื่อน, และสถานะ hover ที่คิดมาอย่างดี จาก prompt เดียว
เมื่อไหร่ควรใช้: เมื่อใดก็ตามที่คุณเริ่มโปรเจกต์จากศูนย์และต้องการหลีกเลี่ยงผลลัพธ์เริ่มต้นตั้งแต่ครั้งแรก มันคือฐานของคุณ
และมันไม่ได้ล็อคคุณไว้กับสไตล์ของมัน ถ้าคุณต้องการกฎอื่นๆ ทั้งหมด แต่ใช้แค่ฟอนต์ sans-serif ก็แค่แก้ไข markdown และบอกมันว่า: "ใช้เฉพาะ Geist, Google Sans, หรือ DM Sans" Claude จะปรับไฟล์ให้เอง
2. Impeccable (ชุดเครื่องมือ)
สร้างโดย Paul Bakaus ทักษะนี้กลายเป็นหนึ่งในตัวโปรดของชุมชน ขึ้นถึง 45.9k stars บน GitHub ในเวลาอันสั้น และมันเข้าใจได้ไม่ยากว่าทำไม
สิ่งที่น่าสนใจคือคำสั่งต่างๆ มีทั้ง /impeccable แบบบริสุทธิ์ แต่ยังมีคำสั่งย่อยอีกประมาณ 20 คำสั่งที่คุณเรียกใช้ตามบริบท:
- /impeccable animate เพิ่ม animation ตอนเริ่มต้นและการเคลื่อนไหวอย่างสอดคล้องกัน ในแบบที่เหมาะสมกับหน้าเว็บ
- /impeccable quieter ตรวจสอบ "เสียงรบกวน" ในดีไซน์ (เกรเดียนท์มากเกินไป, น้ำหนักฟอนต์หนาเกินไปในทุกหัวเรื่อง, อีโมจิกระจายเกลื่อน) และตัดส่วนเกินออก นำเสนอความสง่างามแทนการตะโกน
- /impeccable audit ตรวจสอบคุณภาพและการเข้าถึง
- /impeccable document สร้างไฟล์ design.md ที่บันทึกทั้งระบบดีไซน์ของคุณ เพื่อให้เอเจนต์อื่นๆ นำไปอ่านทีหลัง
เบื้องหลัง มันมีกฎ 46 ข้อสำหรับการตรวจจับรูปแบบที่ดูแย่ (slop) ซึ่งทำงานโดยไม่ต้องพึ่งพาการเดาของโมเดล มันตรวจจับรูปแบบที่ AI สร้างขึ้นได้อย่างแม่นยำ
เมื่อไหร่ควรใช้: เพื่อปรับปรุงสิ่งที่คุณมีอยู่แล้ว มีหน้าเว็บที่พร้อมแล้วและต้องการลดความเวอร์วัง? ใช้ quieter ขาดความมีชีวิตชีวา? ใช้ animate แค่สอง prompt เว็บไซต์ก็เปลี่ยนระดับ
รายละเอียดที่เกินกว่าเครื่องมือ: Impeccable มีแท็บ "slop" ที่แสดงรูปแบบที่มันสอนให้ AI หลีกเลี่ยง ลองดูรายการนี้ด้วยตัวคุณเอง การเรียนรู้ที่จะรู้ว่ากรอบสีข้างการ์ดกลายเป็นสิ่งที่ AI นิยมใช้ซ้ำๆ จะทำให้คุณออกแบบด้วยตัวเองได้ดีขึ้นเช่นกัน
3. UIUX Pro Max (ทักษะที่บังคับให้ Claude คิด)
นี่คือฐานข้อมูลดีไซน์ที่ถูกเสริมพลังอย่างเต็มที่ และมีดาวมากที่สุดในรายการ: ผ่าน 105k stars บน GitHub ไปแล้ว มีสไตล์ UI 67 แบบ, จานสี 161 ชุด, คู่ฟอนต์ 57 คู่, แนวทาง UX 99 ข้อ, และชุดเทคโนโลยี 16 ชุด เพื่อให้มันรู้วิธีนำไปใช้ในแต่ละเฟรมเวิร์ก
ประเด็นของมันไม่ใช่การให้โค้ดคุณอย่างรวดเร็ว มันตรงกันข้าม มันบังคับให้ Claude คิดก่อนที่จะเขียนโค้ดแม้แต่บรรทัดเดียว มันจะรันเลย์เอาต์ของคุณผ่านการค้นหาในห้าโดเมนพร้อมกัน (ผลิตภัณฑ์, สไตล์, สี, แลนดิ้ง, ตัวอักษร) ใช้กฎการให้เหตุผล จากนั้นจึงส่งคืนระบบดีไซน์ที่สมบูรณ์ พร้อมกับรูปแบบที่ไม่ดี (anti-patterns) ที่ควรหลีกเลี่ยงซึ่งถูกทำเครื่องหมายไว้แล้ว
https://x.com/nett0eth/status/2073490435066982554
ผลลัพธ์ที่ได้คือ section ที่มีความตั้งใจ ไม่ใช่แค่ของตกแต่ง ในการทดสอบ มันทำสิ่งต่างๆ เช่น การเปลี่ยนจากสีอ่อนไปสีเข้มในบล็อก KPI โดยเฉพาะ เพื่อเน้นตัวเลขที่ต้องโดดเด่นออกมา มันเป็นการตัดสินใจแบบที่คุณคาดหวังจากมนุษย์ ไม่ใช่จากเครื่องสร้าง
เมื่อไหร่ควรใช้: เมื่อคุณมีความชัดเจนเกี่ยวกับเนื้อหาและต้องการความลึกซึ้งของดีไซน์ และเคล็ดลับที่คุ้มค่าเป็นทองคำ: ยิ่งคุณระบุสิ่งที่คุณต้องการในแต่ละ section ได้เฉพาะเจาะจงมากเท่าไหร่ ผลลัพธ์ก็ยิ่งดีขึ้นเท่านั้น ทักษะไม่ได้อ่านใจคุณ; มันขยายทิศทางที่คุณให้ไป การส่ง "ใช้ทักษะและออกแบบใหม่ให้ดูแตกต่างมากขึ้น, สำรวจจานสีและคู่ฟอนต์" จะเปลี่ยนสิ่งที่ได้กลับมาโดยสิ้นเชิง
4. Web Design Guidelines (ผู้ตรวจสอบ, จาก Vercel Labs)
ทักษะนี้มีไว้สำหรับช่วงท้ายของโปรเจกต์ ไม่ใช่ตอนเริ่มต้น มันมาจาก Vercel Labs มี 29k stars บน GitHub และตรวจสอบโค้ดของคุณตามรายการแนวทางอินเทอร์เฟซเว็บของ Vercel กว่า 100 ข้อ: การทำงานของคีย์บอร์ดโฟกัส, การไม่ปิดการซูม, การไม่บล็อกการวาง (paste), ตัวบ่งชี้การโหลดบนปุ่ม, ลำดับชั้นของหัวเรื่อง, ARIA และอื่นๆ
และมันมีเคล็ดลับที่ผมชอบ: คุณสามารถขอให้ Claude แสดงความคิดเห็นเกี่ยวกับปัญหาต่างๆ บนหน้าจอพรีวิวได้โดยตรง แทนที่จะอ่านรายการ คุณจะเห็นบนเว็บไซต์ เป็นสีส้ม ว่าตรงไหนที่ aria-label หายไป, ตรงไหนที่การนำทางด้วยคีย์บอร์ดเสีย, ตรงไหนที่ CTA ขาดโฟกัส มันกลายเป็นภาพ
เมื่อไหร่ควรใช้: เมื่อดีไซน์ดีอยู่แล้วและคุณต้องการให้แน่ใจว่ามันสามารถเข้าถึงได้ และจะไม่ทำให้ใครที่ใช้คีย์บอร์ดหรือโปรแกรมอ่านหน้าจอต้องอับอาย มันคือการตรวจสอบคุณภาพก่อนที่จะเปิดตัวจริง
5. Astryx (ระบบดีไซน์ที่พร้อมสำหรับเอเจนต์, จาก Meta)
https://x.com/nett0eth/status/2073826299789889884
ทักษะที่ห้าอยู่ในอีกประเภทหนึ่ง: มันไม่ใช่ทักษะด้านรสนิยม แต่มันคือระบบดีไซน์ทั้งหมด 4 ทักษะข้างต้นสอนให้ Claude ออกแบบได้ดีขึ้น ทีละหน้าจอ Meta เลือกเส้นทางตรงกันข้ามและเปิดตัว Astryx ซึ่งเป็นระบบดีไซน์ที่เติบโตภายในบริษัทเป็นเวลา 8 ปี กลายเป็นระบบที่ใหญ่ที่สุดและถูกใช้มากที่สุดในบริษัท และทำงานในแอปพลิเคชันมากกว่า 13,000 รายการ ตอนนี้มันเป็นโอเพนซอร์ส และรายละเอียดที่สำคัญตรงนี้คือ มันพร้อมสำหรับเอเจนต์ (agent ready)
ประเด็นคือ: แทนที่จะหวังว่าโมเดลจะมีสามัญสำนึกสำหรับทุกคอมโพเนนต์ คุณกลับให้ระบบที่ทุกอย่างถูกสร้างมาให้สามารถเข้าถึงได้และสอดคล้องกันตั้งแต่แรก มีคอมโพเนนต์มากกว่า 150 ตัว, ธีมสำเร็จรูป 7 ธีม, โหมดมืด, และ CLI ที่ทั้งคนและเอเจนต์ใช้ในลักษณะเดียวกัน โดยอ่านเอกสารชุดเดียวกัน มีแม้กระทั่งไฟล์ CLAUDE.md ใน repository เพื่อให้ Claude เข้าใจสภาพแวดล้อมก่อนที่จะเขียนโค้ดบรรทัดแรก
มันทำงานบน React และ StyleX อยู่ในช่วงเบต้า และมี 8.2k stars แล้ว
เมื่อไหร่ควรใช้: เมื่อคุณต้องการความสอดคล้องของระบบ ไม่ใช่แค่หน้าจอที่สวยงาม ทักษะช่วยปรับปรุงรสนิยมของโมเดล; Astryx ทำให้แน่ใจว่ารากฐานนั้นแข็งแรงอยู่แล้วก่อนที่จะมี prompt ใดๆ ทั้งสองสิ่งเสริมซึ่งกันและกัน
จะหาทักษะเพิ่มเติมได้ที่ไหน
5 ทักษะนี้ครอบคลุมประมาณ 90% ของสิ่งที่นักออกแบบเว็บทำใน Claude แต่ถ้าคุณต้องการสำรวจเพิ่มเติม ก็มีไดเรกทอรีที่ดี:
- UI Skills เน้นที่วิศวกรออกแบบแต่ก็ใช้ได้กับการออกแบบเว็บเช่นกัน มันแสดงรายการหลายๆ ตัวใน 4 ข้อนี้ และมีเรื่องการเข้าถึงและ Shadcn ด้วย
- Type UI เป็นตัวโปรดของผมสำหรับคนที่คิดถึงภาพก่อน คุณเลื่อนดูตัวอย่างของแต่ละสไตล์ (minimalist, neo-brutalism, sophisticated corporate) และเรียกใช้แบบที่คุณต้องการโดยไม่ต้องเขียนคำแนะนำเป็นย่อหน้า
- MCP Market เป็น repository ชุมชนขนาดใหญ่; ไปที่ Agent Skills > Categories > Design Tools แล้วคุณจะเจอรายการไม่รู้จบ
- skills.sh เป็นที่ที่ Vercel และอื่นๆ เผยแพร่แบบเป็นทางการ เหมาะสำหรับการได้มาซึ่งแหล่งที่มาโดยตรง
วิธีสร้างทักษะของคุณเอง
เมื่อไม่มีทักษะไหนที่เหมาะกับแบรนด์หรือสแต็คเทคโนโลยีของคุณ 100% นั่นคือตอนที่คุณต้องสร้างมันขึ้นมาเอง
ในแอป Claude หรือ Claude Code ไปที่ Customize > Skills > Create Skill > Create with Claude มันจะเริ่มต้นด้วยการถามว่าทักษะควรทำอะไร
ส่วนที่แยกทักษะที่มีประโยชน์ออกจากทักษะที่ไร้ประโยชน์คือความเฉพาะเจาะจงของคุณตรงนี้ แทนที่จะบอกว่า "ทำให้ดีไซน์สวยงาม" ให้กฎการให้เหตุผล ตัวอย่างเช่น:
- ระบุประเภทของผลิตภัณฑ์ก่อนเสมอ (dashboard, landing, app) เพราะดีไซน์เปลี่ยนไปตามบริบท
- อนุมานเป้าหมายของหน้าจอก่อนที่จะวาดเสมอ: การกระทำไหนสำคัญที่สุดและผู้ใช้ควรสังเกตอะไรก่อน
- เริ่มต้นด้วยจานสีที่จำกัด, พื้นหลังและพื้นผิวที่เป็นกลางมากขึ้น
- ฟอนต์หลักสำหรับเนื้อหา และถ้าจำเป็น ฟอนต์สำหรับแสดงผล (display) สำหรับหัวเรื่องขนาดใหญ่
Claude จะเริ่มการสนทนาและถามเกี่ยวกับสแต็คของคุณ (เช่น Tailwind tokens), สัดส่วนระยะห่างของคุณ, ข้อจำกัดเลย์เอาต์ของคุณ จงมีรายละเอียด; นั่นคือสิ่งที่ทำให้ทักษะมีค่า ในตอนท้าย มันจะรวมทุกอย่างเป็นไฟล์ .md พร้อมโฟลเดอร์อ้างอิง และคุณสามารถเข้าถึงมันได้ผ่านคำสั่ง slash ของคุณเอง
แต่การสร้างทักษะเป็นส่วนที่ง่าย ส่วนที่ยากคือการทำให้แน่ใจว่ามันไม่พังในเซสชั่นถัดไป และนั่นคือจุดที่แกนที่หลายคนข้ามไปมาถึง ผมได้แจกแจงกรอบงาน 8 ขั้นตอนของ Matt Pocock สำหรับการเขียนทักษะที่ยั่งยืน (trigger, structure, direction, pruning) ในบทความแยกต่างหาก และมันมีค่ายิ่งกว่าทักษะดีไซน์ใดๆ ที่คุณติดตั้ง:
https://x.com/nett0eth/status/2075976597513830727
มันคุ้มค่าที่จะอ่านควบคู่กันไป; มันเป็นเหตุผลเดียวกันกับการ "ให้ไม้บรรทัดที่ถูกต้องแก่โมเดล" ที่ถูกนำไปใช้ในอีกชั้นหนึ่ง คู่มืออย่างเป็นทางการของ Anthropic, The Complete Guide to Building Skills for Claude ก็ได้แจกแจงหลักการต่างๆ เช่นกัน
สิ่งที่ยังคงอยู่
Claude ไม่ใช่นักออกแบบที่น่าประทับใจในค่าเริ่มต้น นี่ไม่ใช่ข่าวใหม่สำหรับใครก็ตามที่เคยขอหน้า landing page และได้รับไล่ระดับสีม่วงตามปกติ
ทักษะคือวิธีที่คุณลดช่องว่างนี้ ไม่ใช่เพราะโมเดลฉลาดขึ้น แต่เพราะคุณให้ไม้บรรทัดที่นักออกแบบตัวจริงมีอยู่ในหัว โมเดลมีความสำคัญน้อยกว่าวงจรที่คุณสร้างขึ้นรอบๆ มัน
กำหนดค่ามันสักครั้ง การก้าวกระโดดของผลลัพธ์นั้นใหญ่พอที่คุณจะไม่อยากทำงานโดยปราศจากมันอีกต่อไป
คำถามยังคงอยู่: โปรเจกต์ของคุณกี่โปรเจกต์ที่ยังคงออกมาพร้อมไล่ระดับสีม่วงแบบเดิม เพียงเพราะคุณไม่เคยโหลดทักษะก่อนที่จะถาม? บันทึกและแชร์ 👍
แหล่งที่มา / ลิงก์:
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs)
- UIUX Pro Max
- Astryx (ระบบดีไซน์ที่พร้อมสำหรับเอเจนต์ จาก Meta)
- คู่มือฉบับสมบูรณ์สำหรับการสร้างทักษะให้กับ Claude
- บทความล่าสุดของฉัน (กรอบงาน 8 ขั้นตอนสำหรับการสร้างทักษะ):
