# 🚀 Lovable AI Prompt Templates for Vietnamese Web Apps

> **Complete prompt library for building popular web applications using Lovable AI**
> Designed specifically for Vietnamese business contexts and user needs

---

## 📖 HOW TO USE THIS GUIDE

### Quick Start
1. **Copy** the Initial Prompt from any template below
2. **Paste** it directly into [Lovable.dev](https://lovable.dev) chat input
3. **Review** the generated app and use Iterate Prompts to refine
4. **Deploy** when satisfied — Lovable handles hosting automatically

### Best Practices
- ✅ Always start with the full Initial Prompt before iterating
- ✅ Use one Iterate Prompt at a time for best results
- ✅ Be specific about colors, fonts, and Vietnamese text when needed
- ✅ Test on mobile view — Vietnamese users are mobile-first
- ❌ Don't paste multiple Iterate Prompts at once
- ❌ Don't skip the Initial Prompt and jump to iterations

### Template Structure
Each template contains:
- **App Name** — Project reference name
- **Initial Prompt** — Full starting prompt (~100 words)
- **Iterate Prompts** — 6+ follow-up improvements
- **Pro Tips** — Vietnamese market-specific advice

---

## ═══════════════════════════════════════

## 📦 TEMPLATE 1: Product Landing Page
### `Trang Landing Page Sản Phẩm`

---

### App Name
```
VN-Product-Landing
```

### 🟢 Initial Prompt — Copy & Paste This
```
Build a modern, high-converting product landing page for a Vietnamese consumer product. 
Include a sticky navigation bar with logo, hero section with compelling headline, 
subheadline, and CTA button. Add a features section with 3 icon-based benefit cards, 
a social proof section with customer testimonials and star ratings, a pricing section 
with 2-3 tiers highlighted with a "Best Value" badge, an FAQ accordion section, 
and a footer with contact info. Use a vibrant color scheme with red and gold accents 
reflecting Vietnamese aesthetics. Make it fully responsive for mobile. 
Include smooth scroll animations and hover effects on all interactive elements.
```

---

### 🔄 Iterate Prompts

**Iterate 1 — Add Video Hero**
```
Replace the hero background with a full-width video background overlay. 
Add a play button icon in the center that opens a product demo video modal 
when clicked. Keep the headline and CTA button on top of the video with 
a dark semi-transparent overlay for readability.
```

**Iterate 2 — Add Countdown Timer**
```
Add an urgency section above the pricing cards. Include a countdown timer 
showing days, hours, minutes, and seconds counting down to a sale deadline. 
Style it with a red background and white text. Add the text "Special Launch 
Price Ends In:" above the timer. Make the timer functional using JavaScript.
```

**Iterate 3 — Social Proof Numbers**
```
Add an animated statistics banner between the features section and testimonials. 
Display 4 key metrics: "10,000+ Happy Customers", "4.9/5 Star Rating", 
"98% Satisfaction Rate", and "24/7 Support Available". Use count-up animations 
when the section scrolls into view. Style with a gradient background.
```

**Iterate 4 — Sticky CTA Bar**
```
Add a sticky bottom bar that appears after the user scrolls past the hero section. 
The bar should contain a short product name, a reduced price with original price 
crossed out, and a prominent "Buy Now" CTA button. The bar should be visible on 
mobile and desktop and disappear when user reaches the footer.
```

**Iterate 5 — Trust Badges Section**
```
Add a trust badges row below the hero CTA button. Include 5 badges: 
"Free Shipping", "30-Day Money Back", "Secure Payment", "Genuine Product", 
and "24/7 Support". Use simple icons with short text labels. Style them 
as subtle pill-shaped badges with a light gray background.
```

**Iterate 6 — Lead Capture Popup**
```
Create a lead capture popup that appears after 8 seconds or when user 
attempts to leave the page. The popup offers a 10% discount code in exchange 
for email. Include an email input field, a "Get My Discount" button, 
and a dismiss option. Add a cookie so it only shows once per session.
```

---

### 💡 Pro Tips for Vietnamese Market
> - Use **đỏ (red) and vàng (gold)** color palettes — they symbolize luck and prosperity
> - Include **Zalo contact button** alongside WhatsApp in contact sections
> - Add **COD (Cash on Delivery)** as a payment badge — very trusted in Vietnam
> - Feature **Vietnamese dong (₫ VND)** in all pricing displays

---

## ═══════════════════════════════════════

## 🛒 TEMPLATE 2: Simple E-Commerce Store
### `Trang Bán Hàng E-Commerce Đơn Giản`

---

### App Name
```
VN-Shop-Simple
```

### 🟢 Initial Prompt — Copy & Paste This
```
Build a simple e-commerce web app for a Vietnamese online shop selling physical products. 
Create a homepage with a hero banner, featured product grid (8 products with image, 
name, price, and add-to-cart button), and category filter tabs. Build a product detail 
page with image gallery, description, quantity selector, and add-to-cart functionality. 
Include a shopping cart sidebar that slides in from the right showing items, quantities, 
subtotal, and checkout button. Add a search bar in the header. Use a clean white and 
green color scheme. Make all components fully responsive. Use React state management 
for the cart functionality with item count badge on cart icon.
```

---

### 🔄 Iterate Prompts

**Iterate 1 — Product Filter & Sort**
```
Add a full filtering and sorting system to the product grid. Include filter options 
for price range (slider), category checkboxes, and rating filter. Add a sort dropdown 
with options: "Newest", "Price: Low to High", "Price: High to Low", "Best Selling", 
and "Top Rated". Show the active filter count as a badge. Add a "Clear All Filters" 
button. Results should update instantly without page reload.
```

**Iterate 2 — Wishlist Feature**
```
Add a wishlist feature to the shop. Place a heart icon on each product card that 
toggles the product into a saved wishlist. Add a wishlist page accessible from 
the header navigation showing all saved items with options to move them to cart 
or remove them. Persist the wishlist in localStorage so it survives page refresh.
```

**Iterate 3 — Checkout Form**
```
Build a multi-step checkout form with 3 steps: Step 1 - Customer Information 
(name, phone, email, address fields), Step 2 - Shipping Method selection with 
pricing (Standard/Express/Same-day), Step 3 - Order Review and payment method 
selection (COD, Bank Transfer, Momo, ZaloPay). Add a progress bar at the top 
and validate each step before proceeding.
```

**Iterate 4 — Product Reviews System**
```
Add a reviews and ratings section on the product detail page. Display existing 
reviews with star rating, reviewer name, date, and comment text. Add a review 
submission form with 1-5 star selection and text input. Show aggregate rating 
with a breakdown bar chart (5 stars: 60%, 4 stars: 25%, etc). 
Limit to one review per session using localStorage.
```

**Iterate 5 — Flash Sale Banner**
```
Add a flash sale section on the homepage between the hero and product grid. 
Display 4 sale products in a horizontal scroll row with percentage discount 
badges (e.g., "-30%"), original crossed-out prices, and a countdown timer 
per item or a shared sale-end timer. Use red and yellow styling to create urgency.
```

**Iterate 6 — Order Tracking Page**
```
Create an order tracking page accessible via a "Track Order" link in the footer. 
User enters their order number and phone number to look up status. Display a 
visual timeline showing order stages: Confirmed → Processing → Shipped → 
Out for Delivery → Delivered, with timestamps. Use mock data to demonstrate 
the functionality with a sample order number shown as a hint.
```

---

### 💡 Pro Tips for Vietnamese Market
> - **MoMo and ZaloPay** are the most popular e-wallets — always list them as payment options
> - **COD is king** — Over 70% of Vietnamese shoppers prefer Cash on Delivery
> - Display prices in **1.000đ format** not 1,000 for Vietnamese number formatting
> - Add **"Hàng Chính Hãng" (Genuine Product)** badges to build trust

---

## ═══════════════════════════════════════

## 📅 TEMPLATE 3: Appointment Booking System
### `Hệ Thống Quản Lý Đặt Lịch`

---

### App Name
```
VN-Booking-System
```

### 🟢 Initial Prompt — Copy & Paste This
```
Build a complete appointment booking web application suitable for Vietnamese service 
businesses like salons, clinics, or tutoring centers. Include a public booking page 
where customers select a service from a list with duration and price, choose a staff 
member, pick an available date from a calendar, and select a time slot. Show only 
available times, graying out booked slots. After booking, display a confirmation 
screen with booking ID. Build an admin dashboard where staff can view all appointments 
in a daily/weekly calendar view, update appointment status (Confirmed, Completed, 
Cancelled), and manage services. Use blue and white professional styling.
```

---

### 🔄 Iterate Prompts

**Iterate 1 — SMS/Email Confirmation Simulation**
```
Add a confirmation flow after booking is complete. Create a confirmation page 
that displays a booking summary card with booking ID, service name, staff name, 
date, time, and price. Include a "Add to Calendar" button that generates a 
calendar event file. Show a notification preview simulating an SMS confirmation 
message the customer would receive. Add a "Book Another Appointment" button.
```

**Iterate 2 — Staff Management Panel**
```
Add a staff management section to the admin dashboard. Display all staff members 
as cards showing name, role, avatar, and assigned services. Allow admin to add 
new staff with name, specialty, working hours, and days off. Include a weekly 
availability schedule editor per staff member using a grid of time slots 
that can be toggled on/off. Show staff-specific appointment counts.
```

**Iterate 3 — Customer Database**
```
Build a customer management panel in the admin area. Display a searchable table 
of all customers with columns: Name, Phone, Email, Total Bookings, Last Visit, 
and Total Spent. Click on any customer to see their full appointment history. 
Add the ability to add notes or tags (VIP, Regular, New) to customer profiles. 
Include export to CSV functionality.
```

**Iterate 4 — Revenue Analytics Dashboard**
```
Add an analytics page to the admin dashboard showing business performance metrics. 
Display: total revenue this month with trend vs last month, total appointments 
with completion rate, revenue by service as a pie chart, daily bookings as a 
bar chart for the past 30 days, and top performing staff by revenue. 
Use recharts library for all visualizations. Add date range filtering.
```

**Iterate 5 — Booking Reminder System**
```
Add a reminders management section in admin. Show a list of upcoming appointments 
in the next 24-48 hours that need reminders. Each row has customer name, phone, 
appointment time, and a "Mark Reminder Sent" button with timestamp logging. 
Add a settings panel where admin can configure reminder timing (e.g., 24 hours 
before, 2 hours before). Show daily reminder statistics.
```

**Iterate 6 — Reschedule & Cancellation**
```
Add reschedule and cancellation functionality to the customer side. On the 
booking confirmation page, add a "Manage Booking" section where customers 
enter their booking ID and phone number to retrieve their appointment. 
Show options to reschedule (opens calendar picker) or cancel (requires 
reason selection from a dropdown). Apply a cancellation policy note 
(e.g., free cancellation up to 2 hours before).
```

---

### 💡 Pro Tips for Vietnamese Market
> - Include **Zalo contact integration** — most Vietnamese businesses use Zalo for customer communication
> - **Lunar calendar display** can be a plus for traditional businesses
> - Popular service types: **hair salons (tiệm tóc), nail salons, clinics, tutoring, spa**
> - Add **offline booking by phone** tracking so receptionists can log walk-in bookings

---

## ═══════════════════════════════════════

## ✍️ TEMPLATE 4: Personal Blog
### `Blog Cá Nhân`

---

### App Name
```
VN-Personal-Blog
```

### 🟢 Initial Prompt — Copy & Paste This
```
Build a clean, modern personal blog web application. Include a homepage with 
a hero section featuring blogger's photo, name, tagline, and social links. 
Display a featured post carousel and a recent posts grid with thumbnail, 
category tag, title, excerpt, read time, and publication date. Build a full 
blog post page with rich text display, table of contents sidebar, author bio, 
tags, and related posts section. Add a categories page, an about page, 
and a contact form. Include a dark/light mode toggle. Add a search 
functionality to find posts by keyword. Use a minimal, typography-focused 
design with good reading UX.
```

---

### 🔄 Iterate Prompts

**Iterate 1 — Newsletter Subscription**
```
Add a newsletter subscription feature throughout the blog. Place a subscription 
banner after the 3rd paragraph in every blog post with a brief value proposition, 
email input, and subscribe button. Add a second subscription section in the footer. 
Create a success state with confirmation message and a subscription count 
display ("Join 2,400+ readers"). Store subscribers in localStorage for demo. 
Add an unsubscribe option on confirmation.
```

**Iterate 2 — Comments Section**
```
Build a full comments section at the bottom of each blog post. Display existing 
comments with avatar, name, date, comment text, and a like button with count. 
Support nested replies up to 2 levels deep. Add a comment submission form with 
name, email, and comment fields, plus a character counter. Include comment sorting 
(Newest/Oldest/Most Liked). Add a simple profanity filter simulation.
```

**Iterate 3 — Reading Progress Bar**
```
Add enhanced reading experience features to the blog post page. 
Include a thin progress bar at the top of the screen that fills as the user 
scrolls through the article. Add an estimated reading time badge at the article 
top. Include a floating "Back to Top" button that appears after scrolling 500px. 
Add a "Share" button that opens a share panel with LinkedIn, Facebook, Twitter, 
and copy-link options.
```

**Iterate 4 — Author Dashboard**
```
Build a simple admin/author dashboard protected by a login screen 
(username: admin, password: blog123). The dashboard shows: total posts, 
total views this month, top 5 posts by views, and recent comments to moderate. 
Include a post list management table with options to view, edit (opens a simple 
form), delete, or toggle published status. Add a "New Post" button 
with a basic markdown-like editor.
```

**Iterate 5 — Tag & Category System**
```
Enhance the blog's content discovery system. Create a full tags cloud page 
showing all tags with font size proportional to usage frequency. 
Build a category page with category cards showing name, post count, 
and a short description. Add breadcrumb navigation across all pages. 
Implement related posts algorithm that shows posts sharing the most tags 
with the current article. Add a "You might also like" section.
```

**Iterate 6 — Portfolio Section**
```
Add a portfolio/works page to the blog showcasing the blogger's projects or 
achievements. Display projects as a masonry grid with project image, title, 
description, tech stack tags, and links to live demo and GitHub. 
Add category filtering tabs (All, Web, Mobile, Design, etc). 
Include a featured project section at the top with a larger card. 
Make it work well for developers, designers, or content creators.
```

---

### 💡 Pro Tips for Vietnamese Market
> - Popular blog niches in Vietnam: **du lịch (travel), ẩm thực (food), lifestyle, công nghệ (tech), tài chính cá nhân (personal finance)**
> - Include **Facebook comments integration** — Vietnamese readers heavily use Facebook
> - Consider **bilingual toggle** (Vietnamese/English) for wider reach
> - **Short-form content** performs well — keep articles with clear H2/H3 structure

---

## ═══════════════════════════════════════

## 👥 TEMPLATE 5: Employee Management Dashboard
### `Dashboard Quản Lý Nhân Viên`

---

### App Name
```
VN-HR-Dashboard
```

### 🟢 Initial Prompt — Copy & Paste This
```
Build a comprehensive employee management dashboard web application for Vietnamese 
small and medium businesses. Include a main dashboard with KPI cards showing total 
employees, present today, on leave, and new hires this month. Build an employee 
directory with searchable and filterable table showing avatar, name, department, 
position, email, phone, and status. Include an employee detail page with full 
profile, contact info, work history, and documents section. Add an attendance 
tracking module with daily check-in/check-out log. Include a leave request 
management system. Use a professional dark blue and white color scheme 
with a collapsible sidebar navigation.
```

---

### 🔄 Iterate Prompts

**Iterate 1 — Payroll Management Module**
```
Build a payroll management module accessible from the sidebar. Display a monthly 
payroll table with columns: Employee Name, Department, Basic Salary, Allowances, 
Overtime Pay, Deductions (tax/insurance), and Net Salary. Add a payroll summary 
card at the top showing total payroll cost this month. Include the ability to 
generate individual payslip views in a printable format. Add month/year filter 
and export to CSV functionality.
```

**Iterate 2 — Performance Review System**
```
Add a performance review module to the HR dashboard. Create review cycles 
(Quarterly/Annual) where managers can rate employees on 5 criteria: 
Work Quality, Punctuality, Teamwork, Initiative, and Communication, 
each scored 1-10. Display radar charts visualizing each employee's performance 
profile. Show performance history timeline. Add an overall score calculation 
and automatic performance tier assignment: Excellent, Good, Average, 
Needs Improvement with corresponding color coding.
```

**Iterate 3 — Leave Management System**
```
Build a complete leave management system. Employees can submit leave requests 
with type (Annual/Sick/Personal/Maternity), date range, and reason. 
Managers see a pending approvals queue and can approve or reject with comments. 
Display each employee's leave balance tracker showing days used vs allocated 
for each leave type. Add a team leave calendar showing who is absent on each day. 
Include leave policy settings (annual leave: 12 days, sick: 10 days, etc).
```

**Iterate 4 — Recruitment Pipeline**
```
Add a recruitment module to track hiring pipeline. Create a Kanban board 
with stages: Applied → Screening → Interview → Technical Test → Offer → 
Hired/Rejected. Each candidate card shows name, applied position, application 
date, and recruiter assigned. Allow dragging cards between stages. 
Include a job posting manager with open positions, number of applicants, 
and status. Add interview scheduling that links to the booking calendar.
```

**Iterate 5 — Organizational Chart**
```
Build a visual organizational chart page. Display the company hierarchy as 
an interactive tree diagram starting from CEO/Director at the top, branching 
down through departments and teams. Each node shows employee photo, name, 
and title. Clicking a node opens a quick profile sidebar. Add zoom in/out 
controls and a search to highlight a specific employee in the tree. 
Include department color coding and employee count per department.
```

**Iterate 6 — HR Analytics & Reports**
```
Create a comprehensive HR analytics page with multiple report sections. 
Include: headcount trend line chart (12 months), department distribution 
donut chart, age and gender demographics bar charts, turnover rate trend, 
average tenure by department, and monthly attendance rate heatmap calendar. 
Add a report generation panel where HR managers can select report type, 
date range, and department filter, then "export" a summary view. 
Use recharts for all visualizations.
```

---

### 💡 Pro Tips for Vietnamese Market
> - Include **"Thâm niên" (seniority) tracking** — very important in Vietnamese workplace culture
> - Add **Social Insurance (Bảo hiểm xã hội - BHXH)** fields in employee profiles
> - **Tet bonus (Thưởng Tết)** is a key payroll feature Vietnamese businesses need
> - Consider **shift management** for manufacturing/retail heavy SMEs in Vietnam

---

## ═══════════════════════════════════════

## 🛠️ ADVANCED TIPS & TRICKS

### Combining Templates
If you need a hybrid app, combine Initial Prompts:
```
[Paste Template 2 Initial Prompt] + "Additionally, integrate a booking 
system where customers can schedule product demonstrations. 
[Paste Template 3 booking features as needed]"
```

### Vietnamese Language Integration
Add this snippet to any prompt:
```
Add Vietnamese language support throughout the app. All placeholder text, 
labels, and default content should be bilingual with Vietnamese as primary. 
Use Vietnamese date format (DD/MM/YYYY) and number format (1.000đ for currency). 
Include a VN flag icon indicating Vietnamese locale.
```

### Mobile-First Enhancement
Add this to any Initial Prompt:
```
Prioritize mobile-first design with touch-friendly tap targets minimum 44px, 
bottom navigation bar for mobile, swipe gestures for carousels, 
and optimized layout for 375px-428px screen widths common in Vietnam.
```

### Performance Optimization Prompt
```
Optimize the application for performance: add loading skeleton screens 
for all data-fetching states, implement lazy loading for images, 
add error boundary components with user-friendly error messages, 
and ensure all lists use virtualization for datasets over 100 items.
```

---

## 📋 QUICK REFERENCE CARD

| Template | Best For | Color Scheme | Complexity |
|----------|----------|--------------|------------|
| 🟥 Landing Page | Product launches, campaigns | Red & Gold | ⭐⭐ |
| 🟩 E-Commerce | Online shops, dropshipping | White & Green | ⭐⭐⭐ |
| 🟦 Booking System | Salons, clinics, tutoring | Blue & White | ⭐⭐⭐⭐ |
| ⬜ Personal Blog | Content creators, freelancers | Minimal/Custom | ⭐⭐ |
| 🟫 HR Dashboard | SMEs, startups | Dark Blue & White | ⭐⭐⭐⭐⭐ |

---

## 🔗 USEFUL RESOURCES

- **Lovable Documentation**: [docs.lovable.dev](https://docs.lovable.dev)
- **Lovable Discord Community**: Join for Vietnamese builders tips
- **Supabase Integration**: Connect Lovable apps to real database for production
- **Custom Domain**: Connect Vietnamese domain (.vn) via Lovable settings

---

*Last Updated: 2025 | Optimized for Lovable AI v2+ | Built for Vietnamese Market* 🇻🇳