Stitch MCP คืออะไร? ทำไม Vibe Coding แล้ว UI ถึงตรง Design มากขึ้น

ปัญหาก่อนมี Design Context

สมมติเรามี Dashboard ที่ออกแบบใน Google Stitch แล้ว แต่ตอนเริ่ม Code เราให้ Agent อ่านแค่ Requirement ว่า “สร้าง ClientFlow ระบบบริหารลูกค้าและโปรเจกต์”

Agent รู้ว่า Feature คืออะไร แต่ไม่รู้ว่าหน้าจอที่เราอนุมัติแล้วมี Layout แบบไหน มันจึงต้องเดา Sidebar, Header, Card, Table, Spacing และ Style ขึ้นมาเอง ผลลัพธ์อาจใช้งานได้ แต่ไม่เหมือน Design

นี่คือเหตุผลว่าทำไมคำว่า Context สำคัญมากใน Vibe Coding

MCP คืออะไรในมุมคนทำ Design to Code

MCP หรือ Model Context Protocol เป็นวิธีที่ทำให้ AI Agent เชื่อมต่อกับแหล่งข้อมูลหรือเครื่องมือภายนอกผ่าน Interface ที่กำหนดไว้ ใน Workflow นี้ เราสนใจประโยชน์ที่ว่า Agent สามารถเข้าถึงข้อมูลจาก Design Tool ได้โดยไม่ต้องให้เราคัดลอกทุกอย่างลง Prompt เอง

ให้คิดง่าย ๆ ว่า MCP คือ “ทางเชื่อม Context” ไม่ใช่ปุ่มแปลง Design เป็น Code อัตโนมัติ

Stitch MCP ช่วยอะไร

เมื่อ Agent อ่านข้อมูลจาก Google Stitch ที่เกี่ยวข้องกับหน้าจอได้ เราสามารถสั่งงานแบบมี Reference ชัดกว่าเดิม เช่น

อ่าน Dashboard จาก Google Stitch ผ่าน MCP ก่อนเริ่มงาน
ใช้หน้าจอนั้นเป็น Source of truth สำหรับ Layout และ Visual style
ห้ามออกแบบ Sidebar, Header, Typography, Colors, Spacing,
Radius, Table และ Button ใหม่เอง

คำสั่งนี้ช่วยลดช่องว่างระหว่าง “สิ่งที่ออกแบบ” กับ “สิ่งที่ Agent คิดว่าน่าจะเป็น”

MCP ไม่ได้แทน Prompt

การเชื่อม Tool สำเร็จไม่ได้หมายความว่า Agent จะเลือกหน้าที่ถูก หรือรู้ว่าควรเชื่อข้อมูลส่วนไหนเป็นหลัก เราจึงยังต้องบอกอย่างน้อย 3 เรื่อง

ให้เปิด/อ่านอะไร
ใช้อะไรเป็น Source of truth
Task นี้แก้ส่วนไหนและห้ามแก้ส่วนไหน

ถ้า Prompt บอกแค่ “ทำหน้า Clients” Agent อาจอ่าน Context ได้ แต่ยังเลือก reinterpret Design หรือปรับ Component ตามความเห็นของมันได้

Workflow ที่ผมแนะนำ

ให้ Agent อ่าน PROJECT / Scope เพื่อเข้าใจว่า Product ทำอะไร
ให้ Agent อ่าน AGENTS.md เพื่อรู้กฎการทำงานของ Repository
ให้ Agent อ่าน Design จาก Stitch ผ่าน MCP เฉพาะหน้าที่กำลังทำ
ให้มันสรุปว่าเห็น Layout / Component อะไรก่อนลงมือ ถ้า Task ซับซ้อน
ทำทีละหน้า/Feature
เปิด Browser เปรียบเทียบกับ Stitch
ถ้าตรงแล้วจึงใช้ Component ที่สร้างไว้กับหน้าถัดไป

ลำดับนี้ทำให้เราตรวจความเข้าใจของ Agent ได้เร็วกว่าการปล่อยให้มันสร้างทั้งระบบ

PROJECT.md, DESIGN.md และ MCP ต่างกันอย่างไร

ทั้งสามอย่างให้ Context คนละประเภท

Context	บอกอะไร
PROJECT.md	Product ทำอะไร Scope และ Feature คืออะไร
DESIGN.md	Foundation และกฎของ Design ที่ควรรักษา
Stitch ผ่าน MCP	หน้าจอจริงและ Design Reference ที่กำลังใช้

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

ถ้า UI ยังไม่ตรงหลังใช้ MCP

ให้ตรวจทีละข้อ

Agent อ่านหน้าที่ถูกหรือไม่
Prompt ระบุ Source of truth แล้วหรือยัง
มี Style/Component เดิมใน Code ที่ขัดกับ Design หรือไม่
Task ใหญ่เกินไปจน Agentเปลี่ยนหลายอย่างพร้อมกันหรือไม่
Agent สร้าง Component ใหม่ทั้งที่มีของเดิมหรือไม่
มีคำสั่ง “ห้าม redesign shell” หรือยัง

หลายครั้งปัญหาไม่ได้มาจาก MCP ใช้ไม่ได้ แต่มาจาก Agent ได้ Context หลายชุดที่ขัดกัน แล้วเราไม่ได้บอกว่าอันไหนสำคัญที่สุด

ทำไมควรเริ่มจาก Dashboard ก่อน

Dashboard มีส่วนที่ใช้ร่วมกับหลายหน้า ถ้า Agent เข้าใจ Shell ตรงตั้งแต่แรก เราสามารถให้หน้า Clients หรือ Projects reuse Layout และ Component เดิมได้

ตรงกันข้าม ถ้าเริ่มหลายหน้าแยกกัน Agent อาจสร้าง Sidebar สองแบบ Button สองชุด หรือ Spacing คนละระบบ แล้วต้องกลับมารวมทีหลัง

สรุป

Stitch MCP ไม่ใช่สิ่งที่ทำให้ AI “ออกแบบเก่งขึ้น” แต่ช่วยให้ Agent เดาน้อยลง เพราะมีทางเข้าถึง Design Context ที่เราต้องการให้ยึด

เมื่อใช้ร่วมกับ Prompt ที่ชัด และ Task ที่แบ่งเป็นช่วงเล็ก ๆ Workflow จาก Vibe Design ไป Vibe Coding จะควบคุมได้มากขึ้นอย่างเห็นได้ชัดครับ

FROM DESIGN TO REAL APP

อยากลองทำตั้งแต่ Vibe Design ไปจนเป็น Web App ที่ใช้งานได้จริง?

ดูรายละเอียดคอร์ส Design to Web App with AI และ Workflow ที่ใช้ Google Stitch, MCP และ AI Coding Agent ทำโปรเจกต์จริงแบบเป็นขั้นตอน

ดูรายละเอียดคอร์ส ↗