# TỪ MỘT SIZE IPHONE → ĐỦ BỘ SCREENSHOT APP STORE

**File hướng dẫn độc lập cho ChatGPT | App bất kỳ | V1.9 | 05/11/2026**

## Dành cho người gửi: chỉ cần file này + link Figma + prompt

1. Đính kèm **chính file Markdown này** vào chat của bạn.
2. Gửi **link Figma chứa bộ screenshot iPhone đã được designer duyệt**, tốt nhất trỏ vào section/frame cần dùng. Đảm bảo ChatGPT có thể đọc và có công cụ sửa Figma nếu muốn làm trực tiếp trong Figma.
3. Dán prompt ngắn dưới đây, thay link. Không cần điền một biểu mẫu dài hoặc gửi các file hướng dẫn khác.
4. ChatGPT đọc tài liệu, kiểm Figma và hỏi gọn nếu có thông tin quan trọng chưa xác định được. Sau khi đủ đầu vào, ChatGPT thực hiện và QA rồi báo kết quả.

### Điều kiện để dùng độc lập

Tài liệu này chứa quy trình, cách thao tác, xử lý lỗi và tiêu chí nghiệm thu; không cần lịch sử chat của người viết. Tuy nhiên, file MD không tự cấp công cụ, quyền sửa Figma, font hoặc UI sản phẩm còn thiếu. Trước khi làm, ChatGPT phải xác định đường thực thi thực tế ở A2a. Có nguồn đọc nhưng chưa có đường ghi thì chưa được báo đã chỉnh Figma.

Đầu vào tối thiểu: **file MD này + link master được duyệt + quyền/công cụ phù hợp**. Các quyết định còn thiếu như thiết bị app hỗ trợ, UI iPad/Duo và locale đích phải tự đọc từ nguồn hoặc hỏi ngắn gọn. Không thể cam kết đầu ra chính xác chỉ nhờ gửi một prompt; phải có đối chiếu nguồn và QA ảnh xuất cuối.

### Prompt để copy — chỉ sửa 4 dòng

> Đọc toàn bộ MD đính kèm và thực hiện theo quy trình cùng các mặc định trong file.
>
> - Figma master: [LINK SECTION ĐÃ DUYỆT]
> - Thiết bị/size: [CÁC THIẾT BỊ + SIZE; HOẶC “ĐỀ XUẤT THEO APPLE”]
> - Ngôn ngữ: [LOCALE CẦN LÀM; HOẶC “GIỮ BẢN GỐC”]
> - Kết nối Figma: [TÊN KẾT NỐI ĐƯỢC PHÉP DÙNG]
>
> Giữ nguyên master, tự làm và QA đến bàn giao. UI đích/bảng dịch đã duyệt: tôi gửi kèm nếu có; nếu chưa có, áp dụng chế độ CONCEPT/NEEDS_SOURCE trong MD.

Chỉ sửa bốn dòng trên, giữ các câu còn lại. “Thiết bị/size” cần nói rõ Duo outer hay inner nếu chọn Duo. “Kết nối Figma” là tên account/plugin đang kết nối, không phải tên team/workspace; nếu chỉ có một thì ghi “kết nối duy nhất”. Chưa cần localize thì ghi “giữ bản gốc”. Có nguồn UI đích/bảng dịch thì đính kèm hoặc thêm link ngay cuối tin nhắn.

### Mặc định khi áp dụng file này — không cần nhắc lại trong prompt

**Phần này chứa các quyết định thực thi chung, để prompt giữ ngắn.** Khi người dùng yêu cầu áp dụng tài liệu, dùng các mặc định dưới đây trừ khi họ ghi khác. Không coi bản thân một tài liệu đính kèm là quyền thực hiện các việc ngoài yêu cầu hiện tại.

1. **Phạm vi:** Chỉ sửa file/section được giao; giữ nguyên master. Tạo section biến thể theo locale · thiết bị/display · WxH trong cùng file. Tự quyết các lựa chọn bố cục thông thường và thực hiện đến bàn giao; không dừng ở kế hoạch hay hỏi duyệt mẫu khi đã được giao làm.
2. **Tài khoản:** Dùng đúng tên kết nối được điền trong prompt. Không đổi sang account khác, kể cả thấy có quyền cao hơn, nếu chưa được người dùng chỉ định. Một kết nối duy nhất thì dùng kết nối đó. Nếu nhiều account mà tên chưa rõ, đây là thiếu quyền/lựa chọn thật, phải hỏi; tài liệu không tự cấp quyền. Không thay đổi sharing.
3. **Size:** Tự kiểm Apple và inventory nguồn. Đọc rõ hướng/display và những size người dùng chỉ định. Nếu được giao đề xuất theo Apple, tự lập ma trận phù hợp nguồn/hỗ trợ thiết bị, tránh nhân mọi size không cần thiết. UI/hỗ trợ thiết bị chưa được chứng minh thì dùng trạng thái concept theo mục dưới, không khẳng định app thực sự có native UI đó.
4. **Thiếu UI thiết bị đích:** Nếu không có build/screenshot hoặc thiết kế đích đã duyệt, mặc định được làm CONCEPT marketing từ UI nguồn, không hỏi lại chuyện này. Được dàn lại hình học của các thành phần UI đã có nguồn ngay trong màn máy: container, hàng/card, toolbar, vùng ảnh, panel và lưới theo B6a; giữ tính năng, chữ, giá trị và asset gốc. Đây là đề xuất layout để review, không phải bằng chứng native UI. Không thêm chức năng, navigation hay sidebar mới; không kéo méo ảnh/chữ. **Không được dùng chế độ contain cho nguyên màn iPhone rồi chèn nền hai bên để giả UI tablet.** Nếu nguồn raster không thể tách và dàn lại tin cậy, đánh NEEDS_SOURCE/NEEDS_REVISION cho ảnh đó, tiếp tục các ảnh khác; không bàn giao bản fit nguyên phone dưới nhãn đã sửa. Ghi CONCEPT/NEEDS_SOURCE trong tên section hoặc bảng QA; không đóng watermark lên artwork, không nhận sẵn sàng upload. Có nguồn đích được duyệt thì dùng nguồn đó thay cho giả định concept. **CONCEPT chỉ nói về UI sản phẩm chưa xác nhận; không miễn QA bố cục hay cho phép thay mẫu máy bằng khung bo góc bất kỳ. Vỏ máy phải qua cổng B3a trước khi nhân cả bộ.**
5. **Thiếu UI ngôn ngữ đích:** Nếu không có screenshot/bảng chuỗi đã duyệt, mặc định chỉ localize headline và stamp/dữ liệu mẫu tách lớp. Giữ chữ UI gốc và chữ raster không sửa tin cậy; ghi NEEDS_SOURCE, không hỏi lại và không nhận fully localized. Có nguồn UI đích thì localize theo nguồn. Không tự gen chữ/UI raster.
6. **Nội dung:** Giữ ảnh/UI, style, thứ tự và một thông điệp chính mỗi ảnh. Headline địa phương hóa ngắn, tự nhiên; không thêm subtitle. Stamp giữ cấu trúc/ý nghĩa; địa chỉ thật và tọa độ phải nhất quán. Không thay địa chỉ bằng nhãn cảnh vật. Quy trình chi tiết ở B11 vẫn áp dụng.
7. **Thực thi:** Tự kiểm font, asset, khả năng đọc/ghi/export. Làm mẫu đại diện khó, qua cổng bố cục B8a cả về hình học và thị giác rồi mới mở rộng. Timeout/lỗi chưa rõ kết quả phải đọc lại canvas trước retry; không tạo trùng. Không lấy bộ đích có sẵn từ nơi khác thay kết quả thực hiện.
8. **Bàn giao:** Đọc lại node, xuất/render, xem từng ảnh cuối và contact sheet, sửa rồi kiểm lại lỗi trong phạm vi. Có link section, PNG, mapping nguồn–đích và QA từng ảnh; phân biệt PASS/FAIL với CONCEPT/NEEDS_SOURCE. Không gọi một bảng kích thước hoặc mutation thành công là đã hoàn thành visual QA.
9. **Điểm dừng:** Chưa upload/submit App Store Connect, chưa publish web, chưa đổi quyền truy cập, chưa gửi tin nhắn ra ngoài. Chỉ hỏi khi có trở ngại thật chưa được các mặc định giải quyết, như không xác định được master, không có đường ghi/quyền phù hợp, thiếu asset/font không thể khôi phục hoặc quyết định làm thay đổi sản phẩm/phạm vi. Giữ các phần độc lập tiếp tục làm khi có thể.

Các mặc định concept/NEEDS_SOURCE giúp bắt đầu khi chỉ có một master iPhone; chúng không thay cho nguồn UI native và bản dịch sản phẩm được duyệt. Muốn đầu ra hoàn chỉnh để dùng, cung cấp các nguồn đó và hoàn tất QA tương ứng.

### A0. Cách kiểm chứng “gửi một lần”

- Một lượt thử không được coi là đạt nếu còn dựa vào câu trả lời bổ sung ở chat cũ. Khi ChatGPT hỏi thiếu thông tin có thể biết hoặc quyết định trước, bổ sung thông tin/quyết định đó vào prompt và phần phù hợp trong MD.
- Mở chat mới, đính kèm MD mới và prompt đầy đủ; dùng nguồn sạch chỉ chứa master, không mang sẵn đầu ra của lượt trước. Lặp lại đến khi bài thử tự tiến hành mà không cần bổ sung cùng loại đầu vào.
- Ghi lại version MD/prompt, nguồn đầu vào, công cụ/tài khoản đã chọn, câu hỏi phát sinh, phần đã sửa và kết quả thật. Một demo đạt không chứng minh mọi tài khoản hoặc mọi app đều có đủ công cụ/quyền/UI. Chỉ gọi bài thử đạt khi cả thực thi và visual/hardware QA đạt; tạo đủ frame không đủ. Nếu sửa lỗi ở chat cũ, ghi là lượt sửa, rồi thử lại bản MD mới ở chat sạch trước khi nhận đã kiểm chứng một lần gửi.
- Nếu có nhiều kết nối Figma, prompt ngắn phải chỉ rõ tên kết nối được phép dùng. Ví dụ: “Dohuypoe; không dùng Primary”. Tên workspace/team không đồng nghĩa tên kết nối. Đường read-only không được tự đổi sang tài khoản khác chưa được người dùng chỉ định.
- Không hỏi lại chuyện UI đích/concept hoặc localize một phần nếu prompt đã yêu cầu áp dụng các mặc định trong file. Thực hiện phần được phép và giữ nhãn QA trung thực. Chỉ hỏi khi thiếu dữ kiện không thể tự giải quyết an toàn hoặc khi quyết định mới làm thay đổi sản phẩm/phạm vi.
- “Một lần gửi” là mục tiêu giảm bổ sung đầu vào; không được đạt mục tiêu đó bằng cách bỏ QA, giả quyền edit, giả native UI, bỏ phần chưa làm hoặc nhận PASS khi thiếu nguồn.

Nếu muốn sửa tại chỗ, chỉ làm một số size hoặc lưu file tại thư mục cụ thể, thêm yêu cầu đó vào cuối prompt. Yêu cầu trực tiếp của người dùng quyết định phạm vi; tài liệu này không tự cấp quyền cho công việc ngoài nhiệm vụ.

---

## A / Quy trình làm việc bắt buộc cho ChatGPT nhận file

### A1. Hiểu đúng nhiệm vụ

Đầu vào là một bộ screenshot App Store của **app đang được người dùng giao**, thường chỉ có một size iPhone. Mục tiêu là tạo các phiên bản kích thước/nhóm thiết bị đã thống nhất. Không tự lấy nội dung, app ID, tên, UI, theme hoặc thứ tự của app khác làm mặc định.

Tách ba việc: đổi kích thước canvas App Store; thay/scale mockup thiết bị; thích nghi bố cục UI trong màn hình. Một PNG có đúng pixel chưa chứng minh UI đích đúng. Giữ headline, thứ tự, thông điệp, logo, ảnh, dữ liệu và phong cách gốc trừ khi người dùng yêu cầu đổi.

### A2. Đọc và kiểm trước khi hỏi

- Đọc hết file này. Mở link Figma và quan sát từng screenshot, không chỉ thumbnail hoặc frame đầu tiên. Xác định master mới nhất, thứ tự, số ảnh, size nguồn, theme và nội dung quan trọng.
- Kiểm khả năng đọc/ghi Figma, font, asset, export. Quyền đọc link không chứng minh có quyền/công cụ chỉnh thiết kế. Nếu không kết nối được, nói chính xác vướng ở đâu và yêu cầu kết nối/quyền hoặc file nguồn phù hợp. Không báo đã sửa khi chưa có mutation và readback.
- Kiểm nhóm thiết bị đích, kích thước chính thức, UI/wireframe/build nếu trong nguồn đã có. Không hỏi lại thông tin có thể tự xác định từ file.
- Lập inventory gọn: nguồn đã đọc, các bộ tìm thấy, đích dự kiến, dữ liệu còn thiếu. Không yêu cầu người dùng duyệt một kế hoạch chung nếu phạm vi đã rõ.

### A2a. Mở Figma và chọn đường thao tác thực tế

**Không yêu cầu người dùng biết tên công cụ.** Tự kiểm công cụ mà phiên ChatGPT hiện tại thực sự có. Ưu tiên đường đọc và ghi thiết kế trực tiếp; dùng trình duyệt khi có công cụ điều khiển phù hợp. Không giả định mọi ChatGPT đều có cùng MCP, browser hoặc chức năng AI trong Figma.

**Đường 1 — Figma MCP hoặc plugin có khả năng ghi**

1. Đọc hướng dẫn của công cụ/skill Figma có trong phiên; dùng đúng kết nối và schema hiện tại. Chỉ có công cụ đọc thì chưa đủ để thực thi chỉnh sửa.
2. Mở file từ link người dùng gửi, xác định file key, page và node/frame. Đối chiếu tên file, master và ảnh render với yêu cầu trước khi sửa.
3. Đọc layer cần thiết theo từng section/frame: kích thước, text, instance, font, image fill, mask, clipping và layout. Không trích toàn file khổng lồ khi chỉ cần một bộ ảnh.
4. Thực hiện trong phạm vi đã giao; tạo mẫu theo size, đọc lại node sau sửa và xuất/render để kiểm. Không coi tool trả thành công là ảnh đã đúng.
5. Nếu có công cụ AI/generative Figma, chỉ dùng phần phù hợp và theo hướng dẫn của công cụ; giữ UI/text/dữ liệu chính xác từ nguồn, không mặc định phải gen lại toàn bộ ảnh.

**Đường 2 — Tab Figma trong ChatGPT hoặc trình duyệt được hỗ trợ**

1. Kiểm phiên có công cụ browser/computer use thật hay không. Nếu có, đọc hướng dẫn công cụ, liệt kê hoặc chọn đúng tab Figma theo URL/ngữ cảnh người dùng, rồi xem trạng thái UI mới.
2. Nếu chưa có tab, mở link Figma bằng browser mà công cụ hỗ trợ. Nếu người dùng đã mở tab trong ChatGPT hoặc browser ngoài, chỉ kết nối được khi công cụ phiên đó hỗ trợ bề mặt ấy. Không tự nhận điều khiển được chỉ vì người dùng mở sẵn tab.
3. Đọc thông tin qua UI/ảnh chụp hiện tại: chọn page/section, mở layer panel, kiểm frame nguồn và font. Dùng thao tác giao diện để duplicate, resize, chỉnh layer/constraints/mask và export theo khả năng thực tế.
4. Nếu dùng AI bên trong Figma và giao diện đó đang có, đưa prompt theo từng frame/nhóm nhỏ với nội dung khóa, W×H, quy tắc full màn và tiêu chí QA. Xem kết quả sau mỗi đợt; không gửi một lệnh chung rồi bỏ qua kiểm chứng.
5. Nếu layout quá phức tạp để sửa tin cậy bằng UI, chuyển phần có thể làm sang đường khác hoặc nói rõ hạn chế. Không thay việc sửa layer chính xác bằng một ảnh gen gần giống mà vẫn báo hoàn thành.
6. Export về thư mục người dùng chỉ định nếu công cụ hỗ trợ; kiểm file tải thực tế, không chỉ nút export. Mở lại Figma để kiểm trạng thái lưu và section/node đích.

**Đường 3 — Chưa có công cụ hoặc quyền phù hợp**

- Có công cụ nhưng chưa đăng nhập/quyền truy cập: yêu cầu người dùng đăng nhập hoặc cấp quyền ngay trên giao diện phù hợp; không xin mật khẩu, token hay cookie trong chat.
- Không có Figma MCP có thể ghi nhưng có browser: dùng đường 2. Không có browser điều khiển nhưng có MCP ghi: dùng đường 1. Có quyền đọc nguồn nhưng chưa có đường ghi: vẫn làm inventory/kiểm nguồn và chỉ dẫn layout có thể làm.
- Không có cả hai: nói rõ cần kết nối công cụ Figma có khả năng ghi hoặc phiên browser được hỗ trợ. Có thể nhận file nguồn/asset để làm phần đầu ra cục bộ nếu phiên có công cụ xử lý file. Không hứa một prompt tự bổ sung được các công cụ đang thiếu.
- Không bắt người dùng cài hoặc kết nối lại nếu phiên đã có đường thực thi dùng được. Khi timeout/lỗi chưa rõ kết quả, đọc lại trạng thái trước khi retry để tránh tạo bản trùng.

**Bằng chứng tối thiểu sau thực thi:** đúng file/section, danh sách node/frame hoặc file đã tạo, kích thước đọc lại, ảnh render/export cuối và kết quả QA. Trong báo cáo ghi rõ đã dùng MCP, browser hay chỉ bàn giao file/chỉ dẫn; không lẫn các trạng thái đó.

### A3. Hỏi khi thiếu thông tin làm thay đổi kết quả

Gom những câu cần thiết trong một lượt; thường 1–3 câu là đủ. Không hỏi tất cả các mục bên dưới như checklist cứng. Ưu tiên:

1. **Bộ gốc nào?** Chỉ hỏi nếu file có nhiều bản mà không phân biệt được bản được duyệt.
2. **App hỗ trợ thiết bị nào và có UI đích không?** Tự kiểm nguồn trước. Nếu prompt đã áp dụng mặc định concept thì thực hiện B6a, không hỏi lại lựa chọn concept; ghi phần cần xác nhận. Chỉ hỏi nguồn/quyết định thiết bị khi chưa có mặc định hoặc việc đó thay đổi phạm vi. Không đòi cả build nếu thiết kế đích đã đủ cho phạm vi được giao.
3. **Đích và cách bàn giao?** Nếu chưa thể xác định, đề xuất ma trận size theo Apple rồi hỏi các lựa chọn ảnh hưởng lớn như portrait/landscape hoặc outer/inner. Chỉ hỏi nơi chỉnh/lưu khi chưa có phạm vi rõ.

Khi đã đủ thông tin, bắt đầu làm; không dừng ở lời hứa hoặc kế hoạch. Nếu có câu hỏi bắt buộc đang chờ, tiếp tục việc độc lập như inventory, kiểm asset và chuẩn bị bố cục; không đoán thay câu trả lời quyết định UI sản phẩm.

### A4. Mặc định hợp lý nếu không có yêu cầu khác

- Giữ bộ gốc; tạo biến thể trong các section có tên rõ tại cùng file Figma khi người dùng giao quyền thực thi như prompt phía trên. Không xóa hoặc ghi đè master.
- Giữ locale, theme, thứ tự và nội dung của master; không tự localize, viết lại ASO hoặc thêm tính năng.
- Cấu trúc nhóm: `[locale] · [device/display] · [WxH]`, bên trong chia theo theme/mode hiện có; không ép mọi app phải có light/dark hoặc nhiều theme.
- Ưu tiên layer editable và asset thật. Gen chỉ hỗ trợ nền/scene hoặc bản concept khi phù hợp, không gen lại chữ/UI/dữ liệu cần chính xác.
- Làm mẫu đại diện cho mỗi nhóm, tự QA cấu trúc và render rồi mới mở rộng cả bộ. Không đặt thêm cổng chờ duyệt mẫu nếu người dùng đã giao làm toàn bộ; chỉ hỏi khi có lựa chọn mới ảnh hưởng nội dung hoặc sản phẩm.
- Chưa upload/submit App Store Connect. Nhiệm vụ mặc định kết thúc ở thiết kế, ảnh xuất, preview và QA.

### A5. Vòng thực thi và điều kiện hoàn thành

1. Kiểm nguồn → chốt ma trận job → tách/chuẩn hóa layer.
2. Làm mẫu mỗi nhóm → kiểm full aperture, tỷ lệ, mask, panel, bar và nội dung.
3. Nhân toàn bộ → kiểm riêng từng screenshot → xuất đúng pixel.
4. Mở từng file xuất và contact sheet → đối chiếu master → sửa và kiểm lại ảnh bị ảnh hưởng.
5. Bàn giao Figma/node hoặc file thực, ảnh xuất, bảng mapping nguồn–đích, QA và phần còn thiếu. Chỉ báo việc đã làm và đọc lại.

Trạng thái: **PASS** khi đủ nguồn và đạt QA; **FAIL** khi còn lỗi; **NEEDS_SOURCE** khi thiếu nguồn quan trọng; **CONCEPT** khi UI đích là bản phỏng dựng chưa xác nhận. Một phần còn CONCEPT không được gọi là toàn bộ sẵn sàng upload.

---

## B / Sổ tay thực thi chi tiết

Các phần dưới là phương pháp để thực hiện A. Không cần người dùng gửi thêm workbook, prompt dài hoặc checklist riêng.

## B1 / Chốt đầu vào và khả năng thao tác

Giảm việc hỏi lại bằng cách bàn giao đủ nguồn ngay từ đầu.

| Cần có | Ghi cụ thể |
|---|---|
| App & master | Tên app, phiên bản, locale, số ảnh, thứ tự, link/file master cuối đã duyệt. |
| Nguồn thiết kế | Figma file + page + node/frame; hoặc PNG/JPEG đúng thứ tự; font và asset nếu có. |
| UI sản phẩm | UI/wireframe/build đích; thiết bị, hướng màn hình, phiên bản OS và trạng thái app. |
| Đích xuất | Nhóm thiết bị + display trong/ngoài nếu có + W×H + hướng + theme/locale. |
| Nội dung khóa | Headline, logo, UI, ảnh, số liệu, nhãn nút, dữ liệu mẫu; những gì được đổi. |
| Phạm vi chỉnh | Sửa tại section nào hoặc tạo section nào; bảo toàn master; nơi lưu file. |
| Bàn giao | File thiết kế, ảnh xuất, preview, manifest, QA; upload có được giao riêng không? |

### Kiểm công cụ trước khi hứa làm

Đọc được link không đồng nghĩa sửa được Figma. Xác minh quyền đọc/ghi, khả năng xuất ảnh, font và thư mục đích. ChatGPT chỉ có sinh ảnh không thể đảm bảo layer Figma hoặc chữ UI chính xác.

Có MCP/plugin Figma: dùng công cụ được hỗ trợ và kiểm lại node sau sửa. Có browser được phép: thao tác UI rồi đọc lại. Chỉ có file: tạo đầu ra cục bộ phù hợp. Không có đường ghi thiết kế: bàn giao chỉ dẫn layer/tọa độ cho designer, nói rõ chưa sửa Figma.

> Nếu chưa có danh sách size: AI tra Apple và đề xuất ma trận cho app, nêu size nào bắt buộc/tùy chọn theo hỗ trợ thiết bị. Không suy việc app hỗ trợ iPad chỉ từ mong muốn có ảnh iPad.


## B2 / Ma trận kích thước đích

Ví dụ chọn size dọc từ tài liệu Apple đã kiểm ngày 04/11/2026.

| Nhóm | Một lựa chọn portrait (px) | Ghi chú |
|---|---|---|
| iPhone Dynamic Island / lớn | 1320 × 2868 | Một trong các size được nhận. |
| iPhone Dynamic Island / vừa | 1206 × 2622 | Một lựa chọn; còn 1179 × 2556. |
| iPhone Face ID / lớn | 1242 × 2688 | Một trong các size được nhận. |
| iPhone Duo / outer | 1398 × 2034 | Màn ngoài. |
| iPhone Duo / inner | 2007 × 2853 | Màn trong; job riêng. |
| iPad / 13 inch | 2064 × 2752 | Một lựa chọn; còn 2048 × 2732. |

Đây là bảng ví dụ, không phải danh sách đầy đủ. Khi làm thật, đọc lại yêu cầu của nhóm thiết bị và ô upload đang dùng. Với landscape, dùng kích thước landscape được Apple nhận, không xoay riêng một ảnh dọc rồi coi là UI ngang.

Phân biệt **ô bắt buộc khi submit** với **bộ thiết kế riêng để tối ưu**. Tại ngày kiểm trên, Apple nêu nhóm Dynamic Island màn vừa và iPad 13 inch nếu app hỗ trợ iPadOS; có quy tắc dùng ảnh scale giữa các nhóm. Không suy mọi dòng trong bảng đều bắt buộc phải upload riêng. iPhone Duo có mốc yêu cầu từ tháng 4/2027 cho app dùng iOS 27.1 SDK trở lên theo trang Apple đang kiểm; khi làm thật phải xác minh lại mốc, SDK và ô Media Manager hiện tại.

Apple có cơ chế scale sang một số nhóm nhỏ hơn khi phù hợp. Vì thế cần chốt nhóm bắt buộc và nhóm muốn tối ưu riêng, tránh sinh nhiều bộ không cần thiết. Quy định và kích thước có thể thay đổi.

### Phiếu công việc cho mỗi bộ

Ghi: device_group, display, orientation, width_px, height_px, locale, theme, mode, số ảnh, source_master, nguồn xác minh size, ngày kiểm và trạng thái UI đích. Mỗi tổ hợp là một job riêng.

Dùng tên rõ như “en-US · iPad13 · 2064x2752 · Light”. Với Duo phải ghi outer hoặc inner; không hiểu “Duo” thành hai điện thoại đặt cạnh nhau.

### Nguồn chính thức

Kích thước và quy tắc: https://developer.apple.com/help/app-store-connect/reference/app-information/screenshot-specifications/

Mockup/bezels/UI kit: https://developer.apple.com/design/resources/

> Không lấy kích thước vật lý của mockup làm kích thước file upload. File ngoài đúng W×H; mockup bên trong được scale đều cho đẹp và vừa vùng bố cục.


## B3 / Tách đúng các lớp trước khi resize

Bốn khái niệm khác nhau: canvas, vỏ máy, vùng màn hình và UI.

Cấu trúc: Canvas → [headline/background, device shell → aperture → UI, popout ngoài screen mask].

| Lớp | Cách xử lý |
|---|---|
| Canvas App Store | Frame ngoài đúng pixel đích; chứa background, headline, mockup, callout. |
| Device shell / bezel | Vỏ máy và bóng. Scale đều cả cụm; lấy đúng mẫu thiết bị. |
| Screen aperture | Vùng hở thật của vỏ máy. Có mask/clip riêng, vị trí theo asset gốc. |
| App UI | Ảnh/UI sản phẩm bên trong aperture; layout phải khớp thiết bị. |
| Callout / popout | Phần phóng to quảng cáo; nằm ngoài mask màn hình nếu cần tràn. |

“Full màn” nghĩa là nội dung cần phủ đầy aperture. Không có nghĩa mockup phải chạm mọi mép canvas hoặc tất cả UI phải phóng to cùng một tỷ lệ.

Nếu thiết kế không dùng vỏ máy, bỏ lớp shell; UI crop và background vẫn cần tách khỏi headline. Giữ bố cục kiểu gốc, không tự thêm mockup chỉ để đủ tầng.

> Bản PNG gộp đã chứa cả headline + vỏ máy + UI: không thể đổi riêng hình học màn hình bằng resize toàn ảnh. Tách nguồn hoặc dựng lại bố cục từ asset thật trước khi chuyển tỷ lệ lớn.


### B3a / Kiểm đúng mẫu máy trước khi làm cả bộ

**Canvas đúng pixel không chứng minh mockup đúng thiết bị.** Lỗi vỏ máy vẫn là FAIL dù section mang nhãn CONCEPT. Kiểm UI sản phẩm và kiểm hardware là hai việc độc lập.

1. Xác định mẫu thiết bị/display mà người dùng muốn: model, outer/inner, hướng và hình tham chiếu nếu đã có. Không suy ngược model từ W×H, tỷ lệ màn hình hoặc tên lớp.
2. Tìm asset thật trong file nguồn được giao hoặc bộ mockup đã duyệt; nếu chưa có, tra nguồn chính thức và xác nhận đúng model. Tải/đọc asset thật, không tự vẽ một hình chữ nhật bo góc rồi đặt tên iPhone/iPad/Duo. Tên layer có chữ “Official Apple” cũng chưa chứng minh nguồn chính thức hoặc hình đúng.
3. Ghi nguồn URL/node, ảnh render tham chiếu, kích thước/tỷ lệ asset và vùng aperture. Nếu layer rỗng/không có fill/không render được, đó chưa phải một mockup dùng được.
4. Render asset rồi đối chiếu với hình tham chiếu: đường viền và tỷ lệ thân máy; góc bo; vị trí camera/notch/Dynamic Island; bản lề nếu mẫu có; nút/cạnh vật lý; bezel và vùng màn hình thực. Chỉ kiểm chi tiết đúng với model đó, không tự thêm đặc điểm của mẫu khác.
5. Scale đều toàn bộ shell cùng aperture; giữ hướng và hình học asset. Đưa UI nguồn vào màn hình, giữ kín bốn cạnh/góc, không dùng một nền đen che mất chi tiết máy để giả full màn. Giữ camera, bản lề và nút vật lý đúng z-order, không để UI che ngoài ý đồ.
6. Trước khi nhân, xuất **một ảnh có mockup rõ**, đặt cạnh tham chiếu và xem toàn hình lẫn crop chi tiết. Hero không có máy hoặc contact sheet quá nhỏ không thể chứng minh đã kiểm model.
7. Chưa tìm được asset đúng: ghi **NEEDS_DEVICE_ASSET**, kèm nguồn đã tìm và phần còn thiếu; tiếp tục các job độc lập. Đã tạo sai mẫu: **FAIL**, phải thay asset và QA lại. Không dùng nhãn CONCEPT để bỏ qua lỗi hardware.
8. Chỉ làm frameless khi master vốn frameless hoặc người dùng yêu cầu rõ. Không tự bỏ vỏ máy hoặc đổi sang khung trung tính để né việc thiếu asset.
9. Bảng QA từng job có hai cột riêng: **mẫu máy/asset** và **UI sản phẩm**. Mockup đạt nhưng UI còn concept vẫn phải ghi cả hai. Kết quả cả bộ chưa đạt nếu ảnh có máy còn sai model.

Ví dụ bài học CGL: mẫu Duo được duyệt có viền xanh, bản lề/cạnh trái và camera góc trên phải. Demo V1.5 đã dùng khung đen bo góc đối xứng, thiếu các chi tiết này: **FAIL mẫu máy**, không phải chỉ thiếu UI native. Đây là ví dụ đối chiếu, không phải mặc định đem mẫu CGL sang app khác hoặc chứng nhận model này là thiết bị Apple chính thức.

## B4 / Quy trình 10 bước cho mỗi bộ

Làm một mẫu mỗi nhóm trước; chỉ nhân hàng loạt khi cấu trúc đã đúng.

- 1. Kiểm master: mở và nhìn từng screenshot, xác định bản mới nhất, số ảnh và thứ tự. Lập danh sách nội dung phải giữ.

- 2. Đo các lớp: frame ngoài, headline, vỏ máy, aperture, UI, panel, ảnh nền, callout và padding. Kiểm font, instance, mask và ảnh gộp.

- 3. Chốt ma trận đích từ Apple + yêu cầu app. Đánh dấu các nhóm chưa có UI thật.

- 4. Chuẩn hóa một master có layer riêng; lưu snapshot/bản gốc. Nếu được giao sửa tại chỗ, giữ đúng section được chỉ định.

- 5. Hoàn tất cổng mẫu máy B3a; chưa có asset đúng thì không nhân job đó. Chọn ảnh đại diện khó: nhiều text/panel, grid hoặc popout. Tạo một bản mỗi nhóm bằng clone có kiểm soát.

- 6. Đổi frame ngoài, dàn headline/background, đặt mockup theo vùng nội dung. Scale đều cụm vỏ + aperture.

- 7. Đưa UI đích vào aperture; ảnh nền cover, UI có layout đúng. Chỉnh panel và thanh điều khiển theo nguồn sản phẩm.

- 8. QA cấu trúc + render mẫu: phủ kín, đúng mask, đúng tâm, không méo, không sai chữ. Sửa rồi render lại.

- 9. Áp dụng hệ quy tắc đã đạt cho toàn bộ ảnh. Vẫn kiểm từng screenshot vì mỗi ảnh có callout/nội dung khác nhau.

- 10. Xuất đúng pixel, tạo contact sheet theo job, kiểm lại file cuối và manifest. Báo rõ PASS, FAIL, NEEDS_SOURCE hoặc CONCEPT.

### Khi chỉ có PNG/JPEG gộp

Size gần cùng tỷ lệ: có thể giữ artwork, scale đều và mở rộng/crop nền không quan trọng, sau đó kiểm chữ ở độ phân giải xuất. Size khác nhiều: cần UI sạch, ảnh riêng hoặc source tách lớp. Có thể dựng concept bằng asset thật đã có; không gọi là bộ native hoàn chỉnh khi còn thiếu UI đích.

> Thiếu nguồn của một màn không chặn các màn khác. Ghi thiếu gì, ở ảnh nào, ảnh hưởng gì; tiếp tục phần độc lập có đủ nguồn.


## B5 / Scale đúng và căn giữa

Các công thức dưới đây dùng trong vùng bố cục, không áp vào toàn UI một cách máy móc.

### Scale đều một mockup vào vùng cho phép

Mockup gốc Bw×Bh; vùng cho phép Rw×Rh có góc trái trên (Rx,Ry). Chọn s = min(Rw/Bw, Rh/Bh). Sau scale: B’w = Bw×s, B’h = Bh×s. Đặt x = Rx + (Rw−B’w)/2; y = Ry + (Rh−B’h)/2.

Ví dụ: mockup 1500×3000 vào vùng 1800×2100 → s=0,7 → 1050×2100; nếu Rx=132 và Ry=500 thì x=507, y=500. Đây là ví dụ hình học, không phải tỷ lệ Apple bắt buộc.

### Cover ảnh trong một aperture

Ảnh Iw×Ih; aperture Aw×Ah. Chọn s = max(Aw/Iw, Ah/Ih). Ảnh sau scale phải đủ rộng và cao; căn giữa bằng x=(Aw−Iw×s)/2, y=(Ah−Ih×s)/2 rồi clip trong aperture. Có thể dịch crop theo chủ thể nếu không mất thông tin quan trọng.

Ví dụ: ảnh 1200×1600 vào 1000×1600 → cover dùng s=1, ảnh 1200×1600, x=−100, y=0. Contain dùng s≈0,833 sẽ chỉ cao khoảng 1333,3 và tạo khoảng trống trên/dưới.

### Khi hai canvas gần cùng tỷ lệ

Clone master, scale đều để vừa frame đích, rồi chỉnh riêng background, headline và khoảng cách. Ví dụ từ 1242×2688 sang 1320×2868 có tỷ lệ hơi khác nhau; không dùng sx=Wđích/Wgốc và sy=Hđích/Hgốc độc lập để kéo méo artwork.

### Tọa độ và radius

Tính vị trí theo parent hiện tại; khi reparent hoặc nested group, chuyển hệ tọa độ đúng. Scale cùng cụm để aperture đi cùng bezel. Radius phải khớp silhouette thật; không bo tròn một giá trị chung cho mọi cạnh/thiết bị.

> Cover phù hợp ảnh nền/scene có thể crop. Với UI chứa chữ và nút, nếu cover cắt mất chức năng thì phải reflow hoặc dùng UI đích, không tiếp tục zoom.


## B6 / Sang iPad và màn hình tỷ lệ khác

Giữ hệ hình ảnh của master, thích nghi bố cục theo sản phẩm thật.

### A. Dàn lại phần marketing ngoài máy

Giữ headline, font, màu, thông điệp và phong cách gốc. Canvas rộng hơn: tăng chiều rộng vùng headline hoặc chỉnh ngắt dòng, sau đó dời mockup/callout để cân. Không tự làm chữ nhỏ đi chỉ để giữ tọa độ cũ.

Scale vỏ máy theo tỷ lệ cố định để vừa vùng cho phép. Có thể thay kích thước hiển thị của máy vì mục tiêu là bố cục marketing; không cần đồng nhất số centimet giữa các screenshot.

### B. Dàn UI trong màn hình

| Loại nội dung | Cách thích nghi |
|---|---|
| Ảnh, video, map, nền editor | Phủ kín vùng được phép; crop quanh chủ thể; giữ dữ liệu/overlay. |
| Thanh trên/dưới | Bám cạnh, mở rộng nền theo chiều ngang; giữ icon/chữ đúng tỷ lệ và safe area. |
| Panel, bottom sheet | Mở rộng container/background; reflow text và lưới theo UI đích, không kéo giãn thumbnail. |
| List, gallery, card | UI trong app theo nguồn đích. Collage/popout quảng cáo được đổi số cột/hàng, thêm item khác nhau từ asset cùng app có sẵn và được phép dùng; không lặp ảnh cho đủ ô. Xem B8a. |
| Sidebar hoặc hai cột | Chỉ thêm nếu có nguồn thiết kế/build chứng minh app có layout này. |

### C. Ba mức nguồn để quyết định

Có screenshot/build đích: dùng trực tiếp đúng trạng thái và orientation. Có thiết kế responsive đã duyệt: triển khai theo đó, ghi chưa đối chiếu build nếu chưa chạy. Chỉ có UI phone: hoàn thiện layout marketing và đề xuất reflow, đánh dấu CONCEPT phần UI đích cần PO/dev xác nhận.

> App không hỗ trợ thiết bị đích: không tạo một “UI native” giả để coi là sẵn sàng upload. Vẫn có thể làm bản trình bày ý tưởng nếu được giao; trạng thái phải rõ.

## B6a / Thích nghi UI thật trong aperture — cấm fit nguyên màn phone

**Mục tiêu:** màn đích được tổ chức theo chiều rộng và chiều cao mới. Vỏ máy đúng và một lớp nền phủ kín chưa chứng minh UI đã thích nghi. Phải kiểm cả các container, controls và nội dung bên trong. Áp dụng cho mọi app, không chỉ ví dụ.

### 1. Phân biệt bốn thao tác

| Thao tác | Dùng cho |
|---|---|
| Scale đều | Vỏ máy; icon; glyph; ảnh minh họa độc lập. Không coi scale cả màn phone là giải pháp responsive. |
| Resize / stretch hình học | Nền UI, surface, card background, đường phân cách, container. Tính lại vị trí con sau resize, không scale méo chữ/icon cùng nền. |
| Reflow | Hàng/card, toolbar, thumbnail, text wrap, grid: tính lại chiều rộng, khoảng cách, số cột bằng thành phần có nguồn. |
| Cover / contain từng media | Camera/photo/map có thể cover nếu không mất dữ liệu quan trọng; tranh, bản vẽ và ảnh cần thấy đầy đủ có thể contain **trong vùng media đã định nghĩa**, không contain nguyên màn ứng dụng. |

**Loại ngay:** đặt một ảnh UI iPhone nguyên khối hẹp giữa aperture rộng, thêm màu trắng/đen hai bên rồi báo full màn. Đổi tên layer thành “responsive”, mở rộng frame ngoài, hay cắt notch cũ cũng không sửa được lỗi đó. Không sửa bằng kéo ngang nguyên bitmap hoặc zoom crop mất nút.

### 2. Lập bản đồ UI trước khi dựng mẫu

Từ từng screen nguồn, tách: nền; top bar; vùng nội dung; các section/card/hàng; media/art; bottom bar/panel; safe area. Ghi layer/source cụ thể cho từng phần và quan hệ neo. Xác định đâu là khoảng trắng có ý nghĩa (giấy vẽ, lề đọc, vùng preview) và đâu là padding phát sinh do giữ tỷ lệ phone.

Frame UI bằng aperture đích. Top/bottom background bám hai mép theo safe area phù hợp; controls giữ tỷ lệ và được đặt lại theo cùng vùng neo. Nội dung dùng chiều rộng khả dụng: `W_content = W_aperture − inset_left − inset_right`. Lấy inset/gap từ nhịp của nguồn hoặc template đích và giải thích bằng render; không lấy phần dư của phép contain làm inset.

Không kéo toàn bộ UI to bằng tỷ lệ chiều cao rồi thu cả cụm lại cho vừa ngang. Trước hết layout container ở kích thước đích, sau đó đặt nội dung con. Với UI xoay/nghiêng trong artwork, làm trong hệ tọa độ thẳng của màn trước rồi áp transform cùng mockup.

### 3. Recipe theo loại màn — giữ nội dung, đổi hình học

- **Dashboard / streak / thành tích / list:** nền section, hàng và card trải theo vùng nội dung đích. Giữ thứ tự, text, số và icon. Mở rộng background từng card; đặt lại icon/chữ/progress ở hai mép theo inset; text wrap tự nhiên. Không để nguyên stack phone như một tờ giấy bé giữa tablet. Không tự thêm dashboard/sidebar/thành tích.
- **Editor / tô màu / vẽ:** vùng editor thật dùng phần còn lại giữa toolbar và panel. Toolbar nền đủ rộng; nhóm controls được neo/căn lại, không mang cả dải toolbar phone hẹp vào giữa. Tranh giữ tỷ lệ và có thể contain trên giấy vẽ có chủ đích; chọn độ lớn tác phẩm đủ làm trọng tâm. Palette/panel được dàn lại theo bề rộng khả dụng bằng các swatch/control có nguồn. Phân biệt giấy trắng hợp lý với hai dải trắng chứa UI phone bị thu nhỏ.
- **Camera / chuyển ảnh thành sketch:** viewport bám vùng đích, photo cover có chọn chủ thể; overlay/control bám viewport. Card trước–sau ngoài máy vẫn là popout riêng. Không dùng cùng một phép cover cho cả ảnh chụp và controls.
- **AI generator / preview + thumbnails + CTA:** header và thanh hành động trải theo vùng UI đích; preview là vùng media riêng, ảnh giữ tỷ lệ. Dàn strip thumbnail bằng đúng ảnh nguồn, cùng kích thước/gap; CTA giữ nhãn nhưng container và vị trí thích nghi. Không giữ ảnh + thumbnail + hai nút như một cột phone nguyên khối giữa màn rộng. Không thêm ảnh, nút hay tên tính năng mới để lấp chỗ.
- **Grid / catalogue:** tính số cột, cell và gap từ bề rộng đích, số item thật và tính đọc được; dùng B8a. Không thêm cột trống hoặc nhân ảnh.
- **Màn tối giản / nội dung hẹp có chủ đích:** không ép lấp kín bằng mọi giá. Phải chỉ ra nguồn hoặc lý do UX cho max-width/khoảng thở, và cho thấy thanh điều khiển/container đã bố trí theo thiết bị đích. “Giữ tỷ lệ iPhone” không phải lý do hợp lệ.

### 4. Nguồn gộp hoặc raster: không lấy hạn chế làm bản hoàn thành

Ưu tiên tìm layer UI, component, screenshot tách lớp hoặc asset cùng file. Với raster có thể tách tin cậy, dùng đúng vùng pixel nguồn cho media/icon/nhãn và dựng lại background/container; ghi mapping và soát seam, text, thứ tự. Không xóa một nút để dễ crop, vẽ lại chữ raster bằng AI, hoặc đổi nội dung/tính năng. Nếu không thể tách để có layout tốt thì để job NEEDS_SOURCE/NEEDS_REVISION, nêu chính xác screen/layer cần thêm. Bản fit nguyên phone chỉ được giữ làm tham chiếu lỗi, không làm kết quả mẫu tốt.

**Cắt raster không phải crop vài mảnh rồi đặt lên card mới.** Trước khi cắt, phân biệt foreground với nền/bo góc/shadow bị dính trong bitmap. Giữ đủ glyph, icon, số, stroke và phần chống răng cưa ở mọi cạnh. Một mảnh có nền bo góc cũ đặt trên background mới sẽ lộ miếng vá; không nhận PASS chỉ vì thu nhỏ khó thấy. Ưu tiên clone layer gốc; hoặc tách foreground có alpha tin cậy trên màu nền đã biết rồi dựng background theo màu/radius nguồn. Nine-slice chỉ dùng cho vùng nền phù hợp, không kéo giãn phần chứa chữ/icon. Không xóa nét mảnh hoặc màu sáng của nội dung khi tách nền. Không thể tách sạch thì giữ nguyên **card nguyên vẹn** và dàn lại card, hoặc ghi NEEDS_SOURCE đúng ảnh; không nhận bản crop hỏng là kết quả hoàn chỉnh.

Đối chiếu từng nhãn/số/icon với nguồn ở 100% và crop lớn: không mất ký tự cuối, không cắt đầu/cuối huy hiệu, không xuất hiện đường đen hoặc góc trắng sót lại từ mảnh cắt. Nếu dùng source raster chất lượng thấp, giữ giới hạn độ nét trong QA và không gọi là pixel-perfect.

### 5. Cổng mẫu bắt buộc: kiểm bên trong màn, không chỉ ngoài canvas

Trước khi nhân cả bộ, chọn ít nhất một màn dạng list/dashboard và một editor hoặc preview nhiều controls nếu app có. Cho **mỗi ratio đích**, render hai phương án hình học khác nhau của màn khó, tự chọn theo B8a. Không coi khác vị trí mockup ngoài canvas là hai phương án UI.

Lưu crop chỉ vùng aperture nguồn–đích, tắt shell để soi UI, rồi bật shell để kiểm mask. Đọc lại bounds của top bar, content container, card/panel và media; kiểm text/icon tách khỏi background được resize. Ghi cho từng mẫu: tỷ lệ aperture, inset trái/phải, chiều rộng container so với vùng nội dung khả dụng, cách wrap/neo controls và phần khoảng trắng có ý nghĩa. Số đo dùng phát hiện lỗi, không thay đánh giá thị giác.

**FAIL / NEEDS_REVISION nếu:** container chính còn rộng bằng cột phone cũ trong aperture rộng hơn mà không có căn cứ UX; hai dải thừa mới ở hai bên do contain toàn UI; controls trôi giữa nền trống; chữ/icon bị kéo ngang; hoặc zoom cắt tính năng để lấp khe. Nếu nội dung chính chiếm dưới khoảng 80% vùng ngang khả dụng, coi là tín hiệu cần soi và giải thích bằng nguồn/UX, không phải luật phải phóng mọi tác phẩm đến 80%. Chỉ được nhân job khi không còn lỗi hình học/thị giác này. Thiếu native UI vẫn giữ CONCEPT, dù layout concept tốt.

Sau khi nhân bộ, xem **từng aperture của từng frame**, không chỉ 1 contact sheet thu nhỏ. Đối chiếu lại cả locale cùng ratio. Báo riêng `aperture coverage`, `UI reflow`, `media fit`, `hardware`, `product truth`; không gộp tất cả thành một dòng PASS.

**Hai cổng độc lập:** (a) reflow đạt bề rộng/bố cục, (b) nội dung và chất lượng ghép vẫn sạch. Qua (a) nhưng lộ seam/crop, sai headline hoặc camera che control thì vẫn NEEDS_REVISION. CONCEPT/NEEDS_SOURCE không được dùng thay cho việc nhận lỗi thị giác có thể sửa. Không nhân cả bộ từ một mẫu đang lỗi ở cổng (b).


## B7 / Full màn, mask và thanh trạng thái

Kiểm hình học và bản render; số đo đúng chưa chắc đã hiển thị đúng.

### Sửa vùng màn hình bị hở hoặc lệch

- 1. Xác định aperture thật của bezel. Loại phần padding trong suốt thừa của asset khi đo; không lấy bounding box ngoài làm vùng màn hình.

- 2. Tắt tạm bezel để xem UI/ảnh có phủ vùng cần phủ. Kiểm đủ bốn cạnh và bốn góc; bật lại để kiểm viền.

- 3. Căn UI vào aperture trong cùng hệ tọa độ. Với layout toàn màn, frame UI bằng vùng đích; ảnh bên trong cover riêng.

- 4. Kiểm clipsContent/mask ở từng parent, opacity, fill và thứ tự lớp. Màu đen chỉ là lỗi nếu đó là phần hở ngoài ý muốn; có thể là UI thật.

- 5. Kiểm góc đặc biệt: hinge/cạnh ít bo không dùng radius của phone. Chỉ cho nền dưới chạy tràn để che khe subpixel, không nới UI che bezel hoặc cắt nút.

### Thanh thời gian, pin, sóng và navigation

Lấy từ screenshot đích hoặc template chính thức phù hợp thiết bị, OS, orientation. Không giữ notch/Dynamic Island, home indicator hoặc thanh pin phone khi thay sang iPad nếu nguồn đích không có như vậy.

Không di chuyển taskbar sang một cạnh theo phỏng đoán. Nếu muốn bản marketing không có status bar, cần quyết định thiết kế của dự án và không làm sai vùng app; không coi việc xóa thanh là quy tắc chung của Apple.

Không vẽ thêm thanh trạng thái bên trên một screenshot đã có sẵn. Soát hai lớp icon pin/giờ trùng nhau; phần UI phóng to bên ngoài máy cũng không được mang theo status bar ngoài ý muốn.

> Tiêu chí: nội dung ứng dụng phủ đủ aperture; tâm khớp aperture, không nhất thiết khớp toàn canvas. Các thông số phải dựa trên mockup hiện dùng, không tái dùng tọa độ của app/máy khác.

**Không đánh PASS chỉ từ lớp nền phủ aperture.** Kiểm thêm UI reflow theo B6a: background full nhưng nội dung/controls phone còn hẹp vẫn là lỗi thích nghi.


## B8 / Popout, panel, grid và nội dung khóa

Các thành phần này cần sửa riêng sau khi mockup đã đúng.

### Panel hoặc filter phải trải ngang

Nếu là panel trong app: parent là screen; x=0, width bằng vùng UI phù hợp, background và content cùng mở rộng. Giữ thumbnail theo tỷ lệ, cập nhật khoảng cách/số item theo UI đích; nếu là concept, dàn lại có ghi rõ phạm vi giả định theo B8a. Đổi width wrapper mà không đổi background con vẫn gây hở.

Nếu là popout marketing: đặt ở cấp canvas, ngoài mask màn hình; định nghĩa vùng được tràn. Parent ngoài cùng vẫn clip ở biên screenshot xuất. Kiểm tràn có chủ đích, không cắt headline hoặc thông tin chính.

### Nhiều ảnh hoặc nhiều card nối tiếp

Tách từng ảnh/card làm item. Đặt kích thước nhất quán, gap nhỏ và đều, viền cùng độ dày, hàng/cột thẳng theo ý đồ. Giữ số hàng/cột khi brief khóa rõ; nếu không, chọn lại theo tỷ lệ màn và vùng trình bày theo B8a. Không mặc định mọi app phải có 3 hàng.

Lập danh sách ảnh nguồn, thứ tự và crop trước khi sửa. Giữ các ảnh/nhãn/dữ liệu đã khóa; collage marketing được bổ sung ảnh khác từ asset nguồn cùng app nếu cần và nếu nguồn cho phép, ghi mapping phần thêm. Không nhân một ảnh thành nhiều item chỉ để đầy grid. Không thay nội dung app bằng ảnh gen. Nếu brief yêu cầu thấy full máy, kiểm cả mép trên và dưới sau khi thêm popout.

### Text, số liệu, địa chỉ, stamp, biểu đồ

Giữ ký tự và giá trị của master. Không để AI viết lại địa chỉ thành tên cảnh, sửa format thời gian, thay số liệu biểu đồ hoặc nhãn nút. Với mockup dữ liệu mẫu, mọi thay đổi phải nằm trong phần được phép và nhất quán giữa các lớp.

Ứng dụng khác có thể chứa giao dịch, bản nhạc, hội thoại, lịch, fitness: áp dụng cùng nguyên tắc khóa nội dung, không đem dữ liệu của app ví dụ sang.

> Nền marketing sáng không chứng minh app có light mode. Giữ mode UI đúng nguồn; theme ngoài và mode trong máy được quản lý riêng.


## B8a / Tự chọn bố cục đẹp và thích nghi, không chỉ resize

Đây là cổng bắt buộc trước khi nhân bộ. “Đúng pixel”, “đủ frame”, “đúng mockup” không tự chứng minh bố cục đạt. Tự quyết các lựa chọn thẩm mỹ thông thường, không bắt người dùng chỉ từng tọa độ. Giữ phong cách master và một ý chính; không áp bộ màu, font, dữ liệu hay cách dàn của app ví dụ cho app khác.

### 1. Đọc ý đồ trước, phân loại phần được đổi

- Mỗi ảnh ghi ngắn: thông điệp chính, điểm nhìn đầu tiên, loại bố cục (hero / editor đơn / dải lựa chọn / grid-gallery / collage / quy trình nhiều bước), thứ cần giữ, vùng cần trải kín và vùng trống có chủ đích.
- Tách vùng canvas quảng cáo, vỏ máy, aperture, UI app và popout. Với mỗi panel/collage, chỉ rõ đang bám canvas hay màn máy; không dùng “full màn” chung chung.
- Tách ba loại quyền: nội dung khóa; hình học được reflow; asset bổ sung có sẵn được phép dùng. Đọc các lựa chọn người dùng đã giao thay vì hỏi lại chuyện dàn đẹp thông thường.
- UI sản phẩm có nguồn đích thì theo nguồn. Chỉ có UI iPhone thì được dàn concept để review, không tự bịa tính năng hay coi đó là native UI đã xác nhận. Collage quảng cáo ngoài máy không bị buộc giữ số cột UI phone.

### 2. Đặt khung bố cục theo từng tỷ lệ màn

Xác định vùng headline và vùng nội dung chính; lấy nhịp lề/gap/font/shadow từ master. Màn rộng hơn không chỉ phóng đều toàn bộ nhóm gốc: phân bổ lại chiều rộng, điểm neo, số cột/hàng và vị trí callout. Màn dài hơn không để một khối nhỏ trôi giữa khoảng trống: tăng hợp lý vùng ảnh/máy, phân bố các hàng và khoảng cách; giữ khoảng thở cần thiết cho headline.

- Headline đọc nhanh ở kích thước xem store; ngắt dòng theo ý nghĩa, không chia chữ lẻ, không thêm subtitle.
- Với headline tách nhiều text layer, ghi **câu đọc hoàn chỉnh và thứ tự ngữ nghĩa** trước khi dàn. Không sắp theo thứ tự layer trong tree hoặc theo màu chữ rồi làm từ nối đứng sau cụm sai nghĩa. Sau reflow đọc lại theo trái → phải, trên → dưới; đối chiếu câu nguồn, kể cả một từ nối nhỏ trong pill/badge. Không thêm dòng mới từ một pill chỉ để giữ tọa độ cũ.
- Một điểm nhấn chính đủ lớn; không dàn mọi phần bằng nhau nếu mất trọng tâm.
- Các mép/hàng/cột có quan hệ phải thẳng; item cùng loại có cùng kích thước, viền và nhịp gap, trừ lệch có chủ đích của master.
- Cân khối hình, không chỉ căn bounding box. Khoảng trống phải giúp đọc/nhìn; bỏ khoảng trống vô tình do giữ vị trí iPhone.
- Được stretch nền, wrapper, separator và vùng tô thích hợp; ảnh, chữ, icon, bezel giữ tỷ lệ. Thumbnail crop bằng cover trong ô, không kéo méo ảnh để vừa ô.

### 3. Recipe dải Filter / template / lựa chọn ngang

Trước hết xác định dải trong app hay popout marketing. Với dải popout mà ý đồ master là nhấn “nhiều lựa chọn” và trải qua máy: mặc định nền panel phủ hết bề rộng canvas quảng cáo; parent đúng cấp, nền thật và mask cùng chiều rộng, hai mép chạm biên xuất. Không chỉ kéo wrapper còn nền con vẫn hẹp. Trường hợp master có card nổi/lề cố ý thì bảo toàn ý đồ đó và nêu căn cứ trong QA.

- Bố trí thumbnail trong một hàng thẳng, cùng chiều cao và tỷ lệ ô, gap đều; nhãn theo thumbnail, không cắt nhãn ngoài chủ đích.
- Tính lại độ rộng item / số item nhìn thấy cho mỗi tỷ lệ, không giữ một hàng hẹp giữa panel rộng. Hàng scroll được có item cuối lộ một phần để thể hiện tiếp nối; không cắt ngẫu nhiên ở vị trí làm mất ý nghĩa.
- Dùng các option có thật ở master/asset UI. Filter dùng cùng ảnh với hiệu ứng khác là đúng ý đồ, không tính là lặp ảnh gallery. Không tạo tên filter/tính năng chưa có nguồn.
- Nếu thiếu đủ option: tăng đồng đều kích thước item hoặc chọn lại gap/vùng hiển thị hợp lý; không tạo ô trống giả để đầy. Kiểm góc/mask, z-order và phần tràn sau export.

### 4. Recipe grid / nhiều ảnh nối tiếp / collage

- Lập một lưới chung cho tất cả item cần căn cùng nhau, kể cả item ở ngoài máy. Không chia thành các cụm mỗi bên giữ hệ tọa độ khác rồi để hàng lệch, cột hở.
- Chọn số cột/hàng theo vùng đích, số ảnh hợp lệ và tỷ lệ ô. Ví dụ 12 ảnh có thể thử 3×4 và 4×3; đây là cách thử, không phải số mặc định cho mọi app. Nếu brief khóa 3 hàng thì giữ 3 hàng và tính lại cột/kích thước/gap phù hợp.
- Định nghĩa vùng lưới rộng B, số cột C, gap G, lề P; độ rộng ô = (B − 2P − (C−1)G)/C. Các x tính từ cùng điểm neo; mỗi hàng dùng cùng y và chiều cao. Với hàng đều, mép trên/dưới giữa các cột phải khớp; khoảng lệch kỹ thuật chỉ được do làm tròn pixel, không có khoảng hở gấp đôi vô cớ.
- Ưu tiên lấy thêm ảnh khác từ layer/asset nguồn cùng app khi cần số ô khác. Không dùng ảnh khác app, ảnh gen, dữ liệu giả, nhân bản ảnh hoặc crop cùng ảnh thành nhiều item để giả “nhiều ảnh”. Khi không đủ asset thì đổi số cột/hàng, kích thước ô hoặc bố cục; không để ô placeholder trong bản bàn giao.
- Mỗi card có stamp thì stamp bám card, giữ dữ liệu/format, đủ đọc và không tràn; không nhân stamp cũ sai địa chỉ lên ảnh mới.
- Bảo toàn thông điệp hình gốc và phần máy cần thấy. Nếu yêu cầu thấy full máy thì vẫn thấy cả đầu/cuối; lưới có thể popout nhưng không được nuốt luôn controls hoặc headline.

### 5. Vòng tự chọn phương án — bắt buộc với grid/panel/tỷ lệ khó

Tạo hoặc render nháp hai cách dàn khác nhau thật sự cho frame khó của mỗi nhóm tỷ lệ (ví dụ khác số cột hay tỷ lệ khối), không chỉ xê dịch một vài pixel. Dùng nháp tạm trong file được giao rồi bỏ phương án không chọn sau đối chiếu; không sửa master. Tự chọn, không hỏi người dùng duyệt từng nháp khi đã được giao làm.

Đánh giá bằng ảnh render và nhận xét cụ thể cho sáu tiêu chí:
1. Trọng tâm: nhìn nhanh có hiểu ngay tính năng chính không?
2. Độ phủ và khoảng thở: vùng cần full đã kín; không có khoảng trống vô tình hoặc nhồi kín mọi chỗ.
3. Căn chỉnh và nhịp: các hàng/cột, kích thước ô, lề, gap và viền nhất quán.
4. Khả năng đọc: headline/nhãn/stamp đủ đọc, không tràn/cắt tùy tiện ở thumbnail và 100%.
5. Trung thành master: đúng style, ảnh/UI/dữ liệu, một thông điệp; không méo, không lặp ngoài ý đồ, không bịa feature.
6. Tương quan cả bộ: tỷ lệ headline, độ lớn máy, panel và mật độ hài hòa với ảnh bên cạnh.

Không tự chấm một tổng điểm rồi coi là bằng chứng đạt. Ghi lý do chọn liên quan tới ảnh thực tế (ví dụ “4 cột giữ đủ 12 ảnh, ba hàng thẳng và lấp vùng ngang; 3 cột để trống hai bên”). Nếu một tiêu chí có lỗi rõ, sửa hoặc thử cách khác trước khi nhân bộ. Tự chê bản nháp như người review design: nhìn như ảnh phone phóng lên, hàng lệch hoặc còn khoảng hở là chưa đạt dù chạy script thành công.

### 6. Cổng kiểm ảnh xuất

Mở ảnh cuối của từng frame, rồi xem cả bộ ở contact sheet. Riêng frame có panel/grid phải có crop lớn cho hai mép panel, các đường hàng/cột và phần giao với máy. Đối chiếu số đo với render: lưới dùng chung tọa độ, gap đều, full-width đúng vùng định nghĩa, không sai mask/camera/bezel, không ảnh lặp ngoài ý đồ. Lỗi ở một ratio phải kiểm cả phiên bản locale của ratio đó. Không suy từ một mẫu đẹp ra mọi ảnh khác đã đạt.

Với mỗi ảnh có mockup, mở thêm crop aperture ở kích thước đủ đọc; đối chiếu B6a. Xem cả bộ nhỏ chỉ giúp kiểm nhịp chung, dễ bỏ sót UI phone nằm giữa màn rộng. Không được gọi layout đạt nếu crop còn lỗi này.

Ghi riêng geometry PASS/FAIL, visual ACCEPTABLE/NEEDS_REVISION với lý do, và product truth CONCEPT/NEEDS_SOURCE nếu thiếu nguồn. Đúng hardware không xóa lỗi bố cục; một lần test CGL tốt không thay bằng chứng dùng được ở app khác.

## B9 / Dùng AI để hỗ trợ đúng phần

AI sinh ảnh hỗ trợ visual; UI chính xác cần nguồn và kiểm chứng.

| Công việc | Cách làm |
|---|---|
| Nền, cảnh, chất liệu | Có thể gen hoặc mở rộng nếu được phép; kiểm ánh sáng và crop. |
| Vỏ thiết bị | Ưu tiên bezel chính thức/asset có quyền sử dụng. Giữ tỷ lệ, đo aperture. |
| UI, chữ, icon, dữ liệu | Ưu tiên asset/UI thật, vector và text editable; không gen lại toàn ảnh để đổi size. |
| Figma AI / công cụ sửa | Giao phạm vi frame cụ thể, nội dung khóa, hình học, đầu ra và QA; kiểm kết quả sau chạy. |

### Prompt ngắn khi giao AI trong Figma

> Thích nghi các frame được chỉ định từ master sang [nhóm thiết bị, W×H]. Giữ nguyên headline, UI, dữ liệu, ảnh và phong cách. Tách canvas / bezel / aperture / UI / popout. Scale đều mockup; bố trí lại ngoài máy; dùng UI đích từ [nguồn]. Ảnh nền cover, panel reflow, icon/chữ không méo. Không thêm tính năng. Chỉ sửa trong [phạm vi]. Xuất preview để đối chiếu trước khi áp dụng cả bộ.

### Nếu không có source tách lớp

Đừng gửi một PNG gộp và yêu cầu “gen y hệt nhưng iPad” rồi dùng thẳng. Kết quả có thể đúng bố cục nhưng sai chữ/icon/ảnh. Yêu cầu designer bổ sung UI sạch và asset, hoặc dựng các lớp có thể xác định chính xác; phần thiếu phải được ghi rõ.

### Khóa nguồn ảnh thật — kể cả ảnh minh họa bàn giao

- Screenshot, ảnh trong UI, logo, icon và text phải lấy từ layer/asset thật hoặc bản export của master được duyệt. Nếu nhiệm vụ chỉ là dàn lại/đổi size, tái sử dụng nguồn ấy; không đưa cả screenshot cho AI vẽ lại rồi thay bằng một ảnh trông gần giống.
- Trước sửa, lưu render/export nguồn và mapping `source_node → output_node → file`. Với asset tải về, lưu hash nếu có công cụ; hash xác nhận đúng file, không chứng minh bản đã resize/reflow giống từng pixel hay UI đích chính xác.
- Sau sửa, đối chiếu từng ảnh, headline, chữ nhỏ, dữ liệu và crop với nguồn. Nếu localize được giao, chỉ thay các trường nằm trong bảng nội dung được phép ở B11; phần khác phải giữ.
- Contact sheet, before/after và ảnh trong tài liệu giới thiệu phải ghép từ **ảnh xuất thật của kết quả**, scale đều, không gen lại nội dung screenshot để minh họa như thể đó là sản phẩm đã làm. Nhãn concept phải rõ nếu dùng concept.

### Khi công cụ lỗi hoặc trả về không rõ

Mở lại node/file kiểm trạng thái trước khi chạy lại. Timeout không đồng nghĩa chưa sửa; retry mù dễ tạo frame và ảnh trùng. Sau mỗi đợt chỉ ghi hoàn thành những node và file đã đọc lại.

Không công cụ nào bảo đảm mọi chat có thể tự sửa Figma. Prompt khởi động buộc AI kiểm công cụ trước, tiến hành phần làm được và báo thiếu quyền/nguồn ở đúng bước.


## B10 / QA từng ảnh và từng bộ

Chỉ đánh PASS khi có bằng chứng từ bản xuất cuối.

| Cổng kiểm | Đạt khi |
|---|---|
| Nguồn & nội dung | Đúng master; đúng headline/UI/photo; dữ liệu khóa không đổi. |
| Kích thước | Pixel đúng job, orientation đúng; PNG/JPEG giải mã được, không alpha. |
| Hình học | Không kéo méo; aperture phủ kín; góc/viền đúng; tâm đúng; không hở ngoài ý muốn. |
| UI thiết bị | Layout, safe area, bar đúng nguồn thiết bị; không lẫn phone/iPad/Duo. |
| Popout & panel | Full vùng dự định; mask đúng; không bị parent cắt nhầm. |
| Chữ & đọc nhanh | Không mất glyph, tràn, cắt dòng xấu; lợi ích chính rõ ở thumbnail. |
| Ảnh & dữ liệu | Không ảnh lặp ngoài ý đồ, không bị AI thay; stamp/biểu đồ/số liệu đúng. |
| Cả bộ | Đủ số ảnh, đúng thứ tự, theme/locale; vị trí headline và khoảng cách có hệ thống. |

### Hai vòng xem bắt buộc

Xem bản xuất ở 100% để kiểm chữ nhỏ, góc mask và viền; zoom vùng nghi ngờ. Xem contact sheet thu nhỏ để kiểm nhịp bố cục, độ nổi headline và tính nhất quán. Mở từng file, không chỉ nhìn preview Figma.

So sánh master và bản đích từng cặp. Đọc lại text layer/dữ liệu khóa nếu có; OCR chỉ hỗ trợ, không phải bằng chứng duy nhất. Quét duplicate bằng hash chỉ phát hiện file giống hệt, không đủ phát hiện ảnh lặp trong một grid.

### Trạng thái bàn giao

PASS: đủ nguồn và đạt kiểm tra. FAIL: lỗi còn tồn tại. NEEDS_SOURCE: thiếu nguồn cần thiết. CONCEPT: bố cục mô phỏng chưa xác nhận UI thiết bị. Một bộ có concept không được báo “sẵn sàng upload toàn bộ”.

> Thay đổi sau QA phải kiểm lại những ảnh bị ảnh hưởng. Không dùng bản preview cũ chứng minh cho file mới.


## B11 / Xuất file, localize và bàn giao

Người nhận phải lần được mỗi ảnh về đúng master và đúng job.

### Cấu trúc gợi ý

> [APP]/Screenshots/[locale]/[device_group]_[display]_[WxH]/[theme]_[mode]/01.png ... 0N.png
> Kèm: manifest.json, QA_REPORT.md, CONTACT_SHEET.jpg và link/node Figma.

Export frame ngoài ở 1× đúng pixel. Kiểm định dạng thật, hệ màu phù hợp pipeline (ưu tiên RGB/sRGB), không alpha; không chỉ đổi đuôi file. Tạo preview riêng, không thay file upload bằng thumbnail.

Manifest cho từng ảnh gồm: đường dẫn, index, headline, device/display, W/H, orientation, locale, theme/mode, source_node, output_node, nguồn UI, trạng thái UI, hash và kết quả QA. Giữ số ảnh theo job, không mặc định 7 ảnh.

### Mở rộng sang ngôn ngữ khác nếu được giao

Hoàn thiện master ở các size trước, rồi làm từng locale trên cấu trúc đã QA. Không dùng danh sách nước/ngôn ngữ của app ví dụ làm mặc định.

1. **Chốt locale, không chỉ quốc gia.** Đọc danh sách đã duyệt từ nguồn ASO nếu được cung cấp; nếu chưa có thì hỏi một lượt. Ghi rõ mã ngôn ngữ/locale và thị trường áp dụng. Chỉ tạo ngôn ngữ/ô upload mà App Store Connect hỗ trợ; một thị trường có thể dùng locale chung với thị trường khác.
2. **Lập bảng copy theo từng screenshot.** Ghi `index | thông điệp gốc | headline gốc | headline locale | UI string nguồn | stamp/dữ liệu mẫu | trạng thái kiểm`. Giữ thứ tự, tính năng và một thông điệp chính mỗi ảnh. Viết headline ngắn, tự nhiên theo ngôn ngữ đích, có thể viết lại cách diễn đạt để vừa bố cục nhưng không thêm lời hứa/tính năng. Không thêm subtitle nếu master không có. Nếu được giao tự viết, tự chọn phương án và QA; không bắt người dùng duyệt lại từng câu khi không cần.
3. **Phân biệt ba loại chữ.** Headline marketing có thể localize theo nhiệm vụ. Chữ UI phải lấy từ build/resource/thiết kế ngôn ngữ được duyệt. Stamp/dữ liệu mẫu chỉ đổi các trường được phép. Dịch headline không chứng minh app đã hỗ trợ UI ngôn ngữ đó; thiếu nguồn UI thì giữ đúng nguồn hiện có và ghi hạn chế, hoặc đánh CONCEPT phần phỏng dựng theo phạm vi được giao.
4. **Localize dữ liệu mẫu có logic.** Với app có stamp/địa chỉ/ngày giờ, giữ trường, biểu tượng và cấu trúc template. Có thể dùng địa chỉ thực của nước đích nếu được giao; không biến địa chỉ thành tên cảnh chung chung. Kiểm địa chỉ–tọa độ cùng địa điểm, ngày–giờ–múi giờ và đơn vị nhất quán. Bản travel có thể dùng nhiều nước khi brief cho phép. Với app khác, áp dụng cùng nguyên tắc cho tiền tệ, đơn vị, tên và số liệu mẫu; không tự thay dữ liệu thật.
5. **Kiểm ngôn ngữ và font trước khi nhân bộ.** Dùng glossary thống nhất; rà chính tả, dấu, cách gọi tính năng, ngày/giờ/số/đơn vị theo locale. Kiểm glyph/font fallback, shaping và RTL nếu có. Không đảo toàn artwork chỉ vì ngôn ngữ RTL; vị trí UI/icon phải theo nguồn sản phẩm. Nếu có người bản ngữ kiểm thì ghi rõ; nếu chưa có thì ghi đúng mức kiểm bằng công cụ/AI, không gọi là đã duyệt bản ngữ.
6. **Fit bằng bố cục trước khi ép chữ.** Giữ phong cách master, ưu tiên cách nói gọn và ngắt dòng tự nhiên, điều chỉnh text box/padding trong hệ bố cục. Không kéo méo chữ hoặc thu nhỏ quá mức để nhét bản dịch. Chọn ảnh có headline dài, script khó hoặc nhiều dữ liệu làm mẫu QA, sau đó mở rộng toàn bộ locale × size × theme được giao.
7. **QA từng bản xuất.** Kiểm lẫn tiếng ngoài ý muốn, lỗi dấu/glyph, dòng bị cắt, headline khó đọc, stamp sai format, địa chỉ sai và dữ liệu trùng ngoài ý đồ. Xem 100% từng ảnh và contact sheet từng bộ. Ghi trạng thái ngôn ngữ riêng với trạng thái hình học; file đúng pixel chưa chứng minh wording đã đúng.

Không cần dịch nguyên văn từng chữ. Giữ đúng thông điệp, nguồn UI và dữ liệu được phép; mọi thay đổi nội dung phải lần được về bảng copy. Thông tin chưa xác minh phải nêu cụ thể trong báo cáo thay vì cam kết toàn bộ hoàn hảo.

### Upload là bước giao riêng

Chỉ upload khi có yêu cầu rõ app/version/locale/device/theme/order. Đối chiếu từng file với job, kiểm số lượng/giới hạn trong ASC, chờ xử lý rồi mở lại từng nhóm để kiểm đúng ảnh/thứ tự và trạng thái lưu. Không tự submit hoặc publish.

### Báo cáo ngắn cho người giao việc

> Đã làm: [job/ảnh]. Đã kiểm: [pixel, nguồn, render, nội dung]. Còn thiếu: [ảnh/nguồn cụ thể]. File và Figma: [link]. Chưa thực hiện: [upload/submit nếu ngoài phạm vi].

Tài liệu này chuyển giao phương pháp cho app bất kỳ; không chứa app ID, keyword, nội dung store hoặc bố cục tính năng bắt buộc của một app cụ thể.

---

## C / Checklist nghiệm thu từng bộ

Job: [...] | Người kiểm: [...] | Ngày: [...] | Master: [...]

| Hạng mục | PASS/FAIL/NEEDS_SOURCE/CONCEPT | Ảnh/node/file bằng chứng | Lỗi và bước tiếp |
|---|---|---|---|
| Đúng master/version, số ảnh, thứ tự | | | |
| App hỗ trợ nhóm thiết bị / nguồn UI đích | | | |
| Pixel, orientation và định dạng thực đúng job | | | |
| Không alpha/transparency, file giải mã được | | | |
| Mẫu máy khớp asset/tham chiếu (camera, viền, bản lề/nút nếu có); có URL/node và crop đối chiếu | | | |
| Không kéo méo mockup/icon/font/thumbnail | | | |
| UI phủ aperture đủ bốn cạnh/góc | | | |
| UI reflow theo ratio đích; không contain nguyên màn phone và chèn nền hai bên | | | |
| Container/card/toolbar/panel đã bố trí theo bề rộng khả dụng; media giữ tỷ lệ riêng | | | |
| Raster tái ghép sạch: không lộ nền/góc cũ, seam, glyph/icon bị cắt; đã so crop lớn với nguồn | | | |
| Headline nhiều layer giữ đúng câu và thứ tự đọc; từ nối/badge không bị đảo | | | |
| Radius, bezel, mask, clip và z-order đúng | | | |
| Tâm theo aperture; bố cục cân theo canvas | | | |
| Toolbar/status bar/safe area đúng nguồn | | | |
| Panel background + content trải đúng vùng | | | |
| Popout tràn có chủ đích, không bị clip nhầm | | | |
| Headline/nội dung/số liệu/stamp đúng master | | | |
| Ảnh đúng nguồn, không duplicate ngoài ý đồ | | | |
| Font/glyph/wrap đọc rõ, không tràn | | | |
| Nếu localize: đúng locale/glossary, copy tự nhiên, nguồn UI và stamp nhất quán | | | |
| Preview/before-after dùng ảnh xuất thật, không dùng screenshot AI vẽ lại | | | |
| Theme ngoài và mode UI không bị đánh đồng | | | |
| Đã xem 100% từng file xuất cuối | | | |
| Đã xem contact sheet từng job | | | |
| Manifest khớp file, node, thứ tự và hash | | | |
| Master/ngoài phạm vi được bảo toàn | | | |

PASS chỉ áp dụng phạm vi có đủ nguồn và đạt kiểm tra. Chưa xác nhận UI đích: CONCEPT hoặc NEEDS_SOURCE. Không dùng QA pixel thay QA visual.

Nếu được giao upload riêng: bổ sung app/version/locale/device/theme/order, số ảnh, ảnh thực so manifest, xử lý xong, mở lại từng nhóm và xác nhận lưu. Không submit/publish tự động.

---

## D / Các lệnh sửa lỗi cục bộ

1 / UI HỞ MÉP HOẶC LỆCH TÂM
Chỉ sửa [frame/node]. Đọc lại aperture thật của bezel, padding trong suốt, parent transform và radius từng góc. Giữ nguyên UI/chữ/ảnh. Căn UI theo aperture, cho ảnh nền cover riêng, sửa mask/clip/order nếu sai. Không kéo méo UI hoặc zoom cắt nút để lấp khe. Xuất trước/sau, soi đủ bốn cạnh/góc và báo số đo sau sửa. Không chỉnh frame ngoài phạm vi.

2 / IPAD HOẶC DUO BỊ KÉO GIÃN
Trong [frame], khôi phục tỷ lệ của icon/chữ/ảnh từ [master]. Dàn lại background, toolbar, panel và grid theo [UI đích]. Scale đều vỏ máy và đo lại screen. Không có nguồn UI đích thì ghi CONCEPT cho phần layout phỏng dựng, vẫn hoàn thiện phần marketing có nguồn. Không bịa sidebar, bar hoặc tính năng.

3 / PANEL/FILTER KHÔNG TRẢI HẾT VÙNG
Sửa [panel] trong [frame]. Xác định đây là panel trong app hay popout marketing. Với panel trong app, mở đúng bề rộng của wrapper, background và content; thumbnail giữ tỷ lệ và khoảng cách theo UI đích. Với popout, chuyển đúng parent ngoài screen mask, giữ clip canvas. Kiểm x, width và hai mép sau export. Không chỉ resize wrapper rồi bỏ quên background con.

4 / THANH GIỜ-PIN/TASKBAR SAI THIẾT BỊ
Đối chiếu [UI đích / OS / orientation] để sửa bar của [frame]. Loại bar phone bị bê nguyên, tránh chồng hai lớp. Không tự đoán bar ở cạnh nào. Chỉ dùng bản không bar nếu [quyết định dự án] cho phép; nếu thiếu nguồn thì nêu rõ thay vì tự vẽ.

5 / ẢNH HOẶC TEXT BỊ AI THAY
Khôi phục ảnh, headline, dữ liệu và định dạng từ [master/asset]. So từng ảnh và từng chuỗi, bao gồm nhãn nhỏ. Không dùng ảnh gen lại để thay UI. Với grid, kiểm danh sách ảnh riêng và thứ tự; sửa duplicate ngoài ý đồ; giữ viền/gap đồng nhất. Render lại ở 100% và contact sheet.

6 / QA LẠI TOÀN BỘ
Kiểm toàn bộ [phạm vi] theo checklist mục C trong tài liệu này: master, pixel/orientation, full aperture, tỷ lệ, mask/góc, centering, bar/safe area, panel/popout, ảnh/chữ/dữ liệu, font, thứ tự, theme/locale. Mở file xuất cuối từng ảnh và contact sheet. Sửa phần được phép, xuất lại rồi kiểm lại. Bàn giao bảng từng job/ảnh với PASS/FAIL/NEEDS_SOURCE/CONCEPT và evidence; không đánh PASS từ số lượng hoặc script thành công.

---

## E / Mẫu bàn giao cuối cùng cho ChatGPT

### 1. Kết quả ngắn

- App/master đã dùng: [...]
- Đã làm: [...] bộ, [...] ảnh; device/display/size: [...]
- Link Figma section/node hoặc file thực: [...]
- Đã kiểm: [...]
- Còn thiếu/chưa xác nhận: [...]

### 2. Bảng từng bộ

| Locale | Device/display | W×H | Theme/mode | Số ảnh | Nguồn UI đích | QA | Link thiết kế/file |
|---|---|---|---|---|---|---|---|
| ... | ... | ... | ... | ... | ... | PASS/FAIL/NEEDS_SOURCE/CONCEPT | ... |

### 3. Mapping từng ảnh

Ghi thứ tự, headline, source frame/node, output frame/node, file xuất, kích thước, nguồn UI và vấn đề còn lại. Nếu có file cục bộ, thêm hash để người nhận kiểm đúng bản. Không tạo link hoặc đường dẫn giả.

### 4. Chốt phạm vi

Phân biệt rõ thiết kế đã chỉnh, file đã xuất, QA đã kiểm và việc upload/submit có hay chưa. Nếu công cụ chỉ cho đọc, nói đúng là chưa ghi Figma; không trình bày hướng dẫn như một bộ đã thực thi.

---

**Tài liệu này dùng độc lập, không cần lịch sử chat. Người nhận gửi file này + link Figma bộ iPhone + prompt ở đầu; ChatGPT tự kiểm công cụ/quyền/nguồn và áp dụng các quyết định đã ghi trong prompt; chỉ hỏi khi còn trở ngại thật chưa được giải quyết. Size phải kiểm lại theo Apple khi bắt đầu. Bản hướng dẫn không thay cho nguồn UI đích, quyền thao tác hoặc QA đầu ra thực tế.**