1. บทนำ
ใน Codelab นี้ คุณจะได้สร้างเว็บไซต์ที่พร้อมใช้งานจริงโดยเชื่อมการออกแบบที่ขับเคลื่อนด้วย AI กับสภาพแวดล้อมในการพัฒนาซอฟต์แวร์แบบ Agent-First คุณจะใช้ Google Stitch เพื่อสร้าง UI ที่มีความเที่ยงตรงสูง จากนั้นเชื่อมต่อกับ Antigravity IDE ผ่าน Model Context Protocol (MCP) สุดท้าย คุณจะใช้เอเจนต์อัตโนมัติเพื่อดึง "DNA การออกแบบ" และใช้แอปพลิเคชัน React ที่สมบูรณ์แบบ
สิ่งที่คุณต้องทำ
- สร้าง UI ใน Stitch: ใช้ภาษาธรรมชาติเพื่อสร้างการออกแบบเว็บแบบเต็มรูปแบบใน Google Stitch
- เชื่อมต่อด้วย MCP: เชื่อมต่อ Antigravity กับโปรเจ็กต์ Stitch โดยใช้ Model Context Protocol
- การติดตั้งใช้งานแบบอัตโนมัติ: ใช้ "แท็บเอเจนต์" ของ Antigravity เพื่อดึงโทเค็นการออกแบบและสร้างโครงร่างโปรเจ็กต์ React/Tailwind
- ยืนยันและปรับแต่ง: ใช้เบราว์เซอร์ในตัวเพื่อ "ตรวจสอบความเหมาะสม" ของโค้ดกับดีไซน์ต้นฉบับ
สิ่งที่คุณจะได้เรียนรู้
- วิธีใช้ Google Stitch เพื่อสร้างต้นแบบการออกแบบ UI ที่มีความละเอียดสูงอย่างรวดเร็ว
- วิธีกำหนดค่าเซิร์ฟเวอร์ MCP ภายใน Antigravity IDE
- วิธีใช้เอเจนต์อัตโนมัติเพื่อแปลข้อมูลเมตาของการออกแบบภาพเป็นโค้ดแบบแยกส่วน
สิ่งที่คุณต้องมี
- เว็บเบราว์เซอร์ Chrome
- ติดตั้ง Antigravity IDE
- บัญชี Google Stitch
- คีย์ API ของ Stitch
- Node.js (v18 ขึ้นไป) ติดตั้งไว้ในเครื่อง
ก่อนเริ่มต้น
- ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
- ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่
- ไปที่ stitch.withgoogle.com และตรวจสอบว่าคุณลงชื่อเข้าใช้ได้
- ตรวจสอบว่าได้ติดตั้ง Antigravity IDE แล้ว (พร้อมให้บริการที่ antigravity.google)
2. สร้างการออกแบบใน Google Stitch
Agent ต้องการ "แหล่งข้อมูลที่ถูกต้อง" ที่มองเห็นได้เพื่อทำตาม ก่อนที่จะเขียนโค้ด เราต้องกำหนดสุนทรียภาพก่อน
- เข้าถึงแพลตฟอร์ม: ไปที่ stitch.withgoogle.com
- เลือกประเภทโปรเจ็กต์: ในแดชบอร์ดหลัก ให้หาปุ่มเปิด/ปิดเริ่มออกแบบใหม่ คลิกเว็บเพื่อให้แน่ใจว่าการออกแบบได้รับการเพิ่มประสิทธิภาพสําหรับเลย์เอาต์ที่อิงตามเบราว์เซอร์
- เลือกโมเดล: คลิกเมนูแบบเลื่อนลงของโมเดล (ปัจจุบันแสดง 3.0 Flash) ภายในช่องพรอมต์ ตรวจสอบว่าได้เลือก Gemini 3 เพื่อให้ได้การให้เหตุผลขั้นสูงและการสร้างเลย์เอาต์ที่ล้ำสมัยที่สุด
- อธิบายวิสัยทัศน์ของคุณ: ในพื้นที่ข้อความที่มีป้ายกำกับว่า "อธิบายการออกแบบของคุณ" ให้ป้อนพรอมต์ของคุณ
"ออกแบบหน้า Landing Page ที่ทันสมัยของ SaaS สำหรับสตาร์ทอัพด้านเทคโนโลยีอวกาศชื่อ LaunchPad ใช้ชุดสีน้ำเงินมิดไนท์บลูและม่วงนีออน รวมส่วนฮีโร่ที่มีปุ่ม "เริ่มต้นใช้งาน" ตารางฟีเจอร์แบบ 3 คอลัมน์ และตารางราคาแบบกลาสมอร์ฟิซึม" 5. สร้าง: คลิกไอคอนลูกศร (ข้างตัวเลือกโมเดล) เพื่อเริ่มกระบวนการสร้าง 6. ปรับแต่งและตั้งชื่อ: เมื่อสร้าง UI แล้ว ให้ตั้งชื่อโปรเจ็กต์ในส่วนหัวด้านบน เรียกมันว่า LaunchPad คุณใช้แถบด้านข้างของแชทเพื่อปรับแต่งองค์ประกอบที่เฉพาะเจาะจงก่อนที่จะย้ายไปยัง IDE ได้
[!TIP] คุณยังเลือกจาก
"ลองใช้พรอมต์เหล่านี้"
หากต้องการเริ่มต้นอย่างรวดเร็ว
3. กำหนดค่า Antigravity MCP
หากต้องการอนุญาตให้ Antigravity Agent "อ่าน" การออกแบบ คุณต้องสร้างคีย์ API ที่ปลอดภัยและเพิ่มเซิร์ฟเวอร์ Stitch MCP
สร้างคีย์ API ของ Stitch
- ใน Google Stitch ให้คลิกรูปโปรไฟล์ที่มุมขวาบน
- เลือกการตั้งค่า Stitch จากเมนูแบบเลื่อนลง
- ไปที่ส่วนคีย์ API
- คลิกปุ่มสร้างคีย์
- คัดลอกคีย์: คัดลอกคีย์ที่สร้างขึ้นทันทีและจัดเก็บอย่างปลอดภัย เนื่องจากคุณจะต้องใช้ในขั้นตอนถัดไป
กำหนดค่า Stitch MCP ใน Antigravity
- เปิด Antigravity IDE
- เปิดAgent Manager
คุณสลับระหว่าง Agent Manager กับเอดิเตอร์ได้ทุกเมื่อโดยกด CMD+E (Mac) หรือ CTRL+E (Windows) หรือผ่านปุ่ม Open Editor และ Open Agent Manager ที่ด้านขวาบนของแถบเมนู .
- คลิก + เปิด Workspace
หากต้องการเริ่มการสนทนาใหม่ภายในพื้นที่ทำงาน ให้เลือกพื้นที่ทำงานที่ต้องการจากแท็บเริ่มการสนทนา หรือกดปุ่มบวกข้างชื่อพื้นที่ทำงานในแถบด้านข้าง
- คลิกเปิดพื้นที่ทำงานใหม่ แล้วตั้งชื่อพื้นที่ทำงาน
LaunchPad-Projectและเลือกไดเรกทอรีในเครื่อง ซึ่งจะช่วยให้ Agent มีโฟลเดอร์รูทที่เฉพาะเจาะจงเพื่อสร้างโครงไฟล์โดยไม่รบกวนโปรเจ็กต์อื่นๆ
กำหนดค่า MCP ของ Stitch
- ในพื้นที่ทํางานใหม่ ให้กลับไปที่Agent Manager (CMD+E สําหรับ Mac หรือ CTRL+E สําหรับ Windows) แล้วเลือก MCP Servers
เปิดร้านค้า MCP ผ่านเมนูแบบเลื่อนลง "..." ที่ด้านบนของแผงตัวแทนของเอดิเตอร์
Antigravity รองรับ Model Context Protocol (MCP) ซึ่งเป็นมาตรฐานที่ช่วยให้เอดิเตอร์เชื่อมต่อกับเครื่องมือ ฐานข้อมูล และบริการภายนอกในเครื่องได้อย่างปลอดภัย การผสานรวมนี้จะให้บริบทแบบเรียลไทม์แก่ AI นอกเหนือจากไฟล์ที่เปิดในโปรแกรมแก้ไข
MCP ทำหน้าที่เป็นตัวเชื่อมระหว่าง Antigravity กับ Google Stitch MCP ช่วยให้ Antigravity ดึง DNA การออกแบบจากโปรเจ็กต์ Stitch ได้โดยตรงเมื่อจำเป็น แทนที่จะต้องส่งออกโทเค็นการออกแบบด้วยตนเอง หรือคัดลอกรหัสฐานสิบหกและข้อมูลเมตาของเลย์เอาต์ลงในเอดิเตอร์
- ค้นหา "Stitch" แล้วคลิกติดตั้ง
- เมื่อได้รับข้อความแจ้ง ให้วางคีย์ API ของ Stitch ลงในฟิลด์กำหนดค่า
- ยืนยัน: ในแชทของตัวแทน ให้พิมพ์
List my Stitch projects.หากระบบแสดงLaunchPadแสดงว่าคุณพร้อมแล้ว
- ยืนยัน: ในแชทของเอเจนต์ ให้พิมพ์
List my Stitch projects.หากเอเจนต์ตอบกลับเป็นLaunchPadแสดงว่ากำหนดค่าบริดจ์สำเร็จแล้ว
4. ดึงบริบทการออกแบบ
ตอนนี้ Agent ต้องนำเข้าข้อมูลเมตาของการออกแบบเพื่อให้แน่ใจว่าโค้ดมีความถูกต้อง
- ในแชท Antigravity ให้พิมพ์ว่า "Use the Stitch MCP to fetch the ‘LaunchPad' project. ดึงชุดสีและแบบตัวพิมพ์ จากนั้นสร้างไฟล์
DESIGN.mdในไดเรกทอรีราก" - ตรวจสอบ: เปิด
DESIGN.mdที่สร้างขึ้นใหม่เพื่อดูรหัสฐานสิบหกและกฎเลย์เอาต์ที่ Agent ดึงออกมา
5. การใช้งาน (บิลด์)
ใช้ Agent เพื่อแปลการออกแบบเป็นแอปพลิเคชัน React ที่ใช้งานได้
- ป้อนพรอมต์ "สร้าง" ดังนี้
"ฉันต้องการสร้างเว็บไซต์นี้ให้เสร็จสมบูรณ์ตอนนี้ ใช้ React และ Tailwind CSS ตรวจสอบว่าคอมโพเนนต์เป็นแบบแยกส่วน เมื่อเสร็จแล้ว ให้เรียกใช้เซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์และแสดงให้ฉันดูในเบราว์เซอร์แบบผสานรวม" 2. สังเกต Agent: Agent จะสร้างโครงร่างโปรเจ็กต์ในเทอร์มินัล เขียนคอมโพเนนต์ในเครื่องมือแก้ไข และเปิดตัวอย่างในเบราว์เซอร์แบบผสานรวม
6. ตรวจสอบและปรับแต่ง
ตรวจสอบเอาต์พุตและใช้ Agent เพื่อแก้ไขความคลาดเคลื่อนของภาพ
- เปรียบเทียบเอาต์พุตของเบราว์เซอร์แบบผสานรวมกับการออกแบบ Stitch ต้นฉบับ
- หากองค์ประกอบใดๆ (เช่น ระยะห่างภายในปุ่มหรือความหนาของแบบอักษร) ไม่ตรงกัน ให้แจ้งตัวแทนว่า "ระยะห่างภายในปุ่ม "เริ่มต้นใช้งาน" ไม่ตรงกันเล็กน้อย โปรดกลับไปดูการออกแบบของ Stitch และอัปเดตคลาส Tailwind"
- เอเจนต์จะดึงบริบทการออกแบบอีกครั้งและใช้การแก้ไขทันที
7. สรุปและขั้นตอนถัดไป
ยินดีด้วย คุณได้เชื่อมช่องว่างระหว่างการออกแบบที่มีรายละเอียดเสมือนจริงสูงกับฐานของโค้ดที่ใช้งานได้โดยใช้ Antigravity และ Stitch MCP
สรุปสิ่งที่คุณทำ
- ออกแบบ UI ใน Stitch โดยใช้ Gemini 3
- สร้างคีย์ API ที่ปลอดภัยและกำหนดค่า Antigravity MCP
- ใช้เอเจนต์อัตโนมัติเพื่อสร้างและยืนยันเว็บไซต์ React + Tailwind