ดีไซเนอร์หลายคนมองข้าม Claude Code ไปอย่างรวดเร็ว เพราะเข้าใจผิดว่ามันคือเครื่องมือสั่งให้ AI ลงไปวาดงานบนหน้าจอ Figma ซึ่งนอกจากจะช้าแล้ว ยังสิ้นเปลืองโทเคนโดยใช่เหตุ ช่อง UI Collective จึงเปิดคลิป "Claude Code for Designers: All the Ways to Use It" ด้วยการชี้จุดสำคัญว่า ดีไซเนอร์ที่มองข้ามเครื่องมือนี้ กำลังพลาดขุมพลังที่คุ้มค่าที่สุดไป

แก่นหลักของคลิปไม่ได้ชวนให้เอา AI มาทำงานออกแบบแทนมนุษย์ แต่เจาะไปที่งานอีกกลุ่มหนึ่ง คืองานที่เป็นระบบ มีแบบแผนชัดเจน ทำซ้ำบ่อย และไม่ใช่งานที่ต้องใช้ความเข้าใจบริบทแบรนด์ (non-designing tasks) งานพวกนี้คือจุดที่ Claude Code ช่วยประหยัดเวลาได้อย่างมหาศาล สรุปออกมาเป็น 6 วิธีใช้งานจริง พร้อมข้อควรระวัง และหลักคิดสำคัญที่ว่า "AI ทำได้ ไม่ได้แปลว่าควรให้ AI ทำ"

3 เสาหลักที่ต้องรู้: Skill, Routine และ Figma MCP

ก่อนจะลงลึกถึง 6 วิธี มีเครื่องมือและแนวคิด 3 ตัวที่ทำงานร่วมกันตลอดทั้งเวิร์กโฟลว์

• Skill: ชุดคำสั่งและกติกามาตรฐานที่สอนให้ Claude รู้ว่าต้องสร้างเอกสารหรือวิเคราะห์งานตามโครงสร้างไหน
• Routine: เวิร์กโฟลว์อัตโนมัติที่ตั้งค่าไว้ล่วงหน้า เพื่อให้ Claude ทำงานซ้ำเดิมเมื่อมีการอัปเดต เช่น การตรวจสอบการเปลี่ยนแปลงในไฟล์ดีไซน์
• Figma MCP: สะพานเชื่อมระหว่าง Claude กับแคนวาสใน Figma ช่วยให้ AI อ่านและค้นหาคอมโพเนนต์รวมถึงตัวแปร (variables) ในไฟล์ได้โดยตรง

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

วิธีที่ 1: จัดการเอกสาร Spec และ Handoff ให้อัปเดตตามงานจริง

ทุกคอมโพเนนต์ต้องการเอกสาร 2 ชุดเสมอ ชุดแรกคือ component spec สำหรับทีมดีไซน์ เพื่ออธิบายวิธีใช้งานที่ถูกต้อง และชุดที่สองคือ handoff notes สำหรับทีมนักพัฒนา ปัญหาคลาสสิกของทุกทีมคือ เอกสารเหล่านี้มักถูกเขียนขึ้นเพียงครั้งเดียวตอนเริ่มสร้าง แล้วไม่มีใครกลับมาแตะอีกเลย เมื่อเวลาผ่านไปหลายเดือน ดีไซน์เปลี่ยนแต่เอกสารไม่อัปเดต จนกลายเป็นภาระทางเทคนิค (technical debt) เพราะทุกคนอยากโฟกัสงานออกแบบมากกว่าการนั่งพิมพ์เอกสาร

ทางออกคือการใช้ Skill ร่วมกับ Routine โดยคลิปเลือกใช้ Claude Opus สำหรับงานชิ้นนี้ เพราะต้องการโมเดลที่คิดวิเคราะห์ภาพรวมได้อย่างละเอียดและแม่นยำ

1. สร้าง Skill กำหนดโครงสร้าง: สั่งให้ Claude ร่างเทมเพลตมาตรฐานว่าเอกสารต้องประกอบด้วยอะไรบ้าง เช่น หน้าที่การทำงาน เงื่อนไขการใช้งาน variants, states, anatomy, properties, accessibility notes และอะตอมที่เกี่ยวข้อง
2. ตั้งค่า Routine แบบ Manual: กำหนดให้ Routine คอยอ่านไฟล์ผ่าน Figma MCP เพื่อตรวจจับว่าคอมโพเนนต์มีอะไรเปลี่ยนไปบ้าง (เช่น เพิ่ม variant ใหม่ ปรับ state หรือเปลี่ยนชื่อ token) แล้วร่างเนื้อหาส่วนที่เปลี่ยนแปลงตามรูปแบบเดิม

วิธีที่ 2: ทำ Design Audit ตรวจสอบความสม่ำเสมอของระบบ

วิธีนี้คือการใช้ Claude Code ตรวจสอบความสม่ำเสมอ (consistency) ของคอมโพเนนต์ในไฟล์ ซึ่งผู้สอนยกให้เป็นจุดที่สร้างมูลค่าได้คุ้มค่าที่สุด

เวิร์กโฟลว์ทำได้โดยติดตั้ง audit-design-system skill แล้ววางลิงก์หน้า Figma ที่ต้องการตรวจสอบ Claude จะสแกนหาจุดผิดพลาด เช่น เลเยอร์ที่ไม่ได้ผูกตัวแปร (variables) คอมโพเนนต์ที่หลุดออกจากระบบ หรือจุดที่มีการฮาร์ดโค้ดค่าสี hex ลงไปตรงๆ ผลลัพธ์ที่ได้จะสรุปออกมาเป็นรายงานแจกแจงตามลำดับความสำคัญ พร้อมข้อเสนอแนะในการแก้ไข ช่วยลดเวลาการตรวจงานดีไซน์ขนาดใหญ่จากหลายชั่วโมงให้เหลือเพียงไม่กี่นาที

อย่างไรก็ตาม มี 2 งานที่ผู้สอนแนะนำว่า ไม่ควรพึ่งพา AI:

• Progress Audit (สรุปความคืบหน้ารวม): การเขียนสรุปสั้นๆ ด้วยตัวเอง 10 นาทีมีประสิทธิภาพกว่า เพราะ AI ไม่เห็นบริบทและงานในไฟล์อื่นๆ ของทีม
• Accidental-Change Detection (ตรวจการแก้ไฟล์โดยไม่ตั้งใจ): แก้ไขได้ง่ายกว่าด้วยวินัยพื้นฐาน คือการล็อกเลเยอร์ (Lock Layer) ชิ้นงานที่พร้อมส่งต่อให้ทีมพัฒนา

วิธีที่ 3: ตรวจสอบ Accessibility เรื่อง Contrast สีตามมาตรฐาน WCAG

การตรวจค่าความเปรียบต่างของสี (color contrast) ตามมาตรฐาน WCAG เป็นงานที่มีเกณฑ์ชัดเจน จึงเหมาะกับการใช้ AI เข้ามาช่วยตรวจสอบ

วิธีใช้งานคือสั่งรัน accessibility-review skill แล้ววางลิงก์เฟรมที่ต้องการตรวจ AI จะคำนวณอัตราส่วน contrast ระหว่างสีตัวอักษรกับพื้นหลัง พร้อมระบุจุดที่ไม่ผ่านเกณฑ์มาตรฐานให้อย่างรวดเร็ว

ข้อควรระวังคือ ผลการตรวจอาจมี false positive เกิดขึ้นได้ เช่น การแจ้งเตือนบนพื้นหลังสีเข้มที่ในงานจริงไม่ได้นำไปวางซ้อนกัน หรือการเตือนสถานะ loading state ที่ไม่ได้ตั้งใจใส่ตั้งแต่แรก จึงต้องอาศัยวิจารณญาณของดีไซเนอร์ในการกรองผลลัพธ์รอบสุดท้ายเสมอ

วิธีที่ 4: คำนวณ Type Scale และสร้าง Type Styles

การวางระบบขนาดตัวอักษร (Type Scale) และผูกตัวแปรเข้ากับสไตล์ใน Figma สำหรับหน้าจอ Desktop, Tablet และ Mobile เป็นงานซ้ำซ้อนที่กินเวลามากตอนเริ่มโปรเจกต์ใหม่

เวิร์กโฟลว์นี้เริ่มจากการระบุขนาดฟอนต์ที่ต้องการ (Hero, H1 ถึง H6, Body ขนาดต่างๆ) ให้ Claude คำนวณและพรีวิวสเกล จากนั้นสั่ง push เข้าสู่ Figma โดยกำกับให้ระบบสร้างตัวแปร (variables) ให้เสร็จก่อน แล้วค่อยสร้าง text styles พร้อมผูกตัวแปรเข้าด้วยกันอย่างถูกต้อง

วิธีที่ 5: สร้าง Variable Library ทั้งชุด กับคำถามว่า "Claude ทำได้ แต่ควรให้ทำไหม?"

แม้ Claude Code จะมีความสามารถในการสร้าง Variable Library ทั้งระบบ ตั้งแต่ระดับ Brand (ค่าสีดิบ), Alias (แบ่งตามหน้าที่ เช่น Primary, Secondary, Error) ไปจนถึง Map (จัดกลุ่มตามพื้นผิว ไอคอน ขอบ) ได้ผ่านคำสั่งเดียว

แต่คำตอบของผู้เชี่ยวชาญคือ ไม่แนะนำให้โยนงานนี้ให้ AI ทำทั้งหมด

เหตุผลคือ AI ไม่เข้าใจโครงสร้างและภาษาเฉพาะ (naming conventions) ของแต่ละองค์กร การให้ AI เจนโครงสร้างขึ้นมาเอง มักทำให้เราต้องเสียเวลาแกะโครงสร้างและไล่แก้จุดผิดมากกว่าการสร้างเองตั้งแต่ต้น ที่สำคัญคือ การสร้างตัวแปรด้วยตัวเองจะช่วยให้ดีไซเนอร์เข้าใจตรรกะเบื้องหลังระบบดีไซน์ของตัวเองอย่างลึกซึ้งที่สุด

วิธีที่ 6: แปลง Variables ใน Figma เป็นไฟล์ Token (JSON) ส่งต่อให้ Dev

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

หัวใจของวิธีนี้ไม่ใช่แค่การได้ไฟล์ JSON แต่คือการเปิดโอกาสให้ดีไซเนอร์และนักพัฒนาได้มานั่งคุยตกลงเรื่องโครงสร้างข้อมูลร่วมกัน เพื่อสร้างความเข้าใจตรงกันว่าโค้ดและดีไซน์จะเชื่อมโยงกันอย่างไร

แก่นแท้: "AI ทำได้" ไม่ได้แปลว่า "ต้องให้ AI ทำทุกเรื่อง"

บทเรียนสำคัญที่สุดจากเรื่องนี้ คือการมีเส้นแบ่งที่ชัดเจนในการเลือกใช้งาน AI

• งานที่คุ้มค่าแก่การใช้ AI: งานที่มีกฎเกณฑ์ตายตัว มีมาตรฐานสากลรองรับ และเป็นงานเอกสารที่ต้องทำซ้ำๆ เช่น การร่าง Spec, การทำ Design Audit, การตรวจ Contrast สีตามมาตรฐาน WCAG และการสร้าง Type Scale เบื้องต้น
• งานที่ควรทำด้วยตัวเอง: งานที่ต้องอาศัยการตัดสินใจเชิงกลยุทธ์ ความเข้าใจลึกซึ้งในตัวแบรนด์ และการวางรากฐานโครงสร้างระยะยาว เช่น การออกแบบระบบ Variable หลัก การให้คะแนน UX/UI และการวางสถาปัตยกรรมข้อมูล

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