Vibe Coding” (氛圍編碼）：從 UI/UX 到網站開發

Transcript

1. 《Vibe Coding: UI/UX to Website Development 》 Cloud Hong Kong
3. Leonardo Lee Cloud Hong Kong • Google Developer Group Cloud Hong Kong Founder and Organizer • Flutter Hong Kong Organizer • Hong Kong Cloud Developer Accessociation Co-Founder and Chair • Hong Kong OpenTech Conference Co-Founder and Core Team member
4. Agenda - Stitch - skill.google Cloud Hong Kong
5. Cloud Hong Kong Scan the Code First
6. Google I/O ‘26 Recap Catch the latest Google AI updates from Google I/O ‘26 Start Vibe Coding This guide will help you vibe code your first app with Google AI | For Developers & Builders Created by saadhamid@ Catch the latest Google I/O ‘26 updates and start vibe coding with Google AI Get free access to this deck Updated 20 May 2026 | https://docs.google.com/presentation/d/1hoklwHAaIU9AcsDHo33 pK_9caCTVu-HqxLAYUk0THeg/present?usp=sharing
7. 從設計稿到部署: 傳統開發模式 vs. Vibe Coding模式 From design draft to deployment: Traditional development model vs. Vibe coding model
9. 1) VPN -> Stitch -> Antigravity -> WordPress 2) Google Cloud Console Cloud Hong Kong How to access from Hong Kong
10. UI/UX Tools: Stitch Taipei https://stitch.withgoogle.com/ Codelab https://codelabs.developers.google.com/des ign-to-code-with-antigravity-stitch
12. 功能操 作
13. Function Operation
16. Input Prompt: "Design a modern SaaS landing page for a space-tech startup called LaunchPad. Use a midnight blue and neon purple palette. Include a hero section with a ‘Get Started' button, a 3-column features grid, and a glassmorphism pricing table." 5. Generate: Click the arrow icon (next to the model selector) to begin the generation process. 6. Refine & Name: Once the UI is generated, give your project a name in the top header. Call it LaunchPad. You can use the chat sidebar to refine any specific elements before moving to the IDE. Cloud Hong Kong
18. Implementation Guide Case 1 : Taitung Slow Travel AI Guide Case2 : Space-tech startup Website
19. Cloud Hong Kong http://ai.dev/ Google AI Studio Build App
23. Cloud Hong Kong https://antigravity.google/
30. mcp_config.json "StitchMCP": { "command": "npx", "args": [ "-y", "mcp-remote", "https://stitch.googleapis.com/mcp", "--header", "X-Goog-Api-Key: your_stitch_apikey" ], "env": {} } Code is set in Antigravity MCP
35. WordPress - Taitung Slow Travel AI Guide Website
39. Cloud Hong Kong How to start Stitch on Google Cloud To use it with your Google Cloud and development workflows: 1. Design in Stitch: Go to Google Stitch and use natural language or reference images to generate your UI. 2. Retrieve your Design: Export your finished interface as code or use the integrated Stitch MCP Server to connect Stitch with your AI coding agents (like Claude Code or Google Antigravity). 3. Deploy with GCP: Take the exported HTML, React, or Tailwind CSS code and deploy it live via the cloud. [1, 2, 3, 4, 5]
40. Cloud Hong Kong https://docs.cloud.google.c om/gemini/enterprise/docs/ connectors/googlestitch/se t-up-data-store The Google Stitch connector for Gemini Enterprise (Google Cloud)
41. How to set up a Google Cloud Project? https://docs.google.com/presentation/d/1CA59uiJaifrrKf_ 9VsPg3sOu7lat0rFc8P_jY7lcCSk/present?usp=sharing For event attendees
42. Google Skills
43. Before you start • Create your Google Skills account: You must have an active Google Skills account. • Verify your email: Use the exact same email address associated with your affiliated Google programs. • Use Incognito mode: For the best experience, open a Google Chrome window in Incognito mode. • Check browser settings: Allow third-party cookies and disable any ad-blockers or plugins.
44. List of available paths • Professional Cloud Architect Certification • Professional Network Engineer Certification • Professional Security Engineer Certification • Professional Data Engineer Certification • Professional Machine Learning Engineer Certification • Professional Cloud DevOps Engineer Certification • Google Cloud Computing Foundations Certificate • Beginner: Introduction to Generative AI • Advanced: Generative AI for Developers • Gemini for Google Cloud Learning Path • Beginner: Google Cloud Cybersecurity Certificate • Integrate Generative AI Into Your Data Workflow • Build and Modernize Applications With Generative AI • Deploy and Manage Generative AI Models • Generate Smarter Generative AI Outputs • Associate Data Practitioner Certification • Generative AI Leader Certification • Professional Security Operations Engineer Certification • Google Cybersecurity Certificate Last updated: 18 May 2026
45. Resources
46. THANKS Cloud Hong Kong