Vấn đề quen thuộc với developer

Khi validate ý tưởng sản phẩm, một trong những bottleneck lớn nhất là UI: backend logic thì code nhanh được, nhưng làm một màn hình trông đủ "decent" để demo với stakeholder lại tốn thời gian không tương xứng. Không phải vì khó - mà vì phải đưa ra quyết định về màu sắc, layout, spacing, component, rồi điều chỉnh đi điều chỉnh lại.

Trước đây team chúng tôi hay dùng Figma cho bước này. Nhưng từ đầu 2026, sau update lớn của Google Stitch, quy trình thay đổi đáng kể.

---

Google Stitch là gì - không phải Figma, không phải Canva

Stitch là tool AI design từ Google Labs, dùng Gemini 2.5 Pro làm engine. Nhưng cách nó hoạt động khác với các design tool truyền thống:

• Không có artboard, không có layer panel - bạn không "vẽ" UI, bạn mô tả UI
• Input: text prompt, ảnh sketch, wireframe chụp tay, screenshot UI tham khảo
• Output: design hoàn chỉnh kèm HTML/CSS sạch, có thể export sang Figma hoặc đưa thẳng vào AI Studio / Antigravity

Khái niệm Google đang push là "vibe design" - thay vì chỉ định từng pixel, bạn mô tả feel của sản phẩm: "minimal, professional, dark mode, giống Vercel dashboard nhưng nhẹ nhàng hơn". Stitch interpret và generate.

Update tháng 3/2026 mang thêm voice canvas: nói trực tiếp vào design, agent phản hồi realtime và chỉnh theo lời nói - "thêm cho tôi 3 variant của header này", "làm màu sắc ấm hơn".

---

Workflow thực tế: từ Stitch đến Antigravity

Pipeline đầy đủ có 5 bước:

[1. Mô tả UI trong Stitch]
          ↓
[2. Refine bằng chat / voice]
          ↓
[3. Export sang Antigravity qua MCP]
          ↓
[4. Antigravity agent thêm logic, backend, auth]
          ↓
[5. Deploy]

Bước 1: Generate UI trong Stitch

Truy cập stitch.withgoogle.com - miễn phí, đăng nhập bằng Google account.

Viết prompt đủ thông tin để Stitch hiểu ngữ cảnh:

Thiết kế màn hình dashboard cho tool phân tích log file.
- Sidebar trái: navigation + recent sessions
- Content chính: bảng log với filter theo severity (error/warning/info) và time range
- Header: search bar + user avatar
- Tone: professional, dark mode, minimal - tham khảo style của Datadog hoặc Grafana
- Mobile-responsive

Stitch sẽ generate 2–3 variant. Xem qua, chọn variant gần nhất với ý tưởng.

Mẹo thực tế: Đừng cố viết prompt hoàn hảo ngay lần đầu. Generate nhanh, xem kết quả, rồi dùng follow-up prompt để điều chỉnh - workflow này nhanh hơn nhiều so với viết prompt dài ngay từ đầu.

Bước 2: Iterate trong canvas

Sau khi có base design, dùng chat panel hoặc voice để refine:

• "Thêm badge số lượng error vào sidebar navigation"
• "Table row khi hover cần có highlight rõ hơn"
• "Thêm empty state cho lúc chưa có log nào"

Stitch duy trì context design hiện tại, chỉnh từng phần thay vì generate lại từ đầu.

Nếu muốn đưa qua Figma để team design polish thêm: dùng nút "Export to Figma" - design sẽ land vào Figma dưới dạng editable components.

Bước 3: Kết nối Stitch với Antigravity qua MCP

Đây là phần thú vị nhất. Stitch có MCP server riêng, cho phép Antigravity agent trực tiếp kéo design về mà không cần copy-paste thủ công.

Cài đặt:

Trong Antigravity, vào menu → MCP Servers → tìm "stitch" → Install. Cần API key từ Stitch account settings.

Hoặc thêm thủ công vào mcp_config.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://mcp.stitch.withgoogle.com",
      "headers": {
        "Authorization": "Bearer ${STITCH_API_KEY}"
      }
    }
  }
}

Sau khi kết nối, Antigravity agent có thể dùng Stitch tools trực tiếp trong conversation.

Bước 4: Antigravity build app từ design

Khi đã có MCP kết nối, mô tả cho Antigravity:

Dùng Stitch design từ project [tên project] làm base UI.
Build một web app hoàn chỉnh với:
- Node.js backend để gọi Gemini API phân tích log
- Firestore để lưu lịch sử sessions
- Firebase Auth với Google login
- Deploy target: Cloud Run

Fetch design từ Stitch, tạo React components từ HTML/CSS đó,
rồi wire vào backend logic.

Agent sẽ:

1. Fetch HTML/CSS từ Stitch project qua MCP
2. Dùng skill react-components convert sang React component structure
3. Thêm state management, API calls, auth flow
4. Wire frontend với backend Node.js
5. Setup Firebase config

Điểm khác biệt so với bắt đầu từ AI Studio không có design: Antigravity có visual context từ Stitch - nó hiểu component nào đang làm gì, color system, spacing, layout structure. Code generated ra nhất quán với design hơn nhiều so với gen từ text prompt thuần.

---

So sánh các con đường thiết kế UI MVP

Approach	Thời gian	Chất lượng UI	Dễ iterate	Thích hợp khi
Figma thủ công	2–4 giờ	Cao nhất	Trung bình	Team có designer, production
Stitch → Figma	20–40 phút	Tốt	Cao	Cần polish, có designer review
Stitch → Antigravity	15–30 phút	Đủ dùng	Rất cao	MVP internal, validate nhanh
Prompt thuần AI Studio	10–20 phút	Không nhất quán	Thấp	Proof-of-concept đơn giản
v0 / Lovable	15–30 phút	Tốt	Cao	SaaS landing page, marketing

Với MVP internal tool hay proof-of-concept để demo: Stitch → Antigravity là sweet spot về tốc độ và chất lượng output.

---

Những điểm cần biết trước khi bắt đầu

1. Output HTML/CSS, chưa có React/Vue native

Stitch hiện tại generate HTML/CSS thuần. Antigravity có skill react-components để convert, nhưng component structure sau convert cần review - đặc biệt với các layout phức tạp, đôi khi agent tạo component quá monolithic.

2. Giới hạn 350 generations/tháng

Free tier có cap 350 lần generate. Với workflow iterate nhiều, con số này hết khá nhanh. Tuy nhiên mỗi "generation" là một screen/component, không phải toàn bộ app - nên vẫn đủ dùng cho vài MVP song song.

3. Không có micro-interactions

Hover effects, scroll animations, loading transitions - Stitch không generate. Nếu cần, phải thêm thủ công sau khi code đã được Antigravity produce.

4. Design token chưa cross-project

Nếu có nhiều Stitch projects, color palette và typography không tự sync. Mỗi project là independent. Giải pháp tạm: dùng skill design-md để extract design system thành markdown, rồi paste vào project sau làm reference.

5. Stitch là experimental

Đây vẫn là Google Labs product, không phải product release chính thức. API và behavior có thể thay đổi. Không nên dùng làm source of truth cho design system production của công ty.

---

Workflow tổng hợp cho team

Dựa trên những gì team chúng tôi thử, pipeline phù hợp nhất cho internal MVP:

[Ý tưởng]
    ↓
[Stitch] - 15 phút
Mô tả UI, generate 2-3 variant, chọn 1, refine nhanh
    ↓
[Antigravity + Stitch MCP] - 15-20 phút
Agent fetch design, build full-stack app, wire Firebase
    ↓
[Internal demo]
    ↓
[Quyết định]
├── Bỏ → tốn tổng cộng 30-40 phút, không đau
└── Tiếp tục → refactor code, có thể Figma polish nếu cần

Bước "tốn tổng cộng 30-40 phút, không đau" là điểm cốt lõi. Cost of failure thấp làm cho việc thử nhiều ý tưởng hơn trở nên khả thi - và đây là lợi thế thực sự của workflow này.

---

Kết

Google Stitch không thay thế Figma cho production design - nhưng nó cũng không cố làm vậy. Nó giải quyết một bài toán khác: giảm chi phí của bước "từ ý tưởng đến thứ có thể click được" xuống mức mà một developer có thể làm một mình trong buổi sáng.

Kết hợp với Antigravity qua MCP, pipeline Stitch → code trở nên liền mạch theo cách mà trước đây cần ít nhất hai tool riêng biệt và nhiều copy-paste. Đây là hướng mà Google đang xây - và hiện tại nó đã đủ dùng cho MVP thực chiến.

Bài liên quan:

• Google AI Studio - từ ý tưởng đến MVP trong vài giờ
• AI Agents 2026 - kiến trúc và pattern thiết kế thực tế
• So sánh AI coding assistant: Copilot, Cursor, Codeium 2026

---

Tham khảo

• Google Developers Blog: Introducing Stitch
• Google Labs: Design UI using AI with Stitch
• Antigravity: Google Stitch + Antigravity Complete Guide
• MindStudio: Google Stitch to AI Studio Design-to-Code Workflow
• NxCode: Google Stitch Complete Guide 2026

---

BKGlobal Tech Team