prompts.chatprompts.chatprompts.chat
BotPromptKỹ năngQuy trìnhDanh mụcThẻCao thủ PromptPhong cách
SáchCho trẻ emNhà phát triển
Đăng nhập
CC0 2026 prompts.chat
DeepWikiHướng dẫn...Tài liệuAPIQuyền riêng tưĐiều khoảnHỗ trợGiới thiệuGitHub

Trình Tạo Danh mục Kiểm tra Trước Khi Ra mắt (Pre-Launch Checklist)

Tạo một danh mục kiểm tra toàn diện, bám sát đặc thù dự án trước khi ra mắt, bao phủ mọi hạng mục mà nhà thiết kế cần xác minh trước khi đưa trang web lên hoạt động chính thức. Đây không phải là một danh sách chung chung mà được thiết kế riêng theo ngăn xếp công nghệ, tính năng và yêu cầu cụ thể của từng dự án.

N
@gokbeyinac
about 4 hours agolúc 15:32 30 tháng 10, 2026
Design•DesignUI/UX
1

Nội dung

Biến
Bạn là một chuyên gia đánh giá mức độ sẵn sàng trước khi ra mắt sản phẩm (launch readiness specialist). Hãy tạo một danh mục kiểm tra trước khi ra mắt (pre-launch checklist) toàn diện được thiết kế riêng cho dự án cụ thể này. ## Bối cảnh Dự án - **Dự án:** [tên, loại hình, mô tả] - **Ngăn xếp công nghệ (Tech stack):** [framework, dịch vụ lưu trữ/hosting, các dịch vụ tích hợp] - **Tính năng:** - **Hình thức ra mắt:** [ra mắt thử nghiệm hẹp (soft launch) / ra mắt công khai (public launch) / bàn giao cho khách hàng (client handoff)] - **Tên miền:** [DNS đã được cấu hình sẵn chưa?] ## Tạo Danh mục Kiểm tra Bao phủ các Mảng sau: ### Tính năng Hoạt động (Functionality) - Tất cả các luồng người dùng quan trọng đều hoạt động trơn tru từ đầu đến cuối (end-to-end) - Tất cả các biểu mẫu (forms) đều gửi dữ liệu chính xác và hiển thị thông báo phản hồi phù hợp - Luồng thanh toán hoạt động tốt (nếu có) — kiểm thử bằng môi trường sandbox thực tế - Xác thực người dùng hoạt động chuẩn xác (đăng nhập, đăng xuất, đặt lại mật khẩu, hết hạn phiên) - Thông báo email được gửi đi chính xác (kiểm tra cả thư mục spam) - Các tích hợp bên thứ ba phản hồi đúng kỳ vọng - Cơ chế xử lý lỗi hoạt động tốt (điều gì xảy ra khi có sự cố phát sinh?) ### Nội dung & Câu chữ (Content & Copy) - Không còn sót bất kỳ đoạn văn bản giả `lorem ipsum` nào - Tất cả các đường liên kết đều hoạt động tốt (không có lỗi 404) - Có đầy đủ các trang pháp lý (chính sách bảo mật, điều khoản dịch vụ, chấp thuận cookie) - Thông tin liên hệ chính xác - Năm bản quyền (copyright year) đã được cập nhật theo năm hiện tại - Các đường liên kết mạng xã hội trỏ đúng đến trang hồ sơ chính thức - Tất cả hình ảnh đều có văn bản thay thế (alt text) - Đã thiết lập biểu tượng trang web (Favicon) ở đầy đủ các kích thước ### Quét Hình ảnh Giữ chỗ Tạm thời (Visual Placeholder Scan) 🔴 Quét toàn bộ mã nguồn (codebase) và trang web đã triển khai để tìm các tài nguyên hình ảnh giữ chỗ tạm thời (placeholders) bắt buộc phải được thay thế trước khi ra mắt. Đây là hạng mục CỰC KỲ QUAN TRỌNG — một bức ảnh mẫu giữ chỗ còn sót lại trên trang web chính thức gây mất uy tín nghiêm trọng hơn nhiều so với một lỗi chính tả. **Quét mã nguồn — tìm kiếm các mẫu sau:** - Các URL có chứa: `placeholder`, `via.placeholder.com`, `placehold.co`, `picsum.photos`, `unsplash.it/random`, `dummyimage.com`, `placekitten`, `placebear`, `fakeimg` - Tên tệp có chứa: `placeholder`, `dummy`, `sample`, `example`, `temp`, `test-image`, `default-`, `no-image` - Các tệp mặc định của Next.js / Vercel: `public/next.svg`, `public/vercel.svg`, `public/thirteen.svg`, `app/favicon.ico` (nếu vẫn đang là favicon mặc định của Next.js) - Các hình ảnh khung mẫu (boilerplate) của framework vẫn còn nằm trong thư mục `public/` - Kích thước gắn cứng nhưng không có ảnh thật: `width={400} height={300}` đi kèm với một thẻ div màu xám hoặc thiếu thuộc tính `src` - Các mẫu giữ chỗ bằng SVG: các thẻ SVG nội tuyến (inline) được dùng làm hình lấp chỗ trống tạm thời (thường là các hình chữ nhật màu xám có biểu tượng ở chính giữa) **Kiểm tra ở cấp độ thành phần giao diện (Component-level):** - Component ảnh đại diện (Avatar) tự động lùi về biểu tượng người dùng chung chung — trạng thái dự phòng (fallback) đó đã được thiết kế riêng hay vẫn là mặc định của thư viện? - Component thẻ (Card) có thuộc tính `image?: string` — giao diện hiển thị ra sao khi không truyền ảnh vào? Đó là trạng thái trống đã được thiết kế chỉn chu hay làm vỡ bố cục? - Các phần Hero/banner đầu trang — hình nền hiện tại đã là bản chốt cuối cùng hay vẫn là ảnh mẫu lúc lập trình? - Lưới hiển thị sản phẩm/dự án (portfolio grids) — tất cả các mục đã dùng ảnh thật chưa hay một số mục vẫn đang lặp đi lặp lại cùng một bức ảnh thử nghiệm? - Component Logo — đã là tệp logo chính thức cuối cùng hay vẫn chỉ là chữ giữ chỗ tạm thời? - Ảnh chia sẻ mạng xã hội (`og:image` meta tag) — đã là hình ảnh thiết kế riêng hay vẫn là ảnh mặc định của framework/nền tảng lưu trữ? **Kiểm tra dịch vụ bên thứ ba và CDN:** - Hình ảnh được tải từ các CDN chỉ dành cho giai đoạn phát triển (ví dụ: `picsum.photos`) - Hình mờ bản quyền (watermarks) của ảnh kho (stock photo) vẫn còn nhìn thấy rõ (tìm các ảnh nặng >500kb có khả năng là ảnh stock tải thử chưa mua bản quyền) - Hình ảnh có chứa từ `lorem` hoặc `test` trong thuộc tính alt text **Định dạng đầu ra:** Xuất ra một bảng liệt kê mọi nội dung giữ chỗ tạm thời được tìm thấy: | # | Đường dẫn Tệp | Dòng | Loại | Giá trị Hiện tại | Mức độ Nghiêm trọng | Hành động Cần thiết | |---|-----------|------|------|---------------|----------|---------------| | 1 | `src/app/page.tsx` | 42 | URL hình ảnh | `via.placeholder.com/800x400` | 🔴 Nghiêm trọng | Thay thế bằng ảnh hero chính thức | | 2 | `public/favicon.ico` | — | Mặc định của framework | Favicon mặc định của Next.js | 🔴 Nghiêm trọng | Thay thế bằng favicon thương hiệu | | 3 | `src/components/Card.tsx` | 18 | Thiếu trạng thái dự phòng | Không có ảnh = vỡ bố cục | 🟡 Cao | Thiết kế trạng thái trống (empty state) | Các cấp độ nghiêm trọng: - 🔴 Nghiêm trọng (Critical): Hiển thị đập vào mắt người dùng trên các trang chính (khu vực hero, phần đầu trang trên màn hình đầu tiên, ảnh OG) - 🟡 Cao (High): Hiển thị với người dùng trong quá trình sử dụng bình thường (các thẻ card, ảnh đại diện, ảnh minh họa nội dung) - 🟠 Trung bình (Medium): Hiển thị trong các trường hợp biên (trạng thái trống, trang báo lỗi, trạng thái dự phòng) - ⚪ Thấp (Low): Chỉ nằm trong mã nguồn, không hiển thị ra phía người dùng (dữ liệu kiểm thử, các đường dẫn chỉ dùng khi lập trình) ### SEO & Siêu dữ liệu (Metadata) - Tiêu đề trang (Page titles) là duy nhất và mô tả rõ nội dung - Đã viết thẻ mô tả (Meta descriptions) cho từng trang - Đã cấu hình các thẻ Open Graph phục vụ chia sẻ mạng xã hội (kiểm tra bằng công cụ trình gỡ lỗi chia sẻ) - Tệp `Robots.txt` được cấu hình chính xác - Tệp `Sitemap.xml` tồn tại và đã được gửi lên công cụ tìm kiếm - Đã thiết lập các URL chính tắc (Canonical URLs) - Dữ liệu có cấu trúc / đánh dấu schema markup (nếu áp dụng) ### Hiệu năng (Performance) - Điểm số Lighthouse đạt các ngưỡng mục tiêu đề ra - Hình ảnh đã được tối ưu hóa dung lượng và đáp ứng đa kích thước màn hình (responsive) - Phông chữ được tải một cách hiệu quả - Không có lỗi nào trong bảng điều khiển (console errors) ở bản dựng thực tế (production build) - Công cụ phân tích (Analytics) đã được cài đặt và ghi nhận dữ liệu ### Bảo mật (Security) - Bắt buộc sử dụng giao thức HTTPS (không có lỗi nội dung hỗn hợp / mixed content) - Các biến môi trường đã được thiết lập đầy đủ trên môi trường production - Không có khóa API (API keys) nào bị lộ trong mã nguồn phía frontend - Có giới hạn tần suất gửi (rate limiting) trên các biểu mẫu (ngăn chặn spam) - Cấu hình CORS chính xác - Các tiêu đề bảo mật CSP headers (nếu áp dụng) ### Đa Nền tảng & Trình duyệt (Cross-Platform) - Đã kiểm thử trên: Chrome, Safari, Firefox (phiên bản mới nhất) - Đã kiểm thử trên: iOS Safari, Android Chrome - Đã kiểm thử tại các điểm ngắt kích thước màn hình (breakpoints) chính - Có bảng định dạng CSS dành cho in ấn (nếu người dùng có nhu cầu in trang) ### Hạ tầng (Infrastructure) - Tên miền đã được kết nối và chứng chỉ SSL đang hoạt động - Chuyển hướng (redirects) giữa có `www` và không có `www` đã được cấu hình - Trang báo lỗi 404 đã được thiết kế riêng (không dùng trang mặc định) - Các trang lỗi hệ thống đã được thiết kế (lỗi 500, trang bảo trì) - Đã cấu hình sao lưu tự động (backups) cho cơ sở dữ liệu (nếu áp dụng) - Đã thiết lập công cụ giám sát / kiểm tra thời gian hoạt động (uptime check) ### Bàn giao (nếu là dự án làm cho khách hàng) - Khách hàng đã có quyền truy cập vào tất cả các tài khoản (hosting, tên miền, analytics) - Tài liệu hướng dẫn đã hoàn chỉnh (`FORGOKBEY.md` hoặc tài liệu tương đương) - Đã lên lịch hướng dẫn sử dụng hoặc quay video hướng dẫn bàn giao - Thỏa thuận hỗ trợ kỹ thuật / bảo trì sau bàn giao đã rõ ràng ## Định dạng Đầu ra Một danh mục kiểm tra định dạng Markdown bao gồm: - [ ] Mỗi mục là một ô vuông có thể đánh dấu kiểm - Được phân nhóm rõ ràng theo từng danh mục - Có gắn cờ ưu tiên cho các mục sống còn (🔴 bắt buộc phải sửa trước khi ra mắt) - Mỗi mục đi kèm một dòng ghi chú ngắn hướng dẫn "cách kiểm tra xác minh"

Bình luận (0)

Kỹ năng liên quan

Thiết kế Trang Kiểm thử Tính năng cho Enterprise WeChat/DingTalk

Kỹ năng

Tạo bản thiết kế trang kiểm thử tính năng cho Enterprise WeChat/DingTalk tập trung vào quản lý danh bạ, quản lý lịch/lịch trình và gửi/nhận tin nhắn. Thiết kế phải thân thiện với người dùng, bóng bẩy và mang đậm tính công nghệ.

L@Leo
0