Taste Skill: เคล็ดลับทำให้ AI กลายเป็น Designer ที่มีรสนิยม

เคยไหมครับ? สั่ง AI ให้ช่วยออกแบบหน้าเว็บ Landing Page ให้หน่อย แต่ผลลัพธ์ที่ได้กลับหน้าตาเหมือนกันไปหมดจนแยกไม่ออก—พื้นหลังสีดำไล่เฉดม่วง ปุ่มเรืองแสงนีออน มีการ์ด 3 ใบเรียงกันสวยงาม ตัวเลขความสำเร็จสวยหรู 99.99% พร้อมรีวิวจากลูกค้าที่ชื่อ "John Doe"

ชิ้นงานแบบนี้ในวงการออกแบบเรียกกันว่า AI Slop (AI Slop คือ ผลงานสำเร็จรูปที่ดูออกทันทีว่าใช้ AI ทำ เพราะมันขาดความละเมียดละไมและดูไร้ชีวิตชีวา)

ทำไมสั่ง AI ออกแบบกี่ที งานก็ยังดู "โหล" เหมือนเดิม?

Pain Point ใหญ่ของการใช้ AI สร้างเว็บ หรือ ออกแบบเว็บด้วย AI ไม่ใช่เพราะ AI เขียนโค้ดไม่เป็น หรือจัดวางรูปภาพไม่ได้ แต่เป็นเพราะ AI ขาด Design Taste และ ขาดการเข้าใจบริบทของงาน

เวลา Designer ที่เป็นมนุษย์เริ่มทำงาน เขาไม่ได้เปิดโปรแกรมแล้วลงมือวาดภาพทันที แต่จะเริ่มจากการอ่านโจทย์ ทำความเข้าใจกลุ่มเป้าหมาย เลือกโทนสี และตั้ง Design Direction ก่อนเสมอ แต่สำหรับ AI เมื่อเราสั่งงานด้วย Prompt สั้นๆ โดยไม่มีการกำหนดกรอบที่ชัดเจน มันจะข้ามขั้นตอนการคิดวิเคราะห์ไปทันที แล้วดึง "ค่าเฉลี่ย" ที่เจอบ่อยที่สุดในฐานข้อมูลมาใช้ ซึ่งก็คือหน้าเว็บโทนสีม่วงที่มีอยู่เป็นล้านๆ บนอินเทอร์เน็ตนั่นเอง

Taste Skill คืออะไรและแก้ปัญหาอะไร?

Taste Skill คือ สกิล Open-source ที่พัฒนาโดย Leon Lin และ blueemi ถูกสร้างขึ้นมาตามแนวคิดของ agent-skill เพื่อแก้ปัญหานี้โดยเฉพาะ มันไม่ใช่สกิลที่เข้ามาสอน AI ว่า "ทำอย่างไรถึงจะสวย" แต่เป็นชุดกฎระเบียบและกรอบความคิดที่เข้ามาตั้งโจทย์ให้ AI บังคับให้มันต้องทำงานแบบมีขั้นตอนเหมือน Designer มืออาชีพ ด้วยหลักการง่ายๆ คือ "ห้าม AI ใช้ค่าเริ่มต้นเด็ดขาด!"

ผลลัพธ์ที่ได้: ก่อนและหลังใช้ Taste Skill

เมื่อทดสอบด้วยโจทย์เดียวกันเป๊ะ คือ "ทำหน้า Landing Page ภาษาไทยสำหรับแอปบันทึกการวิ่ง" ความแตกต่างที่เห็นได้ชัดเจนมีดังนี้:

แนวคิดหลัก: บังคับ AI อ่านโจทย์ก่อนลงมือทำ

Taste Skill บังคับให้ AI ต้องทำตามขั้นตอน 4 ชั้นอย่างเคร่งครัด ก่อนที่จะเริ่มเขียนโค้ดหรือจัดวางหน้าเว็บแม้แต่บรรทัดเดียว:

ชั้นที่ 1: อ่านโจทย์

ก่อนเริ่มสร้างหน้าเว็บ AI ต้องสรุปความเข้าใจโจทย์ออกมาให้เราอ่านก่อน 1 ประโยคเสมอ เช่น:

"Reading this as: Landing page for Running App users, with a friendly tone, leaning toward Minimalist style"

ขั้นตอนนี้ช่วยให้เราเบรก AI ได้ทันทีหากมันเข้าใจโจทย์ผิด ตั้งแต่ก่อนเริ่มงาน

ชั้นที่ 2: ตั้งค่า Design Rubric (3 Knobs)

ปรับสไตล์ของงานผ่านตัวเลข 1-10 เพื่อให้อารมณ์ของหน้าเว็บตรงกับแบรนด์มากที่สุด:

• DESIGN_VARIANCE: ค่า 1 คือเป๊ะตามตาราง ส่วน 10 คือกล้าหลุดกรอบอย่างมีศิลปะ
• MOTION_INTENSITY: ค่า 1 คือนิ่งสงบ ส่วน 10 คือขยับหวือหวาเหมือนภาพยนตร์
• VISUAL_DENSITY: ค่า 1 คือโล่งโปร่งแบบแกลเลอรี ส่วน 10 คือแน่นอัดแน่นแบบห้องควบคุม

ชั้นที่ 3: เลือก Design System

หากโจทย์ต้องการความน่าเชื่อถือระดับองค์กร เช่น งานสไตล์ Microsoft หรือเว็บราชการ สกิลจะสั่งให้ใช้ Design System ที่มีอยู่จริง แต่ถ้าเป็นสไตล์เฉพาะตัว เช่น Glassmorphism หรือ Brutalist สกิลจะสั่งให้เขียน CSS ขึ้นใหม่พร้อมกำกับชัดเจนว่าเป็นของเลียนแบบ

ชั้นที่ 4: Pre-Flight Check

ปิดท้ายด้วยรายการตรวจความเรียบร้อย 62 ข้อที่ AI ต้องติ๊กตรวจสอบด้วยตัวเองก่อนส่งงาน หากมีข้อใดข้อหนึ่งไม่ผ่าน สกิลจะถือว่างานยังไม่เสร็จสมบูรณ์

กฎเหล็ก: สิ่งที่ Taste Skill สั่งห้ามทำเด็ดขาด

ความเจ๋งของ Taste Skill คือการรวบรวม "ลายเซ็น AI" (คล้ายกับการตรวจสอบและกำจัดลายเซ็น AI ใน hallmark-skill) หรือพฤติกรรมมักง่ายที่คนดูออกทันทีว่า AI ทำ แล้วสั่งห้ามทำเด็ดขาด ซึ่งคนที่ไม่ใช่ Designer ก็สามารถนำลิสต์นี้ไปใช้ตรวจงานได้ทันที:

• ห้ามใช้สีดำสนิท (#000000): ให้ใช้สีโทนถ่านหรือเทาเข้มแทน เพื่อความสบายตา
• ห้ามใช้สีม่วงไล่เฉดนีออน (The Lila Rule): ให้เปลี่ยนไปใช้พื้นสีเทากลางกับสีเน้นเข้มเพียงสีเดียว
• ห้ามใช้ฟอนต์ Inter เป็นค่าเริ่มต้น: แนะนำให้ทดสอบฟอนต์ที่มีเอกลักษณ์ เช่น Geist, Outfit หรือ Satoshi
• ห้ามใส่การ์ด 3 ใบเรียงเท่ากัน: ให้สลับตำแหน่งซ้ายขวา ใช้ตารางไม่สมมาตร หรือใช้การเลื่อนแนวนอนแทน
• ห้ามใช้ชื่อปลอมเชยๆ: เลิกใช้ชื่อ John Doe หรือบริษัท Acme ให้คิดชื่อที่ดูมีชีวิตจริงและเข้ากับท้องถิ่น
• ห้ามใช้ตัวเลขสวยเกินจริง: เปลี่ยนจาก 99.99% หรือ 50% เป็นตัวเลขที่สมจริง เช่น 47.2% หรือ 12,480 คน
• ห้ามใช้คำโฆษณาเพ้อฝัน: ตัดคำว่า Elevate, Seamless, Unleash หรือ Next-Gen แล้วเปลี่ยนเป็นคำกริยาที่บอกว่าผลิตภัณฑ์นั้นทำอะไรได้จริง

เลือกสกิลที่ใช่: รายการ Taste Skills ทั้งหมด

Taste Skill ไม่ได้มีเพียงสกิลเดียวสำหรับงานทุกประเภท แต่ถูกออกแบบเป็น Specialized Skill Files แยกตามวัตถุประสงค์และสไตล์เฉพาะด้าน เพื่อให้เลือกติดตั้งตามความเหมาะสมของแต่ละโปรเจกต์:

1. หมวด Code Skills (สำหรับสร้างและแก้ไข UI Code)

• taste-skill (Install Name: design-taste-frontend): [Default v2] ตัวหลักอเนกประสงค์สำหรับงานทั่วไป มีระบบอ่านโจทย์ วางทิศทางดีไซน์ และป้องกันดีไซน์โหลโดยไม่ล็อกอยู่กับสไตล์เดียว
• taste-skill-v1 (Install Name: design-taste-frontend-v1): เวอร์ชันดั้งเดิม (v1 Legacy) สำหรับโปรเจกต์ที่ต้องการพฤติกรรมดั้งเดิมเป๊ะๆ
• gpt-tasteskill (Install Name: gpt-taste): เวอร์ชันเข้มงวดเป็นพิเศษ ปรับจูนมาสำหรับ GPT และ Codex โดยเฉพาะ เพิ่มระดับความหลุดกรอบของ Layout และเน้นงาน Animation (GSAP)
• soft-skill (Install Name: soft-skill): สไตล์เรียบหรู คอนทราสต์นุ่มนวล (High-End Visual) ให้ความรู้สึกผ่อนคลาย สเปซโปร่ง แสงเงาและ Animation นุ่มนวล
• minimalist-skill (Install Name: minimalist-skill): สไตล์มินิมอลแบบงานบรรณาธิการ (Editorial Vibes เช่น Notion หรือ Linear) คุมโทนสี เน้นโครงสร้างและตัวหนังสือที่คมชัด
• brutalist-skill (Install Name: brutalist-skill): สไตล์ Industrial Brutalist ดุดัน คอนทราสต์สูง ใช้ Swiss Typography จัดวางองค์ประกอบแบบไม่สมมาตรและแปลกใหม่
• redesign-skill (Install Name: redesign-skill): สกิลสำหรับซ่อมแซมและ Audit โค้ดเดิม เหมาะสำหรับโปรเจกต์ที่มีอยู่แล้วแต่นำมาปรับปรุงสเปซ ลำดับความสำคัญ และดีไซน์ให้โปรขึ้น
• image-to-code-skill (Install Name: image-to-code): สกิลทำงานแบบ Image-first สั่งให้ AI เจนภาพอ้างอิง วางโครงสร้าง วิเคราะห์ภาพ แล้วเปลี่ยนเป็นโค้ด UI ในเวิร์กโฟลว์เดียว
• output-skill (Install Name: output-skill): สกิลควบคุมการเขียนโค้ด ป้องกัน AI แอบตัดทอนโค้ด ทิ้งคอมเมนต์ // TODO หรือส่งงานกึ่งกลางไม่เสร็จสมบูรณ์
• stitch-skill (Install Name: stitch-skill): สกิลรองรับระบบ Google Stitch พร้อมระบบส่งออกไฟล์ DESIGN.md

2. หมวด Image-Generation Skills (สำหรับสร้างภาพอ้างอิง / Concept Board)

• imagegen-frontend-web: สำหรับสร้างภาพจำลองหน้าเว็บ (Website Comps) เน้น Typography จัดวางสเปซ และควบคุมทิศทางดีไซน์ไม่ให้ติดลุค AI โหล
• imagegen-frontend-mobile: สำหรับสร้างภาพหน้าจอแอปมือถือ (iOS/Android) ที่มีสเปซอ่านง่ายและคุมธีมหน้าจอต่อเนื่องกัน
• brandkit: สำหรับสร้างภาพรวม Identity ของแบรนด์ เช่น แนวทางโลโก้, ชุดสี, ฟอนต์ และม็อกอัปการนำไปใช้งาน

ติดตั้ง Taste Skill อย่างไร?

วิธีติดตั้ง taste skill สามารถทำได้ง่ายๆ รองรับ AI Coding Agents ยอดนิยมหลากหลายตัว เช่น Claude Code, Cursor, Codex CLI, OpenCode, Gemini CLI, v0, Lovable และเครื่องมืออื่นๆ ที่รองรับมาตรฐาน SKILL.md

1. ขั้นตอนการติดตั้ง

ติดตั้งผ่าน CLI Command (แนะนำ):

# ติดตั้งชุดสกิลทั้งหมดใน Repository
npx skills add Leonxlnx/taste-skill

# หรือเลือกติดตั้งเฉพาะสกิลที่ต้องการ (เช่น ตัวหลัก design-taste-frontend หรือ Minimalist)
npx skills add [https://github.com/Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) --skill "design-taste-frontend"
npx skills add [https://github.com/Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) --skill "minimalist-skill"

ตัวอย่าง Prompt ภาษาอังกฤษสำหรับนำไปใช้งานจริง (Example Prompts)

เพื่อให้ได้ผลลัพธ์ที่มีประสิทธิภาพสูงสุดจาก AI Coding Agent หลังจากติดตั้ง Taste Skill แล้ว นี่คือรูปแบบ Prompt ภาษาอังกฤษอ้างอิงตามเวิร์กโฟลว์จริง:

1. Prompt สำหรับสร้างหน้า Landing Page ใหม่แบบคุมโทน

"Create a landing page for a camping equipment rental service with a vibrant, welcoming, and nature-inspired theme. Avoid generic SaaS defaults and purple/neon glow aesthetics."

2. Prompt ปรับแต่งสไตล์ผ่านการกำหนดค่า Rubric (Knobs)

"Design a portfolio website for a street photographer. Set DESIGN_VARIANCE=9, MOTION_INTENSITY=2, and VISUAL_DENSITY=3 to keep the focus heavily on imagery with an unconventional yet calm layout."

3. Prompt สำหรับใช้งานคู่กับสกิลเฉพาะทาง (Specific Skills)

สำหรับงานปรับปรุงเว็บเดิม (redesign-skill): "Use redesign-skill to audit this Checkout page code. Refine its spacing, visual hierarchy, and typography to look clean and professional."

สำหรับสไตล์ดิบและดุดัน (brutalist-skill): "Use brutalist-skill to build a landing page for an indie music festival using high-contrast Swiss typography and bold, asymmetrical layouts."

4. Prompt สำหรับสั่งกำชับให้ AI ตรวจสอบงาน (Pre-Flight Check)

"The overall layout looks solid. Please run the 62-point Pre-Flight Check line by line according to Taste Skill rules to confirm no AI tells or default habits slipped through before finalizing."

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

แม้ Taste Skill จะช่วยยกระดับการ ออกแบบเว็บด้วย AI ได้มหาศาล แต่ก็มีข้อจำกัดบางประการที่ควรคำนึงถึง:

• เหมาะกับงานหน้าบ้าน: สกิลนี้เชี่ยวชาญเป็นพิเศษกับหน้า Landing Page, หน้า Portfolio หรือการปรับปรุงเว็บเดิม แต่ไม่เหมาะกับระบบหลังบ้านเช่น Admin Dashboard, ตารางข้อมูลแน่นๆ หรือฟอร์มกรอกข้อมูลหลายขั้นตอน
• ใช้ทรัพยากร AI สูงขึ้น: เนื่องจากไฟล์สกิลมีความยาวและรายละเอียดเยอะ AI จะต้องแบกชุดความคิดนี้ไว้ตลอด ทำให้เหลือพื้นที่ประมวลผลโค้ดน้อยลงเล็กน้อยและมีค่าบริการต่อรอบสูงขึ้น
• เป็นสะพานเชื่อมรสนิยม: คุณสามารถใช้ Taste Skill ควบคู่กับเอกสารคุมแบรนด์ (Design.md) ได้ โดยให้ Taste Skill คุมเรื่องรสนิยมและการจัดวาง ส่วน Design.md คุมรหัสสีและโลโก้หลักของแบรนด์คุณ

Taste Skill คือเครื่องมือที่เข้ามาเปลี่ยนให้ AI หยุดสร้างงานแบบโคลนนิ่งตามค่าเริ่มต้น แล้วหันมาสร้างงานออกแบบที่มีเอกลักษณ์ ตอบโจทย์ผู้ใช้ และเปี่ยมด้วยรสนิยมอย่างแท้จริง