การออกแบบเป็นโค้ดด้วย Antigravity และ Stitch MCP

1. บทนำ

ใน Codelab นี้ คุณจะได้สร้างเว็บไซต์ที่พร้อมใช้งานจริงโดยเชื่อมการออกแบบที่ขับเคลื่อนด้วย AI กับสภาพแวดล้อมการพัฒนาที่เน้น Agent เป็นหลัก คุณจะใช้ Google Stitch เพื่อสร้าง UI ที่มีความละเอียดสูง แล้วเชื่อมต่อกับ Antigravity IDE ผ่าน Model Context Protocol (MCP) สุดท้าย คุณจะใช้ Agent แบบอัตโนมัติเพื่อดึง "Design DNA" และใช้แอปพลิเคชัน React ที่สมบูรณ์แบบ

สิ่งที่คุณจะได้ทำ

• สร้าง UI ใน Stitch: ใช้ภาษาธรรมชาติเพื่อสร้างการออกแบบเว็บขนาดเต็มใน Google Stitch
• เชื่อมต่อกับ MCP: เชื่อมต่อ Antigravity กับโปรเจ็กต์ Stitch โดยใช้ Model Context Protocol
• การใช้งานแบบอัตโนมัติ: ใช้ "แท็บ Agent" ของ Antigravity เพื่อดึงโทเค็นการออกแบบและสร้างโครงสร้างโปรเจ็กต์ React/Tailwind
• ตรวจสอบและปรับแต่ง: ใช้เบราว์เซอร์ในตัวเพื่อ "Vibe Check" โค้ดกับการออกแบบเดิม

สิ่งที่คุณจะได้เรียนรู้

• วิธีใช้ Google Stitch เพื่อสร้างต้นแบบการออกแบบ UI ที่มีความละเอียดสูงอย่างรวดเร็ว
• วิธีกำหนดค่าเซิร์ฟเวอร์ MCP ภายใน Antigravity IDE
• วิธีใช้ Agent แบบอัตโนมัติเพื่อแปลข้อมูลเมตาของการออกแบบภาพเป็นโค้ดแบบแยกส่วน

สิ่งที่คุณต้องมี

• เว็บเบราว์เซอร์ Chrome
• Antigravity IDE ที่ติดตั้ง
• บัญชี Google Stitch
• คีย์ API ของ Stitch
• Node.js (v18 ขึ้นไป) ที่ติดตั้งในเครื่อง

ก่อนเริ่มต้น

1. ใน คอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้เลือกหรือสร้าง โปรเจ็กต์ Google Cloud
2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ดูวิธี ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้ว
3. ไปที่ stitch.withgoogle.com และตรวจสอบว่าคุณลงชื่อเข้าใช้ได้
4. ตรวจสอบว่าคุณได้ติดตั้ง Antigravity IDE แล้ว (พร้อมใช้งานที่ antigravity.google)

2. สร้างการออกแบบใน Google Stitch

Agent ต้องมี "แหล่งข้อมูลที่เชื่อถือได้" ที่เป็นภาพเพื่อใช้เป็นข้อมูลอ้างอิง เราต้องกำหนดสุนทรียภาพก่อนที่จะเขียนโค้ด

1. เข้าถึงแพลตฟอร์ม: ไปที่ stitch.withgoogle.com
2. เลือกประเภทโปรเจ็กต์: ในแดชบอร์ดหลัก ให้ค้นหาปุ่มเปิด/ปิดเริ่มการออกแบบใหม่ คลิกเว็บ เพื่อให้แน่ใจว่าการออกแบบได้รับการเพิ่มประสิทธิภาพสำหรับเลย์เอาต์ที่ใช้เบราว์เซอร์
3. เลือกโมเดล: คลิกเมนูแบบเลื่อนลงของโมเดล (ปัจจุบันแสดง 3.0 Flash) ภายในช่องพรอมต์ ตรวจสอบว่าได้เลือก Gemini 3 เพื่อให้ได้การให้เหตุผลขั้นสูงและการสร้างเลย์เอาต์ที่ล้ำสมัยที่สุด
4. อธิบายวิสัยทัศน์: ในพื้นที่ข้อความที่มีป้ายกำกับว่า "อธิบายการออกแบบของคุณ" ให้ป้อนข้อความแจ้งต่อไปนี้

"ออกแบบหน้า Landing Page ของ SaaS ที่ทันสมัยสำหรับสตาร์ทอัพด้านเทคโนโลยีอวกาศชื่อ LaunchPad ใช้ชุดสีน้ำเงินเข้มและม่วงนีออน รวมส่วน Hero ที่มีปุ่ม "เริ่มต้นใช้งาน" ตารางฟีเจอร์แบบ 3 คอลัมน์ และตารางราคาแบบ Glassmorphism" 5. สร้าง: คลิกไอคอนลูกศร (ข้างตัวเลือกโมเดล) เพื่อเริ่มกระบวนการสร้าง 6. ปรับแต่งและตั้งชื่อ: เมื่อสร้าง UI แล้ว ให้ตั้งชื่อโปรเจ็กต์ในส่วนหัวด้านบน ตั้งชื่อว่า LaunchPad คุณสามารถใช้แถบด้านข้างของแชทเพื่อปรับแต่งองค์ประกอบที่เฉพาะเจาะจงก่อนที่จะย้ายไปยัง IDE

[!TIP] คุณยังเลือกจากส่วน

"ลองใช้ข้อความแจ้งเหล่านี้"

หากต้องการเริ่มต้นอย่างรวดเร็ว

3. กำหนดค่า Antigravity MCP

หากต้องการให้ Agent ของ Antigravity "อ่าน" การออกแบบของคุณได้ คุณต้องสร้างคีย์ API ที่ปลอดภัยและเพิ่มเซิร์ฟเวอร์ MCP ของ Stitch

สร้างคีย์ API ของ Stitch

1. ใน Google Stitch ให้คลิกรูปโปรไฟล์ ที่มุมขวาบน
2. เลือกการตั้งค่า Stitch จากเมนูแบบเลื่อนลง
3. ไปที่ส่วนคีย์ API
4. คลิกปุ่มสร้างคีย์
5. คัดลอกคีย์: คัดลอกคีย์ที่สร้างขึ้นทันทีและจัดเก็บอย่างปลอดภัย คุณจะต้องใช้คีย์นี้ในขั้นตอนถัดไป

กำหนดค่า MCP ของ Stitch ใน Antigravity

1. เปิด Antigravity IDE
2. เปิดเครื่องมือจัดการ Agent

คุณสามารถสลับไปมาระหว่างเครื่องมือจัดการ Agent กับเครื่องมือแก้ไขได้ทุกเมื่อโดยกด CMD+E (Mac) หรือ CTRL+E (Windows) หรือผ่านปุ่ม Open Editor และ Open Agent Manager ที่ด้านขวาบนของแถบเมนู ของ Google

3. คลิก + Open Workspace

หากต้องการเริ่มการสนทนาใหม่ภายในพื้นที่ทำงาน ให้เลือกพื้นที่ทำงานที่ต้องการจากแท็บเริ่มการสนทนา หรือกดปุ่มบวกข้างชื่อพื้นที่ทำงานในแถบด้านข้าง

4. คลิก Open New Workspace แล้วตั้งชื่อพื้นที่ทำงานว่า LaunchPad-Project และเลือกไดเรกทอรีในเครื่อง วิธีนี้จะช่วยให้ Agent มีโฟลเดอร์รูทที่เฉพาะเจาะจงเพื่อสร้างโครงสร้างไฟล์โดยไม่ทำให้โปรเจ็กต์อื่นๆ รก

กำหนดค่า MCP ของ Stitch

1. ภายในพื้นที่ทำงานใหม่ ให้กลับไปที่เครื่องมือจัดการ Agent (CMD+E สำหรับ Mac หรือ CTRL+E สำหรับ Windows) แล้วเลือก MCP Servers

เปิด Store MCP ผ่านเมนูแบบเลื่อนลง "..." ที่ด้านบนของบานหน้าต่าง Agent ของเครื่องมือแก้ไข

Antigravity รองรับ Model Context Protocol (MCP) ซึ่งเป็นมาตรฐานที่ช่วยให้เครื่องมือแก้ไขเชื่อมต่อกับเครื่องมือ ฐานข้อมูล และบริการภายนอกในเครื่องได้อย่างปลอดภัย การผสานรวมนี้จะให้บริบทแบบเรียลไทม์แก่ AI นอกเหนือจากไฟล์ที่เปิดอยู่ในเครื่องมือแก้ไข

MCP ทำหน้าที่เป็นสะพานเชื่อมระหว่าง Antigravity กับ Google Stitch MCP ช่วยให้ Antigravity ดึง Design DNA จากโปรเจ็กต์ Stitch ได้โดยตรงเมื่อจำเป็น แทนที่จะส่งออกโทเค็นการออกแบบหรือคัดลอกโค้ดสีฐานสิบหกและข้อมูลเมตาของเลย์เอาต์ลงในเครื่องมือแก้ไขด้วยตนเอง

2. ค้นหา "Stitch" แล้วคลิก Install
3. เมื่อได้รับข้อความแจ้ง ให้วางคีย์ API ของ Stitch ลงในฟิลด์กำหนดค่า
4. ยืนยัน: พิมพ์ List my Stitch projects. ในแชทของ Agent หากระบบแสดง LaunchPad แสดงว่าคุณพร้อมแล้ว

5. ยืนยัน: พิมพ์ List my Stitch projects. ในแชทของ Agent หาก Agent แสดง LaunchPad แสดงว่ากำหนดค่าสะพานเชื่อมสำเร็จแล้ว

4. ดึงบริบทการออกแบบ

ตอนนี้ Agent ต้องรับข้อมูลเมตาของการออกแบบเพื่อให้โค้ดมีความถูกต้อง

1. ในแชทของ Antigravity ให้พิมพ์ "Use the Stitch MCP to fetch the ‘LaunchPad' project. Extract the color palette and typography, then generate a DESIGN.md file in my root directory."
2. ตรวจสอบ: เปิดไฟล์ DESIGN.md ที่สร้างขึ้นใหม่เพื่อดูโค้ดสีฐานสิบหกและกฎเลย์เอาต์ที่ Agent ดึงออกมา

5. การใช้งาน (บิลด์)

ใช้ Agent เพื่อแปลการออกแบบเป็นแอปพลิเคชัน React ที่ใช้งานได้

1. ป้อนข้อความแจ้ง "สร้าง"

"ฉันต้องการสร้างเว็บไซต์นี้แบบเต็มตอนนี้ ใช้ React และ Tailwind CSS ตรวจสอบว่าคอมโพเนนต์เป็นแบบแยกส่วน เมื่อเสร็จแล้ว ให้เรียกใช้เซิร์ฟเวอร์การพัฒนาและแสดงให้ฉันดูในเบราว์เซอร์ในตัว" 2. สังเกต Agent: Agent จะสร้างโครงสร้างโปรเจ็กต์ในเทอร์มินัล เขียนคอมโพเนนต์ในเครื่องมือแก้ไข และเปิดตัวอย่างในเบราว์เซอร์ในตัว

6. ตรวจสอบและปรับแต่ง

ตรวจสอบเอาต์พุตและใช้ Agent เพื่อแก้ไขความคลาดเคลื่อนของภาพ

1. เปรียบเทียบเอาต์พุตของเบราว์เซอร์ในตัวกับการออกแบบ Stitch เดิม
2. หากองค์ประกอบใดๆ (เช่น ระยะห่างภายในของปุ่มหรือความหนาของแบบอักษร) ไม่ตรงกัน ให้ป้อนข้อความแจ้งต่อไปนี้กับ Agent "ระยะห่างภายในของปุ่ม "เริ่มต้นใช้งาน" ไม่ถูกต้องเล็กน้อย โปรดอ้างอิงการออกแบบ Stitch และอัปเดตคลาส Tailwind"
3. Agent จะดึงบริบทการออกแบบอีกครั้งและใช้การแก้ไขทันที

7. สรุปและขั้นตอนถัดไป

ยินดีด้วย คุณได้เชื่อมช่องว่างระหว่างการออกแบบที่มีความละเอียดสูงกับฐานของโค้ดที่ใช้งานได้สำเร็จแล้วโดยใช้ Antigravity และ MCP ของ Stitch

สรุปสิ่งที่คุณได้ทำ

• ออกแบบ UI ใน Stitch โดยใช้ Gemini 3
• สร้างคีย์ API ที่ปลอดภัยและกำหนดค่า Antigravity MCP
• ใช้ Agent แบบอัตโนมัติเพื่อสร้างและยืนยันเว็บไซต์ React + Tailwind