Products & E-commerceGPT Image 2MinimalistModernDashboardDark ModeUI/UX DesignLanding PageSaaS MockupFigma Style
Giao diện landing page và dashboard SaaS thể hình hiện đại
Prompt tạo mockup thiết kế giao diện UI/UX hiện đại và cao cấp cho trang landing page cùng bảng điều khiển SaaS thể hình kết hợp ứng dụng di động. Thiết kế theo phong cách dark mode chuyên nghiệp, trực quan và chuẩn trình bày Figma dành cho startup.
Bản tiếng Anh
Design a modern, high-end {argument name="app type" default="fitness app"} landing page and product UI for a brand called {argument name="brand name" default="PulseFit"}.
Create a clean web design mockup that looks like a real SaaS fitness platform and mobile companion app. The design should feel premium, motivating, and easy to use, with a polished UI/UX style similar to top-tier health and wellness apps.
Include:
- A hero section with bold headline, short subheadline, strong call-to-action button, and app preview
- Dashboard UI showing daily activity, calories burned, workout streak, heart rate, step count, and progress rings
- Workout program cards for strength, cardio, mobility, and recovery
- Nutrition tracking section with macro breakdown and water intake
- Progress charts and analytics widgets
- Trainer/community section with profile cards and testimonials
- Pricing section and download/app store callout
- Mobile app screens shown alongside the web design for a cohesive product ecosystem
Style direction:
- Sleek, minimal, modern interface
- Premium fitness brand aesthetic
- Smooth spacing, strong hierarchy, rounded cards, soft shadows
- Dark mode UI with energetic accent colors like electric blue, neon green, or vibrant orange
- Crisp typography, realistic charts, polished buttons, beautiful onboarding feel
- Highly detailed, dribbble-worthy, startup-quality product design
- Realistic UX case study presentation, not a cartoon or illustration
Composition:
- Full website homepage mockup
- Multiple UI sections visible in one polished presentation
- Slight perspective or straight-on product showcase
- Clean background with subtle gradients and professional lighting
- Ultra-detailed, sharp text rendering, visually balanced layout
Output:
A stunning, realistic UI/UX design concept for a fitness app website and dashboard that looks ready for development.
Make it look like a real Figma product design presentation for a premium startup.Bản tiếng Việt
Thiết kế một landing page và giao diện sản phẩm (product UI) {argument name="app type" default="fitness app"} hiện đại, cao cấp cho một thương hiệu có tên {argument name="brand name" default="PulseFit"}.
Tạo một bản mockup thiết kế web gọn gàng trông giống như một nền tảng thể hình SaaS thực tế và ứng dụng di động đồng hành. Thiết kế cần mang lại cảm giác cao cấp, truyền cảm hứng và dễ sử dụng, với phong cách UI/UX trau chuốt tương tự như các ứng dụng chăm sóc sức khỏe và thể chất hàng đầu.
Bao gồm:
- Một hero section với tiêu đề in đậm, tiêu đề phụ ngắn gọn, nút kêu gọi hành động (CTA) nổi bật và bản xem trước ứng dụng
- Giao diện bảng điều khiển (dashboard UI) hiển thị hoạt động hàng ngày, lượng calo đã đốt cháy, chuỗi ngày tập luyện liên tục, nhịp tim, số bước chân và các vòng tiến độ
- Các thẻ chương trình tập luyện cho rèn luyện sức mạnh, cardio, độ linh hoạt và phục hồi
- Phần theo dõi dinh dưỡng với phân tích tỷ lệ macro và lượng nước nạp vào
- Các biểu đồ tiến độ và tiện ích (widget) phân tích số liệu
- Phần huấn luyện viên/cộng đồng với thẻ hồ sơ cá nhân và lời nhận xét/đánh giá
- Phần bảng giá và lời kêu gọi tải ứng dụng/App Store
- Các màn hình ứng dụng di động hiển thị bên cạnh thiết kế web để tạo thành một hệ sinh thái sản phẩm gắn kết
Định hướng phong cách:
- Giao diện bóng bẩy, tối giản, hiện đại
- Thẩm mỹ thương hiệu thể hình cao cấp
- Khoảng cách mượt mà, phân cấp thị giác rõ ràng, các thẻ bo góc, đổ bóng mềm mại
- Giao diện chế độ tối (dark mode) với các màu nhấn tràn đầy năng lượng như xanh dương ánh điện, xanh neon hoặc cam rực rỡ
- Nghệ thuật chữ (typography) sắc nét, biểu đồ chân thực, các nút bấm trau chuốt, trải nghiệm onboarding đẹp mắt
- Thiết kế sản phẩm chi tiết cao, chất lượng startup, xứng tầm Dribbble
- Bản trình bày case study UX chân thực, không phải hoạt hình hay hình minh họa
Bố cục:
- Bản mockup toàn bộ trang chủ website
- Nhiều phần giao diện hiển thị trong một bản trình bày trau chuốt
- Trưng bày sản phẩm theo góc nhìn hơi nghiêng hoặc nhìn thẳng trực diện
- Nền sạch sẽ với hiệu ứng chuyển màu (gradient) tinh tế và ánh sáng chuyên nghiệp
- Kết xuất văn bản cực kỳ chi tiết, sắc nét, bố cục cân đối về mặt thị giác
Đầu ra:
Một ý tưởng thiết kế UI/UX ấn tượng, chân thực cho trang web và bảng điều khiển ứng dụng thể hình trông đã sẵn sàng để phát triển.
Làm cho nó trông giống như một bản trình bày thiết kế sản phẩm Figma thực tế dành cho một startup cao cấp.Mẹo sử dụng
Có thể linh hoạt thay đổi màu nhấn (như xanh neon, cam rực rỡ) và các chỉ số sức khỏe hiển thị trên dashboard để phù hợp với bộ nhận diện thương hiệu của bạn.
Nguồn và quyền sử dụng
- Nguồn
- https://x.com/pwealthydad/status/2046609300605260193
- Tác giả gốc
- Stephen Day | Google AI, Agents & Vibe Coding
- License prompt
- CC-BY-4.0
- License ảnh
- CC-BY-4.0