Tạo một thư viện ảnh chụp màn hình (screenshots gallery) chuyên nghiệp, sẵn sàng cho môi trường production dành cho các ứng dụng iOS/macOS/Android với diện mạo như được thiết kế bởi top 1% nhà phát triển ứng dụng hàng đầu. Chỉ gồm một tệp HTML duy nhất, không cần bước biên dịch (build step).
# Trình Tạo Thư Viện Ảnh Chụp Màn Hình App Store (Screenshots Gallery)
**Tạo một trang thư viện ảnh chụp màn hình chuyên nghiệp, sẵn sàng đưa vào vận hành thực tế (production-ready) cho ứng dụng iOS/macOS/Android với diện mạo đẳng cấp như được thiết kế bởi top 1% các nhà phát triển ứng dụng hàng đầu.**
## Bối cảnh
Bạn đang xây dựng một trang thư viện trưng bày ảnh chụp màn hình (screenshots gallery) cho một ứng dụng. Dự án có sẵn các ảnh chụp màn hình nằm trong một thư mục (thường là `screenshots/`, `fastlane/screenshots/`, hoặc tương tự). Thư viện này phải nằm gọn trong một tệp HTML duy nhất, có thể triển khai ngay lên Netlify, Vercel hoặc bất kỳ dịch vụ lưu trữ web tĩnh (static host) nào.
## Yêu cầu Kỹ thuật & Thiết kế
### 1. Nền tảng Hệ thống Thiết kế (Design System Foundation)
Tạo các thuộc tính tùy chỉnh CSS (design tokens) cho:
- **Màu sắc (Colors)**: Bảng màu chính (các sắc độ từ 50-900), bảng màu phụ/nhấn (accent), bảng màu xám trung tính (50-900)
- **Bề mặt (Surfaces)**: Ba cấp độ bề mặt nền (surface-1, surface-2, surface-3)
- **Kiểu chữ (Typography)**: Bộ đôi phông chữ (phông chữ đơn cách mono cho các thành phần UI, phông chữ không chân sans cho nội dung văn bản)
- **Khoảng cách (Spacing)**: Thang tỷ lệ nhất quán (cơ sở 4px)
- **Đường viền (Borders)**: Thang độ bo góc (sm, md, lg, xl, 2xl, 3xl)
- **Đổ bóng (Shadows)**: Năm cấp độ nổi khối (sm, md, lg, xl, 2xl)
- **Chuyển cảnh (Transitions)**: Ba tốc độ (fast: 150ms, normal: 300ms, smooth: 400ms sử dụng hàm cubic-bezier)
### 2. Kiến trúc Bố cục (Layout Architecture)
- **Khung chứa (Container)**: Chiều rộng tối đa 1600px, căn giữa, có khoảng đệm (padding) đáp ứng linh hoạt theo màn hình
- **Lưới (Grid)**: Lưới co giãn kiểu Masonry sử dụng `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`
- **Khoảng cách lưới (Gap)**: 2rem trên máy tính để bàn (desktop), 1.5rem trên máy tính bảng (tablet), 1rem trên điện thoại (mobile)
- **Tỷ lệ khung hình thẻ (Card aspect ratio)**: Duy trì cách hiển thị ảnh chụp màn hình đồng nhất
### 3. Phần Đầu trang (Header Section)
- **Huy hiệu ứng dụng (App badge)**: Huy hiệu nhỏ hình viên thuốc có biểu tượng (icon) và dòng chữ "IOS APPLICATION" hoặc tên nền tảng tương ứng
- **Tiêu đề (Title)**: Tên ứng dụng cỡ lớn, in đậm với hiệu ứng chữ chuyển màu (gradient text)
- **Phụ đề (Subtitle)**: Mô tả gói gọn trong một dòng nêu bật các công nghệ và tính năng cốt lõi
- **Nền (Background)**: Lớp phủ họa tiết lưới (grid pattern) tinh tế tạo chiều sâu không gian
- **Khoảng đệm (Padding)**: Giảm khoảng đệm dọc (trên 3rem, dưới 2rem) để tạo cảm giác gọn gàng, cô đọng
### 4. Thẻ Ảnh chụp Màn hình (Screenshot Cards)
Mỗi thẻ (card) cần có:
- **Khung chứa (Container)**: Nền trắng/trắng ngà, bo tròn góc (2xl), đổ bóng tinh tế
- **Khung chứa ảnh (Image container)**: Nền chuyển màu (gradient), ảnh chụp màn hình căn giữa có viền trắng bao quanh (8px)
- **Hiệu ứng di chuột (Hover effects)**:
- Thẻ nhấc nhẹ lên (-8px translateY) kèm hiệu ứng đổ bóng đậm hơn
- Ảnh chụp màn hình phóng nhẹ (tỷ lệ 1.04) kèm góc xoay rất nhẹ (0.5deg)
- Đường viền phía trên xuất hiện (thanh dải màu gradient)
- Lớp phủ phát sáng tỏa tròn (radial glow overlay) hiện rõ dần
- **Thanh siêu dữ liệu (Metadata bar)**:
- Huy hiệu đánh số thứ tự (nền gradient, hình vuông 26px)
- Tên thiết bị (chữ in hoa, cỡ chữ nhỏ, phông chữ mono)
- **Tiêu đề thẻ (Title)**: In đậm, phông chữ mono, cỡ 1rem
- **Mô tả (Description)**: Chú thích một dòng, cỡ chữ nhỏ hơn, màu sắc nhã nhặn
### 5. Sắp xếp theo Hành trình Người dùng (User Journey Ordering)
Sắp xếp thứ tự các ảnh chụp màn hình theo đúng trình tự người dùng trải nghiệm ứng dụng:
1. **Đăng nhập/Giới thiệu ban đầu (Login/Onboarding)** - Màn hình đầu tiên người dùng nhìn thấy
2. **Bảng điều khiển/Trang chủ (Dashboard/Home)** - Màn hình chính ngay sau khi đăng nhập
3. **Các màn hình tính năng chính (Primary feature views)** - Chức năng cốt lõi của ứng dụng
4. **Cài đặt/Cấu hình (Settings/Configuration)** - Các màn hình tùy chỉnh cá nhân hóa
5. **Quyền truy cập/Tích hợp (Permissions/Integrations)** - HealthKit, thông báo (notifications), v.v.
6. **Tính năng nâng cao (Advanced features)** - Đồng bộ hóa, chia sẻ, tính năng đám mây
7. **Phân tích/Báo cáo (Analytics/Reports)** - Các màn hình trực quan hóa dữ liệu
8. **Lưu trữ/Lịch sử (Archive/History)** - Các màn hình tra cứu dữ liệu lịch sử
### 6. Hiệu ứng Chuyển động (Animations)
- **Xuất hiện (Entrance)**: Hiệu ứng hiện dần lệch nhịp (staggered fade-in) kết hợp dịch chuyển trục Y translateY (độ trễ 0.1s giữa các thẻ)
- **Di chuột (Hover)**: Chuyển động mượt mà với hàm gia tốc cubic-bezier (0.16, 1, 0.3, 1)
- **Cuộn trang (Scroll)**: Sử dụng IntersectionObserver để kích hoạt hiệu ứng khi các thẻ đi vào vùng nhìn thấy (viewport)
- **Hiệu năng (Performance)**: Sử dụng thuộc tính `will-change` cho transform và opacity
### 7. Chân trang (Footer)
- **Nền (Background)**: Màu tối (neutral-900) với lớp phủ gradient tinh tế
- **Bo góc (Border radius)**: Chỉ bo tròn hai góc phía trên (2xl)
- **Nội dung (Content)**: Siêu dữ liệu tối giản (thiết bị, ngày cập nhật, trạng thái) kèm biểu tượng minh họa
- **Khoảng cách (Spacing)**: Nhỏ gọn (padding 2rem)
### 8. Các Điểm Ngắt Đáp Ứng Màn Hình (Responsive Breakpoints)
- **Máy tính để bàn - Desktop** (>1280px): 4-5 cột
- **Máy tính bảng - Tablet** (768-1280px): 2-3 cột
- **Điện thoại - Mobile** (<768px): 1 cột, giảm khoảng đệm (padding) trên toàn trang
### 9. Yêu cầu Kỹ thuật
- **Một tệp HTML duy nhất**: Toàn bộ mã CSS được nhúng trực tiếp trong thẻ `<style>`
- **Chỉ sử dụng các thư viện ngoài sau**:
- Pico.css (CSS framework tối giản)
- Font Awesome (biểu tượng icons)
- Google Fonts (Inter + IBM Plex Mono)
- Animate.css (tùy chọn, dùng cho các hiệu ứng chuyển động bổ sung)
- **Không cần bước biên dịch (No build step)**: Phải hoạt động ngay dưới dạng tệp HTML tĩnh
- **Hiệu năng (Performance)**: Tối ưu hóa chuyển động mượt mà, không gây xê dịch bố cục (no layout shift)
- **Khả năng tiếp cận (Accessibility)**: Sử dụng HTML ngữ nghĩa (semantic HTML), đầy đủ thuộc tính văn bản thay thế (alt text) cho hình ảnh
### 10. Chi tiết Tinh chỉnh Hoàn thiện (Polish Details)
- **Dải chuyển màu tinh tế (Subtle gradients)**: Hiệu ứng tỏa tròn ở nền giúp tạo chiều sâu (tránh làm quá tay gây rối mắt)
- **Xử lý đường viền (Border treatment)**: Viền 1px solid có độ trong suốt alpha
- **Phân lớp bóng đổ (Shadow layering)**: Kết hợp nhiều lớp giá trị shadow để tạo chiều sâu chân thực
- **Kiểu chữ (Typography)**: Thu hẹp khoảng cách chữ (letter-spacing) trên các tiêu đề (-0.03em)
- **Nhất quán màu sắc**: Sử dụng design tokens ở mọi nơi, không gán cứng (hardcode) mã màu
- **Trình bày hình ảnh**: Tạo đường viền trắng xung quanh ảnh chụp màn hình để mang lại cảm giác như khung viền thiết bị
## Định dạng Đầu ra
Tạo một tệp `index.html` duy nhất bao gồm:
1. Cấu trúc HTML hoàn chỉnh
2. Mã CSS nội tuyến (inline) với đầy đủ các design tokens
3. Mã JavaScript xử lý hiệu ứng cuộn trang (IntersectionObserver)
4. Toàn bộ các thẻ ảnh chụp màn hình kèm siêu dữ liệu chuẩn xác
5. Thiết kế đáp ứng (responsive design) tương thích với mọi kích thước màn hình
## Ví dụ Cấu trúc Thẻ Ảnh chụp Màn hình
```html
<div class="screenshot-card">
<div class="screenshot-img-container">
<img src="screenshot-name.png" alt="Description" class="screenshot-img">
</div>
<div class="screenshot-info">
<div class="screenshot-meta">
<div class="screenshot-number">1</div>
<div class="screenshot-device">iPhone 17 Pro Max</div>
</div>
<h3 class="screenshot-title">Screen Title</h3>
<p class="screenshot-desc">One-line caption</p>
</div>
</div>
```
## Những Điểm Khác Biệt Cốt Lõi So Với Các Thư Viện "Mang Dáng Dấp AI Đại Trà"
❌ **Cần tránh**:
- Lạm dụng quá nhiều dải màu chuyển sắc (gradients) và màu sắc lòe loẹt
- Các thẻ thống kê (stat cards) to bản gây lãng phí không gian
- Mô tả dài dòng và danh sách tính năng lê thê
- Các đường kẻ phân cách phần (section dividers) và tiêu đề phân loại rườm rà
- Hiệu ứng chuyển động quá đà gây choáng ngợp
- Khoảng cách bố cục thiếu nhất quán
- Phong cách ảnh minh họa đại trà (generic stock photography)
✅ **Cần học hỏi theo**:
- Các trang giới thiệu sản phẩm trên Apple App Store
- Trang tiếp thị của Linear, Raycast, Superhuman
- Thiết kế tối giản, đặt nội dung làm trung tâm (content-first)
- Các tương tác tinh tế, trau chuốt
- Nhịp điệu thị giác nhất quán
- Phân cấp thông tin dựa trên nghệ thuật sắp đặt chữ (typography-driven hierarchy)
- Sử dụng khoảng trắng (white space) như một yếu tố thiết kế chủ đạo
## Ghi chú Triển khai (Deployment Notes)
- Thư viện nên được triển khai vào thư mục `project-root/screenshots-gallery/` hoặc tương tự
- Bao gồm thư mục `.netlify` có chứa tệp `netlify.toml` để cấu hình
- Toàn bộ ảnh chụp màn hình nên được đặt cùng thư mục với tệp `index.html`
- Không yêu cầu quy trình build - thuần túy là HTML tĩnh
---
**Cách sử dụng**: Sao chép câu lệnh (prompt) này và gửi cho trợ lý AI kèm theo:
1. Danh sách các tệp ảnh chụp màn hình trong dự án của bạn
2. Tên ứng dụng và một dòng mô tả ngắn gọn
3. Nền tảng mục tiêu (iOS, macOS, Android, web)
4. Các công nghệ chính được sử dụng (SwiftUI, React Native, Flutter, v.v.)
AI sẽ tạo ra một thư viện trưng bày hoàn chỉnh, sẵn sàng đưa lên môi trường thực tế với vẻ đẹp chuyên nghiệp.Đóng vai Chuyên gia Bảo mật Ứng dụng AI trên Android. Triển khai các cấu hình bảo mật để bảo vệ khóa API, ngăn chặn hành vi lạm dụng và thiết lập mô hình định giá bền vững cho ứng dụng của bạn.
Hãy đóng vai một Chuyên gia Bảo mật Ứng dụng AI trên Android. Bạn chịu trách nhiệm triển khai các cấu hình an toàn nhằm bảo vệ khóa API (API keys), ngăn chặn việc lạm dụng trái phép và xây dựng một mô hình định giá bền vững cho ứng dụng của mình. Các nhiệm vụ của bạn bao gồm: 1. **Cấu hình Máy chủ Trung gian (Backend Proxy):** - Thiết lập một dịch vụ backend proxy tối giản, bảo mật bằng cách sử dụng các nền tảng như Railway.app, Render.com, Vercel, hoặc Firebase Cloud Functions. - Tạo một điểm cuối (endpoint) duy nhất để tiếp nhận tin nhắn của người dùng và chuyển tiếp chúng tới API AI: `POST/chat`. - Đảm bảo khóa API được lưu trữ an toàn trên máy chủ backend và không bao giờ bị lộ ra bên trong ứng dụng phía máy khách (client). 2. **Cập nhật Ứng dụng Android:** - Xóa bỏ toàn bộ các khóa API khỏi cơ sở mã nguồn của ứng dụng Android. - Sử dụng thư viện Retrofit hoặc Ktor để kết nối trực tiếp tới điểm cuối của backend proxy (ví dụ: https://albaroka.com/chat). - Đảm bảo không còn bất kỳ khóa gắn cứng (hard-coded keys) nào tồn tại trong `BuildConfig` hoặc trong mã nguồn. 3. **Triển khai Mô hình Định giá:** - Ưu tiên mô hình đăng ký thuê bao định kỳ (subscription) qua Google Play hơn là thanh toán một lần để đảm bảo tính bền vững. - Tích hợp với Thư viện Thanh toán Google Play (com.android.billingclient:billing:7.0.0). - Quản lý hạn mức sử dụng (quotas) của người dùng và tư cách thành viên cao cấp (premium) từ phía máy chủ backend. 4. **Bảo mật và Tuân thủ Chính sách Google Play:** - Áp dụng các quy tắc Proguard nghiêm ngặt để làm rối mã (obfuscate) các lệnh gọi API, khóa và thông tin nhạy cảm. - Đảm bảo tuân thủ đầy đủ các chính sách dữ liệu của Play Store và các giai đoạn kiểm thử (Kiểm thử Nội bộ - Internal Testing, Bản thử nghiệm - Beta). 5. **Các Tệp Cấu hình và Mã nguồn:** - Trừu tượng hóa các lệnh gọi API vào bên trong một gói mạng (network package) riêng biệt. - Căn chỉnh các cấu hình đồng bộ với cấu trúc của `MainActivity` hoặc `ViewModel`. - Tối ưu hóa các tệp quy tắc Gradle và Proguard nhằm tăng cường tính bảo mật và hiệu năng vận hành. Thiết lập này giúp đảm bảo tính bí mật cho khóa API của bạn, ngăn chặn hành vi trục lợi, hỗ trợ mô hình doanh thu dựa trên thuê bao định kỳ và tuân thủ các tiêu chuẩn khắt khe nhất của Google Play. Hãy đảm bảo máy chủ backend proxy của bạn có khả năng mở rộng linh hoạt và hoạt động ổn định.
Các quy ước định hướng rõ ràng để xây dựng ứng dụng Android hiện đại với Jetpack Compose và Kotlin.
# Ứng dụng Android Jetpack Compose taste của một kỹ sư Android - Xây dựng các màn hình mới hoàn toàn bằng Jetpack Compose và chỉ giữ lại hệ thống View thông qua cơ chế tương tác (interop) cho các phần mã nguồn cũ. Độ tin cậy: 0.90 - Viết toàn bộ ứng dụng bằng Kotlin với coroutines và Flow; không viết thêm mã RxJava hoặc Java mới. Độ tin cậy: 0.90 - Tuân theo luồng dữ liệu một chiều (unidirectional data flow): ViewModel chỉ cung cấp một UiState bất biến dưới dạng StateFlow và tiếp nhận các sự kiện. Độ tin cậy: 0.90 - Thu thập các flow trong composable bằng collectAsStateWithLifecycle, không dùng collectAsState thông thường. Độ tin cậy: 0.85 - Đưa trạng thái (state hoisting) ra khỏi các composable để hầu hết các hàm UI đều phi trạng thái (stateless) và có thể xem trước (previewable). Độ tin cậy: 0.90 - Truyền tham số Modifier làm đối số tùy chọn đầu tiên của mọi composable có thể tái sử dụng. Độ tin cậy: 0.85 - Giữ các tác vụ phụ (side effects) trong LaunchedEffect, DisposableEffect hoặc ViewModel, tuyệt đối không đặt trực tiếp trong phần thân của composable. Độ tin cậy: 0.90 - Đánh dấu các mô hình UI là bất biến (immutable) và sử dụng các tập hợp ổn định (stable collections) để quá trình recomposition luôn nhẹ nhàng. Độ tin cậy: 0.75 - Sử dụng Hilt cho dependency injection và tránh dùng service locator hoặc các singleton toàn cục. Độ tin cậy: 0.80 - Sử dụng mẫu thiết kế repository với Room cho dữ liệu cục bộ và Retrofit hoặc Ktor cho kết nối mạng, ưu tiên hoạt động ngoại tuyến (offline first) ở những nơi quan trọng. Độ tin cậy: 0.80 - Sử dụng các route Navigation Compose an toàn kiểu (type-safe) thay vì các đích đến được ghép bằng chuỗi ký tự. Độ tin cậy: 0.80 - Chia mô-đun theo tính năng cùng với một mô-đun core dùng chung một khi ứng dụng phát triển vượt quá một vài màn hình. Độ tin cậy: 0.70 - Quản lý các thư viện phụ thuộc bằng Gradle version catalog và các convention plugin thay vì sao chép-dán các tệp cấu hình build. Độ tin cậy: 0.85 - Sử dụng Material 3 với giao diện (theme) tùy chỉnh và màu sắc động (dynamic color), tuyệt đối không gán cứng mã màu hoặc cỡ chữ trong các màn hình. Độ tin cậy: 0.85 - Viết các hàm @Preview cho mọi trạng thái màn hình: đang tải, trống, lỗi, có nội dung, chế độ tối và phông chữ lớn. Độ tin cậy: 0.80 - Kiểm thử ViewModel bằng Turbine và kotlinx-coroutines-test, đồng thời kiểm thử UI bằng bộ Compose testing API. Độ tin cậy: 0.85 - Thêm contentDescription hoặc ngữ nghĩa (semantics) cho mọi hình ảnh và nút biểu tượng mang ý nghĩa để hỗ trợ trình đọc màn hình TalkBack. Độ tin cậy: 0.90 - Sử dụng WorkManager cho các công việc chạy nền có thể trì hoãn và tuyệt đối không giữ các tác vụ chạy dài bên trong ViewModel. Độ tin cậy: 0.85 - Bật R8 cùng các quy tắc giữ mã (keep rules) đã được kiểm thử và đóng gói kèm Baseline Profiles để khởi động ứng dụng nhanh hơn. Độ tin cậy: 0.80 - Chạy ktlint hoặc detekt và Android Lint trong CI và coi các cảnh báo mới như lỗi. Độ tin cậy: 0.75 - Lưu trữ chuỗi văn bản trong tài nguyên (resources) ngay từ ngày đầu tiên để việc bản địa hóa không bao giờ đòi hỏi phải tái cấu trúc mã nguồn. Độ tin cậy: 0.85