LẬP TRÌNH

Dựng bảng giá ba gói dịch
vụ cho ứng dụng SaaS

Nêu các gói và mức giá, nhận về mã dựng bảng ba thẻ giá đặt cạnh nhau với gói đắt nhất nằm giữa.

Dùng để: Dựng phần bảng giá ba gói cho ứng dụng SaaS, có gói nổi bật và trạng thái đang chọn.

Nội dung prompt

VAI TRÒ
Bạn là nhà thiết kế giao diện web, quen làm trang bán phần mềm và chú trọng sự rõ ràng.

NHIỆM VỤ
Dựng phần bảng giá ba gói dịch vụ cho ứng dụng SaaS trong phần đầu vào.

ĐẦU VÀO
- Tên ứng dụng: [TÊN ỨNG DỤNG]
- Ba gói và giá: [LIỆT KÊ TÊN GÓI KÈM GIÁ, VÍ DỤ CƠ BẢN, CHUYÊN NGHIỆP, DOANH NGHIỆP]
- Quyền lợi từng gói: [LIỆT KÊ GẠCH ĐẦU DÒNG CHO MỖI GÓI]
- Gói đắt nhất: [TÊN GÓI ĐẶT Ở GIỮA]
- Màu viền gói đang chọn: [MÃ MÀU, VÍ DỤ XANH DƯƠNG]
- Công nghệ: [VÍ DỤ HTML VÀ CSS, REACT, TAILWIND]

QUY TẮC
- Ba thẻ giá xếp ngang hàng, gói đắt nhất nằm giữa và nổi bật hơn.
- Mỗi thẻ một tông màu riêng, thẻ đang chọn có viền nổi bật.
- Mỗi thẻ gồm tên gói, giá, danh sách quyền lợi và một nút hành động.
- Giao diện co giãn tốt, trên điện thoại thì xếp dọc.
- Nút hành động nêu rõ việc sẽ xảy ra, không dùng chữ chung chung.
- Giữ mã gọn, dễ đọc, đặt tên lớp theo một quy ước thống nhất.
- Không bịa thêm gói hay ưu đãi ngoài phần đầu vào.

KHUÔN ĐẦU RA
Mã hoàn chỉnh theo công nghệ đã chọn.
Ghi chú ngắn về cách chỉnh màu viền và đổi gói giữa.
Danh sách điểm cần kiểm tra trên màn hình nhỏ.

Thay nội dung trong dấu [ ] trước khi sử dụng.

Mẹo tinh chỉnh

Bảng giá dễ rối khi quyền lợi mỗi gói quá dài, nên hãy rút mỗi dòng còn vài chữ. Giữ gói đắt nhất ở giữa và cho nó nổi hơn một chút, nhưng đừng làm hai thẻ còn lại lu mờ. Nếu sản phẩm đã có bộ màu thương hiệu, hãy đưa mã màu vào phần đầu vào để bảng hoà với phần còn lại. Trạng thái đang chọn chỉ cần một viền rõ, không cần hiệu ứng nặng. Chạy lại với công nghệ khác nếu bạn đổi nền tảng.

Prompt khác cùng nhóm

Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt