Dưới đây là prompt chuẩn, chi tiết và tối ưu để bạn dùng với AI (ChatGPT / Claude / Copilot / v0.dev…) nhằm tạo giao diện hệ quản trị tòa soạn báo điện tử dạng SaaS, đầu ra là HTML + CSS + JS + Bootstrap 👇

Bạn là một Senior Frontend Developer + UI/UX Designer chuyên thiết kế hệ thống quản trị (Admin Dashboard) quy mô lớn.

Hãy thiết kế giao diện hoàn chỉnh cho một hệ thống QUẢN TRỊ TÒA SOẠN BÁO ĐIỆN TỬ (NEWSROOM CMS) theo mô hình SaaS đa tenant (multi-tenant).

🎯 Mục tiêu#

Tạo giao diện Admin Dashboard hiện đại, chuyên nghiệp, dễ sử dụng
Hỗ trợ quản lý nhiều tờ báo (multi news organizations)
Output là code chạy được ngay: HTML + CSS + JavaScript + Bootstrap 5
UI phải giống sản phẩm thực tế (không phải demo sơ sài)

🧱 Yêu cầu kiến trúc giao diện#

1. Layout tổng thể#

Sidebar trái (menu)
Header top (search, user profile, switch tenant)
Content chính
Responsive (desktop + tablet)

2. SaaS Multi-tenant (RẤT QUAN TRỌNG)#

Phải có:

Dropdown chọn "Tờ báo" (Tenant Switcher)
Hiển thị:

Logo tờ báo
- Tên tờ báo
Dữ liệu thay đổi theo tenant

📌 Các module bắt buộc#

🏠 Dashboard#

Thống kê:

Số bài viết
- Lượt xem
- Bài hot
Biểu đồ (Chart.js)

📝 Quản lý bài viết#

Danh sách bài viết (table)
Filter:

Trạng thái (draft, pending, published)
- Tác giả
Nút:

Tạo mới
- Sửa
- Xóa
Badge trạng thái màu sắc

✍️ Soạn thảo bài viết#

Form:

Tiêu đề
- Nội dung (rich editor giả lập)
- Ảnh đại diện
- Tag
Preview bài viết

👥 Quản lý người dùng#

Table users
Role:

Admin
- Editor
- Writer

🗂️ Quản lý chuyên mục#

CRUD category
Tree structure (cha - con)

💬 Quản lý bình luận#

Danh sách comment
Duyệt / ẩn / xóa

⚙️ Cấu hình hệ thống#

Thông tin tờ báo
Logo
Domain
SEO config

🎨 UI/UX yêu cầu#

Sử dụng Bootstrap 5
Design hiện đại (giống AdminLTE / Metronic / Tabler)
Màu sắc:

Primary: xanh dương hoặc tím
Icon: Bootstrap Icons hoặc FontAwesome
Có:

Card
- Table đẹp
- Modal popup
- Toast notification

📱 Yêu cầu kỹ thuật#

Không dùng framework nặng (React, Vue)
Chỉ dùng:

HTML
- CSS
- JS thuần
- Bootstrap 5
Code tách rõ:

index.html
- styles.css
- app.js

🚀 Tính năng nâng cao (bonus)#

Dark mode toggle
Loading skeleton
Fake data JSON
Pagination
Sidebar collapse

📦 Output mong muốn#

Code hoàn chỉnh gồm:

HTML đầy đủ layout
- CSS custom
- JS xử lý interaction
Có comment rõ ràng trong code
Có dữ liệu mẫu (mock data)

❗ Yêu cầu quan trọng#

UI phải giống sản phẩm thật (production-ready UI)
Không được làm sơ sài
Phải có đầy đủ các trang (có thể dùng routing giả bằng JS)

👉 Gợi ý thêm#

Hãy thiết kế giống hệ thống:

CMS báo điện tử chuyên nghiệp
Có thể dùng để phát triển thành sản phẩm SaaS thật

Hãy bắt đầu tạo toàn bộ code ngay.

🎯 Tips dùng prompt này hiệu quả

Dùng với Claude / GPT-4o / GPT-5 → ra UI đẹp hơn
Nếu muốn đẹp hơn nữa, thêm dòng:

“UI style giống Notion + Stripe + Admin Dashboard cao cấp”

AI thiết kế giao diện hệ quản trị như thế nào