Google Stitch: từ prompt trống tới prototype và React app

1. Stitch là gì và vì sao phần sau lần generate đầu mới quan trọng

AICodeKing chào người xem rồi vào thẳng chủ đề. Theo anh (video đăng ngày 09/10/2026), sản phẩm hữu ích nhất của Google cho việc build app đang "nằm ngay trước mắt" mà ít người để ý: nó tên là Stitch, và nó cho bạn cả một không gian thiết kế bằng AI (AI design workspace) mà không mất tiền. Bạn có thể mô tả một giao diện, khám phá nhiều hướng thiết kế khác nhau, nối các màn hình thành một prototype, rồi mang kết quả sang công cụ coding của mình. Tính đến video đăng ngày 09/10/2026, Stitch miễn phí, có giới hạn sử dụng theo ngày.

Phần anh thấy thú vị là chuyện xảy ra sau lần generate đầu tiên. Có được một dashboard trông đẹp thì có ích, nhưng điều anh muốn biết là làm sao thay đổi nó, làm sao giữ cho màn hình tiếp theo nhất quán, và làm sao thật sự build được một thứ gì đó từ nó. Vì vậy trong video này anh đi qua toàn bộ quy trình đó với một workspace cho creator tên là FrameDesk: bắt đầu từ một prompt trống, rồi qua các vòng sửa, design system, layout mobile, prototype, và cuối cùng là bước handoff sang code.

Anh nói thẳng ai nên xem: nếu bạn từng nhờ một công cụ AI coding làm cho app "trông đẹp hơn" rồi mất cả tiếng sau đó để giải thích "đẹp hơn" nghĩa là gì, thì đây là một workflow đáng để xem.

Hình 1.1Sáu bước AICodeKing ghi trong file kế hoạch "FrameDesk, creator workspace (Stitch walkthrough)" ở đầu video: từ prompt trống tới dashboard đầu tiên, các vòng sửa có mục tiêu, design system kèm DESIGN.md, layout mobile, prototype cho luồng chính, và handoff sang code.

2. Mở Stitch, chọn Web, Speed hay Balanced, và daily credits

Bước đầu tiên (theo video đăng ngày 09/10/2026): mở Stitch with Google trong trình duyệt, bấm Try now và đăng nhập bằng tài khoản Google để vào workspace.

Giao diện bắt đầu (theo video đăng ngày 09/10/2026) có một ô prompt, một nút đính kèm, và lựa chọn giữa App và Web. Ngoài ra còn có các template, gồm cả dashboard và landing page, nếu bạn muốn khám phá từ một hướng có sẵn. Với FrameDesk, anh chọn Web, vì đây là một workspace trên desktop, nơi một creator quản lý ý tưởng video, kịch bản và các video sắp đăng.

Mở bộ chọn chế độ generate, trong giao diện tại thời điểm video đăng ngày 09/10/2026 bạn sẽ thấy hai chế độ là Speed và Balanced. Speed ưu tiên cộng tác nhanh, còn Balanced nhắm tới sự cân bằng giữa tốc độ và chất lượng. AICodeKing chọn bắt đầu với Balanced.

Theo video đăng ngày 09/10/2026, daily credits của bạn được reset vào nửa đêm giờ UTC, và bạn có thể xem phần hạn mức còn lại cùng các thiết lập của mình.

Hộp thoại Usage của Stitch với thanh Daily credits và mục API Keys — Trang Settings của Stitch trong video đăng ngày 09/10/2026: mục Usage ghi "Stitch is free to use with daily limits", thanh Daily credits còn 62% cho hôm đó kèm nhãn "Resets at midnight UTC", và bên dưới là mục API Keys với dòng nói dùng API key để kết nối các MCP client như Antigravity, Cursor hay Gemini CLI.

3. Prompt đầu tiên cho FrameDesk

Giờ là lúc cho Stitch một thứ có ích để làm việc. Theo AICodeKing (video đăng ngày 09/10/2026), bạn không cần một prompt khổng lồ, nhưng nên giải thích app dành cho ai, họ cần làm gì, và hướng hình ảnh chung là gì. Với ví dụ này, anh dùng một prompt như sau:

Design a desktop web app called FrameDesk for a solo YouTube creator. Help me see which video needs attention next. Include a sidebar with Overview, Videos, Calendar, and Settings. Show a video board with Ideas, Scripting, Recording, and Published columns, plus a compact upcoming uploads panel. Use warm off-white backgrounds, dark text, and a restrained orange accent. Keep the layout practical and easy to scan. Use realistic sample video titles.

4. Kiểm kết quả đầu tiên và làm quen với canvas

Anh gửi prompt và để Stitch generate. Theo anh (video đăng ngày 09/10/2026), người dùng và việc chính là hai thứ gánh phần lớn công việc ở đây: một creator quản lý video cần thông tin khác hẳn với một người đang xem doanh số. Đưa cho Stitch ngữ cảnh đó cũng giúp chính bạn đánh giá xem thiết kế nó đưa ra có thật sự hợp lý hay không.

Khi kết quả xong, hãy kiểm cấu trúc trước. Bạn có tìm thấy video board ngay lập tức không? Có cách nào rõ ràng để thêm một video không? Danh sách video sắp đăng có hiện ra mà không chiếm hết trang không?

Anh cũng kiểm nội dung mẫu. Theo anh (video đăng ngày 09/10/2026), một dashboard chỉ đẹp với các tiêu đề ba chữ có thể vỡ ngay khi bạn nhập một tiêu đề video thật. Hãy thử một tiêu đề dài hơn, ví dụ "Building a complete app with Google's free design tools".

Dashboard FrameDesk đầu tiên với board bốn cột và panel Upcoming uploads — Dashboard đầu tiên Stitch generate cho FrameDesk trong video đăng ngày 09/10/2026: dải "Needs attention" báo video sắp tới hạn quay, board bốn cột Ideas, Scripting, Recording, Published với các tiêu đề video mẫu, panel Upcoming uploads bên phải được chọn, và nút Add video ở góc trên.

Lúc này bạn đang ở trên canvas (giao diện tại thời điểm video đăng ngày 09/10/2026), nơi bạn giữ nhiều màn hình và nhiều hướng thiết kế cạnh nhau. Bấm V để chọn, H để kéo (pan) canvas, và có thể mở trợ giúp phím tắt bằng phím dấu hỏi. Theo anh, giữ màn hình gốc hiện trên canvas trong lúc lặp lại rất có ích: nó cho bạn một thứ để so sánh khi một phiên bản mới thay đổi nhiều hơn bạn mong đợi.

5. Sửa có mục tiêu: mỗi lần một thay đổi

Giờ đến một lần sửa có mục tiêu (targeted revision). Cách làm trong Stitch, theo video đăng ngày 09/10/2026: chọn màn hình, chọn Edit, thêm nó vào khung chat, rồi mô tả đúng thay đổi bạn muốn. Ví dụ:

Make the upcoming uploads panel more compact so the video board has more horizontal space. Keep the current colors, typography, and navigation.

Theo AICodeKing (video đăng ngày 09/10/2026), đó là một chỉ dẫn rõ ràng hơn nhiều so với "make the dashboard better". Sau khi sửa xong, hãy so độ rộng của board, kiểm xem chữ còn vừa không, và chắc rằng thanh điều hướng không bị đổi một cách không cần thiết. Rồi mới làm điều chỉnh tiếp theo.

Nếu hành động chính khó nhận ra, hãy yêu cầu:

Make Add video the most prominent action and reduce the emphasis on secondary buttons.

Anh cho rằng (video đăng ngày 09/10/2026) đây là cách tốt nhất để làm các chỉnh sửa thông thường: đổi một thứ lớn, kiểm tra nó, rồi đi tiếp. Bạn vẫn có thể khám phá những phương án khác hẳn, nhưng bạn muốn có chút kiểm soát về cách mình đi tới đó.

Hình 5.1Nhịp sửa AICodeKing đề xuất: mỗi lần chỉ đổi một thứ lớn bằng một chỉ dẫn cụ thể, kiểm lại những gì có thể bị ảnh hưởng (độ rộng board, chữ còn vừa, thanh điều hướng), rồi mới sang điều chỉnh kế tiếp.

6. Edit Theme: đổi style mà không viết lại prompt

Với phần style cơ bản, theo video đăng ngày 09/10/2026: chọn màn hình, mở Generate và chọn Edit Theme. Ở đó bạn chỉnh được những thứ như giao diện sáng hay tối, màu nhấn (accent color), font và độ bo góc (corner radius).

Với FrameDesk, anh gợi ý thử một giao diện "studio" tối hơn rồi so với bản sáng ấm. Hãy nhìn vào chính các thẻ video và nhãn trạng thái ở cả hai theme: chúng phải dễ đọc, kể cả khi ảnh chụp tổng thể trông đẹp.

Bảng Edit Theme với Mode Light và Dark, năm màu accent, font Inter và thanh Corner radius — Bảng Edit Theme trong video đăng ngày 09/10/2026: chọn Mode Light hoặc Dark, năm ô màu accent (đang chọn màu cam), font Inter, thanh trượt Corner radius từ Sharp tới Round, và nút Apply theme; dashboard FrameDesk nằm phía sau.

7. Variations và creative range

Tiếp theo anh khám phá vài layout khác nhau bằng Variations. Theo video đăng ngày 09/10/2026, bảng Variations cho bạn generate nhiều phương án cùng lúc và chỉnh mức độ chúng đi xa khỏi bản gốc. Creative range thấp hợp với những tinh chỉnh nhỏ, còn creative range cao cho công cụ nhiều tự do hơn để nghĩ lại thiết kế.

Anh yêu cầu ba phương án:

Keep the same FrameDesk content, but explore a compact board, a spacious editorial layout, and a dark studio layout. Make the next video deadline clear in every version.

Bảng Variations với ô mô tả, số variation đặt là 3, thanh Creative range và mục Aspects to vary — Bảng Variations trong video đăng ngày 09/10/2026: ô "Describe what to explore", Number of variations từ 1 tới 5 (đang chọn 3), thanh Creative range từ Refined tới Creative, mục Aspects to vary đặt là "Layout, Color scheme, Text font", và nút Generate variations.

Khi so các phương án, hãy tìm bản hỗ trợ tốt nhất cho việc chính. Theo AICodeKing (video đăng ngày 09/10/2026), anh sẽ chọn một layout mà ở đó anh lướt được tiêu đề và hạn chót một cách thoải mái, hơn là một bản trang trí ấn tượng nhưng còn rất ít chỗ cho công việc thật.

8. Refine một variation và Agent manager

Theo video đăng ngày 09/10/2026, bạn cũng có thể chọn một variation hứa hẹn rồi tinh chỉnh tiếp. Ví dụ bạn thích một layout nhưng muốn đưa bảng màu gốc quay lại: hãy mô tả rõ sự kết hợp đó, rồi kiểm kết quả.

Nếu bạn đang khám phá nhiều hướng cùng lúc, theo video đăng ngày 09/10/2026, Agent manager có mặt để giúp bạn theo dõi các việc chạy song song. AICodeKing khuyên giữ các thử nghiệm đó tập trung, chẳng hạn một hướng cho dashboard và một hướng khác cho màn video detail.

Bảng Agent manager với ba việc và các variation của dashboard trên canvas — Agent manager trong video đăng ngày 09/10/2026 liệt kê ba việc: "Dashboard directions" (3 variations, 1 refined, Done), "Video detail screen" (đang thử 2 layout, Working) và "Dark studio theme" (so với bản sáng ấm, Done), kèm nút New agent; trên canvas là các variation như "Variation 2, Spacious editorial" và "Variation 3, Dark studio".

9. Reference image, wireframe và code có sẵn

Text không phải cách duy nhất để cho Stitch ngữ cảnh. Theo video đăng ngày 09/10/2026, bạn có thể đưa vào một reference image, một wireframe phác thô hoặc một ảnh chụp màn hình.

Ví dụ: phác một sidebar bên trái, video board ở giữa và danh sách video sắp đăng bên phải. Đính kèm bản phác và giải thích rằng bạn muốn giữ cấu trúc đó trong khi cải thiện typography và khoảng cách.

Theo video đăng ngày 09/10/2026, bạn cũng có thể dùng một reference để truyền đạt một style cụ thể. Chẳng hạn:

Use this reference for its typography and spacing, but keep FrameDesk's content and workflow.

Theo AICodeKing (video đăng ngày 09/10/2026), như vậy công cụ có một việc cụ thể hơn là sao chép mọi thứ nó nhìn thấy.

Bản phác FrameDesk trên giấy, bản Video board generate từ bản phác, và menu đính kèm — Trên canvas: file framedesk-sketch.jpg là bản phác tay sidebar, bốn cột Ideas, Scripting, Recording, Published và cột Upcoming uploads; bên phải là bản "Video board, from sketch" Stitch dựng lại. Khung chat có tin nhắn kèm editorial-reference.jpg với đúng câu dùng reference cho typography và spacing; nút dấu cộng mở menu đính kèm với các mục UI, Design system, Text, Image và URL (theo video đăng ngày 09/10/2026).

Theo video đăng ngày 09/10/2026, Google cũng hỗ trợ đưa code và file thiết kế có sẵn vào workflow, nên có một con đường để cải thiện thứ bạn đã có, chứ không chỉ để bắt đầu một project mới.

10. Live Mode: nói chuyện với Stitch trong lúc agent làm

Một lựa chọn khác là Live Mode. Theo video đăng ngày 09/10/2026, bạn có thể nói chuyện với Stitch và lái thiết kế trong lúc agent đang làm việc. Với ví dụ FrameDesk, một chỉ dẫn bằng giọng nói có ích sẽ là:

The dashboard feels too crowded. Give the video titles more room and make the deadline easier to find.

Cũng theo video đăng ngày 09/10/2026, bạn có thể nhờ agent phê bình hệ thứ bậc thị giác (hierarchy) hoặc giúp bạn tìm ra trang đó cần gì. Như vậy bạn nhìn vào thiết kế, nói điều mình muốn đổi, và giữ cuộc trò chuyện tiếp tục. Theo AICodeKing, đó là một cách khá tự nhiên để làm việc với một giao diện.

11. Design System panel và DESIGN.md

Trước khi generate phần còn lại của app, AICodeKing xử lý chuyện nhất quán. Đây là lúc Design System panel và DESIGN.md trở nên có ích. Chọn màn hình bạn muốn dựa vào và mở Design System panel của nó. Theo video đăng ngày 09/10/2026, panel này hiện các màu, font, khoảng cách, độ bo góc và các mẫu component đang dùng. Bạn có thể sửa các thuộc tính cốt lõi ngay ở đó, thay vì mô tả đi mô tả lại cùng một bảng màu trong chat.

Với FrameDesk, các quy tắc nên giải thích những thứ như màu cam được dùng ở đâu, trạng thái của một video trông thế nào, và phần chữ nào được nhấn mạnh nhất. Theo anh (video đăng ngày 09/10/2026), những chi tiết đó sẽ quan trọng trên mọi màn hình. Đặt design system này làm mặc định của project (project default) để các màn hình mới kế thừa cùng quy tắc, và áp nó cho cả các màn hình đã có để mọi thứ khớp với nhau.

Design System panel với tab Theme, bốn màu và các thông số typography, nút Project default và Apply to all screens — Design System panel trong video đăng ngày 09/10/2026, tab Theme: Mode Light, bốn màu Primary #E2622B, Surface #FAF6F0, On-surface #1F1B16, Muted #6E655B; Headline và Body dùng Inter 700 và Inter 400, Spacing 8, 16, 24, Roundness 12 px, Components gồm buttons, status pills, cards; bên dưới là hai nút Project default và Apply to all screens.

Theo video đăng ngày 09/10/2026, DESIGN.md là phiên bản mang đi được của các quy tắc này. Nó chứa các giá trị thiết kế có cấu trúc và phần hướng dẫn viết bằng chữ giải thích cách dùng chúng. Bạn có thể export nó cùng project và đưa cho một công cụ khác hoặc một coding agent. Tab Design.md của FrameDesk trên màn hình có nội dung như sau:

---
name: FrameDesk Warm
colors:
  primary: "#E2622B"
  surface: "#FAF6F0"
  on-surface: "#1F1B16"
  muted: "#6E655B"
typography:
  headline: { fontFamily: Inter, fontWeight: 700 }
  body-md: { fontFamily: Inter, fontSize: 14px }
rounded: { md: 12px }
spacing: { sm: 8px, md: 16px, lg: 24px }
---
# FrameDesk
## Colors
- Orange (#E2622B) is only for the primary action
  (Add video) and deadlines. Never for decoration.
## Components
- Video status = pill label: Idea violet, Scripting
  blue, Recording orange, Published green.
## Typography
- Video titles get the most emphasis; metadata
  stays muted and small.

Nếu bạn đã có một thương hiệu, theo video đăng ngày 09/10/2026, hãy đưa cho Stitch URL website của bạn hoặc một reference image, và nó có thể trích ra các quy tắc thiết kế. Điều đó giúp bạn khỏi phải mô tả thương hiệu từ đầu mỗi lần.

12. Màn video detail, calendar và empty state

Giờ anh tạo màn video detail. Dùng dashboard đã chọn làm ngữ cảnh và yêu cầu:

Create a FrameDesk video detail page using the project's design system. Include an editable video title, a status selector, a large script editor, a recording checklist, and a target publication date. Keep the sidebar consistent and include a clear return to the video board.

Khi nó generate xong, hãy so các phần dùng chung. Sidebar, nút bấm, font và màu trạng thái vẫn phải có cảm giác là cùng một app. Nếu có gì bị lệch, hãy nhắm đúng chỗ khác biệt đó trong lần sửa tiếp theo.

Tiếp theo là màn calendar. Anh yêu cầu một lịch đăng video theo tháng dùng cùng design system, có các video đã lên lịch và một danh sách gọn các hạn chót sắp tới. Bấm vào một video phải dẫn tới màn detail của nó.

Anh cũng thêm một empty state cho người chưa thêm video nào: yêu cầu một lời giải thích rõ ràng và một hành động "Add your first video". Theo anh, đó là màn hình một người dùng mới thật sự có thể thấy trước khi có bất kỳ nội dung mẫu hấp dẫn nào.

Hình 12.1Các màn hình FrameDesk trong video đăng ngày 09/10/2026 đều kế thừa design system đặt làm mặc định của project: dashboard, video detail (tiêu đề sửa được, chọn trạng thái, script editor, recording checklist, ngày đăng), calendar theo tháng, và empty state với hành động thêm video đầu tiên.

13. Bản mobile cho dashboard

Tiếp theo anh chuyển dashboard sang điện thoại: yêu cầu Stitch một bản mobile giữ nguyên các việc chính, dùng một kiểu điều hướng gọn và một cách dễ đọc để chuyển giữa các giai đoạn của video.

Điều cần kiểm, theo anh, là layout thay đổi ra sao. Một board desktop bốn cột có lẽ không nên chỉ biến thành bốn cột nhỏ xíu. Hãy kiểm xem hướng mobile có cho người dùng một cách thoải mái để duyệt cùng lượng thông tin đó hay không.

Hai màn mobile của FrameDesk: Mobile Dashboard và Mobile Ideas tab — Kết quả mobile trong video đăng ngày 09/10/2026: khung chat ghi Stitch đã thêm một Mobile dashboard, nơi bốn cột trở thành một thanh chuyển giai đoạn dạng segmented với thẻ rộng hết màn hình, cộng thêm tab bar dưới đáy và nút Add nổi; trên canvas là hai màn "Mobile, Dashboard" và "Mobile, Ideas tab".

14. Nối màn hình thành prototype

Lúc này đã có dashboard, trang video detail và một hướng cho calendar. Anh nối luồng chính thành một prototype. Theo video đăng ngày 09/10/2026, cách bắt đầu là chọn một màn hình, mở Generate và chọn Prototype. Bạn nối các màn hình liên quan qua các interaction hotspot và dùng Play để xem trước luồng.

Với FrameDesk: nối một thẻ video trên dashboard tới trang detail của nó, nối mục Calendar trên thanh điều hướng tới màn calendar, và chắc rằng một video đã lên lịch có thể dẫn ngược về trang detail của nó.

Rồi đi qua luồng đó như một người dùng: mở một video, tìm kịch bản, tìm ngày đăng, quay về board. Ở mỗi bước, kiểm xem các hành động và điều hướng có hợp lý không.

Chế độ prototype của Stitch với danh sách Screens in prototype và màn Dashboard FrameDesk — Chế độ prototype trong video đăng ngày 09/10/2026: cột trái "Screens in prototype" có Dashboard, Video detail và Calendar, kèm nút Add Screen và "Imagine a new screen"; ở giữa là dashboard FrameDesk "This week at the desk", trên cùng có hai chế độ Preview và Edit.

Theo video đăng ngày 09/10/2026, một prototype cũng cho bạn khám phá điều hướng, cuộn trang và cảm nhận các màn hình khi đi cùng nhau. Anh nhận xét phát hiện một luồng vụng về dễ hơn nhiều khi bạn bấm qua nó. Stitch thậm chí có thể gợi ý hoặc generate màn hình tiếp theo trong lúc bạn khám phá, nên bạn tiếp tục dựng hành trình người dùng từ các màn hình đã có; anh gọi đó là khá hay.

15. Handoff sang coding agent để build React app

Giờ là lúc đưa sản phẩm ra khỏi Stitch cho bước handoff chính. Theo video đăng ngày 09/10/2026: chọn các màn hình bạn muốn và dùng Download để lấy HTML và hình ảnh của chúng trong một file zip. Khi export project, giữ cả file DESIGN.md đi kèm, và giữ chúng ở cùng nhau. Hình ảnh cho thấy giao diện dự định, HTML cho người phát triển một điểm xuất phát cụ thể, còn file design giải thích các quy tắc chung.

Hình 15.1Gói handoff trong video đăng ngày 09/10/2026: mỗi màn hình có một thư mục chứa screen.png và code.html, cộng file DESIGN.md của project; cả ba được đưa cho coding agent để build React app rồi chạy bản xem trước local.

Theo video đăng ngày 09/10/2026, output front-end Stitch generate gồm HTML và CSS có hỗ trợ Tailwind. Nếu app của bạn dùng React, Vue hay một framework khác, một coding agent có thể dùng tài liệu đó để build các component bạn cần. Mở một project trong code editor, thêm các file đã export, và giao cho agent một chỉ dẫn cụ thể:

Implement these FrameDesk screens as a React app using the exported HTML, images and DESIGN.md. Create reusable navigation, video cards, status labels and buttons. Connect the dashboard, video details and calendar. Use sample data first. Preserve the supplied visual direction and check the rendered pages against the references.

Theo AICodeKing (video đăng ngày 09/10/2026), khi agent build xong bản đầu tiên, hãy nhờ nó chạy một bản xem trước local. Lặp lại đúng hành trình đó: từ board vào một video rồi sang calendar. So các trang với reference của Stitch ở kích thước desktop và điện thoại, và sửa mọi chỗ khác biệt ảnh hưởng tới layout hay khả năng sử dụng.

Sau đó thêm các hành vi bạn cần, như lưu kịch bản và cập nhật ngày đăng, rồi kiểm rằng các thay đổi đã lưu vẫn còn sau khi tải lại trang. Theo anh, điều đó cho bạn một con đường cụ thể đi từ một bản thiết kế tới một ứng dụng bạn có thể tiếp tục phát triển.

16. Figma, AI Studio, Antigravity và Netlify

Theo video đăng ngày 09/10/2026, Stitch còn có export sang Figma với text sửa được, layer có tên và auto layout. Nên nếu bạn hoặc team đã làm việc trong Figma, bạn có thể mang thiết kế sang đó và tiếp tục tinh chỉnh.

Cũng theo video đăng ngày 09/10/2026, bạn có thể chuyển sang AI Studio để có một kết quả chia sẻ được, export sang Antigravity để implement, hoặc publish qua Netlify. Theo AICodeKing, có rất nhiều lựa chọn về nơi bạn đưa project đi tiếp.

Hộp thoại Export của Stitch với các định dạng AI Studio, Antigravity, Figma, Netlify, .zip, Code to Clipboard, MCP, Project Brief — Hộp thoại Export trong video đăng ngày 09/10/2026, mục Format: AI Studio (nhãn Preview), Antigravity, Figma (đang chọn), Netlify (nhãn New), .zip, Code to Clipboard, MCP và Project Brief; phía sau là màn calendar "October 2026" và màn video detail của FrameDesk.

17. Stitch MCP server, API key và cấu hình trong Antigravity

Với người dùng coding agent, theo video đăng ngày 09/10/2026, còn một lựa chọn hữu ích nữa: tích hợp MCP của Stitch. MCP cho agent của bạn truy cập các project Stitch thông qua các tool. Các thao tác có sẵn (tính đến video đăng ngày 09/10/2026) gồm liệt kê project, đọc màn hình, generate thiết kế, yêu cầu chỉnh sửa và tạo variation. Như vậy bạn có thể bảo agent làm việc trực tiếp với một project Stitch cụ thể; theo anh, điều này có ích khi bạn dự định còn qua lại giữa thiết kế và implement.

Bảng các tool của Stitch MCP với cột Category và Read-Only — Bảng tool của Stitch MCP trên màn hình trong video đăng ngày 09/10/2026: create_project, get_project, list_projects (Project Management), list_screens, get_screen (Screen Management), generate_screen_from_text, edit_screens, generate_variants (AI Generation), create_design_system, update_design_system (Design Systems); cột Read-Only ghi true cho các tool chỉ đọc như get_project, list_projects, list_screens, get_screen.

Để cấu hình theo cách dùng API key, theo video đăng ngày 09/10/2026: mở Settings của Stitch, tìm mục API Keys và tạo một key. Rồi làm theo hướng dẫn cài đặt của Google cho công cụ coding của bạn. AICodeKing nhắc giữ key ở chế độ riêng tư và không để nó nằm trong code front-end của app.

Ví dụ trong Antigravity (giao diện tại thời điểm video đăng ngày 09/10/2026): mở menu của Agent Panel, rồi MCP Servers, Manage MCP Servers, và View Raw Config; thêm cấu hình Stitch lấy từ tài liệu, rồi điền key của bạn.

Trang Manage MCP servers trong Antigravity với nút View raw config và project framedesk — Antigravity trong video đăng ngày 09/10/2026: project framedesk đã có các component React (App.tsx, Calendar.tsx, VideoDetail.tsx, VideoCard.tsx, StatusLabel.tsx...) và thư mục stitch-export cùng DESIGN.md; trang "Manage MCP servers" có nút View raw config, hai server github (bật) và firebase (tắt), và cột MCP Store bên phải.

Khi đã kết nối, anh khuyên (video đăng ngày 09/10/2026) bảo agent liệt kê các project Stitch của bạn trước, rồi chỉ nó tới FrameDesk và yêu cầu nó xem kỹ các màn hình đã chọn trước khi implement. Theo anh, đó là một cách đơn giản để kiểm rằng agent đang đọc đúng project bạn muốn.

Theo video đăng ngày 09/10/2026, Google cũng công bố các Stitch skill cho workflow thiết kế và build, cùng một CLI và SDK cho người muốn tự động hoá quy trình. Anh gợi ý bắt đầu với trình duyệt và chỉ dùng những thứ đó khi workflow của bạn cần tới.

18. Nhận xét của AICodeKing

Vậy anh nghĩ gì về tất cả những điều này? Theo AICodeKing (video đăng ngày 09/10/2026), với một developer làm một mình hoặc một team nhỏ, phần hữu ích là có thể ra các quyết định thiết kế từ sớm: bạn so được các hướng, đi qua các màn hình chính, và đưa cho công cụ coding một mục tiêu hình ảnh cụ thể.

Lời khuyên lớn nhất của anh là dành thời gian cho các vòng sửa: chọn một hướng, sửa những chỗ yếu, và mang design system đó đi qua phần còn lại của app. Theo anh, đó là cách bạn lấy được nhiều hơn hẳn so với một màn hình generate một lần. Về giá, tính đến video đăng ngày 09/10/2026, Stitch miễn phí với daily credits, nên rất dễ để thử; mọi gói coding hay hosting bạn chọn sau đó là chi phí riêng.

Cá nhân anh cho rằng (video đăng ngày 09/10/2026) đây là một trong những sản phẩm hữu ích nhất của Google cho người build giao diện. Sự kết hợp giữa khám phá hình ảnh, quy tắc thiết kế dùng lại được, prototype và handoff sang code khiến nó đáng thử trên một project thật.

Gợi ý của anh (video đăng ngày 09/10/2026): lấy một màn hình từ một app bạn muốn build, đưa cho Stitch một brief rõ ràng, làm vài vòng sửa có chủ đích, rồi mang kết quả vào workflow phát triển của bạn. Đó là nơi bạn đánh giá được nó có tiết kiệm thời gian cho mình hay không. Tổng thể, anh thấy nó khá hay. Anh mời người xem để lại ý kiến trong phần bình luận rồi chào tạm biệt.