Một bộ ảnh giới thiệu ứng dụng cần cho người xem hiểu sản phẩm làm gì và có bằng chứng ngay trên màn hình. Bắt đầu từ giao diện thật, không dựng thêm tính năng chỉ để ảnh trông hấp dẫn hơn.
Bạn sẽ tạo ra những gì?
Skill store-screenshots hướng dẫn từ brief, chọn thông điệp và nghiên cứu nhóm ứng dụng đến bố cục, xuất PNG và SVG có thể chỉnh sửa. Đầu ra nên gồm bộ ảnh theo cửa hàng và ngôn ngữ đã chọn, cùng ghi chú nguồn tư liệu và các kiểm tra đã thực hiện.
Hướng dẫn này giúp tổ chức quy trình thiết kế; chưa có dữ liệu thử nghiệm để khẳng định bộ ảnh làm tăng tỷ lệ cài đặt. Hiệu quả cần được đo trên sản phẩm thật.
Chuẩn bị trước khi thiết kế
- Ảnh chụp giao diện thô ở độ phân giải phù hợp, thuộc phiên bản sản phẩm cần giới thiệu. Không dùng ảnh đã ghép phối cảnh trên trang cửa hàng làm nguồn UI.
- Tên ứng dụng, đối tượng dùng, tác vụ chính và các đặc điểm có thể chứng minh được bằng màn hình.
- Logo, font, bảng màu, tài liệu thương hiệu và quyền sử dụng hình ảnh, phông chữ, thiết bị mockup nếu có.
- Cửa hàng, nhóm thiết bị và ngôn ngữ đầu ra. Kiểm tra thông số cửa hàng hiện hành trước khi xuất bản.
- Python 3 cho các helper; tùy bước render có thể cần Pillow, resvg-py hoặc Tesseract cho OCR. Cài skill không tự thiết lập những công cụ này.
1. Chốt thông điệp và bằng chứng
Mỗi ảnh trả lời một câu hỏi hoặc thể hiện một lợi ích cụ thể. Ảnh đầu nên nói rõ kết quả người dùng nhận được, các ảnh sau trình bày thao tác hoặc khả năng hỗ trợ lời hứa đó.
Đối chiếu mọi câu với bằng chứng. Chưa có số liệu đo thì không thêm phần trăm tiết kiệm thời gian; chưa có đánh giá thật thì không tạo sao hoặc lời chứng thực giả. Khi một khả năng chưa có trong sản phẩm, bỏ khỏi ảnh thay vì yêu cầu agent vẽ UI minh họa như đã tồn tại.
2. Lập storyboard trước khi dựng
- Viết một tiêu đề ngắn và mục đích cho từng ảnh.
- Gắn mỗi ảnh với màn hình nguồn cần dùng, ghi vùng sẽ crop hoặc phóng lớn.
- Kiểm tra thứ tự: người mới nhìn ba ảnh đầu đã hiểu sản phẩm và điểm khác biệt hay chưa?
- Chốt bộ màn hình và nội dung trước khi tạo các biến thể bố cục.
Thiết kế bộ ảnh giới thiệu ứng dụng từ các màn hình tôi cung cấp.
Trước tiên đề xuất thông điệp chính, storyboard và màn hình nguồn cho từng ảnh.
Giữ nguyên nội dung UI, bảng màu và kiểu chữ của sản phẩm.
Không thêm tính năng, số liệu, đánh giá hoặc kết quả chưa có bằng chứng.
Nêu công cụ, tư liệu và kích thước đầu ra còn thiếu trước khi render.3. Chọn bố cục dựa trên sản phẩm
Đọc palette, typography và các chi tiết nhận diện từ UI thật. Các hướng thiết kế có thể khác nhau về thứ tự đọc, tỷ lệ màn hình và cách nhấn một chức năng, trong khi vẫn giữ bản sắc ứng dụng.
UI có thể được crop, đặt trong khung hoặc kết hợp thành cảnh, nhưng không kéo méo, vẽ lại chữ hay đổi màu bên trong để làm sai sự thật. Khi thêm hiệu ứng hoặc minh họa, giải thích nó giúp truyền đạt thông điệp nào.
4. Kiểm tra trước khi bàn giao
- Đúng sản phẩm: đối chiếu giao diện và các claim với ảnh nguồn.
- Đọc được: mở từng ảnh ở kích thước thật và ở kích thước thumbnail của kết quả tìm kiếm.
- Đúng đầu ra: kiểm tra kích thước, tỷ lệ, định dạng, transparency và ngôn ngữ theo cửa hàng, thiết bị đã chọn.
- Chỉnh sửa được: giữ SVG hoặc tệp thiết kế cùng PNG cuối để cập nhật khi UI thay đổi.
- Báo giới hạn: nêu kiểm tra OCR, kích thước hoặc công cụ nào chưa chạy, thay vì đánh dấu đạt mặc định.
Đọc runbook store-screenshots để xem helper, yêu cầu và giấy phép MIT đi kèm. Tài sản bổ sung vẫn cần được kiểm tra quyền sử dụng riêng.
A screenshot set should explain what an app does and show evidence on the screen. Start from actual interface captures rather than inventing features to make the marketing image more attractive.
What will you create?
store-screenshots covers the brief, messaging, category research, composition and export to PNG plus editable SVG. The handoff should identify the chosen stores and languages, source assets and checks performed.
This guide organizes a design process. It does not provide test results demonstrating an increase in installs. Measure effectiveness in the real product before claiming an improvement.
Before designing
- Raw UI captures at an appropriate resolution from the product version being promoted. Do not use already-composed store marketing images as your UI source.
- The app’s name, audience, main task and differentiators that its screens can demonstrate.
- Brand assets, fonts, palette and permission to use any images, typefaces or device mockups.
- Target store, device families and output languages. Check current store specifications before publishing.
- Python 3 for helpers; rendering may require Pillow or resvg-py, while OCR checks may require Tesseract. Installing a skill does not configure these tools.
1. Define the message and its evidence
Each image should answer one question or demonstrate a specific benefit. The first should communicate the user’s outcome; later images show the actions and capabilities that support it.
Check every claim against evidence. Do not invent time-saving percentages, star ratings or testimonials. If a feature does not exist, remove it from the image rather than having the agent draw a look-alike UI that implies it does.
2. Storyboard before composing
- Write one short headline and purpose for each image.
- Map each shot to a source screen, including intended crops or enlarged regions.
- Check the sequence: can a new viewer understand the product and its difference from the first three images?
- Confirm the screens and copy before generating layout variations.
Design an app screenshot set from the screens I provide.
First propose the main message, storyboard and source screen for each shot.
Preserve the product’s UI, palette and typography.
Do not add unsupported features, numbers, reviews or results.
Identify missing tools, assets and output sizes before rendering.3. Build from the product’s visual language
Extract the palette, typography and signature details from real UI. Concepts can vary reading order, screen scale and feature emphasis while retaining the app’s identity.
UI may be cropped, framed or composed into a scene, but should not be distorted, rewritten or recolored internally to misrepresent the product. Explain how additional effects or illustrations support the message.
4. Verify the handoff
- Product accuracy: compare the interface and claims with source captures.
- Readability: inspect each image at full size and at search-result thumbnail size.
- Output correctness: check dimensions, ratio, format, transparency and language for each chosen store and device family.
- Editability: retain SVG or design sources alongside final PNGs for future UI updates.
- Limits: identify any OCR, size or tooling check that was not run instead of assuming it passed.
Read the store-screenshots runbook for its helpers, requirements and bundled MIT license. Additional assets still need their own rights review.