9.0 KiB
9.0 KiB
Dashboard 原型图提示词
视觉风格：现代极简（Minimalism）- 保持现有 Warm 主题设计风格 配色方案：Warm 浅色系（米白背景 #FAFAF8、白色卡片、深灰文字 #121212） 目标平台：网页（Web Desktop）
当前颜色方案参考
| 用途 | 颜色值 | 说明 |
|---|---|---|
| 页面背景 | #FAFAF8 | 温暖的米白色 |
| 卡片背景 | #FFFFFF | 纯白 |
| 边框 | #E6E4E1 | 浅灰褐色 |
| 主文字 | #121212 | 近黑色 |
| 次要文字 | #6B6B6B | 中灰色 |
| 成功状态 | #3E4A3A + green-500 | 深橄榄绿 + 亮绿指示点 |
| 警告状态 | #4A4A3A + yellow-50 | 深黄褐 + 浅黄背景 |
| 信息状态 | #3A3A3A + blue-50 | 深灰 + 浅蓝背景 |
页面 1：Dashboard 主界面（正常状态）
页面说明：用户登录后的首页，显示文档统计、数据质量、活跃模型状态和最近活动
提示词：
A modern web application dashboard UI for a document annotation system, main overview page, warm minimalist design theme, page background color #FAFAF8 warm off-white, single column layout with header navigation at top, content area below with multiple sections, top section shows: 4 equal-width stat cards in a row on white #FFFFFF background with subtle border #E6E4E1, first card Total Documents (38) with gray file icon on #FAFAF8 background, second card Complete (25) with dark olive green checkmark icon on light green #dcfce7 background, third card Incomplete (8) with orange alert icon on light orange #fef3c7 background, fourth card Pending (5) with blue clock icon on light blue #dbeafe background, each card has icon top-left in rounded square and large bold number in #121212 with label below in #6B6B6B, cards have subtle shadow on hover, middle section has two-column layout (50%/50%): left panel white card titled DATA QUALITY in uppercase #6B6B6B with circular progress ring 120px showing 78% in center with green #22C55E filled portion and gray #E5E7EB remaining, percentage text 36px bold #121212 centered in ring, text Annotation Complete next to ring, stats list below showing Complete 25 and Incomplete 8 and Pending 5 with small colored dots, text button View Incomplete Docs in primary color at bottom, right panel white card titled ACTIVE MODEL showing v1.2.0 - Invoice Model as title in bold #121212, thin horizontal divider #E6E4E1 below, three-column metrics row displaying mAP 95.1% and Precision 94% and Recall 92% in 24px bold with 12px labels below in #6B6B6B, info rows showing Activated 2024-01-20 and Documents 500 in 14px, training progress section at bottom showing Run-2024-02 with horizontal progress bar, below panels is full-width white card RECENT ACTIVITY section with list of 6 activity items each 40px height showing icon on left and description text in #121212 and relative timestamp in #6B6B6B right aligned, activity icons: rocket in purple for model activation, checkmark in green for training complete, edit pencil in orange for annotation modified, file in blue for document uploaded, x in red for training failed, subtle hover background #F1F0ED on activity rows, bottom section is SYSTEM STATUS white card showing Backend API Online with bright green #22C55E dot and Database Connected with green dot and GPU Available with green dot, all text in #2A2A2A, Inter font family, rounded corners 8px on all cards, subtle card shadow, UI/UX design, high fidelity mockup, 4K resolution, professional, Figma style, dribbble quality
页面 2：Dashboard 空状态（无活跃模型）
页面说明：系统刚部署或无训练模型时的引导界面
提示词：
A modern web application dashboard UI for a document annotation system, empty state variation, warm minimalist design theme, page background #FAFAF8 warm off-white, single column layout with header navigation, top section shows: 4 stat cards on white background with #E6E4E1 border, all showing 0 values, Total Documents 0 with gray icon, Complete 0 with muted green, Incomplete 0 with muted orange, Pending 0 with muted blue, middle section two-column layout: left DATA QUALITY panel white card shows circular progress ring at 0% completely gray #E5E7EB with dashed outline style, large text 0% in #6B6B6B centered, text No data yet below in muted color, empty stats all showing 0, right ACTIVE MODEL panel white card shows empty state with large subtle model icon in center opacity 20%, text No Active Model as heading in #121212, subtext Train and activate a model to see stats here in #6B6B6B, primary button Go to Training at bottom, below panels RECENT ACTIVITY white card shows empty state with Activity icon centered at 20% opacity, text No recent activity in #121212, subtext Start by uploading documents or creating training jobs in #6B6B6B, bottom SYSTEM STATUS card showing all services online with green #22C55E dots, warm color palette throughout, Inter font, rounded corners 8px, subtle shadows, friendly and inviting empty state design, UI/UX design, high fidelity mockup, 4K resolution, professional, Figma style
页面 3：Dashboard 训练中状态
页面说明：有模型正在训练时，Active Model 面板显示训练进度
提示词：
A modern web application dashboard UI for a document annotation system, training in progress state, warm minimalist theme with #FAFAF8 background, header with navigation, top section: 4 white stat cards with #E6E4E1 borders showing Total Documents 38, Complete 25 with green icon on #dcfce7, Incomplete 8 with orange icon on #fef3c7, Pending 5 with blue icon on #dbeafe, middle section two-column layout: left DATA QUALITY white card with 78% progress ring in green #22C55E, stats list showing counts, right ACTIVE MODEL white card showing current model v1.1.0 in bold #121212 with metrics mAP 93.5% Precision 92% Recall 88% in grid, below a highlighted training section with subtle blue tint background #EFF6FF, pulsing blue dot indicator, text Training in Progress in #121212, task name Run-2024-02, horizontal progress bar 45% complete with blue #3B82F6 fill and gray #E5E7EB track, text Started 2 hours ago in #6B6B6B below, RECENT ACTIVITY white card below with latest item showing blue spinner icon and Training started Run-2024-02, other activities listed with appropriate icons, SYSTEM STATUS card at bottom showing GPU Available highlighted with green dot indicating active usage, warm color scheme throughout, Inter font, 8px rounded corners, subtle card shadows, UI/UX design, high fidelity mockup, 4K resolution, professional, Figma style
页面 4：Dashboard 移动端响应式
页面说明：移动端（<768px）下的单列堆叠布局
提示词：
A modern mobile web application dashboard UI for a document annotation system, responsive mobile layout on smartphone screen, warm minimalist theme with #FAFAF8 background, single column stacked layout, top shows condensed header with hamburger menu icon and logo, below 2x2 grid of compact white stat cards with #E6E4E1 borders showing Total 38 Complete 25 Incomplete 8 Pending 5 with small colored icons on tinted backgrounds, DATA QUALITY section below as full-width white card with smaller progress ring 80px showing 78% in green #22C55E, horizontal stats row compact, ACTIVE MODEL section below as full-width white card with model name v1.2.0 in bold, compact metrics row showing mAP Precision Recall values, RECENT ACTIVITY section full-width white card with scrollable list of 4 visible items with icons and timestamps in #6B6B6B, compact SYSTEM STATUS bar at bottom with three green #22C55E status dots, warm color palette #FAFAF8 background white cards #121212 text, Inter font, touch-friendly tap targets 44px minimum, comfortable 16px padding, 8px rounded corners, iOS/Android native feel, UI/UX design, high fidelity mockup, mobile screen 375x812 iPhone size, professional, Figma style
使用说明
- 将提示词复制到 AI 绘图工具（如 Midjourney、DALL-E、Stable Diffusion）
- 建议先生成「页面 1：主界面」验证风格是否匹配现有设计
- 提示词已包含你现有的颜色方案：
- 页面背景：#FAFAF8（温暖米白）
- 卡片背景：#FFFFFF（白色）
- 边框：#E6E4E1（浅灰褐）
- 主文字：#121212（近黑）
- 次要文字：#6B6B6B（中灰）
- 成功色：#22C55E（亮绿）/ #3E4A3A（深橄榄绿文字）
- 图标背景：#dcfce7（浅绿）/ #fef3c7（浅黄）/ #dbeafe（浅蓝）
- 如果生成结果颜色有偏差，可以在后期用 Figma 调整
Tailwind 类参考（开发用）
背景：bg-warm-bg (#FAFAF8)
卡片：bg-warm-card (#FFFFFF)
边框：border-warm-border (#E6E4E1)
主文字：text-warm-text-primary (#121212)
次要文字：text-warm-text-secondary (#2A2A2A)
灰色文字：text-warm-text-muted (#6B6B6B)
悬停背景：bg-warm-hover (#F1F0ED)
成功状态：text-warm-state-success (#3E4A3A)
绿色图标背景：bg-green-50 (#dcfce7)
黄色图标背景：bg-yellow-50 (#fef3c7)
蓝色图标背景：bg-blue-50 (#dbeafe)
绿色指示点：bg-green-500 (#22C55E)