# UI/UX 界面稿

### 手机记账 App 界面稿

<img src="assets/uiux-mockups/mobile-budgeting-app-neobank.webp" alt="mobile budgeting app neobank" width="420" loading="lazy" decoding="async"/>

```text
为一家名为 AURAE 的虚构数字银行设计一张精致的手机理财 App 界面稿，显示在 1290x2796 的智能手机屏幕上，正面朝向，背景是柔和的米白色，带细微阴影。使用沉稳的配色：深海军蓝、薄荷绿、暖灰和白色。做一个完整的首页，字体清晰、间距干净、卡片圆角、图标对齐精确。顶部页眉包含画面内文字 "AURAE"、"Good morning, Lina" 和 "Total balance $12,480.36"。加入三个摘要标签，分别为 "Income +$4,200"、"Spent -$1,830" 和 "Saved 32%"。展示一张周支出柱状图，标签为 "Mon Tue Wed Thu Fri Sat Sun"，以及一个近期交易列表，包含 "Metro Pass $18.50"、"Green Bowl $14.20" 和 "Rent $1,240.00"。底部导航栏包含 "Home"、"Cards"、"Budget" 和 "Profile"。优先保证清晰的界面层级、真实的手机 App 风格、锐利的标签，以及可直接上线品质的界面稿展示。
```

### 桌面端运营看板

<img src="assets/uiux-mockups/desktop-analytics-dashboard-operations.webp" alt="desktop analytics dashboard operations" width="420" loading="lazy" decoding="async"/>

```text
为一个名为 HELIX OPS 的虚构平台制作一张高端桌面端 SaaS 数据分析看板界面稿，显示在 16:10、1600x1000 的显示器画布上。使用冷色调配色：板岩灰、钴蓝、青绿、浅灰和白色，带细微的玻璃质感面板和严格的网格对齐。布局应包括左侧边栏、顶部筛选栏、KPI 卡片、折线图、数据表格和告警面板。字体清晰、标签正确。画面内文字包括："HELIX OPS"、"Operations Overview"、"Last 30 Days"、"Uptime 99.982%"、"Tickets 184"、"Latency 42 ms" 和 "Conversion 6.4%"。展示一张标签从 "Apr 1" 到 "Apr 30" 的折线图、一张标题为 "Traffic Sources" 的环形图，以及一张列名为 "Site"、"Status"、"Region" 和 "Load" 的表格。加入告警胶囊标签，内容为 "3 Critical" 和 "12 Warning"。构图应当真实、可直接用于演示，层级清晰、间距精确、留白均衡，看板界面渲染极其锐利。
```

### 设计系统组件卡片集

<img src="assets/uiux-mockups/design-system-component-card-set.webp" alt="design system component card set" width="420" loading="lazy" decoding="async"/>

```text
为一套名为 LUMEN UI 的虚构产品设计语言生成一块干净的设计系统总览板，在 2048x2048 画布上排成正方形组件陈列。使用中性配色：象牙白、炭灰、低饱和蓝、鼠尾草绿，外加珊瑚红点缀。构图应当是一个井然有序的卡片网格，展示按钮、输入框、徽标、开关、标签页、头像、提示条和价格卡片。字体清晰、间距均匀、阴影细微、对齐精确，就像从专业设计工具里导出的一样。加入带标签的分区，画面内文字为 "LUMEN UI"、"Buttons"、"Inputs"、"Status"、"Cards" 和 "Type Scale"。加入示例按钮文案 "Primary"、"Secondary" 和 "Danger"；徽标文案 "Success"、"Pending" 和 "Error"；以及字体样张 "Display 48"、"Heading 24" 和 "Body 16"。确保整块展板有系统感、有编排感、极其易读，层级清晰、标签正确、组件风格统一精致，适合放进设计系统图库。
```

### Web3 钱包界面概念稿

<img src="assets/uiux-mockups/web3-wallet-app-concept.webp" alt="web3 wallet app concept" width="420" loading="lazy" decoding="async"/>

```text
为一款名为 NOVA VAULT 的虚构钱包设计一张高端手机 Web3 钱包 App 界面稿，显示在 1179x2556 的手机屏幕上，居中置于深石墨色背景上，带淡淡的极光渐变。使用精致的配色：黑色、电光青、祖母绿、紫蓝和柔白。App 应当现代而可信，字体清晰，只在有用的地方用玻璃拟态（glassmorphism），金融界面要足够清楚。画面内文字包括："NOVA VAULT"、"Portfolio $48,920.14"、"24h +3.82%"、"Send"、"Receive"、"Swap" 和 "History"。展示代币卡片，标为 "SOLAR 18.42"、"LATTICE 244.7" 和 "USDX 12,840.00"，附小型迷你走势图（sparkline）。加入一个安全区块，内容为 "Shield Level 96"，以及一个标为 "Mainnet" 的网络选择器。加入一个近期动态列表，包含 "Swap SOLAR to USDX"、"Received 240 LATTICE" 和 "Gas 0.0021"。优先保证标签清晰、数字准确、层级分明、钱包交互体验可信，界面细节精致且适合 gpt-image-2 生成。
```

### 健康追踪 App 界面稿

<img src="assets/uiux-mockups/health-tracker-wellness-app.webp" alt="health tracker wellness app" width="420" loading="lazy" decoding="async"/>

```text
为一款名为 VITA LOOP 的虚构健康产品制作一张精致的手机健康追踪 App 界面，显示在一台长屏智能手机上，界面审美明亮、有杂志感。使用柔和薄荷绿、深森林绿、奶油色、珊瑚红和冷灰。编排一个每日概览页面，包含干净的卡片、圆形进度环、迷你图表和整洁的底部导航。画面内文字清晰："VITA LOOP"、"Daily Summary"、"Steps 8,420"、"Sleep 7.6 h"、"Heart Rate 64 bpm" 和 "Hydration 2.1 L"。加入三个进度环，标为 "Move 78%"、"Recovery 84%" 和 "Focus 66%"。展示一张标签为 "Mon Tue Wed Thu Fri Sat Sun" 的周图表，以及两个按钮，文案为 "Log Meal" 和 "Start Session"。加入一张健康洞察卡片，文字为 "Recovery improved 12% this week"。成品应当可直接上线、有医疗产品的洁净感、间距讲究、渲染锐利，并针对清晰的字体和准确的标签做了优化。
```