อาการที่เจอบ่อย

เราออกแบบ Dashboard ใน Google Stitch จนพอใจแล้ว แต่พอให้ AI Coding Agent สร้าง Code กลับพบว่า Sidebar คนละขนาด สีไม่ตรง Table เปลี่ยน Style หรือหน้า Clients เหมือนถูกออกแบบใหม่ทั้งหมด

หลายคนจึงพยายามแก้ด้วยการเขียน Design rule เพิ่มเรื่อย ๆ แต่ปัญหาอาจยังอยู่ เพราะสาเหตุจริงคือ Agent ไม่ได้เห็นหรือไม่ได้ถูกสั่งให้ยึดหน้าจอจริงเป็น Source of truth

สาเหตุที่ 1 — Agent อ่านแต่ Product Context

ไฟล์อย่าง PROJECT.md อธิบายว่า Product ทำอะไร มี Feature อะไร และ Scope คืออะไร แต่ไม่ได้บอกหน้าตาของ Dashboard แบบละเอียด

ถ้า Agent ได้ข้อมูลว่า “ClientFlow มี Dashboard, Clients, Projects, Tasks” มันสามารถสร้างระบบที่สมเหตุสมผลได้หลายร้อยแบบ จึงไม่แปลกที่ผลลัพธ์ไม่เหมือน Stitch

วิธีแก้: แยก Product Context ออกจาก Design Reference แล้วสั่งชัดว่าต้องอ่าน UI จากไหน

สาเหตุที่ 2 — DESIGN.md ถูกใช้เหมือนภาพหน้าจอ

DESIGN.md บอก Typography, Colors, Spacing หรือกฎ Component ได้ แต่ข้อความไม่สามารถแทน Layout เฉพาะทุกจุดในหน้าจอ

ตัวอย่างเช่น “Card radius 12px” ไม่ได้บอกว่า Dashboard มี 4 หรือ 6 Cards, Grid กี่ Column หรือ Table อยู่ใต้ Section ไหน

วิธีแก้: ใช้ DESIGN.md เป็น Foundation และใช้ Design Screen จริงเป็น Reference ร่วมกัน

สาเหตุที่ 3 — Prompt เปิดพื้นที่ให้ AI redesign

Prompt เช่น “สร้างหน้า Clients ให้สวยและทันสมัย” คือการอนุญาตให้ Agentออกแบบใหม่เต็มที่ แม้ในหัวเราจะคาดหวังให้เหมือน Dashboard เดิม

ลองเปลี่ยนเป็น

สร้างหน้า Clients จาก Design ใน Google Stitch
ใช้ Application shell, Typography, Colors, Spacing, Radius,
Table และ Button style เดียวกับ Dashboard ที่มีอยู่
ห้าม redesign Sidebar และ Header
ห้ามสร้าง Visual style ใหม่

คำว่า “ห้าม” มีประโยชน์เมื่อเราต้องรักษาสิ่งที่ตัดสินใจไปแล้ว

สาเหตุที่ 4 — Task ใหญ่เกินไป

ถ้าสั่ง “อ่านทุกหน้าใน Stitch แล้วสร้าง App ให้ครบ” Agent ต้องตัดสินใจหลายเรื่องพร้อมกัน เมื่อ Context เยอะ มันอาจ reuse บางอย่างผิด หรือสร้าง Pattern ใหม่เพื่อให้ Code เดินต่อได้เร็ว

วิธีแก้: ทำ App shell → Dashboard → Shared components → Clients → Projects ทีละขั้น ทุกขั้นต้องผ่าน Review ก่อน

สาเหตุที่ 5 — Component ใน Code เริ่มหลุดแล้ว แต่ถูกใช้ซ้ำต่อ

การ reuse Component เป็นสิ่งที่ดี แต่ถ้า Button หรือ Card ตัวแรกสร้างผิดจาก Design แล้วหน้าต่อไป reuse ตัวนั้น ความผิดจะกระจายทั้งระบบ

ดังนั้นช่วงแรกควรตรวจ Shared Component ให้ละเอียดกว่าปกติ เพราะมันเป็น Foundation ของ Code

Workflow แก้ UI ให้กลับมาตรง

1. หยุดเพิ่มหน้าใหม่ก่อน

เลือก Anchor Screen หนึ่งหน้าที่สำคัญ เช่น Dashboard แล้วทำให้ Code ตรงหน้าจอนี้ก่อน

2. ให้ Agent อ่าน Design Reference โดยตรง

ถ้าใช้ Stitch MCP ให้สั่ง Agent เปิดหน้าที่เกี่ยวข้องก่อนลงมือ อ่านแนวทางได้ใน Stitch MCP คืออะไร

3. ระบุ Source of truth

บอกให้ชัดว่า ถ้า Code เดิม, DESIGN.md และ Stitch ขัดกัน สำหรับ Task UI นี้ให้อะไรเป็นสิ่งที่ต้องยึด

ตัวอย่าง

สำหรับ Layout และ Visual ของ Dashboard ให้ Google Stitch เป็น Source of truth
ใช้ DESIGN.md เป็นกฎเสริม
ถ้า Code เดิมขัดกับ Stitch ให้แก้ Code ให้ตรง Stitch โดยไม่เปลี่ยน Feature

4. แยก Shell กับ Content

ตรวจ Sidebar/Header ก่อน จากนั้นตรวจ Content area, Grid, Card, Table และ Action การแบ่งชั้นช่วยให้รู้ว่า mismatch อยู่ตรงไหน

5. สร้าง Shared Component เมื่อ Pattern ผ่านแล้ว

เมื่อ Button, Input, Card, Badge หรือ Table มีหน้าตาถูกต้อง จึง extract/reuse ตามโครงสร้างของ Project

6. ทำหน้าถัดไปโดย reuse ของเดิม

ตอนทำ Clients ให้ย้ำว่าใช้ Shell และ Shared Component เดิม ไม่ใช่สร้างชุดใหม่จากศูนย์

Prompt สำหรับแก้หน้าที่หลุด

อ่าน Dashboard ใน Google Stitch ผ่าน MCP ก่อน
เปรียบเทียบกับ Dashboard ปัจจุบันในโปรเจกต์
แก้เฉพาะความต่างด้าน Layout และ Visual ให้ตรงกับ Stitch
ห้ามเพิ่ม Feature ใหม่
ห้าม redesign Sidebar/Header
ใช้ Component เดิมเมื่อสามารถปรับให้ตรงได้
หลังแก้ให้ run production build และสรุปจุดที่เปลี่ยน

Prompt นี้ดีตรงที่ให้ Agent เปรียบเทียบ ไม่ใช่ “สร้างใหม่” ซึ่งลดความเสี่ยงที่มันรื้อ Code เกินจำเป็น

อย่าพยายามแก้ทุกอย่างด้วย Prompt ยาวขึ้น

ถ้า Agent ไม่มีสิทธิ์เข้าถึง Reference ที่ต้องใช้ ต่อให้ Prompt ยาวมาก มันก็ยังต้องตีความจากข้อความอยู่ดี ทางแก้ที่ดีกว่าคือปรับ Context + Scope + Review loop

นี่คือหลักเดียวกับ Vibe Coding โดยรวม: Prompt สำคัญ แต่ Prompt ทำงานได้ดีเมื่อ Agent ได้ข้อมูลที่ถูกและงานที่มีขอบเขตตรวจได้

Checklist ก่อนทำหน้าถัดไป

  • Anchor Screen ใน Code ตรง Design แล้ว
  • Shell ผ่าน Review แล้ว
  • Shared Component หลักผ่านแล้ว
  • Agent รู้ว่า Design Source อยู่ที่ไหน
  • Prompt ระบุ “ห้าม redesign” ส่วนที่ล็อกไว้แล้ว
  • Task ใหม่ไม่รวมหลายหน้ามากเกินไป
  • Production Build ผ่าน

เมื่อ Foundation ตรง หน้าถัดไปจะเร็วขึ้นเอง และเราจะใช้ AI เพื่อขยายระบบ แทนการใช้ AI แล้วต้องไล่แก้ Style ซ้ำทุกหน้าครับ

FROM DESIGN TO REAL APP

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

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

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