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

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 ขึ้นไป) ติดตั้งไว้ในเครื่อง

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

1. ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ Cloud แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่

สำหรับเครดิต Google Cloud: หากต้องการช่วยให้คุณใช้ Antigravity กับโปรเจ็กต์ Google Cloud ได้ ให้แลกรับเครดิต Google Cloud ฟรีโดยใช้ลิงก์นี้ คุณสามารถทำตามวิธีการที่นี่เพื่อเปิดใช้งานเครดิตและสร้างโปรเจ็กต์ใหม่

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 ใช้ชุดสีน้ำเงินมิดไนท์บลูและม่วงนีออน รวมส่วนเนื้อหาหลักที่มีปุ่ม "เริ่มต้นใช้งาน" ตารางฟีเจอร์แบบ 3 คอลัมน์ และตารางราคาแบบกลาสมอร์ฟิซึม" 5. สร้าง: คลิกไอคอนลูกศร (ข้างตัวเลือกโมเดล) เพื่อเริ่มกระบวนการสร้าง 6. ปรับแต่งและตั้งชื่อ: เมื่อสร้าง UI แล้ว ให้ตั้งชื่อโปรเจ็กต์ในส่วนหัวด้านบน เรียกมันว่า LaunchPad คุณใช้แถบด้านข้างของแชทเพื่อปรับแต่งองค์ประกอบที่เฉพาะเจาะจงก่อนที่จะย้ายไปยัง IDE ได้

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

"ลองใช้พรอมต์เหล่านี้"

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

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

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

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

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

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

1. เปิด Antigravity IDE
2. เปิดAgent Manager

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

3. คลิก + เปิด Workspace

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

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

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

1. ในพื้นที่ทํางานใหม่ ให้กลับไปที่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 ได้โดยตรงเมื่อจำเป็น แทนที่จะต้องส่งออกโทเค็นการออกแบบด้วยตนเอง หรือคัดลอกรหัสฐานสิบหกและข้อมูลเมตาของเลย์เอาต์ลงในเอดิเตอร์

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

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

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

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

1. ในแชท Antigravity ให้พิมพ์ว่า "Use the Stitch MCP to fetch the ‘LaunchPad' project. ดึงชุดสีและแบบตัวพิมพ์ จากนั้นสร้างไฟล์ DESIGN.md ในไดเรกทอรีราก"
2. ตรวจสอบ: เปิด DESIGN.md ที่สร้างขึ้นใหม่เพื่อดูรหัสฐานสิบหกและกฎเลย์เอาต์ที่ Agent ดึงออกมา

5. การใช้งาน (การสร้าง)

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

1. ป้อนพรอมต์ "สร้าง" ดังนี้

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

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

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

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

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

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

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

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