22 KiB
22 KiB
DDS 文档 → Google Stitch UI 设计 Prompt 转换指南
本文档提供一套系统化的方法论，用于将软件系统的 DDS（详细设计说明书） 转换为 Google Stitch 能够理解并生成高质量 UI 设计的 prompt。
一、转换方法论总览
核心思路：Zoom-Out → Zoom-In 分层提取
DDS 文档
├── 第1层：系统全局上下文（Zoom-Out） → Stitch 全局系统 prompt
├── 第2层：页面级结构提取 → Stitch 逐页设计 prompt
├── 第3层：组件级细节提取 → Stitch 组件精修 prompt
└── 第4层：交互与联动提取 → Stitch 交互追加 prompt
Important
Google Stitch 的最佳实践是分步生成、逐步精修，不要试图一次性生成整个系统的 UI。建议按页面逐一生成，每个页面先生成骨架，再通过迭代精修细节。
DDS 信息提取清单
从 DDS 文档中需要提取的 UI 相关信息：
| 提取维度 | DDS 中的对应章节 | 提取要点 |
|---|---|---|
| 系统定位与目标用户 | §1 项目背景 / PRD | 产品类型、面向人群、核心价值主张 |
| 页面结构与路由 | §3.1 页面结构与路由 | 有哪些页面、层级关系、导航结构 |
| 页面布局 | §3.3 核心页面设计 | ASCII 布局图、区域划分、信息层级 |
| 图表与数据可视化 | 数据可视化 DDS | 图表类型、数据维度、色彩规范 |
| 色彩系统 | §8.1 统一色彩系统 | 语义化色板、分类色板、品牌色 |
| 组件清单 | §3.2 项目结构 | Vue 组件列表、功能定义 |
| 数据模型 | §2.3 数据模型 | 实体关系、字段定义（用于理解界面数据） |
| API 接口 | §2.4 API 接口 | 数据结构（用于理解界面需要展示什么数据） |
二、Prompt 模板体系
🔹 Step 0：全局 Design Token Prompt（系统级，仅需执行一次）
目的：为 Stitch 建立设计系统的基础约束，后续每个页面 prompt 可引用此上下文。
【系统设计基调 Prompt】
我正在设计一个名为「ProjectMoneyX」的个人全景财务分析系统的 Web 端 UI。
### 产品定位
- 这是一款面向个人用户的财务数据分析工具
- 核心功能：多源账单导入（支付宝/微信/银行）→ 智能去重 → 多维可视化分析 → 预算管理
- 用户画像：25-40岁的白领/自由职业者，关注个人财务健康，有一定数据分析意识
- 使用场景：主要在桌面端浏览器使用，每周查看1-2次财务报告
### 设计风格要求
- 整体风格：现代金融科技（FinTech）风格，专业但不冰冷
- 设计语言：类似 Material Design 3 的圆角卡片式布局
- 色彩基调：
- 主色/中性蓝：#4F6EF7（Indigo-500），用于品牌调性和信息展示
- 正向/收入色：#10B981（Emerald-500），用于收入、正常状态
- 负向/支出色：#EF4444（Red-500），用于支出、超支预警
- 警告色：#F59E0B（Amber-500），用于临近阈值提醒
- 背景色：#F8FAFC（浅灰白），卡片背景白色
- 字体：使用系统字体 + Noto Sans SC（中文）
- 布局：左侧固定导航栏 + 右侧主内容区的经典 Dashboard 布局
- 深色模式支持：需要考虑暗色主题的兼容性
### 导航结构（侧边栏菜单）
1. 📊 仪表盘（Dashboard）— 默认首页
2. 📋 账单管理（Bills）
3. 📤 账单导入（Import）
4. 🏦 账户管理（Accounts）
5. 💰 预算管理（Budget）
6. 📈 多维分析（Analysis）
7. ⚙️ 规则配置（Rules）
请为这个系统设计一致的视觉风格。所有页面文字使用中文。
🔹 Step 1：仪表盘页面（DashboardView）
从 DDS §3.3.1 + 数据可视化 DDS §1 提取
【仪表盘页面设计 Prompt】
为「ProjectMoneyX 个人全景财务分析系统」设计仪表盘（Dashboard）页面。
### 页面目标
用户打开系统后的第一个页面，需要在一屏内快速获取个人财务健康全貌。
### 页面布局（从上到下）
**第一行：核心指标卡片区（3个等宽卡片）**
- 卡片1「净资产」：显示 ¥116,500，下方小字"较上月 ↑3.2%"，背景带有淡蓝色渐变
- 卡片2「本月收入」：显示 ¥15,000，下方 ↑5.2%（绿色箭头），图标用收入符号
- 卡片3「本月支出」：显示 ¥8,200，下方 ↓3.1%（绿色箭头表示支出减少是好事），图标用支出符号
- 每个卡片都有圆角、微弱阴影、悬停时轻微上浮动画
**第二行：图表区（2列布局，左宽右窄，比例约 6:4）**
- 左侧「净资产趋势图」：面积折线图，展示近12个月的净资产、总资产、总负债三条线
- 净资产线为实线蓝色(#4F6EF7)带半透明渐变填充
- 总资产为绿色虚线(#10B981)
- 总负债为红色虚线(#EF4444)
- 图表上方有标题"净资产趋势"和时间范围选择器（近6月/近12月/全部）
- 右侧「月度现金流对比」：柱状图+折线图混合
- 绿色柱=收入，红色柱=支出，蓝色折线=结余
- 亏损月份的柱状图背景有淡红色标记
**第三行：资产构成区（全宽）**
- 「各账户资产构成」：堆叠面积图，展示各账户余额随时间的构成变化
- 包含：招行储蓄卡、支付宝余额、微信零钱等正向资产（向上堆叠）
- 以及：招行信用卡、花呗等负债（负值向下延伸）
- 图表外框是白色卡片容器，有圆角和阴影
### 视觉要求
- 卡片之间有 16px 间距
- 图表容器统一使用白色圆角卡片（border-radius: 12px）
- 页面顶部有"仪表盘"标题和全局时间筛选器
- 所有数字使用等宽字体，金额显示千分位分隔符
- 页面内容使用中文
请生成一个专业的、现代化的仪表盘页面设计。
🔹 Step 2：账单导入页（ImportView）
从 DDS §3.3.2 + 数据可视化 DDS §7 提取
【账单导入页设计 Prompt】
为「ProjectMoneyX」设计账单导入页面。
### 页面目标
引导用户完成账单文件的上传和导入，展示导入结果和历史导入质量。
### 页面布局
**上半部分：导入操作区（卡片式步骤引导，Step 1-2-3 横向流程）**
- Step 1「选择来源」：
- 展示 4-6 个可选来源的图标卡片（横向排列）
- 每个卡片包含图标和名称：支付宝（蓝色）、微信支付（绿色）、招商银行（红色）、工商银行（红色）、京东（红色）、美团（黄色）
- 选中状态：卡片边框高亮 + 勾选标记
- 卡片之间 12px 间距，悬停有缩放效果
- Step 2「上传文件」：
- 大尺寸拖拽上传区域（虚线边框，中间云上传图标 + 文字"拖拽文件到此处，或点击选择"）
- 支持的格式提示文字：CSV / XLS / PDF
- 上传中显示进度条
- Step 3「导入结果」：
- 导入成功后显示统计卡片行：
- ✅ 解析 150 条（蓝色）
- ✅ 新导入 132 条（绿色）
- ⚠️ 去重跳过 15 条（橙色）
- 🔗 链路合并 3 条（蓝色）
- ❌ 失败 0 条（灰色）
**下半部分：导入历史质量图表（全宽卡片）**
- 标题：「导入质量趋势」
- 堆叠柱状图：X轴为最近10次导入批次，Y轴为条数
- 绿色段=新导入数，橙色段=去重数，蓝色段=合并数，红色段=失败数
- 图表下方有最近导入记录表格，显示时间、来源、各项统计
### 视觉要求
- 步骤之间用连接线或箭头串联，当前步骤高亮
- 未到达的步骤灰化处理
- 整体卡片式布局，白色圆角卡片 + 淡灰背景
- 页面所有文字使用中文
🔹 Step 3：多维分析页（AnalysisView）
从 DDS §3.3.3 + 数据可视化 DDS §2-4 提取
【多维分析页设计 Prompt】
为「ProjectMoneyX」设计多维分析页面，这是系统中数据可视化最丰富的页面。
### 页面目标
提供深度的收支分析能力，帮助用户理解"钱花在哪了"和"钱从哪来"。
### 页面结构
**顶部：全局筛选栏**
- 时间范围选择器（日期区间 picker）
- 快捷选项按钮组：本月 / 近3月 / 近6月 / 近1年 / 自定义
- 页面标题左侧显示"多维分析"
**Tab 标签页切换（3个 Tab）**
---
**Tab 1：支出分析**
- 左右两列布局（5:5）
- 左侧「支出结构环形图」：
- 大尺寸环形图（Donut），中心显示"总支出 ¥9,820"
- 外侧标签：餐饮 32.6%、购物 25.5%、交通 12.2% 等
- 支持点击某分类后下钻到二级分类（如 餐饮→外卖/堂食/咖啡）
- 下钻后顶部出现面包屑导航 "全部 > 餐饮"
- 颜色使用分类色板：#4F6EF7、#10B981、#F59E0B、#EF4444、#8B5CF6...
- 右侧「分类支出趋势折线图」：
- 多条折线，每条代表一个支出分类
- 默认展示前5大分类，其余折叠
- 底部有缩放滑块，支持拖拽查看任意时间段
- 颜色与左侧环形图一致（跨图表颜色同步）
- 下方全宽「收支日历热力图」：
- 日历格子视图，展示每日消费强度
- 颜色从浅绿(低消费)渐变到深红(高消费)
- 悬停显示该日总额和前3笔最大账单
- 支持月份/年份切换
---
**Tab 2：资金流向**
- 全宽展示「资金流向桑基图」（Sankey Diagram）⭐ 核心图表
- 三列布局：左列=收入来源（工资、兼职、投资收益），中列=资金池/账户（招行储蓄、支付宝、微信），右列=支出分类（餐饮、购物、居住、储蓄）
- 流线颜色使用源到目标的渐变色
- 悬停高亮相邻节点和链接，淡化其他
- 节点标签：左列左对齐，中列居中，右列右对齐
- 整体图表高度 500px 以上，确保信息清晰
---
**Tab 3：收入分析**
- 「收入来源环形图」：与支出环形图对称设计
- 中心显示"总收入 ¥15,000"
- 使用绿色系配色：#10B981、#34D399、#6EE7B7、#A7F3D0
- 分类：工资、兼职收入、理财收益、转账收款等
### 视觉要求
- Tab 切换使用底部指示线动画
- 所有图表统一白色卡片容器，带标题栏
- 图表标题栏右侧可放置图表操作图标（下载、全屏等）
- 页面所有文字使用中文
🔹 Step 4：预算管理页（BudgetView）
从 DDS §4.2 + 数据可视化 DDS §5 提取
【预算管理页设计 Prompt】
为「ProjectMoneyX」设计预算管理页面。
### 页面目标
直观展示各分类预算执行进度，快速识别超支和节省项。
### 页面布局
**顶部：月份选择器 + 操作按钮**
- 左侧：月份选择器（< 2026年2月 >），可左右切换
- 右侧：「设置预算」按钮（主色调），点击弹出预算编辑弹窗
**第一行：全局预算仪表盘（居中，大号）**
- 单个大尺寸仪表盘（Gauge），展示全局预算使用率
- 弧形进度条：0-79% 绿色 → 80-99% 橙色 → ≥100% 红色
- 中心显示百分比数字 + "¥8,200 / ¥10,000"
- 标题"全局预算"在仪表盘下方
**第二行：分类预算仪表盘阵列（网格布局，3-4列）**
- 每个分类一个小号仪表盘卡片，包含：
- 分类图标 + 分类名称
- 环形进度条（同样三段变色逻辑）
- 中心数字：82% + "¥2,400/¥3,000"
- 超支的卡片有红色边框闪烁效果
- 示例分类：餐饮(80%⚠️)、交通(65%✅)、购物(110%🔴)、居住(45%✅)、娱乐(30%✅)
**第三行：预算 vs 实际对比柱状图（全宽卡片）**
- 分组柱状图：每个分类两根柱子
- 浅蓝柱=预算限额
- 动态色柱=实际支出（未超支绿色，超支红色）
- 100% 预算位置有水平参考虚线
- tooltip 显示差额和百分比
### 视觉要求
- 仪表盘弧度动画：页面加载时从0动画填充到目标值
- 超支项有强烈的红色视觉提示（不仅是颜色，还有图标/徽章）
- 分类卡片支持悬停展开详情
- 页面所有文字使用中文
🔹 Step 5：账户管理页（AccountView）
从 DDS §3.1 + 数据可视化 DDS §6 提取
【账户管理页设计 Prompt】
为「ProjectMoneyX」设计账户管理页面。
### 页面目标
管理用户的所有资金账户，查看各账户余额和交易流水。
### 页面布局
**顶部：账户总览卡片行**
- 横向卡片滚动/网格，每个账户一个卡片：
- 卡片上半部分：账户图标 + 账户名称 + 账户类型标签（储蓄卡/信用卡/电子钱包）
- 卡片下半部分：当前余额（大字加粗）
- 储蓄卡类：蓝色系渐变背景
- 信用卡类：红色系渐变背景，额外显示"已用额度/总额度"
- 电子钱包类：紫色系渐变背景
- 右上角有编辑和删除小图标
- 最右侧有一个虚线框的「+ 添加账户」卡片
**下半部分：选中账户的详情区**
- 选中某个账户卡片后，下方展示该账户的详情：
- 左侧（6/10宽度）「账户收支瀑布图」：
- 瀑布柱状图，展示月内余额逐笔变化
- 起始柱（月初余额）→ 绿色向上柱（收入）→ 红色向下柱（支出）→ 蓝色终止柱（月末余额）
- 每根柱子上方/下方标注金额变化
- 月份选择器在图表标题栏
- 右侧（4/10宽度）：账户信息卡片
- 账户名称、类型、币种
- 本月收入合计 / 支出合计 / 净变化
- 最近 5 笔交易列表
### 视觉要求
- 账户卡片类似银行卡片造型，有微光泽/渐变效果
- 选中账户卡片有高亮边框 + 下方指示箭头
- 页面所有文字使用中文
🔹 Step 6：账单管理页（BillListView）
【账单管理页设计 Prompt】
为「ProjectMoneyX」设计账单管理页面。
### 页面目标
支持多维条件筛选和查看所有账单记录。
### 页面布局
**顶部：高级筛选面板（可展开/收起的卡片）**
- 第一行筛选项：时间范围（日期区间）、交易类型（收入/支出/全部 按钮组）
- 第二行筛选项：金额区间（最小~最大）、账户（下拉选择）、分类（级联选择器）、来源（支付宝/微信等 多选）
- 第三行：关键词搜索框（搜索交易对方/商品说明）+ 「查询」按钮 + 「重置」按钮
- 展开/收起按钮，默认只显示第一行
**主体：账单数据表格**
- 表头列：日期、交易对方、商品说明、金额、交易类型、分类、账户、来源
- 金额列：收入行显示绿色正数，支出行显示红色负数
- 交易类型列：使用小标签（tag），收入=绿tag，支出=红tag
- 来源列：显示对应图标（支付宝/微信等小logo）
- 每行末尾有操作列：查看详情、编辑、删除
- 表格支持列排序（点击表头）
- 底部分页器：显示总条数，每页20/50/100条切换
**表格上方工具栏**
- 左侧：显示匹配结果数"共 500 条记录"
- 右侧：导出按钮、列设置按钮
### 视觉要求
- 表格偶数行有浅灰背景（斑马纹）
- 悬停行高亮
- 支出和收入行的金额颜色区分明显
- 页面所有文字使用中文
🔹 Step 7：规则配置页（RuleView）
【规则配置页设计 Prompt】
为「ProjectMoneyX」设计规则配置页面。
### 页面目标
让用户管理自动分类映射规则和账户路由规则，控制 ETL 数据清洗行为。
### 页面布局
**Tab 切换：分类规则 / 账户路由规则**
---
**Tab 1：分类映射规则**
- 顶部：「+ 新增规则」按钮
- 规则列表（卡片式，非表格）：
- 每条规则一个卡片，显示：
- 匹配条件：标识标签 "交易对方" 或 "商品说明"，后面显示正则表达式（代码样式）
- 箭头 →
- 目标分类："餐饮-咖啡" (带分类颜色标签)
- 优先级数字徽章
- 启用/禁用切换开关
- 编辑/删除操作图标
- 规则按优先级降序排列，高优先级规则排在前面
- 支持拖拽排序调整优先级
---
**Tab 2：账户路由规则**
- 类似的卡片式列表：
- 来源标签："支付宝"（蓝色标签）
- 匹配方式：支付方式包含 "招商银行信用卡"
- 箭头 →
- 目标账户："招行信用卡" (带账户类型图标)
**新增/编辑弹窗**
- 表单弹窗：选择匹配字段、输入正则表达式、选择目标分类/账户、设置优先级
- 有"测试规则"按钮，可输入样例文本测试匹配结果
### 视觉要求
- 规则卡片之间有清晰的分隔
- 正则表达式用等宽字体 + 代码背景色展示
- 箭头使用 → 图标表达映射关系
- 页面所有文字使用中文
三、迭代精修 Prompt 模板
在 Stitch 生成初版设计后，使用以下追加 prompt 进行精修：
3.1 交互动效精修
请为当前设计添加以下交互效果：
1. 卡片悬停时轻微上浮（translateY: -2px）+ 阴影加深
2. 数字指标在页面加载时有从0到目标值的计数动画
3. Tab 切换时有滑动过渡效果
4. 图表区域在进入视口时有淡入+上滑的入场动画
5. 按钮点击有涟漪扩散效果（Material Design ripple）
3.2 响应式适配
请调整当前设计的响应式布局：
- 桌面端（≥1280px）：侧边栏固定展开 + 主内容区自适应
- 平板端（768-1279px）：侧边栏收起为图标模式，主内容区全宽
- 移动端（<768px）：侧边栏变为底部 Tab 导航，卡片竖向堆叠
- 仪表盘的三列卡片在移动端变为单列
- 图表在小屏下高度等比缩小，保持可读性
3.3 暗色模式
请为当前设计创建暗色模式版本：
- 背景色从 #F8FAFC 变为 #0F172A（深蓝灰）
- 卡片背景从白色变为 #1E293B
- 文字颜色从深灰变为 #E2E8F0
- 图表背景透明，网格线使用 rgba(255,255,255,0.1)
- 色彩系统中的语义色（绿/红/橙/蓝）保持不变但亮度微调
- 阴影从灰色阴影变为更深的投影
- 侧边栏背景 #1E293B，选中项高亮使用主色半透明
3.4 空状态设计
请为以下场景设计空状态界面：
1. 首次使用 - 仪表盘无数据：显示插画 + "开始导入您的第一份账单" + 引导按钮
2. 账单列表搜索无结果：显示搜索插画 + "未找到匹配的账单记录"
3. 预算页面未设置预算：显示图标 + "您还未设置任何预算" + "立即设置"按钮
4. 分析页面数据不足：显示图表插画 + "数据量不足，建议导入更多账单后查看分析"
四、高级技巧
4.1 使用 DDS 中的 ASCII 布局图
DDS 中常包含 ASCII 格式的页面布局草图，可以直接转化为 Stitch 的结构描述。
DDS 原文示例：
┌─────────────────────────────────────────────────────────┐
│ [净资产卡片] [本月收入卡片] [本月支出卡片] │
│ ¥116,500 ¥15,000 ↑5.2% ¥8,200 ↓3.1% │
├──────────────────────────┬──────────────────────────────┤
│ 收支趋势折线图 (ECharts) │ 消费结构饼图 (ECharts) │
│ (近12个月) │ (本月各分类占比) │
├──────────────────────────┴──────────────────────────────┤
│ 各账户余额一栏表 (v-data-table) │
└─────────────────────────────────────────────────────────┘
转化手法： 将 ASCII 图的区块关系、比例、信息层级直接翻译为自然语言的空间描述（上/下、左/右、占比等），如上述各页面 prompt 所示。
4.2 从 API Response 推导界面数据
DDS 中的 API 响应结构直接告诉我们界面需要展示哪些字段。
// 从 DDS 的 API 响应结构
{
"total_assets": 125000.00, → UI: "总资产 ¥125,000"
"total_liabilities": 8500.00, → UI: "总负债 ¥8,500"
"net_worth": 116500.00, → UI: "净资产 ¥116,500"（核心指标卡片）
"income_mom_pct": 5.2, → UI: "↑5.2%"（环比增长标签）
}
4.3 从色彩系统构建 Stitch Prompt
DDS §8.1 的色彩系统应该完整传递给 Stitch，确保生成的设计色彩一致。
关键做法： 在每个页面 prompt 中引用完整的语义化色彩映射（收入=绿、支出=红、警告=橙、中性=蓝），而不是仅给出色值。
4.4 Stitch 的 Experimental Mode 高级用法
如果你有系统的线框图或草图，可以使用 Stitch 的 Experimental Mode：
- 将 DDS 中的 Mermaid 图表导出为图片
- 将 ASCII 布局图在画图工具中绘制为简单线框
- 配合文字 prompt 一起上传到 Stitch Experimental Mode
- 这种图文并茂的方式能获得更精准的布局结果
五、完整工作流程
graph TD
A["1. 阅读 DDS 文档"] --> B["2. 提取 UI 相关信息"]
B --> C["3. 编写全局设计 Token Prompt"]
C --> D["4. 按页面逐一生成设计"]
D --> E["5. 使用迭代 Prompt 精修"]
E --> F{"6. 满意？"}
F -->|否| E
F -->|是| G["7. 导出为 Figma/HTML"]
G --> H["8. 结合 DDS 技术选型进行开发"]
推荐执行顺序
| 步骤 | Prompt | 预期产出 |
|---|---|---|
| 1 | Step 0: 设计基调 | 确定整体风格，不需要实际页面 |
| 2 | Step 1: 仪表盘 | 最重要的页面，奠定视觉基调 |
| 3 | Step 3: 多维分析 | 最复杂的页面，包含最多图表 |
| 4 | Step 4: 预算管理 | 仪表盘风格的延伸 |
| 5 | Step 2: 账单导入 | 流程导向页面 |
| 6 | Step 5: 账户管理 | 卡片+图表混合 |
| 7 | Step 6: 账单管理 | 表格导向页面 |
| 8 | Step 7: 规则配置 | 配置类页面 |
Tip
先攻克最重要+最复杂的页面（仪表盘和多维分析），这两个页面的设计语言确立后，其他页面可以快速复用。