วันนี้พูดเรื่อง MCP ต่อสักนิดนึงถ้าเมื่อก่อนเวลามีใครถามแอดว่า design system คืออะไร แอดจะตอบว่ามันคือชุดของ component กับกฎกติกาที่ทีมตกลงกันไว้ ฟังดูดีนะ แต่ในชีวิตจริงสิ่งที่ทีมส่วนใหญ่มีคือ UI kit ใน Figma หนึ่งไฟล์ กับ documentation ที่ไม่มีใครเปิดอ่านอีกเลยหลังจาก kickoff
.
ปีนี้คำตอบนั้นใช้ไม่ได้แล้ว สิ่งที่เปลี่ยนเกมคือ MCP ถ้ายังไม่รู้จัก มันคือมาตรฐานกลางที่ทำให้ AI ต่อเข้าไปคุยกับเครื่องมือต่างๆ ได้ตรงๆ และตอนนี้ design system ดังๆ แทบทุกตัวกำลังต่อสายตัวเองเข้ากับมัน
.
Figma เปิด Dev Mode MCP ให้ AI อ่าน frame แล้วเห็น component เห็น variable เห็น token จริงๆ ไม่ใช่เดาจาก screenshot ถ้าทีมไหนทำ Code Connect ไว้ AI จะดึงโค้ดจริงของทีมมาใช้เลย ไม่ต้องเขียนใหม่ให้เพี้ยน
.
ฝั่ง component library ก็มากันครบ shadcn มี MCP ให้ AI ค้นและติดตั้ง component จาก registry ได้เอง Ant Design ฝัง MCP มาใน cli ของตัวเอง Chakra กับ MUI ก็มี official server ที่บอก props บอก token บอกตัวอย่างการใช้งานให้ AI ถามได้เหมือนถามรุ่นพี่ในทีม แม้แต่ Carbon ของ IBM ที่เป็น design system ระดับ enterprise ก็เปิด MCP ให้ AI เข้าถึง guideline กับ usage doc ทั้งหมด
.
ตัวที่แอดชอบสุดคือ Storybook เขาทำสิ่งที่เรียกว่า Component Manifest คือสรุปว่า component แต่ละตัวมี props อะไร มี variant อะไร ผูกกับ token ไหน แล้วเสิร์ฟให้ AI ในขนาดที่เล็กกว่าการให้มันไปไล่อ่าน source code เป็นสิบเท่า แถมยังให้ AI เขียน story แล้วรัน test กับ accessibility check เพื่อตรวจงานตัวเองได้อีก
.
แล้วมันได้ผลจริงไหม Razorpay ทำ MCP ให้ design system ของตัวเองที่ชื่อ Blade ตัวเลขที่เขาเปิดเผยคือวิศวกร frontend เจ็ดสิบเปอร์เซ็นต์ใช้มัน build feature โดยไม่ได้เขียนโค้ดเองสักบรรทัด และความแม่นยำรอบแรกอยู่ที่เจ็ดสิบห้าเปอร์เซ็นต์โดยไม่ต้อง prompt อะไรเพิ่ม อ่านมาถึงตรงนี้บางคนอาจคิดว่า งั้นก็ปล่อยให้ AI ทำไปสิ design system จะมีไว้ทำไม
.
ตรงกันข้ามเลยครับ ทุกเคสที่เล่ามามีเงื่อนไขเดียวกันหมด คือ AI จะเก่งได้ก็ต่อเมื่อ design system นั้นแข็งแรงพอที่จะป้อน context ให้มัน token ต้องมีโครงสร้างจริง component ต้องมี doc จริง ฝั่ง design กับฝั่ง code ต้องเชื่อมกันจริง ทีมไหนทำสิ่งเหล่านี้มาตลอด MCP คือตัวคูณ ทีมไหน design system เป็นแค่ไฟล์สวยๆ ที่ไม่มีใครดูแล AI ก็จะ hallucinate ใส่หน้าเหมือนเดิม ใน report เรื่อง design system ปีนี้มีคนพูดไว้ตรงมากว่ายังไม่มี AI ตัวไหนใช้ design system ได้โดยไม่มั่ว ถ้าระบบนั้นไม่ได้ถูกเตรียมไว้ให้มันอ่าน
.
AI ไม่ได้ทำให้ design system ตาย มันแค่กรอง design system ไหนเป็นของจริงและจะได้อยู่ในตลาดนี้ต่อ
.
Design systems are not just UI kits anymore.
With MCP, some design systems can now connect deeper with dev workflows, components, docs, and AI tools, making the design-to-code process much smoother.
.
มีต่อใน comment
.
#DesignLazyyy #DesignSystem #MCP #DesignToCode #FigmaMCP #AIDesign #UXUI #UIDesign #DesignEngineer #ออกแบบUI