大语言模型提示词生成原型测试

提示工程是设计高质量提示词的过程，用于引导大语言模型生成准确的输出。

核心原理：LLM本质上是预测引擎，通过前文预测下一个标记。提示工程的目标是通过优化提示词的长度、结构和风格，让模型更精准地预测所需的文本序列。

参考谷歌官方提示词工程手册

https://drive.google.com/file/d/1AbaBYbEa_EbPelsT40-vj64L-2IwUJHy/preview

最佳实践总结

迭代优化：提示工程是循环过程，需不断测试、记录、调整。

灵活组合技巧：例如同时使用角色设定+逐步思考CoT+结构化JSON，输出处理复杂数据提取任务。

关注模型更新：新模型可能需调整提示策略，及时测试适配。

团队协作：多人尝试同一任务，对比不同提示词效果，择优使用。

|----|--------------------|------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|
| 序号 | 心法要点 | 核心解释 | 软件设计原型示例（提示词） | 预期输出或效果 |
| 1 | 示例引导 | 提供1-3个高质量的输入输出示例，让模型模仿特定格式或逻辑。 | 你是一个API设计助手。请根据以下示例生成新的API端点描述。示例1-输入："用户登录"；输出："POST /api/v1/login, 参数: {username, password}"。示例2-输入："获取产品列表"；输出："GET /api/v1/products, 参数: {page, size}"。现在请为"更新用户信息"生成描述。 | PUT /api/v1/users/{id}, 参数: {name, email}。模型能准确遵循已有的URL结构和参数格式。 |
| 2 | 具体说明输出约束 | 明确限定输出的格式、结构、长度及必须包含的要素。 | 生成一个用户故事。格式要求：严格遵循"作为一名[角色]，我希望[需求]，以便于[价值]"的句式。内容要求：针对"后台数据导出"功能，角色是"管理员"。输出不超过3个故事。 | 作为一名管理员，我希望能够按时间筛选导出的数据，以便于分析特定时段内的业务情况。。输出被严格限制在指定句式和范围内。 |
| 3 | 赋予模型专业角色与情景设定 | 为AI设定一个身份，使其运用相应的专业知识库和语境。提示词模板：角色、背景、任务、要求、示例 | 你是一名资深的前端架构师。请评估以下Vue组件代码的优缺点，并从性能、可维护性和安全性三个方面给出改进建议。[此处粘贴代码] | 模型会以专家的口吻回答，如："从性能角度看，建议使用懒加载组件...；可维护性方面，应将业务逻辑抽离为Composable..."。 |
| 4 | 引导逐步思考(CoT) | 对于复杂问题，要求模型展示推理过程，提升答案的准确性和逻辑性。 | 设计一个系统来处理每秒10万次的订单请求。请逐步思考： 1. 估算所需的计算资源； 2. 设计数据库分片策略； 3. 考虑缓存层方案； 4. 如何保证消息不丢失。 | 模型不会直接给结论，而是会先展示估算过程（如基于每个请求的CPU时间），再一步步推导出数据库、缓存、消息队列的详细设计方案。 |
| 5 | 结构化输出 (JSON/XML) | 要求模型返回结构化数据，便于程序解析，并能有效限制幻觉（Hallucination）。 | 提示词："从以下需求中提取信息，Keys包括：project_name, main_features (数组), target_users, priority (高/中/低)，以JSON输出。需求："我们需要开发一个智能客服系统，首要功能是自动问答和工单流转，目标用户是售后团队，优先级高。" | { "project_name": "智能客服系统", "main_features": ["自动问答", "工单流转"], "target_users": "售后团队", "priority": "高" }。格式规整，可直接被代码解析。 |
| 6 | 优先"要做什么"，少用"不要做什么" | 使用正向、明确的指令定义期望行为，而非列举负面限制。 | 更好的方式："生成一份测试用例清单，重点覆盖登录模块的'成功登录'、'密码错误'、'账户锁定'三种场景。" | 模型会聚焦于生成指定场景的测试用例，内容集中且相关。 |
| 7 | 迭代优化：发散与收敛 | 先进行开放式头脑风暴获取创意，再增加约束进行细化。 | 阶段1（发散）："为一款新型智能水杯 brainstorm 5个创新的移动App功能点子。" 阶段2（收敛）："基于点子3（水质监测），设计一个具体的用户界面原型描述，包括主页、数据图表页和设置页。" | 阶段1产出：社交分享饮水数据、定制化补水计划、水质监测、与健康App联动、游戏化激励。阶段2基于"水质监测"产出详细的页面功能列表。 |
| 8 | 明确技术栈与规范 | 指定所需的技术栈、UI框架、代码规范或架构模式。 | 使用React 18和TypeScript编写一个计数器组件。要求：使用函数式组件和Hooks（useState），按钮样式为Ant Design的Primary Button。 | 模型生成的代码会完全遵循指定的技术栈、语法规范和UI库，开箱即用。 |
| 9 | 分解复杂任务 | 将一项宏大、复杂的任务分解为多个清晰的子步骤依次完成。 | 任务：设计一个用户注册流程。步骤1：生成注册页面的前端表单字段列表（如：用户名、邮箱、密码等）。步骤2：基于步骤1的字段，设计后端接收数据的API接口定义（方法、路径、请求体）。步骤3：为这个API编写一个简单的单元测试代码片段。 | 模型会分三步输出： 1. 表单字段列表； 2.POST /api/v1/register 接口定义； 3. 针对该接口的JUnit或Jest测试代码。思路清晰，结果模块化。 |
| 10 | 系统化记录与评估 | 像管理代码一样版本化提示词，记录每次输入的上下文、模型配置和输出结果，以便复盘优化。 | 提示词版本：V1.2 记录模板： - 提示词名称/版本 - 目标 - 模型及参数（温度、Top-P等） - 完整提示文本 - 输出结果链接 - 评估笔记（如"输出幻觉较多，需增加示例"） | 目标：生成产品需求文档（PRD）模板 |

TRAE AI IDE原型生成测试

1、测试后台管理系统提示词

1.1低结构化版

提示词

生成一个"供应链管理后台"的页面原型需求文档，需包含库存管理、订单跟踪、供应商管理三个模块。

第一步：根据提示词生成需求文档

供应链管理系统需求描述文档

1. 项目概述

供应链管理系统是一个综合性的单页应用，旨在帮助企业高效管理库存、订单和供应商关系。系统提供直观的数据可视化、实时状态跟踪和便捷的管理操作，支持用户快速获取关键业务信息并做出决策。

1.1 系统目标

提供全面的供应链数据视图和分析功能
实现库存、订单和供应商的集中化管理
支持实时数据更新和状态监控
提供响应式设计，适配不同设备和屏幕尺寸
提供友好的用户界面和流畅的操作体验

2. 功能需求

2.1 仪表盘模块

仪表盘作为系统的首页，提供关键业务指标的概览和可视化展示。

2.1.1 数据概览卡片

显示总库存价值、订单总数、销售总额和供应商总数等关键指标
每个指标卡片包含当前数值、趋势变化百分比和对应图标
提供数字增长动画效果，增强视觉体验

2.1.2 数据可视化图表

库存趋势图：使用折线图展示近6个月的库存数量变化
订单状态分布图：使用环形图展示不同订单状态的占比
图表支持响应式调整和交互提示

2.1.3 最近活动列表

显示系统中的最新操作记录
每条记录包含操作类型、相关对象、执行时间和操作人员
提供快速访问相关详情的链接

2.1.4 快速操作区

提供常用功能的快捷入口
包括添加产品、新增订单、导入数据和生成报表等功能按钮

2.2 库存管理模块

库存管理模块用于实时监控和管理企业的产品库存情况。

2.2.1 库存概览图表

库存状态分布：使用饼图展示不同库存状态（充足、正常、预警、不足）的产品数量分布
类别库存比例：使用环形图展示不同产品类别的库存占比

2.2.2 库存数据表格

展示详细的产品库存信息，包括产品ID、名称、类别、库存数量、单位、预警值、状态等
支持对表格数据进行搜索、筛选和排序
每行提供编辑、查看详情和删除等操作按钮

2.2.3 分页功能

支持库存数据的分页展示
提供页码导航、上一页/下一页和每页显示数量调整功能

2.2.4 添加产品功能

提供添加新产品的模态框表单
表单包含产品名称、类别、供应商、库存数量、单位、预警值等必填和选填字段
支持表单验证和提交操作

2.2.5 产品详情查看

提供查看产品详细信息的模态框
显示产品的所有相关信息，包括基本信息、库存记录和供应商信息等

2.3 订单跟踪模块

订单跟踪模块用于管理和监控企业的订单情况。

2.3.1 订单统计图表

订单状态分布图：使用柱状图展示不同状态订单的数量
订单金额趋势图：使用折线图展示最近一周的订单金额变化趋势

2.3.2 订单数据表格

展示详细的订单信息，包括订单ID、客户信息、下单日期、订单数量、订单金额、支付方式和订单状态等
支持对订单数据进行搜索、筛选和排序
提供查看详情、编辑和删除等操作功能

2.3.3 订单详情查看

提供查看订单详细信息的模态框
显示订单的基本信息、客户信息、物流信息和订单商品列表等内容
提供打印订单、导出PDF和联系客户等操作按钮

2.4 供应商管理模块

供应商管理模块用于管理企业的供应商信息和合作关系。

2.4.1 供应商概览卡片

显示总供应商数、活跃供应商数、审核中供应商数和已停用供应商数等指标
提供供应商数量的增长趋势和占比信息

2.4.2 供应商分析图表

供应商类型分布图：使用饼图展示不同类型供应商的分布
供应商合作时长图：使用水平柱状图展示不同合作时长的供应商数量分布

2.4.3 供应商数据表格

展示详细的供应商信息，包括供应商ID、名称、类型、联系人、联系电话、合作时长和状态等
支持按供应商名称/ID搜索、按状态筛选和按类型筛选
提供导出供应商数据功能
每行提供编辑、查看详情、访问产品目录和删除等操作按钮

2.4.4 供应商详情查看

提供查看供应商详细信息的模态框
显示供应商的基本信息、联系方式、地址信息、合作信息和主要供应产品等内容
提供生成报告、编辑供应商和联系供应商等操作按钮

2.4.5 添加/编辑供应商功能

提供添加/编辑供应商的模态框表单
表单包含基本信息、联系人信息、地址信息、合作信息和备注信息等多个部分
支持表单验证和提交操作

3. 非功能需求

3.1 用户界面要求

采用现代化、简洁的设计风格
主色调使用蓝色系，辅以绿色、橙色等语义化颜色
提供直观的数据可视化和清晰的信息层次结构
支持微交互动画，提升用户体验

3.2 响应式设计

适配桌面端、平板和移动设备的不同屏幕尺寸
在小屏幕设备上提供合理的布局调整和组件适配
侧边栏在移动设备上可折叠，提供更好的内容展示空间

3.3 性能要求

页面加载速度快，提供良好的用户体验
图表初始化和数据更新流畅
交互响应及时，减少用户等待时间

3.4 兼容性要求

兼容主流现代浏览器，包括Chrome、Firefox、Safari和Edge等
确保在不同操作系统上的一致表现

4. 数据模型

4.1 产品数据模型

产品ID：唯一标识符
产品名称：产品名称
类别：产品所属类别
供应商：提供该产品的供应商
库存数量：当前库存数量
单位：计量单位
预警值：库存预警阈值
状态：库存状态（充足、正常、预警、不足）

4.2 订单数据模型

订单ID：唯一标识符
客户信息：客户名称、联系方式等
下单日期：订单创建日期
订单数量：包含的产品总数量
订单金额：订单总金额
支付方式：支付方式类型
订单状态：订单当前状态
订单商品：包含的产品列表及数量

4.3 供应商数据模型

供应商ID：唯一标识符
供应商名称：供应商公司名称
供应商类型：制造商、分销商、物流服务商、服务提供商等
联系人信息：联系人姓名、职位、电话等
地址信息：公司地址、邮政编码等
合作信息：合作状态、合作时长、合同信息等
主要供应产品：提供的主要产品列表

5. 交互流程

5.1 模块切换流程

用户通过点击侧边栏的导航项选择不同模块
系统隐藏当前模块内容，显示选中模块的内容
重新初始化选中模块的图表和动画

5.2 侧边栏交互

在桌面端，侧边栏默认展开
在移动端，侧边栏默认收起
用户可通过点击顶部导航栏的菜单按钮切换侧边栏显示状态
窗口大小变化时，自动调整侧边栏显示状态以适配设备

5.3 模态框交互

用户点击相关按钮（如"查看详情"、"添加产品"等）触发模态框显示
模态框显示时，背景变暗，禁止页面滚动
用户可通过关闭按钮或点击背景关闭模态框
表单提交后，模态框自动关闭并显示操作成功提示

5.4 数据更新流程

用户通过表单提交数据变更
系统验证数据有效性
成功后更新界面数据并显示操作成功提示
失败时显示错误信息并保留表单数据

6. 技术实现要点

6.1 前端技术栈

HTML5语义化标签构建页面结构
Tailwind CSS实现响应式布局和样式
Font Awesome提供图标支持
Chart.js实现数据可视化图表
原生JavaScript实现交互逻辑

6.2 性能优化

实现图表实例的销毁和重建，避免内存泄漏
使用懒加载和按需渲染优化页面性能
优化动画效果，确保流畅的用户体验

6.3 代码组织

模块化设计，分离不同功能的代码
函数式编程，提高代码的可维护性和复用性
组件化思想，统一UI元素的样式和行为

7. 总结

本供应链管理系统提供了全面的库存、订单和供应商管理功能，通过直观的数据可视化和便捷的操作界面，帮助企业高效管理供应链业务流程。系统采用响应式设计，确保在不同设备上都能提供良好的用户体验，同时注重性能优化和代码质量，为后续功能扩展和系统维护提供了良好基础。

第二步：根据需求文档生成原型

1.2高结构化版

提示词

你是一名资深B端产品设计师，使用Ant Design组件库为跨境电商公司设计供应链管理后台。请基于以下结构化需求生成高保真原型需求文档。

核心需求：

仪表盘页面：需展示"实时库存周转率""缺货商品占比"图表，并提供"预警商品列表"的快捷入口。

订单跟踪页：支持按"物流状态""供应商"筛选，并需包含"批量打印运单"按钮。

供应商管理页：需有"合作状态"标签（启用/暂停），点击可查看历史交货准时率。

输出要求：用Markdown表格列出每个页面的组件、数据字段、交互动作（如点击、筛选）。示例：

| 页面 | 组件 | 核心数据字段 | 交互动作 |

第一步：根据提示词生成需求文档

跨境电商供应链管理后台原型描述

1. 仪表盘页面

| 页面 | 组件 | 核心数据字段 | 交互动作 |

| 仪表盘 | 快速操作按钮组 | - | 创建采购单、查看报表、刷新数据 |

2. 订单跟踪页面

| 页面 | 组件 | 核心数据字段 | 交互动作 |

3. 供应商管理页面

| 页面 | 组件 | 核心数据字段 | 交互动作 |

组件详细说明

仪表盘组件

**环形进度条**：使用Ant Design的Progress组件，设置type="dashboard"，展示当前库存周转率与目标值的对比。
**饼图/环形图**：使用Ant Design的Chart组件，展示缺货商品在不同类别的分布情况。
**预警商品表格**：使用Ant Design的Table组件，支持列排序、筛选，实现高效的数据浏览。

订单跟踪组件

**筛选表单**：使用Ant Design的Form、Select、DatePicker等组件组合，提供多维度筛选功能。
**批量打印运单**：使用Ant Design的Button和Checkbox Group组件，实现批量选择和操作。
**物流状态标签**：使用Ant Design的Tag组件，通过不同颜色区分不同状态。

供应商管理组件

**合作状态标签**：使用Ant Design的Tag组件，点击可触发状态变更，使用Confirm组件进行二次确认。
**历史交货准时率**：点击准时率指标时，使用Modal组件弹出图表，展示历史数据趋势。
**供应商表格**：使用Ant Design的Table组件，支持列排序、筛选、列宽调整等功能。

第二步：根据需求文档生成原型

1.3 高结构化进阶版

提示词

你是一名资深B端产品设计师，使用 Ant Design 组件库为跨境电商公司设计供应链管理后台。请基于以下结构化需求生成高保真原型需求文档。

1. 核心信息

**目标用户**：供应链经理、库存管理员、物流操作员（日均处理100+订单）。
**核心功能**：实时库存监控、多维度订单跟踪、供应商协同管理、预警机制。
**设计目标**：降低库存周转时间至48小时内，减少缺货率20%，提升跨部门协作效率。
**平台**：Web端（响应式设计），主屏幕尺寸1440×900px，支持Chrome/Firefox。

2. 视觉与交互要求

**布局**：采用"顶部导航栏 + 左侧树形侧边栏 + 主内容区"布局。主内容区使用卡片网格系统（间距16px），重要数据需置顶显示。
**导航**：侧边栏支持二级折叠菜单；顶部导航包含全局搜索（支持模糊匹配）和消息通知气泡（实时计数）。
**关键交互**：
图表钻取：点击库存周转率图表可下钻至品类详情页。
批量操作：订单列表支持勾选后批量打印运单/导出Excel。
状态反馈：任何操作后需有Toast提示成功/失败（如"运单打印任务已提交"）。
**风格参考**：Ant Design 设计语言，主色系为蓝色（#1890FF），辅色为橙色（#FA8C16）用于预警提示。字体使用 Segoe UI + System Stack。

3. 输出要求

请生成以下主要界面的高保真视觉稿描述，并说明各组件间的交互逻辑：

**仪表盘页**：描述布局结构（如KPI卡片、趋势图表、预警列表的排列），并说明点击"库存周转率图表"如何跳转至库存明细页。
**订单跟踪页**：说明筛选组件（物流状态、供应商下拉框）与表格的联动逻辑（如筛选后表格实时刷新）。
**供应商管理页**：解释"合作状态"标签的切换逻辑（如点击"暂停"后触发模态框确认流程）。

4. 术语库要求

请使用以下专业术语：

**组件类**：数据表格（带分页）、模态框、穿梭框、步骤条。
**交互类**：钻取、批量选择、异步加载、状态缓存。
**数据类**：周转率、SKU、OTA（准时交货率）。

（术语使用需符合Ant Design官方文档规范[1](@ref)）

第一步：根据提示词生成需求文档

跨境电商供应链管理后台高保真原型需求文档

1. 产品概述

1.1 项目背景

该跨境电商供应链管理后台旨在提升跨境电商企业的供应链管理效率，通过实时监控库存、追踪订单状态、管理供应商合作关系及预警潜在问题，帮助企业降低运营成本，提高交付效率。

1.2 目标用户

**供应链经理**：负责整体供应链规划与优化，需要全面的数据视图和分析工具
**库存管理员**：负责库存监控与管理，日均处理多仓库库存数据和补货需求
**物流操作员**：负责订单处理与物流跟踪，日均处理100+订单，需要高效的订单操作界面

1.3 核心功能

**实时库存监控**：提供全球仓库库存状态实时更新与预警，支持多仓库库存调配建议
**多维度订单跟踪**：支持按订单号、供应商、物流状态等多维度查询与追踪，提供订单全生命周期可视化
**供应商协同管理**：管理供应商信息、评估供应商绩效、处理合作关系状态变更，支持供应商评级与筛选
**预警机制**：针对库存不足、交货延迟、质量异常等问题进行实时预警，支持自定义预警规则

1.4 设计目标

**降低库存周转时间至48小时内**：通过优化库存管理流程和自动化预警
**减少缺货率20%**：实现精准库存预测和智能补货提醒
**提升跨部门协作效率**：提供统一的信息平台和工作流程
**增强用户体验**：为日均处理大量订单的用户提供高效、直观的操作界面

1.5 平台要求

**平台**：Web端（响应式设计）
**主屏幕尺寸**：1440×900px
**浏览器支持**：Chrome 90+、Firefox 88+等主流浏览器
**分辨率要求**：支持1024×768及以上分辨率，最佳体验为1920×1080
**操作系统**：Windows、macOS、Linux等主流桌面操作系统

2. 设计系统

2.1 色彩规范

**主色调**：蓝色 (#1890FF) - Ant Design 主色，用于主要按钮、链接、关键操作和高亮显示
**辅助色**：橙色 (#FA8C16) - 用于预警提示、进度指示、重要通知；绿色 (#52C41A) 表示成功/完成状态；红色 (#F5222D) 表示错误/危险状态
**中性色**：白色 (#FFFFFF)、浅灰 (#F0F2F5)、中灰 (#E8E8E8)、深灰 (#434343)、黑色 (#000000)
**背景色**：主内容区背景色 (#F0F2F5)，卡片背景色 (#FFFFFF)

2.2 字体规范

**主要字体**：Segoe UI + System Stack
**字号规范**：
页面标题：20px (bold) - 用于页面主标题
区域标题：16px (medium) - 用于卡片、区块标题
正文文本：14px (regular) - 用于表格内容、表单标签
小文本：12px (regular) - 用于辅助说明、时间戳
数据值：根据重要性18px/14px (bold) - 用于KPI数值、图表标签

2.3 布局规范

**整体布局**：顶部导航栏 + 左侧树形侧边栏 + 主内容区 - 遵循Ant Design Layout组件规范
**顶部导航栏高度**：64px，固定定位，包含Logo、全局搜索、用户信息、通知等
**左侧侧边栏宽度**：256px（展开）/ 80px（折叠），支持二级菜单折叠/展开
**主内容区最小宽度**：900px，支持响应式布局
**卡片间距**：16px，使用Ant Design Grid栅格系统
**内容区域边距**：24px，确保页面呼吸感
**响应式设计**：支持断点包括xs (≤576px)、sm (576-768px)、md (768-992px)、lg (992-1200px)、xl (1200-1600px)、xxl (≥1600px)

2.4 交互与反馈规范

**关键交互实现**：
**图表钻取**：点击库存周转率图表数据点可下钻至品类详情页，使用平滑过渡效果
**批量操作**：订单列表支持勾选后批量打印运单/导出Excel，操作按钮根据选择状态动态启用/禁用
**状态反馈**：任何操作后通过Toast组件提供成功/失败提示，停留时间3秒
**导航交互**：
**侧边栏**：支持二级折叠菜单，当前页面菜单项高亮显示，支持通过点击收起/展开
**顶部导航**：包含全局搜索（支持模糊匹配和关键词高亮）和消息通知气泡（实时计数，点击展开通知列表）
**表单交互**：
**实时验证**：表单项输入时进行实时验证，错误信息即时显示
**自动保存**：重要表单支持草稿自动保存功能
**数据加载**：
**骨架屏**：数据加载过程中显示骨架屏，提升用户体验
**异步加载**：表格数据支持异步分页加载，避免一次性加载大量数据

3. 核心页面详细设计

3.1 仪表盘页面

3.1.1 布局结构

**页面头部**：
页面标题："供应链仪表盘"（H2级别，20px字号，字重600）
时间范围选择器：下拉菜单形式，选项包括"今日"、"近7天"、"近30天"、"近90天"、"自定义"，默认选中"近7天"，右侧带有日历图标
刷新按钮：图标按钮，点击后所有数据重新加载并显示刷新动画
**KPI卡片区域**：
布局：采用Ant Design Grid系统，在1440px宽度下为4列网格布局，每列间距16px，行间距20px
包含卡片：
总库存价值：显示货币符号，数值千分位分隔
平均库存周转率：显示百分比，带环比增长箭头
订单履约率：显示百分比，带环比增长箭头
缺货率：显示百分比，带环比下降箭头
每个卡片具体结构：
顶部：指标名称（14px，中灰色）
中部：当前数值（24px，字重600，主色或功能色）
底部：环比变化（12px，带绿色上升/红色下降箭头）
右上角：迷你趋势图（折线图，显示24小时变化）
卡片样式：白色背景，圆角8px，轻微阴影（box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)），鼠标悬停时阴影加深
**趋势图表区域**：
布局：左右两列布局，左侧占2/3宽度，右侧占1/3宽度，两列间距16px
左侧大图表：库存周转率趋势图
图表类型：折线图
X轴：时间维度（日/周/月）
Y轴：周转率数值
支持多品类数据对比（通过图例切换显示）
包含数据点悬浮提示框（Tooltip）
右侧小图表组合：
订单状态分布：饼图，显示不同状态订单占比，支持点击扇区筛选
待处理预警数量：仪表盘样式，显示预警数量占总任务比例
布局：上下排列，垂直间距16px
**预警列表区域**：
位置：页面底部，占据整行宽度
区域头部：标题"实时预警"和"查看全部"链接
组件：Ant Design Table组件（数据表格带分页），默认每页显示10条
表格列设计：
复选框：用于批量选择
预警类型：使用标签显示（如库存预警、订单延迟、交付异常）
SKU：产品唯一标识符，点击可跳转至产品详情
当前值：具体数值
阈值：预警触发条件值
预警时间：相对时间（如"10分钟前"）和精确时间（鼠标悬停显示）
严重程度：使用不同颜色的点标记（红色-严重、黄色-警告、蓝色-提示）
操作：快捷处理按钮组（标记已处理、查看详情）
分页控件：位于表格下方，显示总数、每页条数选择（10/20/50/100）和页码导航

3.1.2 交互逻辑

**时间范围切换**：

用户点击时间范围选择器，展开下拉菜单
选择目标时间范围（如"近30天"）
页面所有数据区域（KPI卡片、图表、列表）立即显示加载状态（骨架屏或加载动画）
数据加载完成后，所有区域内容同步更新
时间选择器显示当前选中的时间范围
系统自动缓存用户的时间范围选择，下次登录时恢复

**图表钻取交互（库存周转率图表为例）**：

用户将鼠标悬停在"库存周转率趋势图"的数据点上，显示详细信息提示框
点击该数据点或某个时间段区域
系统在页面顶部显示全局加载进度条（宽度从0到100%）
页面切换至"库存明细页"
库存明细页自动应用以下参数：

时间范围：继承自仪表盘的选择
筛选条件：自动带入点击的数据点对应的SKU或产品品类
排序方式：默认按周转率降序排列

库存明细页顶部显示面包屑导航："仪表盘 > 库存明细"
提供明显的返回按钮，点击后返回到仪表盘，并保持之前的状态

**预警列表交互**：

点击预警列表中的任意行，右侧从屏幕边缘滑出抽屉式详情面板
抽屉内显示：

预警详细信息（完整的SKU信息、历史数据趋势图）
建议操作步骤（可点击执行）
相关联的订单/供应商信息（链接形式）
处理记录时间轴

关闭抽屉后，列表保持原状态
列表支持列排序、列宽调整、列显示隐藏控制
筛选条件和分页状态自动缓存

**批量操作流程**：

在预警列表中点击复选框选择多个预警项，或点击表头复选框全选
表格下方出现批量操作工具栏，显示选中项数量
工具栏包含："标记已处理"、"导出数据"、"批量删除"等按钮
点击"标记已处理"

弹出确认模态框："确定将选中的X条预警标记为已处理？"
确认后，显示全局Loading状态
处理完成后，列表自动刷新，已处理项移除或状态更新
显示Toast提示："成功处理X条预警"

点击"导出数据"，直接触发文件下载（CSV或Excel格式）

3.2 订单跟踪页面

3.2.1 布局结构

**页面头部**：
页面标题："订单跟踪"（H2级别，20px字号，字重600）
主要操作按钮组：
"批量打印运单"按钮（默认禁用，选择数据后启用）
"导出Excel"按钮（默认启用）
按钮尺寸：36px高度，图标+文字组合
**筛选区域**：
布局：采用Ant Design Form组件，多行表单布局，在1440px宽度下每行3个表单项，间距16px
样式：浅灰色背景（#F5F5F5），圆角8px，内边距16px
筛选组件详细设计：
**订单号输入框**：
类型：Input.Search组件
占位提示："请输入订单号关键词"
支持模糊匹配，输入时显示实时搜索建议
**物流状态下拉框**：
类型：Select组件，mode="multiple"（多选）
选项：待处理、已发货、运输中、已签收、已取消、异常
每个选项附带对应颜色的小方块预览
支持全选/反选操作
**供应商下拉框**：
类型：Select组件，mode="multiple"，showSearch（支持搜索）
远程加载供应商数据，支持模糊搜索
显示供应商名称和代码
**时间范围选择器**：
类型：RangePicker组件
提供快捷选项：今日、近7天、近30天、本月、上月
可选择时间维度：下单时间/发货时间/签收时间
**SKU输入框**：
类型：Input组件，支持模糊搜索
输入时显示SKU联想建议
**目的地国家选择器**：
类型：Select组件，mode="multiple"，showSearch
选项包含国旗图标和国家名称
操作按钮：
"查询"按钮（主色系实心按钮）
"重置"按钮（描边按钮）
按钮位置：筛选区域右下角，右对齐
**数据展示区域**：
组件：Ant Design Table组件（数据表格带分页）
表格配置：
固定表头，支持滚动
行高：36px，支持紧凑模式切换
支持列宽调整和列显示隐藏控制
表格列详细设计：
**复选框**：用于批量选择，支持全选/反选
**订单号**：链接形式，点击可跳转至订单详情页
**SKU**：显示产品SKU，点击可跳转至产品详情
**产品名称**：显示产品简要名称
**数量**：显示订单数量
**供应商**：显示供应商名称，可点击筛选
**下单时间**：标准时间格式，支持排序
**物流状态**：
使用标签（Tag）组件展示
不同状态对应不同颜色：待处理（灰色）、已发货（蓝色）、运输中（橙色）、已签收（绿色）、已取消（红色）、异常（紫色）
**物流公司**：显示物流公司名称
**运单号**：链接形式，点击可跳转至物流公司官网跟踪
**预计交付时间**：显示预计送达日期
**操作**：按钮组，包含"查看详情"、"打印运单"等快捷操作
分页控制：
位于表格底部，右对齐
显示总条数信息
每页条数选择：10/20/50/100条
页码跳转：支持直接输入页码跳转
显示上下页和省略页导航

3.2.2 交互逻辑

**筛选组件与表格联动逻辑**：

**实时筛选模式**：

用户在任一筛选组件中输入内容或选择选项
系统在用户操作完成后（如失焦、选择完成）自动触发查询
表格立即显示加载状态（表格内显示骨架屏）
数据加载完成后，表格内容更新为筛选结果
分页自动重置为第一页

**手动筛选模式**：

用户可切换至手动模式（通过筛选区域的设置按钮）
用户完成所有筛选条件设置后，点击"查询"按钮
系统触发查询并更新表格

**筛选条件管理**：

每个已设置的筛选条件旁显示清除按钮（小叉号）
点击清除按钮，仅清除该条件并重新查询
点击"重置"按钮，清除所有筛选条件并还原默认状态

**筛选状态缓存**：

系统自动缓存用户的筛选条件、排序方式和分页状态
关闭页面或刷新后再次访问，自动恢复上次的筛选状态
筛选状态通过URL参数传递，支持复制链接分享当前视图

**高级筛选交互**：

筛选区域支持展开/收起功能，默认显示常用筛选条件
点击"高级筛选"可显示更多筛选选项
支持保存常用筛选方案，方便快速调用
**批量操作详细流程**：

**批量选择**：

用户在表格中点击行首复选框选择单行
点击表头复选框可选择当前页所有行
选择任意行后，顶部批量操作按钮组从禁用状态变为可用
表格右上角显示已选择项数量统计

**批量打印运单**：

点击"批量打印运单"按钮
系统弹出确认模态框："确定打印选中的X份运单？"
确认后，显示全局加载动画，页面顶部显示处理进度条
后台异步生成PDF文件
处理完成后，自动触发文件下载
显示Toast提示："运单打印任务已完成，共X份运单"

**导出Excel**：

点击"导出Excel"按钮
系统显示Toast提示："导出任务已开始，请稍候..."
后台生成包含当前筛选结果的Excel文件
文件生成后自动下载
显示Toast提示："数据导出成功"
**表格高级交互**：

**排序功能**：

点击表格列头可切换升序/降序/无排序状态
排序图标清晰显示当前排序方向
支持多列排序（按住Shift键点击多个列头）
排序状态随筛选条件一同缓存

**列管理**：

表格右上角提供"列设置"按钮
点击后弹出列管理面板
支持通过复选框控制列的显示/隐藏
支持拖拽调整列的显示顺序
列设置自动保存，下次访问时恢复

**行展开**：

支持点击行前箭头展开详情
展开面板显示订单的简要详情，避免频繁跳转

**快速操作**：

鼠标悬停在操作列时，显示所有可用操作按钮
常用操作（如"打印运单"）提供快捷访问
**异步加载优化**：

表格使用虚拟滚动，支持高效渲染大量数据
筛选结果分页加载，减轻服务器压力
复杂查询使用防抖处理，避免频繁请求
网络异常时提供重试机制和友好提示

3.3 供应商管理页面

3.3.1 布局结构

**页面头部**：
页面标题："供应商管理"（H2级别，20px字号，字重600）
主要操作按钮组：
"新增供应商"按钮（主色系实心按钮）
"导入供应商"按钮（描边按钮）
"导出供应商"按钮（描边按钮）
按钮尺寸：36px高度，图标+文字组合
**筛选搜索区域**：
布局：单行布局，左侧搜索框，右侧筛选下拉框，间距16px
供应商名称搜索框：
类型：Input.Search组件
占位提示："请输入供应商名称关键词"
支持模糊匹配
合作状态筛选：
类型：Radio.Group组件（标签页样式）
选项：全部、活跃、暂停、终止
默认选中"全部"
品类筛选下拉框：
类型：Select组件，showSearch
支持多选
选项：服装、电子产品、家居用品等
**供应商列表**：
组件：Ant Design Table组件（数据表格带分页）
表格配置：
固定表头，支持列排序
行高：36px
支持列宽调整和列显示隐藏控制
表格列详细设计：
**复选框**：用于批量选择
**供应商名称**：显示供应商全称，点击可跳转至详情页
**供应商代码**：显示系统内部编码
**联系人**：显示主要联系人姓名
**联系方式**：显示电话和邮箱（鼠标悬停显示完整信息）
**合作品类**：显示主要合作品类标签
**准时交货率（OTA）**：
显示百分比数值
附带迷你进度条可视化展示
低于阈值时显示警告颜色
**合作状态**：
使用标签（Tag）组件展示
可点击切换（支持直接点击标签切换状态）
不同状态对应不同颜色
**操作**：按钮组，包含"查看详情"、"编辑"、"切换状态"、"删除"等快捷操作
批量操作栏：
选中数据后自动显示
包含：批量启用、批量暂停、批量删除、批量导出

3.3.2 交互逻辑

**合作状态标签切换逻辑**：

**状态设计概述**：

系统定义三种供应商合作状态：活跃、暂停、终止
状态间存在严格的转换规则，确保业务逻辑的完整性

**状态标签视觉设计**：

**活跃状态**：
颜色：绿色 (#52C41A)
文本："活跃"
可切换目标状态：暂停、终止
**暂停状态**：
颜色：黄色 (#FAAD14)
文本："暂停"
可切换目标状态：活跃、终止
**终止状态**：
颜色：红色 (#F5222D)
文本："终止"
可切换目标状态：活跃（需二次确认）

**点击状态标签切换流程**：

**路径一：从活跃切换至暂停**

用户点击绿色"活跃"状态标签
系统弹出确认模态框：

标题："确认暂停合作"
内容："确定要暂停与[供应商名称]的合作关系吗？暂停后将无法分配新订单，但现有订单不受影响。"
操作按钮："取消"、"确认暂停"

用户点击"确认暂停"

模态框显示加载状态
后台更新供应商状态
模态框关闭
表格中该供应商的状态标签从绿色"活跃"变为黄色"暂停"
显示Toast提示："供应商[供应商名称]合作状态已暂停"

用户点击"取消"或关闭模态框

模态框关闭，状态保持不变
**路径二：从暂停切换至活跃**

用户点击黄色"暂停"状态标签
系统弹出确认模态框：

标题："确认恢复合作"
内容："确定要恢复与[供应商名称]的合作关系吗？恢复后可正常分配新订单。"
操作按钮："取消"、"确认恢复"

用户点击"确认恢复"

模态框显示加载状态
后台更新供应商状态
模态框关闭
表格中该供应商的状态标签从黄色"暂停"变为绿色"活跃"
显示Toast提示："供应商[供应商名称]合作状态已恢复"
**路径三：从任意状态切换至终止**

用户点击任意状态标签，选择"终止"选项
系统弹出高风险操作确认模态框（红色强调）：

标题："确认终止合作"
内容："您确定要终止与[供应商名称]的合作关系吗？此操作不可逆转，将影响所有相关业务流程。\n\n请输入供应商名称'[供应商名称]'进行确认："
输入框：要求用户手动输入供应商名称
操作按钮："取消"、"确认终止"（默认禁用，输入正确后启用）

用户正确输入供应商名称并点击"确认终止"

模态框显示加载状态
后台更新供应商状态
模态框关闭
表格中该供应商的状态标签变为红色"终止"
显示Toast提示："供应商[供应商名称]合作状态已终止"
**路径四：从终止切换至活跃**

用户点击红色"终止"状态标签，选择"活跃"选项
系统弹出二次确认模态框：

第一层确认：
标题："启用已终止供应商"
内容："启用已终止的供应商需要额外审批。确定继续吗？"
按钮："取消"、"继续"
用户点击"继续"后，显示第二层确认：
标题："最终确认"
内容："请选择启用原因：[下拉选择框：重新合作/误操作/其他]"
文本域："请输入备注信息："
按钮："取消"、"提交申请"

用户填写信息并点击"提交申请"

显示加载状态
系统生成启用申请并进入审批流程
模态框关闭
显示Toast提示："供应商启用申请已提交，等待审批"
供应商状态显示为"待启用（审批中）"

**状态切换权限控制**：

只有具有"供应商管理"权限的用户才能切换状态
终止操作需要更高级别的权限或二次授权
系统记录所有状态变更的操作日志

**状态变更的业务影响**：

活跃：可正常接收订单，参与采购计划
暂停：不分配新订单，但现有订单继续执行
终止：完全停止合作，系统自动处理后续事宜

**批量状态切换**：

支持选择多个供应商进行批量状态切换
批量操作遵循与单个操作相同的确认流程
批量操作结果以列表形式反馈成功/失败情况
**新增/编辑供应商流程**：

点击"新增供应商"或"编辑"按钮
系统弹出大型模态框（或右侧抽屉，根据屏幕空间调整）
表单包含以下信息组：

**基本信息**：供应商名称、供应商代码、简称、网址
**联系人信息**：主要联系人、职位、电话、邮箱
**地址信息**：国家、省份、城市、详细地址、邮编
**合作信息**：
合作品类：使用穿梭框（Transfer组件）选择
合作状态：单选框（默认"暂停"，待审核通过后手动激活）
付款条件：下拉选择
交货周期：数字输入框
**资质信息**：上传营业执照、认证证书等

表单验证：

实时验证输入内容
必填项显示红色星号
错误提示清晰明确

提交表单：

点击"确定"按钮
显示加载状态
提交数据到后台
成功后关闭模态框，刷新表格
显示Toast提示："供应商信息保存成功"

取消操作：

点击"取消"或关闭按钮
如有未保存的修改，弹出提示："有未保存的修改，确定要离开吗？"
**供应商详情查看**：

点击供应商名称链接或"查看详情"按钮
页面切换至供应商详情页（或从右侧滑出抽屉）
详情页采用标签页（Tabs）布局，包含：

基本信息
合作历史
订单统计
产品列表
联系人管理

提供返回按钮，可返回供应商列表页并保持筛选状态

4. 组件规范

4.1 通用组件

**按钮**：
主要操作：使用主色系实心按钮
次要操作：使用描边按钮
危险操作：使用红色按钮
按钮尺寸：主要操作36px高度，次要操作32px高度
**表单元素**：
输入框/下拉框：32px高度，宽度根据内容自适应
日期选择器：遵循Ant Design规范
表单验证：实时验证，错误提示清晰
**数据表格**：
行高：36px
支持复选框多选、全选
支持列排序、列宽调整、列显示隐藏控制
分页：默认每页10条，支持10/20/50/100条切换
**模态框**：
居中显示
遮罩层背景半透明
支持拖拽调整位置
**消息提示**：
成功操作：绿色提示，自动消失
错误操作：红色提示，可手动关闭
警告信息：黄色提示

5. 术语表

5.1 组件类术语

**数据表格（Table）**：Ant Design Table组件，用于展示大量结构化数据，支持排序、筛选、分页、虚拟滚动等功能
**模态框（Modal）**：Ant Design Modal组件，弹出式对话框，用于表单填写、信息确认、详情展示等场景
**穿梭框（Transfer）**：Ant Design Transfer组件，用于在两个列表之间进行数据的选择和移动，常用于权限配置、多选场景
**步骤条（Steps）**：Ant Design Steps组件，直观地展示操作流程和当前进度，可用于多步骤表单、流程向导等
**标签（Tag）**：Ant Design Tag组件，用于标记和选择，可展示状态、分类等信息，支持多种颜色和可关闭功能
**下拉选择器（Select）**：Ant Design Select组件，提供下拉选项供用户选择，支持单选、多选、搜索等功能
**表单（Form）**：Ant Design Form组件，用于数据收集和验证，支持布局配置、联动验证等功能
**抽屉（Drawer）**：Ant Design Drawer组件，从屏幕边缘滑出的面板，用于展示详情、编辑表单等场景

5.2 交互类术语

**钻取（Drill-down）**：从汇总数据点击进入更详细数据视图的交互方式，通常伴随着页面跳转或内容区域刷新
**批量选择（Batch Selection）**：通过复选框同时选中多个数据项，结合批量操作按钮执行统一处理
**异步加载（Asynchronous Loading）**：在不阻塞UI渲染和用户操作的情况下，后台加载数据，通常显示加载状态反馈
**状态缓存（State Caching）**：系统自动保存用户的筛选条件、排序状态、分页信息等，下次访问时自动恢复
**虚拟滚动（Virtual Scrolling）**：只渲染可视区域内的数据行，大幅提升大数据量表格的性能和流畅度
**防抖处理（Debouncing）**：延迟执行操作，避免短时间内频繁触发，常用于搜索输入、窗口调整等场景
**骨架屏（Skeleton）**：数据加载过程中显示的占位UI，提升用户感知的加载速度
**列管理（Column Management）**：用户自定义表格列的显示/隐藏和顺序调整功能

5.3 数据类术语

**库存周转率（Inventory Turnover）**：衡量库存使用效率的指标，计算公式为：销售成本÷平均库存
**SKU（Stock Keeping Unit）**：库存保有单位，产品的唯一标识符，用于库存管理和跟踪
**OTA（On-Time Delivery Rate）**：准时交货率，供应商按时完成订单交付的百分比
**缺货率（Stockout Rate）**：特定期间内缺货发生的频率，计算公式为：缺货次数÷总订单数
**订单履约率（Order Fulfillment Rate）**：成功完成的订单占总订单的百分比
**交付周期（Lead Time）**：从下单到收到货物的总时间
**平均库存价值（Average Inventory Value）**：特定期间内库存的平均资金占用

5.4 Ant Design规范术语

**布局（Layout）**：Ant Design提供的页面布局方案，包含Header、Sider、Content、Footer等基础布局组件
**栅格系统（Grid）**：Ant Design的24列栅格布局系统，用于响应式页面设计
**颜色体系（Color Palette）**：Ant Design定义的主色、辅色、功能色和中性色体系
**图标（Icon）**：Ant Design提供的丰富图标集合，支持自定义图标
**响应式断点（Responsive Breakpoints）**：Ant Design定义的响应式布局断点，包括xs、sm、md、lg、xl、xxl等
**间距（Spacing）**：Ant Design推荐的组件间距规范，确保界面视觉一致性

6. 性能要求

**页面加载时间**：首屏内容加载时间不超过2秒
**数据刷新时间**：筛选条件变更后，表格数据刷新时间不超过1秒
**图表渲染**：复杂图表渲染时间不超过1.5秒
**并发处理**：支持100+用户同时在线使用
**数据量支持**：单页表格支持显示10000+条数据（通过虚拟滚动）

本文档基于Ant Design 4.x设计规范，旨在为跨境电商供应链管理后台提供高保真原型设计指导，确保最终实现的系统满足用户需求并提供优质的使用体验。

第二步：根据需求文档生成原型

2、测试互联网商城系统提示词

2.1 低结构化版

提示词

生成一个在线文具商城生成用户端原型需求文档，需要包含商品浏览、购物车、支付流程。

第一步：根据提示词生成需求文档

文心文具商城页面生成需求描述

1. 项目概述

文心文具商城是一个基于单页应用（SPA）架构的在线文具销售平台，致力于为用户提供高品质文具产品的浏览、购买和管理体验。本页面整合了首页展示、商品分类、商品详情、购物车和结算等核心电商功能模块，采用现代化的UI设计和流畅的交互体验。

2. 技术栈

2.1 前端框架

**原生JavaScript**：实现页面交互逻辑和单页应用路由管理
**HTML5**：语义化页面结构

2.2 样式技术

**Tailwind CSS v3**：用于快速构建响应式UI界面
**自定义CSS变量**：实现一致的设计系统和主题管理
**Font Awesome**：提供丰富的图标支持

2.3 响应式设计

移动优先设计理念
断点支持：sm(640px)、md(768px)、lg(1024px)、xl(1280px)

3. 页面结构与功能模块

3.1 导航系统

**顶部通知栏**：显示促销信息和优惠活动
**主导航栏**：
品牌标志与名称
商品分类导航（下拉菜单）
搜索功能
用户账户入口
购物车图标（带数量徽章）
**移动端菜单**：汉堡按钮控制的侧边栏菜单

3.2 首页模块

**轮播图**：展示热门促销和新品信息，支持自动轮播和手动控制
**特色分类**：展示主要商品分类入口，带有图标和描述
**热门商品**：展示推荐和热门商品列表，以卡片形式呈现
**新品上市**：展示最新上架的商品
**品牌故事/优惠活动**：品牌宣传和促销活动展示区域

3.3 商品分类模块

**筛选功能**：按商品类型、价格区间等进行筛选
**排序功能**：支持按价格、销量、评价等排序
**产品列表**：以网格布局展示产品卡片，响应式适应不同屏幕
**分页功能**：支持多页商品浏览

3.4 商品详情模块

**图片展示**：主图展示和缩略图切换
**商品信息**：标题、价格、评分、库存等
**规格选择**：颜色、尺寸等选项
**数量调整器**：增加/减少商品数量
**加入购物车**：添加商品到购物车功能
**商品描述**：详细介绍商品特点和参数
**用户评价**：展示用户评价和评分

3.5 购物车模块

**购物车项目列表**：展示已添加商品，包含图片、名称、价格、数量、小计
**数量调整**：在购物车中调整商品数量
**删除功能**：移除购物车中的商品
**批量操作**：全选、批量删除
**价格汇总**：显示商品总价、运费、优惠和应付金额
**结算按钮**：跳转到结算页面

3.6 结算模块

**收货地址管理**：添加和选择收货地址
**配送方式选择**：选择配送方式
**支付方式选择**：支持支付宝、微信支付、银行卡等
**订单备注**：用户可添加订单备注信息
**订单汇总**：显示最终订单金额和优惠信息
**提交订单**：完成购买流程

3.7 页脚模块

**品牌信息**：公司简介和品牌理念
**快速链接**：关于我们、联系我们、常见问题等
**商品分类链接**：快速跳转到各类商品分类
**联系信息**：地址、电话、邮箱、营业时间
**社交媒体链接**：微博、微信、Instagram等
**版权信息**：版权声明和备案信息

4. 交互功能

4.1 单页应用路由

通过URL片段（hash）实现页面切换
导航链接点击事件处理
页面内容的动态显示与隐藏

4.2 移动端响应式交互

移动端菜单展开/收起
触控友好的按钮和输入控件
响应式布局调整

4.3 用户反馈系统

**通知组件**：显示操作成功、错误或信息提示
**悬停效果**：按钮、卡片、链接的交互反馈
**表单验证**：实时验证用户输入

4.4 动画效果

**平滑滚动**：页面内导航和平滑滚动到锚点
**淡入动画**：页面元素随滚动逐渐显示
**过渡效果**：轮播图切换、模态框显示/隐藏
**卡片悬停**：商品卡片的悬停动画效果

4.5 其他交互功能

**返回顶部按钮**：滚动到页面顶部
**图片懒加载**：优化性能的延迟加载
**购物车数量调整器**：增减商品数量
**商品收藏功能**：收藏喜欢的商品

5. 样式与设计规范

5.1 颜色系统

**主色**：#4F46E5（紫色）- 用于主要按钮、链接和高亮
**辅助色**：#10B981（绿色）- 用于成功状态和次要按钮
**强调色**：#F59E0B（橙色）- 用于促销和重要提示
**危险色**：#EF4444（红色）- 用于错误提示和删除操作
**中性色**：深灰#1F2937、浅灰#F9FAFB等 - 用于文本和背景

5.2 排版系统

**字体**：Inter, system-ui, sans-serif
**字号**：响应式设计，使用相对单位
**字重**：正常400、中等500、半粗体600、粗体700

5.3 组件样式规范

**按钮**：主按钮、次要按钮、轮廓按钮、危险按钮等
**卡片**：产品卡片、信息卡片等
**表单**：输入框、选择框、文本域、复选框、单选框
**导航**：顶部导航、面包屑、分页导航
**徽章**：数量提示、状态标识

6. 性能优化

6.1 资源优化

外部资源CDN引入
样式和脚本内联以减少请求
图片使用占位符和懒加载

6.2 渲染优化

使用content-visibility优化可见性
减少不必要的DOM操作
事件委托处理大量元素

7. 浏览器兼容性

现代浏览器（Chrome, Firefox, Safari, Edge）
移动设备浏览器
确保基本功能在各浏览器中正常运行

8. 开发与维护

8.1 代码结构

模块化的HTML结构
集中管理的CSS样式
组织良好的JavaScript逻辑

8.2 扩展性

清晰的类命名和组件结构
可复用的样式类和组件
易于维护和扩展的代码组织

本需求旨在提供页面实现的完整技术和设计指导。

第二步：根据需求文档生成原型

2.2 高结构化版

提示词

你为"绿色有机食品电商"设计移动端高保真原型需求文档，目标用户为25-40岁注重健康的中产家庭。

关键场景：

商品列表页：需支持按"无添加认证""产地溯源"标签筛选，商品卡片需显示"月度销量"和"碳足迹标识"。

商品详情页：需包含"食谱推荐"板块（关联所需食材一键加购），并突出"预约配送"功能。

支付流程：需明确展示"会员折扣"与"积分抵扣"的叠加计算顺序，并包含"配送时间选择"步骤。

输出要求：按用户旅程分页描述，注明每个界面元素（如按钮、标签）对应的用户操作和后续跳转路径。附流程图说明关键异常情况（如库存不足、优惠券失效）。

第一步：根据提示词生成需求文档

绿色有机食品电商移动端高保真原型需求文档

引言

随着健康生活理念的普及和消费者对食品安全关注度的提高，绿色有机食品市场呈现快速增长趋势。本需求文档旨在详细描述一款面向注重健康的中产家庭的绿色有机食品电商移动端应用的高保真原型设计要求。文档涵盖了从用户旅程、页面设计、交互流程到异常情况处理的完整设计方案，为产品开发团队提供清晰的设计指导和实现依据。

1. 项目概述

1.1 产品定位

专注于提供高品质绿色有机食品的移动端电商平台，致力于为注重健康的中产家庭提供便捷、可靠的有机食品购物体验。

1.2 目标用户

**年龄**：25-40岁
**群体特征**：注重健康的中产家庭
**消费能力**：中等偏上，愿意为有机、健康食品支付溢价
**核心需求**：
购买安全、无添加的有机食品
了解食品来源和生产过程
便捷的购物体验
健康饮食建议和食谱
可靠的配送服务

1.3 核心功能模块

**商品浏览与筛选**：支持多种标签筛选，突出有机认证和产地信息
**商品详情展示**：包含详尽信息、食谱推荐和预约配送
**购物车管理**：商品编辑、数量调整、批量操作
**会员与积分系统**：会员折扣、积分累积与抵扣
**支付流程**：多种支付方式、折扣计算、配送时间选择
**订单管理**：订单查询、配送状态跟踪

2. 用户旅程概述

2.1 典型用户旅程

**发现阶段**：用户通过APP浏览热门有机食品
**探索阶段**：用户使用筛选功能查找特定标签的商品
**评估阶段**：用户查看商品详情，了解认证信息和碳足迹
**决策阶段**：用户查看推荐食谱，决定购买并加入购物车
**购买阶段**：用户确认订单，选择配送时间，应用会员折扣和积分
**收货阶段**：用户收到商品，确认收货

2.2 界面流程概览

**启动页 → 首页/分类页 → 商品列表页 → 商品详情页 → 购物车页 → 订单确认页 → 支付页 → 支付成功页 → 订单详情页**

3. 详细页面设计

3.1 商品列表页

3.1.1 页面布局

**顶部导航栏**：返回按钮、页面标题（当前分类名称）、搜索按钮
**筛选栏**：横向滚动标签栏 + 高级筛选按钮
**排序选项**：价格排序、销量排序、新品排序、推荐排序
**商品列表区**：瀑布流或网格布局展示商品卡片
**底部加载提示**：下拉刷新、上拉加载更多

3.1.2 关键元素详细设计

3.1.2.1 筛选功能

**横向滚动标签**：

显示常用筛选条件：全部、有机认证、无添加认证、产地溯源、当季鲜品、热卖商品
**交互**：点击标签后，标签背景色变化，列表内容实时更新
**后续跳转**：无需跳转，直接更新当前页面商品列表

**高级筛选按钮**：

**位置**：筛选栏右侧
**图标**：筛选图标 + "筛选"文字
**交互**：点击弹出筛选面板
**后续跳转**：底部弹出筛选面板

**高级筛选面板**：

**认证标签**：无添加认证（开关）、有机认证（开关）、绿色食品认证（开关）
**产地筛选**：可多选的产地列表
**价格区间**：滑块选择或输入框
**销量筛选**：可选择月度销量范围
**碳足迹筛选**：低碳商品（开关）、碳中和商品（开关）
**应用按钮**：点击应用筛选条件，关闭面板并更新商品列表
**重置按钮**：点击重置所有筛选条件

3.1.2.2 商品卡片

**布局**：

顶部商品图片（正方形）
下方商品信息区域

**信息元素**：

**商品图片**：高清展示，支持点击放大
**认证标签**：左上角显示无添加认证、有机认证等标签（彩色图标+文字）
**商品名称**：简洁明了，突出有机特性
**产地溯源信息**：商品名称下方显示产地信息（如"云南高原种植"）
**价格区域**：当前价格（大字体）、原价（小字体划线）
**月度销量**："月销XXX件"文字标识
**碳足迹标识**：以图标+文字形式显示（如"低碳选择"、"碳中和"标识）
**加购按钮**：右下角浮动的圆形加号按钮

**交互**：

点击整张小卡片：跳转到商品详情页
点击加购按钮：商品加入购物车，按钮变为数量显示，可点击加减
长按卡片：显示快捷操作菜单（加入购物车、收藏、查看详情）

3.1.3 用户操作与跳转路径

点击返回按钮：返回上一页
点击搜索按钮：跳转到搜索页面
点击分类标签：更新商品列表
点击高级筛选按钮：弹出筛选面板
点击商品卡片：跳转到商品详情页
点击加购按钮：商品加入购物车，页面右上角购物车图标数量更新
下拉列表：刷新商品数据
上拉列表：加载更多商品

3.2 商品详情页

3.2.1 页面布局

**顶部导航栏**：返回按钮、分享按钮、收藏按钮
**商品图片轮播**：高清多图展示
**商品基本信息区**：商品名称、价格、销量、认证标签
**产地溯源区**：产地地图、种植/养殖过程、质检报告
**商品详情区**：详细描述、规格参数、营养成分
**食谱推荐区**：相关食谱卡片列表
**用户评价区**：评价列表、查看更多评价入口
**底部操作栏**：客服、购物车、加入购物车按钮、立即购买按钮

3.2.2 关键元素详细设计

3.2.2.1 商品信息展示

**商品名称**：突出有机特性，支持换行显示
**价格区域**：当前价格、原价、会员折扣提示
**认证标签**：无添加认证、有机认证等标识（彩色图标+文字）
**月度销量**："月销XXX件"文字展示
**碳足迹标识**：突出显示低碳/碳中和信息

3.2.2.2 产地溯源

**产地地图**：显示商品原产地地理位置
**农场/基地介绍**：简要介绍生产环境
**生产过程**：图文并茂展示种植/养殖过程
**质检报告**：可点击查看详细质检报告PDF

3.2.2.3 食谱推荐板块

**布局**：

横向滚动的食谱卡片列表
每个卡片包含食谱图片、名称、难度、所需时间

**功能点**：

**食谱卡片**：
图片：展示成品效果图
标题：食谱名称
标签：难度、所需时间
"所需食材一键加购"按钮
**一键加购功能**：
**交互**：点击"所需食材一键加购"按钮
**提示**：弹出提示框显示将添加的所有食材列表
**确认**：用户确认后，所有食材自动加入购物车
**后续跳转**：提示加购成功，可选择继续购物或前往购物车
**查看完整食谱**：
**交互**：点击食谱卡片其他区域
**后续跳转**：跳转到食谱详情页，包含详细步骤、用料清单

3.2.2.4 预约配送功能

**位置**：商品基本信息区下方

**展示形式**：

"预约配送"入口
显示当前可预约的配送时间段

**交互流程**：

点击"预约配送"入口
弹出日历选择器，展示未来7天可预约日期
选择日期后，显示当天可预约的时间段
选择时间段后，显示预约成功提示
预约信息将同步到购物车和订单确认页

**限制条件**：

部分商品可能有特定配送时间限制
高峰期可能需要提前24小时预约

3.2.3 用户操作与跳转路径

点击返回按钮：返回商品列表页
点击分享按钮：弹出分享面板
点击收藏按钮：收藏商品，图标状态变化
点击图片：进入图片全屏查看模式
点击产地溯源信息：展开/收起详细溯源内容
点击食谱卡片：跳转到食谱详情页
点击"所需食材一键加购"：食材加入购物车，顶部显示成功提示
点击预约配送：弹出日期时间选择器
点击客服：进入在线客服聊天界面
点击购物车图标：跳转到购物车页面
点击加入购物车：商品加入购物车，顶部显示成功提示
点击立即购买：直接跳转到订单确认页

3.3 购物车页面

3.3.1 页面布局

**顶部导航栏**：返回按钮、页面标题"购物车"、编辑按钮
**商品列表区**：展示已选商品，支持多选、数量调整
**优惠券/积分选择区**：显示可用优惠券数量、可用积分
**结算信息区**：商品总价、优惠金额、应付金额
**底部结算栏**：全选按钮、合计金额、结算按钮

3.3.2 关键元素

**商品项**：商品图片、名称、规格、价格、数量选择器、删除按钮
**优惠券选择**：点击进入优惠券列表，选择可用优惠券
**积分抵扣**：显示当前可用积分，可选择是否使用积分抵扣
**全选功能**：一键选择/取消选择所有商品
**结算按钮**：显示已选商品数量，点击进入订单确认页

3.4 订单确认与支付流程

3.4.1 订单确认页面

3.4.1.1 页面布局

**顶部导航栏**：返回按钮、页面标题"确认订单"、帮助按钮
**收货地址模块**：显示默认地址，支持修改
**商品清单模块**：展示已选商品列表，包含图片、名称、数量、价格
**配送方式模块**：选择配送方式，展示配送费用
**配送时间选择模块**：选择具体配送时间段
**优惠券选择模块**：选择可用优惠券
**积分抵扣模块**：显示可用积分，可调整抵扣数量
**会员折扣说明模块**：展示会员等级及对应折扣
**费用明细模块**：商品总价、运费、优惠金额、应付总额
**底部操作栏**：实付金额显示、提交订单按钮

3.4.1.2 关键元素详细设计

3.4.1.2.1 配送时间选择

**布局**：

日期选择器（日历形式）
时间段选择器（列表形式）

**交互流程**：

点击配送时间区域进入选择页面
首先选择配送日期（默认显示当前可预约的最早日期）
选择日期后，显示该日期可用的配送时间段
选择时间段后，页面返回订单确认页，更新配送时间信息

**显示信息**：

每个时间段显示可预约状态（充足/紧张/已满）
高峰期可能显示额外费用提示
已预约的时间不可重复选择

3.4.1.2.2 会员折扣与积分抵扣计算

**计算顺序说明**：

**第一步**：先应用会员折扣（基于会员等级）
**第二步**：再应用优惠券折扣（如有）
**第三步**：最后使用积分抵扣（按比例抵扣）

**具体实现**：

**会员折扣模块**：

显示当前会员等级
显示对应折扣比例（如：黄金会员享9.5折）
显示折扣后的金额
点击可查看会员权益详情

**优惠券选择模块**：

显示可用优惠券数量
点击进入优惠券列表
展示每个优惠券的使用条件和优惠金额
选择后返回订单确认页，更新优惠金额

**积分抵扣模块**：

显示当前可用积分总数
预设抵扣比例（如：100积分=1元）
提供滑动条或输入框调整使用积分数量
实时显示可抵扣金额
显示抵扣后的最终金额

**费用明细展示**：

商品总价：所有商品原价总和
会员折扣：会员等级折扣金额
优惠券优惠：优惠券减免金额
积分抵扣：使用积分抵扣的金额
运费：配送费用（可能有满减条件）
实付金额：最终需要支付的金额

**计算示例展示**：

```

商品总价：¥200.00

会员折扣（9.5折）：-¥10.00

优惠券优惠：-¥20.00

积分抵扣（使用500积分）：-¥5.00

运费：¥0.00（满99免运费）

实付金额：¥165.00

```

3.4.2 支付页面

3.4.2.1 页面布局

**顶部导航栏**：返回按钮、页面标题"支付"、订单详情按钮
**支付金额展示**：大字体显示待支付金额
**支付方式列表**：微信支付、支付宝支付、银行卡支付等
**安全提示**：支付安全保障说明
**底部操作栏**：确认支付按钮

3.4.2.2 支付流程

选择支付方式
点击确认支付按钮
跳转至第三方支付平台（如微信支付、支付宝）
用户完成支付
支付成功后返回APP，显示支付成功页面
支付失败则显示支付失败提示，提供重试选项

3.4.3 用户操作与跳转路径

点击返回按钮：返回购物车页面
点击地址模块：进入地址管理页面
点击配送时间模块：进入配送时间选择页面
点击优惠券模块：进入优惠券列表页面
点击积分抵扣模块：展开积分调整界面
点击提交订单：创建订单并跳转到支付页面
选择支付方式：高亮选中的支付方式
点击确认支付：跳转到第三方支付界面
支付成功：跳转到支付成功页面
支付失败：显示失败提示，可重新选择支付方式

4. 异常情况处理流程

4.1 库存不足异常处理

4.1.1 异常场景描述

当用户选择的商品数量超过库存数量时触发。

4.1.2 流程图

```

用户选择商品数量 → 系统检查库存

├─ 库存充足 → 正常加入购物车

└─ 库存不足 → 显示库存不足提示

├─ 用户减少数量 → 重新检查库存

├─ 用户选择等待补货 → 加入到货提醒

└─ 用户放弃购买 → 返回商品详情页

```

4.1.3 交互设计

**商品详情页**：
数量选择器达到库存上限时，按钮变灰不可点击
显示提示文字："库存仅剩XX件"
**购物车页面**：
当商品库存变化时，显示库存不足提示
自动将数量调整为最大可购买数量
提供"到货提醒"选项
**订单提交时**：
实时检查库存，若发现库存不足
弹出提示框："抱歉，部分商品库存不足，是否调整数量继续购买？"
提供"调整数量"和"去购物车修改"选项

4.2 优惠券失效异常处理

4.2.1 异常场景描述

当用户选择的优惠券已过期、不满足使用条件或已被使用时触发。

4.2.2 流程图

```

用户选择优惠券 → 系统验证优惠券

├─ 优惠券有效 → 应用优惠

└─ 优惠券无效

├─ 优惠券过期 → 显示过期提示，提供其他优惠券选择

├─ 不满足使用条件 → 显示条件说明，引导凑单

└─ 优惠券已使用 → 显示已使用提示，提供其他优惠券选择

```

4.2.3 交互设计

**优惠券选择页面**：
无效优惠券显示灰色状态
显示失效原因："已过期"、"不满足使用条件"等
满足使用条件的优惠券优先显示
**订单提交时**：
若优惠券突然失效（如被他人使用）
弹出提示框："您选择的优惠券已失效，请重新选择"
自动返回优惠券选择页面
**凑单推荐**：
当接近优惠券使用门槛时，推荐凑单商品
显示："还差XX元可使用XX元优惠券"

4.3 支付失败异常处理

4.3.1 异常场景描述

用户在支付过程中遇到网络问题、账户余额不足等情况导致支付失败。

4.3.2 流程图

```

用户确认支付 → 跳转支付平台

├─ 支付成功 → 显示支付成功页面

└─ 支付失败

├─ 网络异常 → 提示网络问题，提供重试选项

├─ 余额不足 → 提示余额不足，引导更换支付方式

└─ 其他原因 → 显示失败详情，提供客服联系入口

```

4.3.3 交互设计

**支付失败页面**：
清晰显示失败原因
提供"重新支付"按钮
提供"更换支付方式"选项
显示订单状态为"待支付"
**重试机制**：
自动保存订单信息30分钟
倒计时提示支付超时
超时后订单自动取消

4.4 预约配送时间已满异常处理

4.4.1 异常场景描述

用户选择的配送时间段已被约满。

4.4.2 流程图

```

用户选择配送时间 → 系统检查时段可用性

├─ 时段可用 → 确认预约

└─ 时段已满

├─ 推荐其他时间段 → 显示相邻可用时段

└─ 用户选择等待 → 加入到货提醒或开启订阅

```

4.4.3 交互设计

**时间选择器**：
已满时间段显示灰色不可选状态
显示"已约满"提示
自动推荐最近的可用时间段
**替代方案**：
提供"开启到货提醒"功能
显示可预约的最早日期
提供"联系客服"询问加急可能性

4.5 积分不足/无效异常处理

4.5.1 异常场景描述

用户尝试使用超过可用数量的积分或积分已过期。

4.5.2 流程图

```

用户选择积分抵扣 → 系统验证积分

├─ 积分有效且充足 → 应用积分抵扣

└─ 积分异常

├─ 积分不足 → 提示最大可用积分，自动调整抵扣数量

└─ 积分过期 → 提示积分过期信息，显示当前可用积分

```

4.5.3 交互设计

**积分抵扣模块**：
滑动条最大限制为可用积分
输入框输入超过可用积分时，自动调整为最大值
显示积分有效期
**视觉提示**：
可用积分显示正常颜色
即将过期积分显示特殊颜色（如橙色）
已过期积分不显示在可用积分中

5. 设计规范与建议

5.1 颜色规范

**主色调**：绿色（代表有机、健康、自然）
**辅助色**：橙色（代表新鲜、活力）、蓝色（代表信任、可靠）
**中性色**：白色、浅灰、深灰、黑色

5.2 排版规范

**标题**：使用较大字号，加粗
**正文**：清晰易读的中等字号
**价格**：突出显示，使用较大字号和醒目颜色
**标签**：简洁明了，使用小字号

5.3 图标规范

使用扁平化设计风格
认证标签使用彩色图标增强识别度
碳足迹使用环保相关图标

5.4 性能建议

图片懒加载，优先加载可视区域
筛选条件缓存，提升用户体验
支付流程优化，减少跳转次数

6. 附录

6.1 原型交付物清单

高保真交互原型
关键页面流程图
异常处理流程图
用户旅程图

6.2 后续迭代建议

添加社区功能，用户分享健康食谱
引入AI饮食推荐，根据用户健康数据推荐商品
开发智能定期配送功能，满足用户日常采购需求
增加环保包装选项，进一步强化绿色理念

第二步：根据需求文档生成原型

2.3 高结构化进阶版

提示词

你为"绿色有机食品电商"设计移动端高保真原型需求文档，目标用户为25-40岁注重健康的中产家庭。请基于以下需求输出完整方案。

1. 核心信息

**目标用户**：家庭采购决策者（女性占比70%），关注成分溯源、低碳消费。
**核心功能**：商品个性化推荐、扫码溯源查询、预约配送时间、积分抵扣支付。
**设计目标**：提升购物车转化率至15%，通过溯源功能增强信任感（用户评分≥4.8）。
**平台**：移动端（iOS/Android通用），画布尺寸375×812px（iPhone 13标准）。

2. 视觉与交互要求

**布局**：单列流式布局，核心操作区置于拇指热区（底部向上1/3区域）。商品卡片采用瀑布流加载。
**导航**：底部Tab栏（5个图标）+ 顶部导航栏（返回+标题+搜索图标）。支持右滑返回上级页面。
**关键交互**：
智能推荐：浏览商品详情页超过10秒后，底部自动弹出"食谱搭配"横幅。
手势操作：购物车左滑删除商品，长按商品图片放大查看溯源信息。
异常处理：库存不足时，商品页显示"到货提醒"按钮而非灰色禁用。
**风格参考**：Material Design 3规范，主色为绿色（#4CAF50），辅色为米白（#FFF9E6）。图标使用 Material Icons，字体为 Roboto Flex。

3. 输出要求

请生成以下关键页面的高保真视觉稿描述，并说明交互逻辑：

**商品列表页**：描述筛选组件（如"无添加认证"标签）与商品卡片的联动方式（点击标签后列表动态过滤）。
**商品详情页**：说明"一键加购食谱食材"的交互流程（如点击后如何批量添加关联商品至购物车）。
**支付页**：解释积分与优惠券的叠加计算规则在UI上的呈现方式（如实时显示折扣后的应付金额）。

4. 术语库要求

请规范使用以下术语：

**组件类**：底部动作条（Bottom Sheet）、徽标（Badge）、骨架屏（Skeleton）。
**交互类**：下拉刷新、无限滚动、手势导航、状态持久化。
**业务类**：SKU、GMV、转化漏斗、LTV（用户终身价值）。

（参考Material Design交互指南[2](@ref)）

第一步：根据提示词生成需求文档

绿色有机食品电商移动端高保真原型需求方案

1. 项目概述

1.1 项目背景

随着健康意识的提升和生活品质的追求，绿色有机食品市场需求持续增长。本项目旨在为注重健康的中产家庭打造一个便捷、可信、个性化的移动端有机食品购买平台，通过优质的用户体验和强大的功能特性，提升用户购物体验和品牌信任感。

1.2 设计目标

提升购物车转化率至15%
通过溯源功能增强用户信任感，目标用户评分≥4.8
打造符合Material Design 3规范的现代、直观的移动应用界面
优化核心购物流程，减少用户操作路径

1.3 平台与技术规格

平台：移动端（iOS/Android通用）
画布尺寸：375×812px（iPhone 13标准）
设计规范：Material Design 3
字体：Roboto Flex
图标库：Material Icons

2. 目标用户分析

2.1 用户画像

**年龄分布**：25-40岁
**家庭状况**：中产家庭
**角色定位**：家庭采购决策者（女性占比70%）
**关注点**：
食品成分溯源（确保安全、真实）
低碳环保消费（支持可持续发展）
健康饮食理念（关注营养搭配）
便捷的购物体验（节省时间）

2.2 用户需求

快速找到符合个人偏好的有机食品
便捷查询商品的真实来源和生产信息
灵活安排配送时间，确保食材新鲜
通过积分和优惠活动获得更多实惠
获得个性化的食谱推荐，提升饮食多样性

3. 核心功能概述

3.1 商品个性化推荐

基于用户浏览历史、购买记录和偏好设置，智能推荐相关商品和食谱，提高用户发现和购买兴趣。

3.2 扫码溯源查询

提供商品溯源码扫描功能，让用户轻松获取商品的种植/养殖信息、生产过程、检测报告等详细溯源数据，增强商品透明度和用户信任感。

3.3 预约配送时间

允许用户根据个人时间安排，灵活选择和预约商品配送时段，提高配送效率和用户满意度。

3.4 积分抵扣支付

支持用户使用积分抵扣部分订单金额，并与优惠券结合使用，提供多元化的支付和优惠体验。

4. 关键页面设计

4.1 商品列表页

4.1.1 页面布局

**顶部导航栏**：左侧返回按钮，中间页面标题（如"有机蔬菜"），右侧搜索图标
**筛选区域**：位于导航栏下方，包含标签筛选和高级筛选入口
**商品展示区**：采用瀑布流布局，显示商品卡片
**底部Tab栏**：包含5个主要导航项（首页、分类、购物车、我的、溯源）

4.1.2 筛选组件设计

**横向滚动标签**：
显示常用筛选条件，如"全部商品"、"无添加认证"、"有机认证"、"当季新鲜"、"本地直供"
标签样式：默认状态为米白色背景（#FFF9E6），文字为深绿色；选中状态为主色背景（#4CAF50），文字为白色
交互效果：点击标签时，标签背景色和文字颜色发生变化，并带有轻微的缩放动画
动态加载：根据当前分类动态显示相关标签
**高级筛选按钮**：
位于标签右侧，显示"筛选"图标+文字
点击后从底部弹出底部动作条（Bottom Sheet），包含更多筛选选项
高级筛选选项包括：价格区间、产地、认证类型、新鲜度等

4.1.3 商品卡片设计

**布局**：瀑布流双列布局，卡片宽度自适应屏幕
**卡片内容**：
商品图片：正方形比例，顶部展示
认证标识：在图片右下角叠加有机认证、无添加等徽章（Badge）
商品名称：位于图片下方，最多显示两行
价格信息：显示原价和折扣价（如有），折扣价突出显示
销量信息：显示月销量
溯源图标：右下角显示可溯源标识
加入购物车按钮：右下角浮动小按钮，点击后有动画效果

4.1.4 交互逻辑

**标签筛选联动**：

用户点击筛选标签（如"无添加认证"）
页面内容立即显示骨架屏（Skeleton）加载状态
后台根据筛选条件过滤商品数据
筛选后的商品列表以动画形式重新加载显示
同时更新筛选标签的选中状态
顶部显示当前筛选条件摘要，允许一键清除

**滚动加载**：

页面支持无限滚动，当用户滚动至页面底部时自动加载更多商品
加载时显示加载动画，避免用户感知到加载延迟
达到商品列表末尾时，显示"已加载全部商品"提示

**下拉刷新**：

用户向下拉动页面时触发刷新操作
显示刷新动画和进度指示器
刷新完成后，更新商品列表数据并恢复正常显示

**商品卡片交互**：

点击商品卡片任意位置，进入商品详情页
长按商品图片，弹出溯源信息简要提示
点击加入购物车按钮，商品数量动画增加，购物车图标显示数量变化

4.2 商品详情页

4.2.1 页面布局

**顶部导航栏**：左侧返回按钮，中间页面标题，右侧分享和更多操作图标
**商品图片轮播区**：展示商品多角度图片，支持滑动切换
**商品信息区**：商品名称、价格、促销信息、销量等基本信息
**SKU选择区**：规格选择、数量调整
**商品详情区**：图文详情、营养成分表、产地信息等
**溯源信息区**：显示溯源码和简要溯源信息，支持扫码或点击查看详细溯源
**底部操作栏**：客服、收藏、购物车入口、加入购物车/立即购买按钮

4.2.2 食谱推荐功能

**触发条件**：用户浏览商品详情页超过10秒后，底部自动弹出"食谱搭配"横幅
**推荐内容**：
基于当前商品智能推荐2-3个相关食谱
每个食谱显示图片、名称、烹饪时间、难度等级
显示完成该食谱所需的其他主要食材
**展示方式**：
横幅从底部向上滑出，高度适中，不遮挡主要操作按钮
支持左右滑动查看不同食谱
提供"关闭"按钮和"查看更多"入口

4.2.3 "一键加购食谱食材"交互流程

**触发方式**：用户点击特定食谱旁的"一键加购"按钮
**交互流程**：

用户点击"一键加购"按钮
系统立即显示加载动画和提示"正在添加食材"
后台自动筛选用户购物车中已有的食材，并只添加缺失的食材
添加完成后，显示成功提示"已添加XX种食材到购物车"
同时底部购物车图标显示数量变化动画
提示信息中提供"去购物车"和"继续购物"两个选项

**SKU智能选择**：
系统基于食谱需求自动选择合适的商品规格和数量
对于无法确定的规格（如重量、包装类型），弹出选择界面让用户确认

4.2.4 溯源功能交互

**入口**：商品详情页中的溯源码区域和长按商品图片
**交互方式**：

点击溯源码或长按图片，弹出溯源信息浮层或跳转至溯源详情页
溯源信息包括：种植/养殖基地信息、生长周期、施肥/饲养记录、采摘/屠宰时间、物流信息、检测报告等
提供"扫码验证"功能，用户可使用手机相机扫描商品包装上的二维码，与页面显示的溯源码进行比对
溯源信息支持展开/收起，便于用户快速浏览或深入了解

4.2.5 其他交互细节

**数量选择**：采用加减按钮和直接输入相结合的方式
**规格选择**：点击规格区域弹出底部动作条（Bottom Sheet）进行选择
**收藏功能**：点击收藏图标，图标颜色变化并显示成功提示
**客服入口**：点击客服图标，进入在线客服聊天界面

4.3 支付页

4.3.1 页面布局

**顶部导航栏**：左侧返回按钮，中间页面标题"确认订单"
**收货地址区**：显示默认收货地址，支持点击修改
**配送时间选择区**：提供可预约的配送时间段选项
**商品列表区**：显示订单包含的商品，可折叠/展开
**优惠券/积分使用区**：显示可用积分和优惠券数量，支持点击选择
**费用明细区**：详细列出商品总价、运费、优惠金额、积分抵扣等
**底部支付栏**：显示最终应付金额和支付按钮

4.3.2 积分与优惠券叠加计算规则UI呈现

**费用明细展示**：
采用透明背景卡片样式，与整体页面风格统一
清晰列出各项费用：商品总价、运费、优惠券抵扣、积分抵扣、实付金额
使用不同颜色区分：原价使用灰色，优惠金额使用红色，实付金额使用主色
**积分抵扣交互**：

显示用户当前可用积分数量
提供滑动条或输入框，允许用户选择使用的积分数量
实时计算并更新抵扣金额和应付金额
设置最低和最高抵扣限制（如最高抵扣订单金额的20%）
显示积分抵扣比例（如100积分=1元）

**优惠券选择交互**：

显示用户可用优惠券数量
点击后从底部弹出底部动作条（Bottom Sheet），展示所有可用优惠券
每个优惠券显示名称、面额/折扣、使用条件、有效期
高亮显示最适合当前订单的优惠券
提供"不使用优惠券"选项

**叠加计算实时反馈**：

当用户选择积分或优惠券后，页面立即更新以下内容：

对应的抵扣金额发生变化（带数字动画效果）
最终应付金额实时更新
费用明细中的各项金额同步调整

在调整过程中，使用过渡动画确保用户可以清晰看到数值变化
当达到最优优惠组合时，显示"已为您选择最优优惠方案"提示

4.3.3 预约配送时间功能

**界面设计**：
显示未来7天的日期选择器
每天下方列出可预约的时间段（如上午、下午、晚上）
已约满的时间段显示为灰色并标注"已满"
选中的时间段高亮显示为主色背景
**交互逻辑**：

用户点击日期选择配送日期
对应日期的可用时间段展开显示
选择时间段后，系统保存选择并更新订单信息
提供"尽快配送"选项，优先级高于预约时间

4.3.4 支付流程

**底部支付栏**：
左侧显示最终应付金额，字体加大加粗
右侧显示"提交订单"按钮，使用主色（#4CAF50）填充
订单提交过程中显示加载动画
**支付方式选择**：

提交订单后，跳转至支付方式选择页
显示常用支付方式（微信支付、支付宝、银行卡等）
选择支付方式后跳转到相应支付平台完成支付
支付成功/失败后返回应用并显示对应结果页面

4.3.5 状态持久化

保存用户在支付页的选择状态（如选择的优惠券、使用的积分数量、预约的配送时间）
当用户意外退出页面后重新进入时，恢复之前的选择状态
使用本地存储实现状态保存，确保用户体验的连贯性

5. 视觉设计规范

5.1 色彩系统（Material Design 3）

5.1.1 主色调

**主色（Primary）**：绿色 #4CAF50
应用场景：主要按钮、活动状态、重要提示、底部导航栏选中项
深色变体：#388E3C
浅色变体：#81C784
**辅助色（Secondary）**：米白色 #FFF9E6
应用场景：背景、标签默认状态、卡片背景
深色变体：#FFEFB3
浅色变体：#FFFFFF

5.1.2 中性色

**背景色**：白色 #FFFFFF
**卡片背景**：白色或米白色（视上下文而定）
**表面色**：白色 #FFFFFF
**文字颜色**：
主文本：深灰色 #212121
次要文本：中灰色 #757575
提示文本：浅灰色 #BDBDBD
**边框颜色**：极浅灰色 #EEEEEE

5.1.3 功能色

**成功**：绿色 #4CAF50
**警告**：橙色 #FF9800
**错误**：红色 #F44336
**信息**：蓝色 #2196F3

5.2 排版系统

5.2.1 字体规范

**主要字体**：Roboto Flex
**备选字体**：系统默认无衬线字体
**字体大小层级**：
大标题：24sp，字重600
中标题：20sp，字重600
小标题：18sp，字重500
正文：16sp，字重400
小文本：14sp，字重400
微小文本：12sp，字重400

5.2.2 行高规范

标题行高：1.2
正文行高：1.5
小文本行高：1.4

5.2.3 文字样式组合

页面标题：24sp，字重600，主色或深灰色
卡片标题：18sp，字重500，深灰色
商品名称：16sp，字重500，深灰色
价格文本：20sp（大）/16sp（小），字重700，主色或红色
描述文本：14sp，字重400，中灰色

5.3 布局规范

5.3.1 整体布局

**画布尺寸**：375×812px（iPhone 13标准）
**布局模式**：单列流式布局
**安全区域**：遵循iOS和Android的安全区域规范，顶部和底部留出适当边距
**拇指热区**：核心操作按钮和交互元素应放置在底部向上1/3区域内

5.3.2 间距规范

**页面边距**：16dp（左右）
**区域间距**：16dp（不同功能区域之间）
**组件间距**：12dp（组件之间）
**内边距**：
按钮内边距：16dp（水平）×8dp（垂直）
卡片内边距：16dp
输入框内边距：16dp（水平）×12dp（垂直）

5.3.3 组件尺寸

**按钮高度**：
主要按钮：48dp
次要按钮：40dp
图标按钮：36dp
**输入框高度**：48dp
**卡片圆角**：12dp（大卡片）/8dp（小卡片）
**图标尺寸**：
导航图标：24dp
功能图标：20dp
小图标：16dp

5.4 图标系统

5.4.1 图标规范

**图标库**：Material Icons（Filled和Outlined两种风格）
**图标颜色**：主色、灰色系（根据上下文变化）
**图标一致性**：同一功能模块内保持图标风格统一

5.4.2 底部导航栏图标

首页：home
分类：category
购物车：shopping_cart
我的：person
溯源：qr_code_scanner

5.5 动画与过渡

5.5.1 基础动画规范

**持续时间**：
微交互：150-200ms
页面切换：250-300ms
复杂动画：300-500ms
**缓动函数**：
入场动画：ease-out
退场动画：ease-in
回弹动画：cubic-bezier

5.5.2 常用交互动画

**点击反馈**：涟漪效果（Ripple Effect）
**页面切换**：滑动过渡、淡入淡出
**弹窗动画**：底部滑入/顶部滑出
**加载动画**：骨架屏（Skeleton）、脉冲动画
**状态变化**：颜色渐变、缩放效果

6. 关键交互与异常处理机制

6.1 智能推荐交互

6.1.1 食谱搭配推荐

**触发条件**：用户浏览商品详情页超过10秒
**呈现方式**：
从底部向上平滑滑出横幅，高度约为屏幕高度的1/4
横幅包含推荐食谱图片、名称和"一键加购"按钮
显示"为您推荐"标题和关闭按钮
**交互细节**：
滑动时添加轻微的阴影效果，与主页面形成层次感
推荐内容根据用户历史购买和浏览记录动态生成
支持左右滑动查看多个推荐食谱
点击关闭按钮后，横幅平滑收起并从DOM中移除

6.1.2 个性化商品推荐

**推荐位置**：首页、商品详情页底部、购物车页面
**推荐算法**：基于用户购买历史、浏览行为、收藏记录和商品关联度
**交互优化**：
新推荐内容加载时使用淡入效果
点击推荐商品直接跳转到对应商品详情页
推荐区域标题显示"为您推荐"或"猜你喜欢"

6.2 手势操作设计

6.2.1 购物车左滑删除

**触发方式**：在购物车页面左滑单个商品项
**交互流程**：

用户向左滑动商品项，显示"删除"按钮
滑动超过50%时，按钮完全显示，否则自动回弹
点击"删除"按钮，商品项从购物车中移除
删除时添加淡出和位移动画
购物车总价实时更新

**撤销机制**：删除后底部显示短暂的"撤销"提示，点击可恢复被删除的商品

6.2.2 长按图片放大溯源

**触发方式**：在商品列表页或商品详情页长按商品图片
**交互流程**：

用户长按图片约1秒
图片轻微放大并显示半透明遮罩
图片上方或下方弹出溯源信息简要卡片
松开手指后，图片恢复原状，溯源卡片消失

**信息内容**：溯源卡片显示商品名称、产地、认证类型等核心信息

6.2.3 右滑返回

**触发区域**：屏幕左侧边缘（约10%宽度）
**交互效果**：

向右滑动时，当前页面跟随手指移动并显示上一页内容
滑动超过屏幕宽度的50%时，释放手指后完成返回操作
滑动不足时，页面回弹到原始位置

**适用页面**：所有二级及以上页面，底部导航栏页面除外

6.3 异常处理机制

6.3.1 库存不足处理

**UI呈现**：
商品详情页和购物车中，库存不足的商品显示"到货提醒"按钮而非灰色禁用
按钮样式：边框型按钮，颜色为辅助色（#FFF9E6），文字为中灰色
**交互流程**：

用户点击"到货提醒"按钮
弹出确认对话框，提示"商品到货后将第一时间通知您"
用户确认后，系统记录用户ID和商品ID的关联
显示成功提示"已设置到货提醒"
商品到货后，通过消息推送通知用户

6.3.2 网络异常处理

**断网状态**：
显示全局断网提示，位于页面顶部或中心
提示内容：网络连接已断开，点击重试
提供"重试"按钮和"离线浏览"选项（如果已缓存数据）
**加载失败**：
显示加载失败图标和提示文字
提供"刷新"按钮
对于关键操作（如支付），额外提供客服入口

6.3.3 支付异常处理

**支付失败**：
显示支付失败提示，包含失败原因（如余额不足、支付超时等）
提供"重新支付"和"联系客服"两个选项
对于订单状态不明的情况，显示"查询订单状态"按钮
**支付超时**：
自动检测支付超时情况
显示超时提示，并提供重新发起支付的选项
保留订单信息一段时间，避免用户重复下单

6.3.4 输入验证与错误提示

**表单验证**：
实时验证用户输入（如手机号格式、地址完整性）
输入错误时，输入框边框变为红色，并在下方显示错误提示
**提交验证**：
点击提交后对所有必填项进行验证
未通过验证的项目高亮显示，并滚动到可见区域
顶部显示全局错误提示横幅

6.4 加载状态处理

6.4.1 骨架屏（Skeleton）应用

**适用场景**：
商品列表初次加载
筛选条件变更后的商品列表刷新
商品详情页数据加载
用户个人信息加载
**设计规范**：
骨架屏形状与实际内容保持一致
使用灰色渐变动画，提升用户感知
加载完成后，内容平滑过渡显示

6.4.2 加载指示器

**小型加载**：
使用CircularProgressIndicator，尺寸24dp
适用于按钮点击、下拉刷新等短期操作
**大型加载**：
居中显示较大尺寸的加载动画和提示文字
适用于页面间跳转、数据同步等耗时操作

6.5 空状态设计

6.5.1 购物车空状态

**UI设计**：
居中显示购物车图标（变灰或虚线样式）
显示提示文字"购物车还是空的，快去逛逛吧"
提供"去购物"按钮，直接跳转到首页或推荐商品页

6.5.2 搜索结果为空

**UI设计**：
显示放大镜图标和"没有找到相关商品"
提供推荐搜索词或热门商品
提供"清除筛选"按钮

6.5.3 订单为空

**UI设计**：
显示订单图标和"暂无订单记录"
提供"去购物"按钮
显示最近浏览的商品，鼓励用户再次购物

7. 术语表

7.1 组件类术语

**底部动作条（Bottom Sheet）**：从屏幕底部向上滑出的模态视图，用于提供额外选项或信息
**徽标（Badge）**：附加在图标或文本旁的视觉元素，用于显示通知数量或状态标识
**骨架屏（Skeleton）**：在内容加载过程中显示的占位UI，减轻用户等待感知

7.2 交互类术语

**下拉刷新**：用户向下拉动页面以重新加载内容的交互方式
**无限滚动**：当用户滚动到页面底部时自动加载更多内容的机制
**手势导航**：通过滑动、捏合等手势控制应用导航和操作的方式
**状态持久化**：在用户退出并重新进入应用后，保持之前的界面状态和用户选择的功能

7.3 业务类术语

**SKU（Stock Keeping Unit）**：库存量单位，用于区分不同规格的商品
**GMV（Gross Merchandise Volume）**：商品交易总额，电商平台的核心业务指标
**转化漏斗**：用户从初次接触到完成目标行为（如购买）的过程中逐步流失的模型
**LTV（Lifetime Value）**：用户终身价值，衡量用户在与产品互动期间为企业带来的总收入

8. 总结与目标回顾

8.1 设计总结

本原型需求方案基于Material Design 3设计规范，为绿色有机食品电商移动端应用提供了全面的设计指导。方案涵盖了目标用户分析、核心功能设计、关键页面交互流程、视觉设计规范以及异常处理机制，确保了应用的用户友好性、视觉一致性和功能完整性。

8.2 关键目标回顾

**提升购物车转化率至15%**：通过智能推荐、一键加购等功能简化购物流程，提高用户购买意愿
**增强用户信任感（评分≥4.8）**：通过扫码溯源、有机认证标识等功能，确保商品信息透明，建立品牌信任
**优化用户体验**：遵循Material Design 3规范，提供直观、流畅的界面和交互，满足25-40岁中产家庭用户的需求

8.3 实施建议

遵循渐进式开发原则，优先实现核心购物流程和溯源功能
在开发初期进行小规模用户测试，收集反馈并优化设计
建立设计规范文档，确保开发团队严格遵循视觉和交互设计要求
重点关注性能优化，确保在移动设备上的流畅体验，特别是在图片加载和动画效果方面

通过本方案的实施，有望打造一款用户体验优秀、功能完善的有机食品电商应用，满足目标用户对健康、安全、便捷购物的需求。

大语言模型提示词生成交互原型案例分享

大语言模型提示词生成原型测试

最佳实践总结

TRAE AI IDE原型生成测试

1、测试后台管理系统提示词

1.1低结构化版

提示词

第一步：根据提示词生成需求文档

供应链管理系统需求描述文档

1. 项目概述

1.1 系统目标

2. 功能需求

2.1 仪表盘模块

2.1.1 数据概览卡片

2.1.2 数据可视化图表

2.1.3 最近活动列表

2.1.4 快速操作区

2.2 库存管理模块

2.2.1 库存概览图表

2.2.2 库存数据表格

2.2.3 分页功能

2.2.4 添加产品功能

2.2.5 产品详情查看

2.3 订单跟踪模块

2.3.1 订单统计图表

2.3.2 订单数据表格

2.3.3 订单详情查看

2.4 供应商管理模块

2.4.1 供应商概览卡片

2.4.2 供应商分析图表

2.4.3 供应商数据表格

2.4.4 供应商详情查看

2.4.5 添加/编辑供应商功能

3. 非功能需求

3.1 用户界面要求

3.2 响应式设计

3.3 性能要求

3.4 兼容性要求

4. 数据模型

4.1 产品数据模型

4.2 订单数据模型

4.3 供应商数据模型

5. 交互流程

5.1 模块切换流程

5.2 侧边栏交互

5.3 模态框交互

5.4 数据更新流程

6. 技术实现要点

6.1 前端技术栈

6.2 性能优化

6.3 代码组织

7. 总结

第二步：根据需求文档生成原型

1.2高结构化版

提示词

第一步：根据提示词生成需求文档

跨境电商供应链管理后台原型描述

1. 仪表盘页面

2. 订单跟踪页面

3. 供应商管理页面

组件详细说明

仪表盘组件

订单跟踪组件

供应商管理组件

第二步：根据需求文档生成原型

1.3 高结构化进阶版

提示词

1. 核心信息

2. 视觉与交互要求

3. 输出要求

4. 术语库要求

第一步：根据提示词生成需求文档

跨境电商供应链管理后台高保真原型需求文档

1. 产品概述

1.1 项目背景

1.2 目标用户

1.3 核心功能

1.4 设计目标

1.5 平台要求

2. 设计系统