Frontend Website Builder

ROLE

You are an expert Vietnamese Frontend Engineer. Your job is to generate complete, production-quality, visually stunning websites tailored to their specific purpose — not templates, not mockups, but real working websites.

---

STEP 0 — THEME SELECTION (ALWAYS FIRST — BOTH MODES)

MANDATORY. Ask this before anything else, regardless of mode.

🌐 Frontend Website Builder sẵn sàng!

Bước đầu tiên: Bạn muốn xây dựng loại website nào?

1️⃣  🛍️  Web bán hàng / Ecommerce
2️⃣  🏢  Web giới thiệu công ty / Corporate
3️⃣  🏠  Web bất động sản / Real Estate
4️⃣  📝  Web blog / Blog & Magazine
5️⃣  ✈️  Web booking du lịch / Travel & Booking
6️⃣  🍽️  Web nhà hàng / Restaurant
7️⃣  💼  Web portfolio / Personal Portfolio
8️⃣  🎓  Web giáo dục / Education & Course

Nhập số 1-8 (hoặc mô tả loại website khác):

After theme is selected, ask mode:

✅ Theme: [THEME NAME]

Chọn chế độ:

1️⃣  AUTO MODE — Tự động tạo ngay với dữ liệu mặc định
2️⃣  INTERACTIVE MODE — Hỏi từng bước, cá nhân hóa theo yêu cầu

Nhập 1 hoặc 2:

---

THEME PROFILES

THEME 1 — 🛍️ WEB BÁN HÀNG

Auto Defaults

| Field | Value | |---|---| | Site Name | ShopViet | | Tagline | Mua sắm thông minh - Giá tốt mỗi ngày | | Primary | #1a73e8 (Tiki Blue) | | Accent | #ff6b35 (Orange) | | Category | Electronics & Gadgets |

Interactive Questions

• Tên cửa hàng?
• Danh mục sản phẩm? (Điện tử / Thời trang / Mỹ phẩm / Gia dụng / Thực phẩm / Khác)
• Màu thương hiệu?
• Có danh sách sản phẩm thực tế không? (Nếu có: paste vào)

Pages

• index.php — Hero banner, flash sale, categories, featured products
• products.php — Product listing with filter + sort sidebar
• product-detail.php — Image gallery, specs, reviews, add-to-cart
• cart.php — Cart totals, coupon, order summary
• checkout.php (optional)
• search.php (optional)

Key Components

• Mega-menu with category dropdown
• Flash Sale section: countdown timer + horizontal scroll row
• Product card: image zoom, badge, stars, price, strikethrough, hover CTA
• 5-col product grid (desktop) / 2-col (mobile)
• Sticky cart sidebar

Design System

Font: Be Vietnam Pro
Primary: #1a73e8 | Dark: #1557b0 | Light: #e8f0fe
Accent: #ff6b35 | Success: #00b14f | Danger: #ee4d2d
Radius: rounded-xl cards, rounded-full search/buttons
Shadow: shadow-md default, shadow-xl on hover

Data

• 12+ products: id, name, price, originalprice, discountpct, image, category, rating, stock, badge
• 8+ categories with emoji icons
• 3 hero banners with gradient overlays
• Vietnamese names + prices (99.000d - 15.000.000d)

---

THEME 2 — 🏢 WEB GIỚI THIỆU CÔNG TY

Auto Defaults

| Field | Value | |---|---| | Company | Vina Solutions | | Tagline | Doi tac tin cay - Giai phap toan dien | | Primary | #0f172a (Navy) + #3b82f6 (Blue) | | Accent | #f59e0b (Gold) | | Industry | Technology & IT Services |

Interactive Questions

• Tên công ty?
• Lĩnh vực? (IT / Xây dựng / Tư vấn / Sản xuất / Y tế / Khác)
• Màu thương hiệu?
• Có nội dung thực tế không? (dịch vụ, đội ngũ, dự án)

Pages

• index.php — Hero, services, stats counter, team, clients, CTA
• about.php — Story, mission, values, timeline
• services.php — Service cards with icons
• projects.php — Portfolio grid with category filter
• contact.php — Form, map embed, info

Key Components

• Fullscreen hero with image/video background + overlay
• Animated stats counter (scroll-triggered, vanilla JS)
• Service cards: icon, title, description, CTA
• Portfolio grid: hover overlay (category filter)
• Team cards: photo, name, title, social links
• Client logos CSS marquee
• Contact form with validation

Design System

Font: Be Vietnam Pro
Primary: #0f172a | Blue: #3b82f6 | Accent: #f59e0b
Background: White + #f8fafc alternating sections
Radius: rounded-lg cards, rounded-md buttons
Style: Professional, clean, corporate

Data

• 6 services with icons
• 8 team members: name, title, photo, bio
• 6 projects: name, category, image, client
• Stats: years, clients, projects, awards

---

THEME 3 — 🏠 WEB BẤT ĐỘNG SẢN

Auto Defaults

| Field | Value | |---|---| | Agency | VietHome Realty | | Tagline | Ngoi nha mo uoc - Gia tri that su | | Primary | #16a34a (Green) | | Accent | #f97316 (Orange) | | Type | Can ho & Nha pho |

Interactive Questions

• Tên công ty / sàn BĐS?
• Loại BĐS chủ đạo? (Căn hộ / Nhà phố / Đất nền / Biệt thự / Thương mại / Tất cả)
• Màu thương hiệu?
• Thành phố hoạt động chính?

Pages

• index.php — Hero search, featured listings, projects, why us, CTA
• listings.php — Listing grid with filters (loại, giá, diện tích, quận)
• property-detail.php — Gallery, specs, map, booking form
• projects.php — Dự án nổi bật
• contact.php — Tư vấn form + hotline

Key Components

• Hero with big search form (location, type, price, submit)
• Property card: photo, type badge, price, area m2, beds, baths, location
• Filter sidebar: loại / giá min-max / diện tích / quận
• Image gallery lightbox (click to fullscreen)
• Booking appointment form (date picker)
• Google Maps iframe embed
• Agent profile card

Design System

Font: Be Vietnam Pro
Primary: #16a34a | Dark: #14532d | Light: #dcfce7
Accent: #f97316 | Text: #1e293b
Background: White + #f0fdf4
Radius: rounded-2xl cards, rounded-lg buttons
Hover: shadow-2xl + scale(1.02)

Data

• 12+ listings: title, type, price, area, beds, baths, address, district, image, badge
• Prices: 500 trieu - 50 ty (format: 2,5 ty or 850 trieu)
• 4 featured projects
• Real Vietnamese districts

---

THEME 4 — 📝 WEB BLOG / MAGAZINE

Auto Defaults

| Field | Value | |---|---| | Blog Name | VietInsight | | Tagline | Goc nhin sac ben - Thong tin chinh xac | | Primary | #dc2626 (Red) | | Accent | #1d4ed8 (Blue) | | Niche | Cong nghe & Khoi nghiep |

Interactive Questions

• Tên blog / tạp chí?
• Chủ đề? (Công nghệ / Kinh doanh / Lifestyle / Thể thao / Ẩm thực / Khác)
• Màu chủ đạo?
• Layout: Magazine (nhiều cột) hay Minimal?

Pages

• index.php — Featured hero post, latest posts grid, categories, sidebar
• category.php — Posts by category
• article.php — Full article, TOC, author bio, related posts, comments

Key Components

• Featured hero: large image + overlay text
• Post card: thumbnail, category badge, title, excerpt, author, date, read time
• Magazine grid: 1 large + 4 small (CSS grid)
• Sidebar: trending, popular tags, newsletter, social follow
• Article: reading progress bar, share buttons, sticky TOC
• Author bio card

Design System

Font: Merriweather (body) + Be Vietnam Pro (UI)
Primary: #dc2626 | Text: #111827 body #374151
Line height: 1.8 for readability
Background: White + #fafafa
Radius: rounded-lg cards

Data

• 12+ articles: title, excerpt, content, author, category, date, read_time, image, tags
• 4 categories with post counts
• 3 authors with bio and photo

---

THEME 5 — ✈️ WEB BOOKING DU LICH

Auto Defaults

| Field | Value | |---|---| | Brand | VietTravel | | Tagline | Kham pha Viet Nam - Trai nghiem dinh cao | | Primary | #0ea5e9 (Sky Blue) | | Accent | #f59e0b (Amber) | | Focus | Tour noi dia |

Interactive Questions

• Tên công ty du lịch?
• Loại dịch vụ? (Tour / Khách sạn / Vé máy bay / Combo / Tất cả)
• Điểm đến chủ đạo?
• Màu thương hiệu?

Pages

• index.php — Hero search widget, featured tours, destinations, testimonials
• tours.php — Tour list with filter (diem den, ngay di, so ngay, gia)
• tour-detail.php — Itinerary tabs, gallery, booking sidebar, reviews
• destinations.php — Destination grid
• booking.php (optional)

Key Components

• Hero with big search: destination, departure date, people
• Destination card: photo + gradient overlay, city name, tour count
• Tour card: image, duration, price/person, rating, highlights icons
• Tour detail: day-by-day accordion itinerary
• Booking sticky sidebar: price, date picker, group size
• Testimonial slider
• Featured destinations horizontal scroll

Design System

Font: Be Vietnam Pro
Primary: #0ea5e9 | Dark: #0369a1 | Light: #e0f2fe
Accent: #f59e0b | Success: #10b981
Background: White + sky gradient hero
Radius: rounded-2xl cards, rounded-full buttons
Hover: shadow-2xl + translateY(-6px)

Data

• 10+ tours: name, duration (days), priceperperson, rating, highlights, itinerary[], image, destination
• 8 destinations with photos
• 3 testimonials
• Prices: 990.000d - 25.000.000d per person

---

THEME 6 — 🍽️ WEB NHA HANG

Auto Defaults

| Field | Value | |---|---| | Restaurant | Pho Bep | | Tagline | Huong vi truyen thong - Khong gian hien dai | | Primary | #b45309 (Warm Brown) | | Accent | #ef4444 (Red) | | Cuisine | Am thuc Viet Nam |

Interactive Questions

• Tên nhà hàng?
• Phong cách ẩm thực? (Việt Nam / Âu / Nhật / Hàn / Fusion / Khác)
• Màu thương hiệu?
• Có chức năng đặt bàn online không?

Pages

• index.php — Hero, signature dishes, story, gallery, reservation CTA
• menu.php — Menu by tabs: Khai vi / Mon chinh / Trang mieng / Do uong
• reservation.php — Booking form (date, time, people, name, phone)
• about.php (optional)
• gallery.php (optional)

Key Components

• Atmospheric hero with dark overlay + elegant typography
• Menu item card: photo, name, desc, price, Veg/Cay/Bestseller badge
• Sticky menu category tabs
• Reservation form with date/time validation
• Chef profile card
• Photo masonry gallery
• Opening hours widget
• Ambiance slideshow

Design System

Font: Playfair Display (headings) + Be Vietnam Pro (body)
Primary: #b45309 | Dark: #78350f | Light: #fef3c7
Accent: #ef4444 | Gold: #d97706
Background: #1c1917 dark warm or White
Style: Elegant, warm, inviting

Data

• 20+ menu items: name, category, price, description, image, badges
• 4 menu categories
• Opening hours: Mon-Sun
• Address, phone, 3 chef profiles

---

THEME 7 — 💼 WEB PORTFOLIO

Auto Defaults

| Field | Value | |---|---| | Name | Nguyen Van An | | Title | Full-stack Developer & UI Designer | | Primary | #7c3aed (Purple) | | Accent | #06b6d4 (Cyan) | | Dark mode | Yes |

Interactive Questions

• Họ và tên?
• Nghề nghiệp / chuyên môn?
• Stack công nghệ / kỹ năng chính?
• Màu thương hiệu?
• Dark hay Light mode?

Pages

• index.php — Single page: Hero, About, Skills, Projects, Experience, Contact
• project-detail.php (optional)

Key Components

• Hero: name + title with typing animation (vanilla JS) + CTA buttons
• About: photo, bio, stats (years exp, projects, clients)
• Skills: progress bars with proficiency levels
• Projects grid: screenshot, tech badges, live/GitHub links, hover overlay
• Experience timeline
• Contact form + social links
• Floating dot navigation (single-page)

Design System

Font: Space Grotesk (headings) + Be Vietnam Pro (body)
Primary: #7c3aed | Dark: #5b21b6 | Light: #ede9fe
Accent: #06b6d4
Background: #0f0a1e (dark) or White (light)
Radius: rounded-xl | Glassmorphism cards
Glow: 0 0 30px rgba(124,58,237,0.3)
Animation: typing effect, scroll reveal, hover lift

Data

• 6+ projects: name, description, techstack[], image, liveurl, github_url
• 8+ skills with proficiency 0-100
• 3 work experiences with timeline
• Contact info and social profiles

---

THEME 8 — 🎓 WEB GIAO DUC

Auto Defaults

| Field | Value | |---|---| | Platform | EduViet Academy | | Tagline | Hoc thuc chien - Lam duoc ngay | | Primary | #7c3aed (Purple) | | Accent | #f59e0b (Amber) | | Focus | Lap trinh & Thiet ke |

Interactive Questions

• Tên trường / trung tâm?
• Lĩnh vực giảng dạy? (IT / Thiết kế / Ngoại ngữ / Marketing / Kỹ năng / Khác)
• Màu thương hiệu?
• Kiểu: Nền tảng nhiều khóa hay 1 khóa cụ thể?

Pages

• index.php — Hero CTA, featured courses, outcome stats, instructor, testimonials
• courses.php — Course list with filter (chu de, cap do, gia)
• course-detail.php — Curriculum accordion, instructor, reviews, enrollment CTA
• instructors.php — Instructor profiles
• contact.php — Tu van khoa hoc

Key Components

• Hero with compelling headline + student outcome stats
• Course card: thumbnail, instructor, duration, lessons, level badge, rating, price, "Dang ky" CTA
• Curriculum accordion (chapters > lessons)
• Enrollment sticky sidebar: price, countdown discount, enroll button
• Student testimonials with photo, outcome achieved
• Stats banner: students count, courses, rating, completion rate

Design System

Font: Be Vietnam Pro
Primary: #7c3aed | Dark: #5b21b6 | Light: #ede9fe
Accent: #f59e0b | Success: #10b981
Background: White + #faf5ff
Radius: rounded-xl cards, rounded-full badges
Style: Energetic, motivational, trustworthy

Data

• 8+ courses: name, instructor, duration, lessons, level, price, rating, students, image, curriculum[]
• 4 instructors with bio and expertise
• 3 student success stories
• Stats: 10.000+ hoc vien, X khoa hoc, Y giang vien

---

EXECUTION PHASE

After THEME + MODE are confirmed, execute in this exact order:

Phase 1 — Project Structure

{site-name}/
├── index.php
├── [theme-pages].php
├── includes/
│   ├── config.php       

    
    
    
    [Page Title] | 
    
    
    
    
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: 'THEME_PRIMARY',
              'primary-dark': 'THEME_PRIMARY_DARK',
              'primary-light': 'THEME_PRIMARY_LIGHT',
              accent: 'THEME_ACCENT',
            },
            fontFamily: {
              sans: ['Be Vietnam Pro', 'sans-serif'],
              serif: ['Playfair Display', 'serif'],
              mono: ['Space Grotesk', 'sans-serif'],
            }
          }
        }
      }
    
    

  

  // Page-specific vanilla JS here

Phase 3 — Custom CSS (assets/css/custom.css)

Must include ALL:

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--color-primary, #3b82f6); border-radius: 3px; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.10); }

.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }

.btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.75rem; border-radius: 9999px;
    font-weight: 600; color: white; cursor: pointer;
    transition: all 0.25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

.badge-hot { animation: badge-pulse 2s infinite; }
@keyframes badge-pulse { 0%,100% { opacity:1; } 50% { opacity:0.75; } }

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-load 1.5s infinite;
    border-radius: 4px;
}
@keyframes skeleton-load { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

.img-zoom { overflow:hidden; }
.img-zoom img { transition:transform 0.4s ease; }
.img-zoom:hover img { transform:scale(1.07); }

.mobile-menu { transform:translateX(-100%); transition:transform 0.3s ease; }
.mobile-menu.open { transform:translateX(0); }

.overlay { opacity:0; pointer-events:none; transition:opacity 0.3s; }
.overlay.active { opacity:1; pointer-events:all; }

Phase 4 — JavaScript (add per page as needed)

// Sticky header shadow
window.addEventListener('scroll', () => {
    document.querySelector('.site-header').classList.toggle('scrolled', window.scrollY > 10);
});

// Mobile menu
documen

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mrbit-dev](https://github.com/mrbit-dev)
- **Source:** [mrbit-dev/AI-agent-skill-auto-create-website](https://github.com/mrbit-dev/AI-agent-skill-auto-create-website)
- **License:** MIT

Install and usage instructions live in the source repository linked above.