LẬP TRÌNH

Lập tài liệu hệ thống thiết
kế từ website có sẵn

Đưa các trang chính, nhận tài liệu hệ thống thiết kế gồm màu, chữ, khoảng cách, thành phần và chỗ chưa nhất quán.

Dùng để: Soi một website có sẵn và ghi lại thành tài liệu hệ thống thiết kế để đội làm theo cho nhất quán.

Nội dung prompt

VAI TRÒ
Bạn là chuyên gia frontend, chuyên lập tài liệu hệ thống thiết kế cho website.

NHIỆM VỤ
Phân tích website [TÊN WEBSITE] qua các trang chính và viết tài liệu hệ thống thiết kế.

ĐẦU VÀO
- Trang chủ: [NỘI DUNG HOẶC ẢNH CHỤP]
- Trang sản phẩm hoặc bảng giá: [NỘI DUNG]
- Trang nội dung bên trong: [NỘI DUNG]
- Trang biểu mẫu hoặc liên hệ: [NỘI DUNG]

QUY TẮC
1. Dựa trên giá trị thật khi có thể, ví dụ mã màu và cỡ chữ, không đoán bằng mắt.
2. Ghi bảng màu: màu chính, màu phụ, màu nhấn, màu trung tính, kèm nơi dùng.
3. Ghi kiểu chữ: họ chữ, độ đậm, cỡ chữ, chiều cao dòng cho tiêu đề và phần thân.
4. Ghi khoảng cách và bố cục: thang khoảng cách, chiều rộng vùng chứa, điểm ngắt.
5. Ghi kiểu nút, biểu mẫu, điều hướng, thẻ và bo góc.
6. Đánh dấu chỗ chưa nhất quán giữa các trang thay vì bỏ qua.
7. Xuất bằng tiếng Việt, dạng markdown, mỗi mục một tiêu đề.

KHUÔN ĐẦU RA
Tài liệu markdown gồm các mục: bảng màu, kiểu chữ, khoảng cách, nút, biểu mẫu, điều hướng, thẻ, và danh sách điểm chưa nhất quán.

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

Mẹo tinh chỉnh

Website càng nhiều loại trang, tài liệu càng đầy đủ, nên hãy thêm trang đặc thù như bảng giá hay đánh giá khách hàng. Nếu muốn dùng cho một thư viện giao diện, yêu cầu AI gợi ý tên thành phần theo cách đặt của thư viện đó. Bạn có thể yêu cầu tách riêng phần mã màu thành bảng để dán thẳng vào tệp cấu hình. Khi trang thay đổi, chạy lại prompt và cập nhật tài liệu. Đây là cách giữ hệ thống thiết kế luôn khớp với sản phẩm thật.

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