Tạo ảnh chụp màn hình GitHub README ở chế độ tối, mô phỏng bài đăng mạng xã hội theo chủ đề thời nhà Tống, hữu ích để giới thiệu các mẫu gợi ý UI.
Mục tiêu: Tạo ảnh chụp màn hình máy tính khổ rộng về bản xem trước GitHub repository README ở chế độ tối, hiển thị ví dụ thiết kế cho giao diện mạng xã hội Trung Hoa cổ đại.
Khung hình: Ảnh chụp màn hình ngang 1200×612 px, giao diện GitHub màu xanh đen, được cắt như cửa sổ trình duyệt và không hiển thị thanh địa chỉ. Bố cục chủ yếu là nền GitHub tối, với nội dung README được căn giữa hơi lệch về bên trái.
Bố cục trang GitHub: Ở trên cùng, hiển thị đường dẫn tệp (breadcrumb) và thanh công cụ của GitHub. Bao gồm chính xác 3 mục breadcrumb/tệp: bộ chọn nhánh được gắn nhãn “main”, tên repository “GPT-Image2-Skill” và tên tệp “README.zh.md”. Bên dưới, hiển thị chính xác 3 nút tab ở bên trái: “Preview”, “Code” và “Blame”, theo sau là văn bản siêu dữ liệu nhỏ với nội dung khoảng “2865 lines (2093 loc) · 204 KB”. Ở phía bên phải của thanh công cụ, bao gồm chính xác 6 nút/biểu tượng hành động nhỏ của GitHub, bao gồm nút “Raw”. Giữ cho giao diện sắc nét, tối và chân thực.
Nội dung README: Trên trang tối, đặt một tiêu đề ngắn bằng tiếng Trung, in đậm, màu trắng ở gần phía trên bên trái của vùng nội dung: “宋代社交媒体动态”. Bên dưới và bên phải tiêu đề này, hiển thị một hình ảnh mô phỏng điện thoại dọc duy nhất.
Đối tượng mô phỏng điện thoại: Hình ảnh mô phỏng điện thoại là màn hình ứng dụng mạng xã hội theo chủ đề thời nhà Tống với tiêu đề 宋朝朋友圈. Nó có nền màu nâu đỏ đen ấm áp, văn bản màu vàng, kết cấu giấy da và thẩm mỹ lịch sử đầy tâm trạng. Ở trên cùng màn hình điện thoại, hiển thị thanh trạng thái với chính xác 4 phần tử trạng thái: văn bản nhà mạng “大宋移动 5G”, văn bản niên đại ở giữa “元丰三年”, tỷ lệ phần trăm pin “88%” và biểu tượng pin. Bên dưới đó, hiển thị chính xác 3 phần tử điều hướng/tiêu đề: mũi tên quay lại ở bên trái, tiêu đề lớn “宋朝朋友圈” ở giữa và biểu tượng máy ảnh ở bên phải.
Chi tiết bài đăng xã hội: Hiển thị chính xác 1 bài đăng. Bài đăng có chính xác 1 ảnh đại diện hình vuông ở bên trái, là một bức chân dung thời nhà Tống với khuôn mặt được làm mờ nhẹ. Bên phải ảnh đại diện, hiển thị dòng tên người dùng 苏东坡 SuShi_Official. Bên dưới, bao gồm văn bản bài đăng bằng tiếng Trung: “刚到黄州,虽被贬但心情尚可。今日亲手做了东坡肉,味道绝佳。食谱见下图。” Hiển thị văn bản dưới dạng văn bản thư pháp UI màu trắng ấm/vàng.
Hình ảnh bài đăng: Bên dưới văn bản, hiển thị chính xác 1 thẻ hình ảnh lớn được thiết kế như một bức tranh cổ Trung Hoa trên giấy da. Nó mô tả một chiếc đĩa sứ màu xanh nhạt đựng một khối thịt kho Đông Pha vuông vức, bóng bẩy được buộc bằng một dải màu xanh đậm, đặt trong nước sốt màu nâu. Thẻ hình ảnh cũng chứa thư pháp tiếng Trung dọc ở bên trái, một con dấu đỏ nhỏ và chi tiết cành cây hoặc mực mờ ở nền phía trên. Hình minh họa món ăn trông giống như tranh vẽ, kết hợp giữa bản thảo bảo tàng và kết xuất món ăn chân thực.
Khu vực tương tác: Bên dưới thẻ món ăn, hiển thị chính xác 1 hàng lượt thích với biểu tượng hình tròn màu đỏ nhỏ và tên/văn bản tiếng Trung đọc khoảng “黄庭坚、秦观、佛印 等 126 人觉得赞”. Bên dưới đó, bắt đầu chính xác 1 hàng bình luận hiển thị với ảnh đại diện nhỏ và bình luận “王安石:呵呵”, bị cắt một phần gần mép dưới của màn hình điện thoại.
Phong cách hình ảnh: Ảnh chụp màn hình tổng thể trông giống như bản xem trước GitHub README thực tế chứa mẫu UI đã tạo. Sử dụng màu tối của GitHub, các đường phân cách tinh tế, văn bản giao diện nhỏ màu trắng xám và độ tương phản cao. Hình ảnh mô phỏng điện thoại được nhúng phải mang phong cách ấm áp, điện ảnh, cổ trang Trung Hoa, lấy cảm hứng từ giấy da và mực tàu, với hiệu ứng làm mờ viền nhẹ và đổ bóng chân thực.
Các ràng buộc: Giữ hình ảnh cuối cùng là ảnh chụp màn hình của trang GitHub, không chỉ là giao diện điện thoại. Chỉ bao gồm một mô phỏng điện thoại được nhúng, một bài đăng xã hội, một ảnh đại diện, một hình ảnh món ăn, một hàng lượt thích và một hàng bình luận hiển thị. Không thêm các bảng điều khiển bổ sung, bài đăng bổ sung, hình mờ hoặc chú thích giải thích ngoài văn bản GitHub và README đã chỉ định.