Products & E-commerceGPT Image 2Dark ModeDigital ProductMinimalistModernUI Mockup
Mockup giao diện trang cá nhân X chân thực
Prompt tạo mockup giao diện trang cá nhân X (Twitter) giao diện máy tính để bàn bằng tiếng Pháp ở chế độ tối (dark mode) với độ chân thực cao. Bố cục gồm 3 cột hoàn chỉnh với đầy đủ thanh điều hướng, ảnh bìa, bài đăng mẫu và bảng xu hướng.
Bản tiếng Anh
Create a highly realistic dark-mode social media interface mockup that closely resembles the desktop X/Twitter layout in French, shown as a full-browser screenshot with three vertical columns on a black background and subtle dark gray separators. The left sidebar contains exactly 11 navigation items stacked vertically with white icons and labels: “Accueil”, “Explorer”, “Notifications” with a small blue badge showing 3, “Messages”, “Grok”, “Signets”, “Communautés”, “Premium”, “Organisations certifiées”, “Profil”, and “Plus”. At the top of this sidebar place the white X logo, near the lower-middle add a large rounded white button labeled “Poster”, and at the bottom show a compact logged-in account block for Martin Dubois with handle @martindubois and a small circular avatar. The center column is the main profile page for {argument name="profile name" default="Martin Dubois"}, with a top bar showing a back arrow, the name “Martin Dubois” and a blue verification badge, and underneath the text “1 248 posts”. Below that, include a wide panoramic cover photo of dramatic cloudy alpine mountains above a forest lake. Overlapping the bottom-left of the banner, place a circular profile picture of a young man in dark clothing, face slightly obscured or blurred, with a pale background and a thin border. On the right side of the profile header place three small circular action buttons and one prominent rounded light button labeled “Éditer le profil”. Under the avatar show the display name Martin Dubois with a blue verification badge, the handle @martindubois, and a one-line bio in French: “Créateur de contenu • Passionné de tech, de design et de productivité.” Then add a metadata row with exactly 4 items: location “Lyon, France”, website “martindubois.com”, and “A rejoint X en janvier 2021”, followed by a follower row reading “320 abonnements” and “12,4 k abonnés”. Add a horizontal tab bar with exactly 5 tabs: “Posts”, “Réponses”, “Tweets marquants”, “Médias”, and “J’aime”, with “Posts” active and underlined in blue. Beneath the tabs, show a feed containing exactly 3 visible posts by Martin Dubois. Post 1 is pinned, indicated by “Épinglé”, dated “12 mai”, with the French text “10 leçons que j’ai apprises en construisant mon projet pendant 2 ans” followed by an emoji, and an engagement row with 5 values: 24 replies, 142 reposts, 1 k likes, 85 k views, and a bookmark/share area. Post 2 is dated “2h” with the French text “Le meilleur moment pour commencer était hier. Le deuxième meilleur moment, c’est maintenant.” and engagement values 12 replies, 37 reposts, 256 likes, and 8 k views. Post 3 is dated “1j” with the French text “Un week-end à Chamonix, toujours ressourçant” followed by a mountain emoji, and includes a large embedded image of snowy mountain peaks under soft daylight. Use circular avatars at the left of each post and thin separators between posts. The right sidebar starts with a rounded search field containing the placeholder “Chercher”. Below it, include a card titled “Vous pourriez aimer” with exactly 3 suggested profiles, each with avatar, display name, handle, blue verification badge, and a white rounded “Suivre” button: “Théo Catarino” @theocatarino, “Aurélie Martinez” @aurel_martinez, and “Ulrich Rozier” @ulrichrozier. Add a “Voir plus” link at the bottom of that card. Under it, create a trends card titled “Tendances : France” listing exactly 4 trends in ranked order with category and post counts: 1. “#RolandGarros” with “32,1 k posts”, 2. “#FêteDesMères” with “18,4 k posts”, 3. “Mbappé” with “45,2 k posts”, 4. “#LundiMotivation” with “12,3 k posts”. Add a “Voir plus” link below the trend list. At the very bottom place a compact footer with multiple small gray legal links and “© 2024 X Corp.”. The entire image should look almost indistinguishable from a real desktop screenshot: crisp typography, authentic spacing, realistic UI proportions, subtle rounded cards, white and gray text on near-black surfaces, blue accent color, polished anti-aliased icons, and a clean modern product-design aesthetic.Bản tiếng Việt
Tạo một mockup giao diện mạng xã hội chế độ tối (dark-mode) chân thực cao, mô phỏng gần như chính xác bố cục máy tính bàn của X/Twitter bằng tiếng Pháp, hiển thị dưới dạng ảnh chụp màn hình toàn trình duyệt với ba cột dọc trên nền đen cùng các đường phân cách màu xám đậm tinh tế. Thanh bên trái chứa chính xác 11 mục điều hướng xếp theo chiều dọc với các biểu tượng và nhãn màu trắng: “Accueil”, “Explorer”, “Notifications” với một huy hiệu nhỏ màu xanh lam hiển thị số 3, “Messages”, “Grok”, “Signets”, “Communautés”, “Premium”, “Organisations certifiées”, “Profil” và “Plus”. Ở đầu thanh bên này, đặt logo chữ X màu trắng, gần giữa phía dưới thêm một nút bo góc lớn màu trắng có nhãn “Poster”, và ở dưới cùng hiển thị một khối tài khoản đã đăng nhập nhỏ gọn cho Martin Dubois với tên người dùng @martindubois cùng một ảnh đại diện tròn nhỏ. Cột trung tâm là trang hồ sơ chính cho {argument name="profile name" default="Martin Dubois"}, với thanh trên cùng hiển thị mũi tên quay lại, tên “Martin Dubois” cùng một huy hiệu xác minh màu xanh lam, và bên dưới là dòng chữ “1 248 posts”. Phía dưới đó, bao gồm một ảnh bìa toàn cảnh rộng về những ngọn núi an-pơ đầy mây hùng vĩ phía trên một hồ nước trong rừng. Gối lên góc dưới bên trái của ảnh bìa, đặt một ảnh đại diện tròn của một chàng trai trẻ mặc trang phục tối màu, khuôn mặt hơi bị che khuất hoặc làm mờ, với nền nhạt màu và đường viền mỏng. Ở phía bên phải của phần đầu hồ sơ, đặt ba nút hành động tròn nhỏ và một nút bo góc sáng màu nổi bật có nhãn “Éditer le profil”. Dưới ảnh đại diện hiển thị tên hiển thị Martin Dubois với huy hiệu xác minh màu xanh lam, tên người dùng @martindubois và một dòng tiểu sử bằng tiếng Pháp: “Créateur de contenu • Passionné de tech, de design et de productivité.” Sau đó thêm một hàng siêu dữ liệu với đúng 4 mục: vị trí “Lyon, France”, trang web “martindubois.com” và “A rejoint X en janvier 2021”, tiếp theo là một hàng người theo dõi hiển thị “320 abonnements” và “12,4 k abonnés”. Thêm một thanh tab ngang với đúng 5 tab: “Posts”, “Réponses”, “Tweets marquants”, “Médias” và “J’aime”, với “Posts” đang hoạt động và được gạch chân màu xanh lam. Bên dưới các tab, hiển thị một bảng tin chứa đúng 3 bài đăng hiển thị của Martin Dubois. Bài đăng 1 được ghim, biểu thị bằng “Épinglé”, ghi ngày “12 mai”, với văn bản tiếng Pháp “10 leçons que j’ai apprises en construisant mon projet pendant 2 ans” kèm theo một biểu tượng cảm xúc, và một hàng tương tác với 5 giá trị: 24 phản hồi, 142 lượt đăng lại, 1 k lượt thích, 85 k lượt xem cùng một khu vực đánh dấu trang/chia sẻ. Bài đăng 2 ghi ngày “2h” với văn bản tiếng Pháp “Le meilleur moment pour commencer était hier. Le deuxième meilleur moment, c’est maintenant.” cùng các giá trị tương tác 12 phản hồi, 37 lượt đăng lại, 256 lượt thích và 8 k lượt xem. Bài đăng 3 ghi ngày “1j” với văn bản tiếng Pháp “Un week-end à Chamonix, toujours ressourçant” kèm theo một biểu tượng cảm xúc hình ngọn núi, và bao gồm một hình ảnh nhúng lớn về các đỉnh núi phủ tuyết dưới ánh sáng ban ngày dịu nhẹ. Sử dụng ảnh đại diện tròn ở bên trái mỗi bài đăng và các đường phân cách mỏng giữa các bài đăng. Thanh bên phải bắt đầu bằng một ô tìm kiếm bo góc chứa văn bản giữ chỗ “Chercher”. Bên dưới nó, bao gồm một thẻ có tiêu đề “Vous pourriez aimer” với đúng 3 hồ sơ được gợi ý, mỗi hồ sơ có ảnh đại diện, tên hiển thị, tên người dùng, huy hiệu xác minh màu xanh lam và một nút bo góc màu trắng “Suivre”: “Théo Catarino” @theocatarino, “Aurélie Martinez” @aurel_martinez và “Ulrich Rozier” @ulrichrozier. Thêm một liên kết “Voir plus” ở cuối thẻ đó. Bên dưới, tạo một thẻ xu hướng có tiêu đề “Tendances : France” liệt kê đúng 4 xu hướng theo thứ tự xếp hạng kèm chuyên mục và số lượng bài đăng: 1. “#RolandGarros” với “32,1 k posts”, 2. “#FêteDesMères” với “18,4 k posts”, 3. “Mbappé” với “45,2 k posts”, 4. “#LundiMotivation” với “12,3 k posts”. Thêm liên kết “Voir plus” bên dưới danh sách xu hướng. Ở dưới cùng, đặt một chân trang nhỏ gọn với nhiều liên kết pháp lý nhỏ màu xám và “© 2024 X Corp.”. Toàn bộ hình ảnh phải trông gần như không thể phân biệt được với ảnh chụp màn hình máy tính bàn thực tế: kiểu chữ sắc nét, khoảng cách chân thực, tỷ lệ giao diện người dùng thực tế, các thẻ bo góc tinh tế, văn bản màu trắng và xám trên bề mặt gần như đen tuyền, màu nhấn xanh lam, các biểu tượng khử răng cưa bóng bẩy, cùng tính thẩm mỹ thiết kế sản phẩm hiện đại, gọn gàng.Mẹo sử dụng
Thích hợp để tạo mockup giao diện mạng xã hội cho các bài thuyết trình sản phẩm số, thiết kế UI/UX; có thể tùy chỉnh tên tài khoản, nội dung bài đăng hoặc ngôn ngữ các thẻ điều hướng theo nhu cầu.
Nguồn và quyền sử dụng
- Nguồn
- https://x.com/Firisis_/status/2046690794434621550#reversed-0
- Tác giả gốc
- Firisis
- License prompt
- CC-BY-4.0
- License ảnh
- CC-BY-4.0