Chào mừng bạn đến với Fx Studio. Tiếp nối Phần 1, hôm nay mình sẽ đi sâu hơn vào phần quan trọng nhất khi làm việc với Google Stitch: cách viết prompt hiệu quả.

Nếu mọi việc đã ổn rồi, thì …

Bắt đầu thôi!

Đôi lời tản mạn

Ở Phần 1, mình đã đề cập rằng Google Stitch hoạt động dựa trên prompt – bạn mô tả, AI tạo ra UI. Nghe thì đơn giản. Nhưng trên thực tế, không phải cứ gõ vài câu tiếng Anh là sẽ nhận lại thiết kế ưng ý.

Nếu bạn đã thử Stitch và thấy kết quả “không giống tưởng tượng”, thì rất có thể vấn đề nằm ở cách viết prompt. Nói đơn giản, giống như việc brief cho designer vậy – càng rõ ràng, càng chi tiết thì output càng gần với kỳ vọng.

Chính vì vậy, bài viết này sẽ tập trung hoàn toàn vào nghệ thuật viết prompt cho Stitch. Từ framework, nguyên tắc, đến mẹo kiểm soát theme và những sai lầm thường gặp.

Tại sao prompt lại quan trọng?

Trước khi đi vào kỹ thuật, hãy hiểu rõ một điều: Google Stitch không đọc được suy nghĩ của bạn. Nó chỉ hiểu những gì bạn viết ra.

Chẳng hạn, prompt mơ hồ như “Design a finance app” sẽ cho ra UI generic. Đúng nhưng không có gì đặc biệt. Ngược lại, prompt chi tiết sẽ giúp Stitch hiểu bạn muốn gì: layout ra sao, phong cách thế nào, component nào cần có.

Nói cách khác, prompt chính là bản brief thiết kế của bạn. Do đó, viết prompt tốt không chỉ giúp tiết kiệm thời gian mà còn giảm đáng kể số lần phải refine sau đó.

Framework viết prompt: Zoom-Out-Zoom-In

Qua quá trình sử dụng thực tế, một framework mình thấy hiệu quả khi viết prompt cho Google Stitch là Zoom-Out-Zoom-In. Về cơ bản, ý tưởng rất đơn giản: bạn đi từ bức tranh tổng thể rồi thu hẹp dần vào chi tiết.

Lưu ý: Đây không phải framework chính thức từ Google, mà là cách tiếp cận mình tổng hợp từ kinh nghiệm cá nhân và cộng đồng người dùng Stitch.

Cụ thể, framework này gồm 5 lớp thông tin mà bạn nên đưa vào prompt:

1. Context – Bối cảnh sản phẩm

Đầu tiên, bắt đầu bằng việc mô tả sản phẩm của bạn là gì và dành cho ai. Đây là phần “zoom out” – giúp Stitch hiểu được bức tranh lớn trước khi đi vào thiết kế cụ thể.

“Design a mobile app screen for a personal finance app that helps users track daily spending. Target user: Young professionals who check expenses multiple times per day, often on the go.”

Phần context không cần quá dài – hai đến ba câu là đủ. Mục đích chính là giúp Stitch xác định đúng tone, phong cách và mức độ phức tạp phù hợp với đối tượng người dùng.

2. Screen Goal – Mục tiêu của màn hình

Tiếp theo, mỗi màn hình đều có một mục đích riêng. Vì vậy, hãy cho Stitch biết màn hình này tồn tại để giải quyết vấn đề gì.

“The goal of this screen is to help users quickly understand today’s total spending, top spending categories, and whether they are over or under budget.”

Nhờ việc nêu rõ mục tiêu, Stitch sẽ ưu tiên đúng thông tin. Ví dụ, nếu mục tiêu là “xem nhanh chi tiêu hôm nay”, Stitch sẽ đặt con số tổng ở vị trí nổi bật nhất.

3. Layout & Hierarchy – Bố cục và thứ tự ưu tiên

Đây là phần quan trọng nhất trong cả 5 lớp. Thay vì để Stitch tự quyết định layout, bạn nên mô tả rõ cấu trúc mình muốn. Cụ thể, hãy liệt kê từ trên xuống dưới theo thứ tự ưu tiên.

“Screen type: Home Dashboard (iOS-style mobile UI). Layout: sticky header with app name and current month at top. Primary focus: large total spending number. Secondary section: horizontal scrollable category cards (Food, Transport, Shopping, Entertainment). Tertiary section: simple list of 3–5 recent transactions with merchant name, category tag, and amount.”

Bằng cách mô tả layout theo kiểu primary → secondary → tertiary, bạn giúp Stitch hiểu rõ hệ thống phân cấp thông tin. Nhờ đó, thiết kế tạo ra sẽ có hierarchy trực quan rõ ràng hơn so với việc liệt kê component không theo thứ tự.

4. Visual Direction – Hướng thẩm mỹ

Ngoài layout, bạn cũng nên dùng tính từ để định hình phong cách. Phần này ảnh hưởng trực tiếp đến màu sắc, font chữ và tổng thể bố cục mà Stitch tạo ra.

“Visual direction: clean, minimal, calm. Neutral background with soft accent colors for categories. Emphasis on readability and glanceability. No heavy gradients or decorative elements.”

Hãy nghĩ về visual direction như cách bạn brief mood board cho designer. Nói cách khác, bạn không cần chọn chính xác mã màu ở bước này. Chỉ cần truyền đạt đúng “cảm giác” mà bạn muốn.

5. Constraints – Ràng buộc thiết kế

Cuối cùng, nêu rõ những giới hạn mà Stitch cần tuân thủ. Đây là phần thường bị bỏ quên, tuy nhiên lại giúp kết quả chính xác hơn rất nhiều.

“Constraints: one-hand usage friendly. Prioritize clarity over density. Accessible text sizes and spacing. Follow WCAG 2.1 guidelines.”

Trên thực tế, constraints đặc biệt hữu ích khi bạn thiết kế cho đối tượng hoặc ngữ cảnh cụ thể. Ví dụ, app dành cho người cao tuổi cần font lớn hơn. Tương tự, app dùng ngoài trời cần contrast cao hơn. Những điều này nếu không được nêu rõ, Stitch sẽ không tự biết.

Tóm lại, khi kết hợp cả 5 lớp, bạn sẽ có một prompt khoảng 150–300 từ. Không quá dài nhưng đủ chi tiết để Stitch hiểu rõ ý định của bạn.

Nguyên tắc vàng khi viết prompt

Ngoài framework trên, dưới đây là những nguyên tắc mà mình đúc kết được sau quá trình sử dụng Google Stitch. Đồng thời, đây cũng là những tips được khuyến nghị từ Prompt Guide trên diễn đàn Google AI Developers.

Bắt đầu broad, refine dần

Với app phức tạp (nhiều màn hình, nhiều flow), đừng cố nhồi tất cả vào một prompt duy nhất. Thay vào đó, hãy bắt đầu bằng một mô tả tổng quát, sau đó drill down từng màn hình một.

Prompt khởi đầu:

“An app for marathon runners to engage with a community, find partners, get training advice, and find races near them.”

Sau đó, refine từng màn hình:

“Design the home feed screen showing upcoming races, trending posts from the community, and a quick-access training plan widget.”

Nhờ cách làm này, Stitch sẽ thiết lập “bối cảnh chung” trước, sau đó mới tập trung vào từng phần cụ thể. Kết quả là output thường nhất quán hơn so với việc mô tả chi tiết một màn hình mà không có context tổng thể.

Mỗi lần chỉ một thay đổi

Đây là nguyên tắc quan trọng nhất khi refine, được rất nhiều người dùng trong cộng đồng Stitch chia sẻ. Về bản chất, Stitch hoạt động tốt nhất khi bạn yêu cầu một điều chỉnh rõ ràng mỗi lần. Nếu bạn gộp nhiều thay đổi vào một prompt, Stitch rất có thể sẽ regenerate toàn bộ layout. Khi đó, bạn mất hết những gì đã chỉnh trước đó.

❌ Sai:

“Change the background to dark, add a search bar, move the avatar to the right, and make the cards rounded.”

✅ Đúng:

“Change the background color of the homepage to dark gray.”

(Chờ kết quả → Hài lòng → Tiếp tục)

“Add a search bar to the top of the homepage, below the header.”

---

❌ Sai:

“Make the homepage better and more modern.”

✅ Đúng:

“Make all cards on the homepage have rounded corners with 12px border radius.”

(Chờ kết quả → Hài lòng → Tiếp tục)

“Move the user avatar from the left side to the right side of the header.”

Thêm ví dụ minh họa

Dưới đây là thêm một ví dụ để bạn thấy rõ sự khác biệt:

❌ Sai:

“Add a sidebar navigation with 5 items, change the header color to blue, and replace the hero image with a carousel.”

✅ Đúng:

“Replace the hero banner image with a horizontal carousel showing 3 featured products.”

(Chờ kết quả → Hài lòng → Tiếp tục)

“Change the header background color to navy blue (#1E3A5F).”

Tóm lại, nguyên tắc này được cộng đồng Stitch nhấn mạnh nhiều lần: không trộn thay đổi layout và UI component vào cùng một prompt. Hãy luôn tách chúng ra.

Dùng tính từ để “set the vibe”

Tính từ là shortcut nhanh nhất để truyền đạt phong cách thiết kế cho Stitch. Trên thực tế, hai app cùng loại nhưng khác adjective sẽ cho ra kết quả hoàn toàn khác nhau.

Hãy nghĩ về tính từ như cách bạn mô tả brand personality. Stitch sẽ dịch chúng thành lựa chọn thiết kế cụ thể về màu sắc, typography và bố cục.

Tham chiếu element cụ thể

Khi refine, đừng nói chung chung. Thay vào đó, hãy gọi tên chính xác component và vị trí mà bạn muốn thay đổi.

❌ Mơ hồ:

“Make the button bigger.”

✅ Cụ thể:

“Change the primary call-to-action button on the login screen to be larger and use the brand’s primary blue color.”

---

❌ Mơ hồ:

“Change the font.”

✅ Cụ thể:

“On the homepage, change the body text font to Inter and increase the size to 16px.”

---

❌ Mơ hồ:

“Fix the layout, it looks weird.”

✅ Cụ thể:

“On the product detail page, move the ‘Add to Cart’ button from the middle of the screen to a sticky position at the bottom.”

Nói tóm lại, Stitch xử lý tốt nhất khi biết rõ ba thứ: cái gì cần thay đổi, ở đâu trên màn hình, và như thế nào.

Dùng thuật ngữ UI/UX

Stitch hiểu tốt các thuật ngữ chuyên ngành. Vì vậy, thay vì mô tả dài dòng, hãy dùng các keyword chuyên ngành. Ví dụ: navigation bar, hero section, card layout, floating action button, bottom sheet, tab bar, carousel, modal dialog, sticky header, v.v.

❌ Dài dòng:

“a bar at the bottom of the screen with icons that let you switch between pages”

✅ Gọn gàng:

“a bottom tab bar with 4 tabs: Home, Search, Notifications, Profile”

---

❌ Dài dòng:

“a small panel that slides up from the bottom when you tap the share icon”

✅ Gọn gàng:

“a bottom sheet with sharing options triggered by the share button”

---

❌ Dài dòng:

“a round button floating at the bottom right corner that lets users create new items”

✅ Gọn gàng:

“a floating action button (FAB) at bottom-right for creating new entries”

Nhờ vậy, Stitch sẽ tạo ra đúng component bạn cần mà không cần giải thích thêm.

Chụp screenshot sau mỗi bước thành công

Như đã nói ở Phần 1, Stitch không phải memory-based editor. Mỗi prompt có thể khiến tool regenerate layout thay vì chỉnh sửa incremental. Do đó, hãy tạo thói quen chụp lại màn hình sau mỗi bước refine thành công. Nhờ vậy, nếu Stitch lỡ regenerate layout, bạn vẫn có bản backup để dùng lại làm image reference hoặc upload lại vào Stitch.

Mẹo: Đây là bài học xương máu từ cộng đồng Stitch. Nhiều người đã mất hàng giờ refine vì không backup, đến khi Stitch tạo lại layout từ đầu thì không có cách nào quay lại phiên bản trước.

Kiểm soát theme qua prompt

Ngoài việc mô tả tổng thể, Google Stitch còn cho phép bạn tinh chỉnh theme khá chi tiết thông qua prompt. Dưới đây là những khía cạnh bạn có thể kiểm soát:

Màu sắc

Trước hết, bạn có thể chỉ định màu cụ thể hoặc mô tả mood chung:

Cụ thể: “Change primary color to forest green.”

Mood-based: “Update theme to a warm, inviting color palette.”

Ngoài ra, khi thay đổi theme màu, hãy nhớ yêu cầu Stitch cập nhật luôn cả hình ảnh và icon nếu có:

“Update theme to light orange. Ensure all images and illustrative icons match this new color scheme.”

Font chữ và Border

Bên cạnh đó, typography và kiểu dáng element cũng có thể điều chỉnh qua prompt:

Font: “Use a playful sans-serif font for body text.” hoặc “Change headings to a serif font.”

Border & Button: “Make all buttons have fully rounded corners.” hoặc “Give input fields a 2px solid black border.”

Kết hợp theme: “Book discovery app: serif font for text, light green brand color for accents, rounded cards with subtle shadows.”

Hình ảnh trong thiết kế

Tương tự, khi cần thay đổi hình ảnh, hãy mô tả rõ vị trí và nội dung mong muốn:

Hình ảnh chung: “Change background of all product images on landing page to light taupe.”

Hình ảnh cụ thể: “On the ‘Team’ page, image of ‘Dr. Carter (Lead Dentist)’: update her lab coat to black.”

Phong cách hình ảnh: “Music player page for ‘Suburban Legends.’ Album art is a macro, zoomed-in photo of ocean water. Page background and imagery should reflect this.”

Ngôn ngữ hiển thị

Mình khuyến nghị viết prompt bằng tiếng Anh. Tuy nhiên, bạn hoàn toàn có thể yêu cầu Stitch hiển thị nội dung UI bằng ngôn ngữ khác:

“Switch all product copy and button text to Vietnamese.”

Nhờ đó, tính năng này rất hữu ích khi bạn cần mockup cho thị trường cụ thể mà không muốn tự dịch từng element.

Những sai lầm thường gặp

Qua quá trình sử dụng và theo dõi feedback từ cộng đồng, dưới đây là những sai lầm phổ biến nhất khi viết prompt cho Google Stitch:

Prompt quá dài

Dù framework Zoom-Out-Zoom-In khuyến khích chi tiết, tuy nhiên hãy giữ prompt ở mức vừa phải – khoảng 150–300 từ là hợp lý. Bởi vì prompt quá dài có thể khiến model bỏ sót chi tiết. Đây là vấn đề chung của nhiều LLM, không riêng Stitch. Do đó, trong trường hợp UI phức tạp, hãy chia thành nhiều prompt nhỏ (screen by screen) thay vì một prompt “mega”.

Gộp nhiều thay đổi khi refine

Đây là lỗi phổ biến nhất. Cụ thể, khi bạn nhét 3–4 thay đổi vào một prompt refine, Stitch thường “quên” layout hiện tại và tạo lại từ đầu. Vì vậy, luôn nhớ: một prompt = một thay đổi.

Quá phụ thuộc vào Stitch cho chi tiết

Stitch giỏi tạo layout tổng thể. Tuy nhiên, công cụ chưa hoàn hảo ở chi tiết nhỏ như alignment, spacing hay icon style. Vì thế, đừng cố refine đến mức pixel-perfect trong Stitch – thay vào đó, hãy để phần đó cho Figma hoặc code.

Không nêu rõ platform

Nếu bạn không chỉ rõ platform (iOS, Android, Web), Stitch sẽ tự đoán – và không phải lúc nào cũng đoán đúng. Do đó, hãy luôn nêu rõ: “iOS-style mobile UI” hoặc “Material Design 3 for Android” hoặc “responsive web layout”.

Không tận dụng prompt mẫu

Trên giao diện Google Stitch thường có các prompt gợi ý để tham khảo. Vì vậy, nếu bạn mới bắt đầu, hãy thử các prompt gợi ý này trước. Sau khi hiểu cách Stitch phản hồi, bạn sẽ tự tin viết prompt riêng.

Tổng hợp: Prompt Checklist

Trước khi nhấn Generate, hãy chạy qua checklist nhanh này:

1. Context – Đã mô tả sản phẩm là gì và dành cho ai chưa?

2. Screen Goal – Đã nêu rõ mục tiêu của màn hình chưa?

3. Layout & Hierarchy – Đã mô tả cấu trúc từ trên xuống dưới theo thứ tự ưu tiên chưa?

4. Visual Direction – Đã dùng tính từ để định hình phong cách chưa?

5. Constraints – Đã nêu các ràng buộc thiết kế chưa?

6. Platform – Đã chỉ rõ App hay Web chưa?

7. Độ dài – Prompt có nằm trong khoảng 150–300 từ không?

Không phải lúc nào bạn cũng cần đầy đủ cả 7 điểm. Nhưng càng nhiều thông tin, kết quả càng gần với kỳ vọng.

Đánh giá thực tế

Sau quá trình áp dụng các kỹ thuật trên, dưới đây là nhận xét thực tế từ mình:

Điểm mạnh

• Framework Zoom-Out-Zoom-In hoạt động rất tốt – Theo kinh nghiệm của mình, prompt có cấu trúc rõ ràng thường gần với kỳ vọng ngay lần đầu. Phần còn lại chỉ cần 2–3 lần refine nhỏ.
• Tính từ thay đổi đáng kể output – Chỉ cần đổi 2–3 adjective, toàn bộ phong cách thiết kế sẽ khác. Đây là cách nhanh nhất để thử nhiều design direction.
• Refine từng bước nhỏ = kiểm soát tốt hơn – Mỗi lần chỉ yêu cầu một thay đổi giúp bạn duy trì layout hiện tại. Stitch sẽ không bị “reset” toàn bộ.
• Thuật ngữ UI/UX rút ngắn prompt đáng kể – Một keyword chính xác giúp Stitch hiểu ngay, thay vì viết dài dòng. Điều này cũng giảm nguy cơ prompt bị quá dài.

Điểm cần lưu ý

• Kết quả ban đầu cần refine thêm – Ngay cả với prompt rất chi tiết, kết quả ban đầu thường chưa đạt hoàn toàn. Bạn cần chấp nhận rằng refine là bước bắt buộc.
• Stitch đôi khi regenerate layout khi edit – Dù đã áp dụng “one change at a time”, Stitch vẫn đôi khi regenerate toàn bộ layout. Điều này hay xảy ra với thay đổi cấu trúc. Screenshot backup là phao cứu sinh tốt nhất.
• Image placeholder đôi khi không đúng ý – Stitch không phải image generator chuyên dụng. Hình ảnh thường ở dạng placeholder hoặc stock style. Hãy tập trung vào layout, phần hình ảnh thay thế sau trong Figma.
• Prompt tiếng Anh thường cho kết quả ổn định hơn – Gemini hỗ trợ đa ngôn ngữ. Tuy nhiên, theo kinh nghiệm sử dụng, prompt bằng tiếng Anh thường cho kết quả ổn định hơn so với các ngôn ngữ khác.

Tạm kết

Viết prompt hiệu quả cho Google Stitch không khó – tuy nhiên nó đòi hỏi sự có hệ thống. Hãy dành thêm vài phút để cấu trúc prompt theo framework Zoom-Out-Zoom-In. Cụ thể: bắt đầu từ context, screen goal, layout hierarchy, visual direction, và cuối cùng là constraints.

Bên cạnh đó, hãy kết hợp với các nguyên tắc vàng: refine từng bước nhỏ, dùng tính từ set vibe, tham chiếu element cụ thể. Đồng thời, luôn backup sau mỗi bước thành công. Nhờ vậy, bạn sẽ kiểm soát được output của Stitch tốt hơn rất nhiều.

Và quan trọng nhất: prompt tốt không phải là prompt dài nhất. Prompt tốt là prompt truyền đạt đủ thông tin để Stitch hiểu đúng ý bạn.

Tới đây, mình xin kết thúc bài viết Phần 2 về Google Stitch. Ở bài viết tiếp theo, mình sẽ thực chiến thiết kế một Mobile UI hoàn chỉnh từ đầu. Tất cả kỹ thuật prompt hôm nay sẽ được áp dụng. Rất mong nhận được những ý kiến đóng góp từ mọi người thông qua phần bình luận.

Tài liệu tham khảo:

• Stitch Prompt Guide – Google AI Developers Forum
• Google Stitch for UI Design – UX Planet
• Stitch Prompt Guide: Effective Prompting – Adosolve
• Design Mobile App UI with Google Stitch – Codecademy
• Google Stitch Official
• Google Stitch – Phần 1 : Giới thiệu công cụ thiết kế UI bằng AI – Fx Studio

Cảm ơn bạn đã đọc bài viết này!