黑哥 AI
切换中文
Mobile is supported. For large previews, filtering, and copying long prompts, desktop browser is more comfortable.

Material 3 Travel Booking App

UI Mockups Material Light Mode

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