Prompt iOS

2 prompt

Trình Tạo Thư Viện Ảnh Chụp Màn Hình App Store (Screenshots Gallery)

Văn bản

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.

Android iOS SwiftUI+5

A@agileinnov8tor

Ứng dụng iOS SwiftUI taste

Văn bản

Các quy ước mang tính định hướng rõ ràng để xây dựng ứng dụng iOS hiện đại với SwiftUI và Swift Concurrency.

# Ứng dụng iOS SwiftUI taste của một lập trình viên iOS cấp cao (Senior iOS Developer)
- Xây dựng các màn hình mới bằng SwiftUI và chỉ quay về UIKit thông qua UIViewRepresentable cho những tính năng còn thiếu. Độ tin cậy: 0.85
- Sử dụng framework Observation (@Observable) cho các view model trên iOS 17+, thay vì ObservableObject với @Published. Độ tin cậy: 0.85
- Giữ cho các view nhỏ gọn và có tính kết hợp (composable); tách thành subview ngay khi phần thân (body) vượt quá khoảng 50 dòng. Độ tin cậy: 0.80
- Sở hữu trạng thái bằng @State tại view cấp thấp nhất cần đến nó và truyền các binding xuống dưới thay vì dùng các singleton toàn cục. Độ tin cậy: 0.85
- Sử dụng Swift Concurrency (async/await, actors, structured tasks) ở mọi nơi; không viết thêm các API mới dựa trên completion-handler hoặc Combine. Độ tin cậy: 0.85
- Bắt đầu các tác vụ bất đồng bộ bằng modifier .task để chúng tự động bị hủy khi view biến mất. Độ tin cậy: 0.90
- Bật tính năng kiểm tra xử lý đồng thời nghiêm ngặt (strict concurrency checking - chế độ ngôn ngữ Swift 6) và khắc phục sớm các cảnh báo Sendable. Độ tin cậy: 0.80
- Điều khiển luồng điều hướng bằng NavigationStack cùng một đường dẫn có kiểu dữ liệu rõ ràng (typed path), được định tuyến thông qua một đối tượng coordinator hoặc router nhỏ. Độ tin cậy: 0.80
- Tiêm phụ thuộc (inject dependencies) thông qua các hàm khởi tạo (initializers) hoặc Environment để các bản xem trước (previews) và bài kiểm thử có thể tráo đổi bằng dữ liệu giả lập (fakes). Độ tin cậy: 0.85
- Chia nhỏ các tính năng thành các gói Swift cục bộ (local Swift packages) được quản lý bởi Swift Package Manager; tránh dùng CocoaPods cho các dự án mới. Độ tin cậy: 0.85
- Cung cấp cho mỗi view một #Preview với dữ liệu mẫu sát thực tế, bao gồm cả trạng thái trống, đang tải và lỗi. Độ tin cậy: 0.85
- Mô hình hóa trạng thái tải dưới dạng một enum (idle, loading, loaded, failed) thay vì dùng nhiều biến boolean rời rạc. Độ tin cậy: 0.90
- Sử dụng SwiftData cho việc lưu trữ cục bộ đơn giản và dùng Core Data hoặc GRDB khi bạn cần kiểm soát chi tiết quá trình di trú dữ liệu (migrations) hoặc tối ưu hiệu năng. Độ tin cậy: 0.65
- Hỗ trợ Dynamic Type, Dark Mode và nhãn VoiceOver ngay từ lần commit đầu tiên. Độ tin cậy: 0.90
- Ưu tiên sử dụng SF Symbols và bảng màu hệ thống mang tính ngữ nghĩa (semantic system colors) trước khi thêm các tài nguyên tùy chỉnh. Độ tin cậy: 0.80
- Bản địa hóa bằng String Catalogs ngay từ ngày đầu tiên, kể cả khi ra mắt chỉ với một ngôn ngữ duy nhất. Độ tin cậy: 0.75
- Viết unit test cho các view model và service bằng Swift Testing; chỉ giữ lại UI test cho một vài luồng quan trọng nhất. Độ tin cậy: 0.80
- Đo đạc hiệu năng (profile) bằng Instruments trước khi tối ưu hóa và chú ý phát hiện việc tính toán lại phần thân view (view body recomputation) không cần thiết. Độ tin cậy: 0.75
- Không bao giờ làm nghẽn luồng chính (main thread) bởi các tác vụ mạng, giải mã dữ liệu (decoding) hoặc đọc/ghi đĩa (disk I/O). Độ tin cậy: 0.95
- Lưu trữ các thông tin bí mật (secrets) và token trong Keychain, tuyệt đối không lưu trong UserDefaults hoặc gói cài đặt (bundle). Độ tin cậy: 0.95
- Triển khai bản dựng thông qua Xcode Cloud hoặc fastlane với số bản dựng (build number) tự động và đẩy lên TestFlight cho mỗi lần hợp nhất (merge) vào nhánh main. Độ tin cậy: 0.75
- Sử dụng bộ ghi log có cấu trúc Logger (os.Logger) kèm theo các danh mục (categories) thay vì dùng câu lệnh print. Độ tin cậy: 0.85

Best Practices Mobile Development Architecture+2

F@f

# 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 dụng iOS SwiftUI taste của một lập trình viên iOS cấp cao (Senior iOS Developer) - Xây dựng các màn hình mới bằng SwiftUI và chỉ quay về UIKit thông qua UIViewRepresentable cho những tính năng còn thiếu. Độ tin cậy: 0.85 - Sử dụng framework Observation (@Observable) cho các view model trên iOS 17+, thay vì ObservableObject với @Published. Độ tin cậy: 0.85 - Giữ cho các view nhỏ gọn và có tính kết hợp (composable); tách thành subview ngay khi phần thân (body) vượt quá khoảng 50 dòng. Độ tin cậy: 0.80 - Sở hữu trạng thái bằng @State tại view cấp thấp nhất cần đến nó và truyền các binding xuống dưới thay vì dùng các singleton toàn cục. Độ tin cậy: 0.85 - Sử dụng Swift Concurrency (async/await, actors, structured tasks) ở mọi nơi; không viết thêm các API mới dựa trên completion-handler hoặc Combine. Độ tin cậy: 0.85 - Bắt đầu các tác vụ bất đồng bộ bằng modifier .task để chúng tự động bị hủy khi view biến mất. Độ tin cậy: 0.90 - Bật tính năng kiểm tra xử lý đồng thời nghiêm ngặt (strict concurrency checking - chế độ ngôn ngữ Swift 6) và khắc phục sớm các cảnh báo Sendable. Độ tin cậy: 0.80 - Điều khiển luồng điều hướng bằng NavigationStack cùng một đường dẫn có kiểu dữ liệu rõ ràng (typed path), được định tuyến thông qua một đối tượng coordinator hoặc router nhỏ. Độ tin cậy: 0.80 - Tiêm phụ thuộc (inject dependencies) thông qua các hàm khởi tạo (initializers) hoặc Environment để các bản xem trước (previews) và bài kiểm thử có thể tráo đổi bằng dữ liệu giả lập (fakes). Độ tin cậy: 0.85 - Chia nhỏ các tính năng thành các gói Swift cục bộ (local Swift packages) được quản lý bởi Swift Package Manager; tránh dùng CocoaPods cho các dự án mới. Độ tin cậy: 0.85 - Cung cấp cho mỗi view một #Preview với dữ liệu mẫu sát thực tế, bao gồm cả trạng thái trống, đang tải và lỗi. Độ tin cậy: 0.85 - Mô hình hóa trạng thái tải dưới dạng một enum (idle, loading, loaded, failed) thay vì dùng nhiều biến boolean rời rạc. Độ tin cậy: 0.90 - Sử dụng SwiftData cho việc lưu trữ cục bộ đơn giản và dùng Core Data hoặc GRDB khi bạn cần kiểm soát chi tiết quá trình di trú dữ liệu (migrations) hoặc tối ưu hiệu năng. Độ tin cậy: 0.65 - Hỗ trợ Dynamic Type, Dark Mode và nhãn VoiceOver ngay từ lần commit đầu tiên. Độ tin cậy: 0.90 - Ưu tiên sử dụng SF Symbols và bảng màu hệ thống mang tính ngữ nghĩa (semantic system colors) trước khi thêm các tài nguyên tùy chỉnh. Độ tin cậy: 0.80 - Bản địa hóa bằng String Catalogs ngay từ ngày đầu tiên, kể cả khi ra mắt chỉ với một ngôn ngữ duy nhất. Độ tin cậy: 0.75 - Viết unit test cho các view model và service bằng Swift Testing; chỉ giữ lại UI test cho một vài luồng quan trọng nhất. Độ tin cậy: 0.80 - Đo đạc hiệu năng (profile) bằng Instruments trước khi tối ưu hóa và chú ý phát hiện việc tính toán lại phần thân view (view body recomputation) không cần thiết. Độ tin cậy: 0.75 - Không bao giờ làm nghẽn luồng chính (main thread) bởi các tác vụ mạng, giải mã dữ liệu (decoding) hoặc đọc/ghi đĩa (disk I/O). Độ tin cậy: 0.95 - Lưu trữ các thông tin bí mật (secrets) và token trong Keychain, tuyệt đối không lưu trong UserDefaults hoặc gói cài đặt (bundle). Độ tin cậy: 0.95 - Triển khai bản dựng thông qua Xcode Cloud hoặc fastlane với số bản dựng (build number) tự động và đẩy lên TestFlight cho mỗi lần hợp nhất (merge) vào nhánh main. Độ tin cậy: 0.75 - Sử dụng bộ ghi log có cấu trúc Logger (os.Logger) kèm theo các danh mục (categories) thay vì dùng câu lệnh print. Độ tin cậy: 0.85