P – Point (Quan điểm/Điểm chính)
Việc ứng dụng AI vào thiết kế wireframe giúp chúng ta trình bày ý tưởng sản phẩm nhanh chóng và rõ ràng hơn bao giờ hết cho cả stakeholder và đội ngũ phát triển.
R– Reason (Lý do/Giải thích)
Trong giai đoạn đầu của dự án, việc diễn đạt yêu cầu thường mất thời gian vì phải mô tả bằng văn bản hoặc chờ designer vẽ lại. Điều này dễ dẫn đến chậm trễ, sai lệch mong muốn giữa các bên. Với AI,
- Có thể rút ngắn thời gian, trực quan hóa ý tưởng, và đồng bộ được hiểu biết chung ngay từ đầu.
- Tự động hóa quá trình phác thảo, nhanh chóng tạo ra nhiều tùy chọn wireframe chất lượng cao. Điều này tiết kiệm thời gian đáng kể, cho phép chúng ta tập trung vào logic sản phẩm và trải nghiệm người dùng, thay vì các tác vụ vẽ thủ công lặp lại.
E – Example (Ví dụ/Minh họa)
Ví dụ, khi cần thiết kế màn hình “Coupon & Voucher Code”, thay vì chỉ liệt kê các trường như Keyword, Category, Campaign, Status, chúng ta có thể dùng AI để tạo wireframe demo. Stakeholder nhìn vào sẽ dễ hình dung giao diện, team DEV thì hiểu rõ logic xử lý phía sau. Nhờ vậy, quá trình review – góp ý – chỉnh sửa diễn ra nhanh hơn nhiều.
Các bước thực hiện:
- Bước 1: Câu prompt
- Bước 2: Dán câu prompt vào Tool AI “Lovable”
Prompt – Thiết kế wireframe
## Role
You are a **Voucher Management Agent** working for a **Pub Ads platform**. Your role is to manage, filter, paginate, and display coupon/voucher codes for campaigns, providing Pub Ads users with tools to search, explore, and generate tracking links.
## Instructions
1. Display a screen titled **”Coupon & Voucher Code”**.
2. Provide a **search bar and filter options** with the following criteria:
- **Keyword** (text search by coupon/voucher name or description)
- **Category** (dropdown with values: All, Fashion, Electronic, Beauty & Health, Travel & Hotel, Home & Living, Food & Grocery, Marketplace)
- **Campaign** (dropdown listing only campaigns with voucher codes that are **Running** or **Upcoming**)
- **Status** (dropdown with values: All, Upcoming, Running)
3. Display a **paginated list** of coupon/voucher codes where the status is **Running** or **Upcoming**.
- Default page size: **10 records per page**
- Provide **Next / Previous buttons** for navigation
- Display **current page number and total pages**
4. Each record must show the following information:
- **Image**
- **Name**
- **Short Detail** (only first 2 lines of description visible)
- **Usage Count**
- **Voucher Code**
- **Validity Period**
- **Button**: “Get Link”
5. If the title text is longer than 2 lines:
- Display only 2 lines and append a hyperlink “see more”.
- When the user clicks “see more”, expand the detail field to show the full description.
## Rules
- Only display vouchers with status Running or Upcoming.
- Campaign filter must dynamically fetch only campaigns with available vouchers (Running/Upcoming).
- Pagination must always apply — even if the result has fewer than one page, still show “Page 1 of 1”.
- Do not auto-expand long details unless the user clicks “see more”.
- Keep the UI minimal, clear, and focused on discoverability.
##Few-shot Example
User selects Category: Fashion + Status: Running.
➡ System shows paginated list (10 records per page).Page 1/3:
- [Image] Fashion Sale 50%
- Detail: “Get 50% off…” (2 lines) [see more]
- Usage: 134
- Voucher Code: FASHION50
- Validity: 01/09/2025 – 30/09/2025
- Button: [Get Link]
… (up to 10 records)
[Previous] [Next] — Showing Page 1 of 3.
User clicks “Next”.
➡ System loads Page 2/3 with next 10 voucher records.User clicks “see more”.
➡ Full detail expands inside voucher record.
Tool AI “Lovable”
- Truy cập tool: https://lovable.dev/
- Login account
- Dán câu prompt vào thanh input (create)
Kết quả
P – Point (Kết luận/Quan điểm nhắc lại)
Tóm lại, việc tận dụng AI để thiết kế & phác thảo wireframe demo không chỉ tiết kiệm thời gian mà còn nâng cao hiệu quả giao tiếp, giúp stakeholder và team phát triển đồng thuận ngay từ đầu, giảm rủi ro sai sót khi triển khai.
Dựa vào trải nghiệm thực tế:
- Thực hiện thủ công: trung bình mất 2h để viết phác thảo và thiết kế wirefram cho 1 task, một sprint có 2 task → mất 4h/sprint. Với 2 sprint/tháng → mất 8h/tháng/team.
- Khi sử dụng AI: chỉ mất 1h/task, tức là 2h/sprint. Với 2 sprint/tháng → mất 4h/tháng/team.
👉 Như vậy, team BA tiết kiệm được 4h/tháng.
Nói cách khác, AI giúp đội ngũ team BA (NgocDT, DatPHT) giảm bớt thời gian suy nghĩ thiết kết & phác thảo ý tưởng để xây dựng wireframe, đồng thời, wireframe trở lên trực quan hơn vì hoàn toàn mang đi demo các actions có trong tính năng.
Hãy cùng nhau khám phá và áp dụng công nghệ này để tối ưu hóa quy trình phát triển sản phẩm của chúng ta.