Material 3 Travel Booking App
English full prompt
A pixel-perfect Android mockup following Material Design 3 guidelines for a flight and hotel booking app in light mode. The screen shows a search-results list for flights from Tokyo to Lisbon. At the top, a Material 3 search bar with rounded pill shape shows "Tokyo → Lisbon · Aug 14 · 1 adult". Below are filter chips ("Cheapest", "Fastest", "1 Stop", "Morning") in outlined style with tonal highlight on the selected chip. Each flight card is an elevated surface (2dp) with airline logo placeholder circle, departure/arrival times in large 20px medium weight, layover city, total duration, and price badge in M3 primary color (deep indigo). The bottom navigation bar has four icons: Search, Trips, Saved, Profile. Dynamic color tones use a warm sand primary with deep indigo accents. Cards have 12dp corner radius. Typography is the M3 type scale with Display Small for prices. Status bar shows Android system icons correctly. One card is visually highlighted as "Best Value" with a tonal indigo chip. 中文完整提示词
一张遵循 Material Design 3 规范的 现代移动系统 机票与酒店预订 App 浅色模式像素级 mockup。顶部 M3 搜索栏显示 「上海 → 成都 · 8月14日 · 1人」,筛选芯片行,多张航班卡片展示出发/到达时间、中转信息、时长与价格。底部导航栏四个图标,主色为暖沙色搭配深靛蓝强调色,12dp 圆角,「最佳选择」 标签芯片突出显示最优选项。
Related cases
-
Dark Finance Dashboard Glassmorphism
A pixel-perfect desktop web app mockup of a personal finance dashboard rendered in glassmorphism style. The layout uses a dark navy background (#0D1117) with frosted-glass panels…
-
iOS Meditation App Onboarding
A pixel-perfect iOS 17 onboarding screen for a meditation app, shown in iPhone 15 Pro device frame at natural perspective with a slight tilt. The screen is the third of five steps…
-
Apple Watch Workout Ring Screen
A pixel-perfect smartwatch UI mockup displayed on a 45mm square watch face with rounded corners and a black OLED background. The screen shows an active outdoor run workout. Three…
-
E-Commerce Product Detail iOS Screen
A pixel-perfect iOS e-commerce product detail screen shown in an iPhone 15 device frame, light mode. The top 45% of the screen is a full-bleed product image carousel showing a min…